Skip to content
Permalink
Browse files

fix(item): add missing ripple color CSS property (#17814)

Adds missing --ripple-color var to item

fixes #17523
  • Loading branch information...
brandyscarney committed Mar 19, 2019
1 parent 67a9137 commit 807820f31b1b31d1101de02b122cb52945db9cf0
@@ -509,6 +509,7 @@ ion-item,css-prop,--padding-bottom
ion-item,css-prop,--padding-end
ion-item,css-prop,--padding-start
ion-item,css-prop,--padding-top
ion-item,css-prop,--ripple-color
ion-item,css-prop,--transition

ion-label,scoped
@@ -1996,7 +1996,7 @@ export namespace Components {
*/
'color'?: Color;
/**
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
*/
'detail'?: boolean;
/**
@@ -2038,7 +2038,7 @@ export namespace Components {
*/
'color'?: Color;
/**
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
*/
'detail'?: boolean;
/**
@@ -31,6 +31,8 @@
* @prop --padding-top: Top padding of the item
* @prop --transition: Transition of the item
*
* @prop --ripple-color: Color of the item ripple effect
*
* @prop --highlight-height: The height of the highlight on the item
* @prop --highlight-color-focused: The color of the highlight on the item when focused
* @prop --highlight-color-valid: The color of the highlight on the item when valid
@@ -55,6 +57,7 @@
--detail-icon-color: initial;
--detail-icon-font-size: 20px;
--detail-icon-opacity: 0.25;
--ripple-color: currentColor;

@include font-smoothing();

@@ -366,3 +369,11 @@ button, a {
::slotted(ion-reorder[slot]) {
@include margin(0, null);
}


// Item Button Ripple effect
// --------------------------------------------------

ion-ripple-effect {
color: var(--ripple-color);
}
@@ -44,7 +44,7 @@ export class Item implements ComponentInterface {

/**
* If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
* is `ios` and an `href`, `onclick` or `button` property is present.
* is `ios` and an `href` or `button` property is present.
*/
@Prop() detail?: boolean;

@@ -5,7 +5,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an

## Detail Arrows

By default, clickable items will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, add the `detail` attribute to the item.
By default, clickable items will display a right arrow icon on `ios` mode. A clickable item is an item that has an `href` or `button` property set. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, add the `detail` attribute to the item.

<!--
@@ -44,7 +44,7 @@ Items left align text and add an ellipsis when the text is wider than the item.

### Highlight Height

Items containing an input will highlight the input with a different color border when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).
Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).

### Highlight Color

@@ -1365,7 +1365,7 @@ Item Inputs
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
@@ -1414,6 +1414,7 @@ Item Inputs
| `--padding-end` | End padding of the item |
| `--padding-start` | Start padding of the item |
| `--padding-top` | Top padding of the item |
| `--ripple-color` | Color of the item ripple effect |
| `--transition` | Transition of the item |


@@ -25,7 +25,7 @@
<ion-label>a[ion-item]</ion-label>
</ion-item>

<ion-item class="activated" href="#" onclick="testClick(event)">
<ion-item class="custom activated" href="#" onclick="testClick(event)">
<ion-label>a[ion-item].activated</ion-label>
</ion-item>

@@ -145,6 +145,12 @@ <h3>Avatar Start</h3>

</ion-app>

<style>
.custom {
--ripple-color: pink;
}
</style>

<script>
const attach = document.getElementById('attachClick');

0 comments on commit 807820f

Please sign in to comment.
You can’t perform that action at this time.