From 807820f31b1b31d1101de02b122cb52945db9cf0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 19 Mar 2019 11:14:01 -0400
Subject: [PATCH] fix(item): add missing ripple color CSS property (#17814)

Adds missing --ripple-color var to item

fixes #17523
---
 core/api.txt                                     |  1 +
 core/src/components.d.ts                         |  4 ++--
 core/src/components/item/item.scss               | 11 +++++++++++
 core/src/components/item/item.tsx                |  2 +-
 core/src/components/item/readme.md               |  7 ++++---
 core/src/components/item/test/buttons/index.html |  8 +++++++-
 6 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 147c31f968..4d17f651de 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -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
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 89c497e3de..a361809dd3 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -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;
     /**
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index c55d7002c7..1e0b1b9792 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -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);
+}
\ No newline at end of file
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 6f3ac22c93..a43fbcf673 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -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;
 
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 2f9859f38b..04cba9e6a5 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -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                              |
 
 
diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index e9f3bdeaf0..99a65d19d6 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -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 @@
 
   </ion-app>
 
+  <style>
+    .custom {
+      --ripple-color: pink;
+    }
+  </style>
+
   <script>
     const attach = document.getElementById('attachClick');