From d76a5031c4c96b5fdf691a56ed61d3dcc4e4dafb Mon Sep 17 00:00:00 2001
From: Nikos Douvlis <nikosdouvlis@gmail.com>
Date: Thu, 23 Jan 2020 22:55:57 +0200
Subject: [PATCH] feat(segment-button): add --indicator-height property to
 segment button (#19653)

---
 core/api.txt                                             | 1 +
 core/src/components/segment-button/readme.md             | 1 +
 .../components/segment-button/segment-button.ios.scss    | 1 +
 .../src/components/segment-button/segment-button.md.scss | 3 +--
 core/src/components/segment-button/segment-button.scss   | 3 ++-
 core/src/components/segment/test/custom/index.html       | 9 ++++++---
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index ccbccd1bf4..cc65044809 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -969,6 +969,7 @@ ion-segment-button,css-prop,--color-disabled
 ion-segment-button,css-prop,--color-hover
 ion-segment-button,css-prop,--indicator-box-shadow
 ion-segment-button,css-prop,--indicator-color
+ion-segment-button,css-prop,--indicator-height
 ion-segment-button,css-prop,--indicator-transform
 ion-segment-button,css-prop,--indicator-transition
 ion-segment-button,css-prop,--margin-bottom
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index e8101b5823..615ef02f4c 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -647,6 +647,7 @@ export const SegmentButtonExample: React.FC = () => (
 | `--color-hover`          | Color of the segment button on hover                                                                              |
 | `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button                                                        |
 | `--indicator-color`      | Color of the indicator for the checked segment button                                                             |
+| `--indicator-height`     | Height of the indicator for the checked segment button                                                            |
 | `--indicator-transform`  | Transform of the indicator for the checked segment button                                                         |
 | `--indicator-transition` | Transition of the indicator for the checked segment button                                                        |
 | `--margin-bottom`        | Bottom margin of the segment button                                                                               |
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index 6301e3c9a5..c04a9331d5 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -14,6 +14,7 @@
   --border-style: solid;
   --indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
   --indicator-color: #{$segment-button-ios-indicator-color};
+  --indicator-height: 100%;
   --indicator-transition: #{$segment-button-ios-transition-animated};
   --indicator-transform: none;
   --transition: #{$segment-button-ios-transition};
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index 1f56568331..7d9c9b1be5 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -12,6 +12,7 @@
   --color-checked: #{$segment-button-md-text-color-checked};
   --indicator-box-shadow: none;
   --indicator-color: var(--color-checked);
+  --indicator-height: 2px;
   --indicator-transition: #{$segment-button-md-transition-animated};
   --indicator-transform: none;
   --padding-top: #{$segment-button-md-padding-top};
@@ -105,8 +106,6 @@
 }
 
 .segment-button-indicator-background {
-  height: 2px;
-
   background: var(--indicator-color);
 }
 
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index bc744998dc..28d8c0b725 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -32,6 +32,7 @@
    *
    * @prop --transition: Transition of the segment button
    *
+   * @prop --indicator-height: Height of the indicator for the checked segment button
    * @prop --indicator-box-shadow: Box shadow on the indicator for the checked segment button
    * @prop --indicator-color: Color of the indicator for the checked segment button
    * @prop --indicator-transition: Transition of the indicator for the checked segment button
@@ -230,7 +231,7 @@ ion-ripple-effect {
 
 .segment-button-indicator-background {
   width: 100%;
-  height: 100%;
+  height: var(--indicator-height);
 
   transform: var(--indicator-transform);
 
diff --git a/core/src/components/segment/test/custom/index.html b/core/src/components/segment/test/custom/index.html
index 1f9d5516cb..9fa94d3c27 100644
--- a/core/src/components/segment/test/custom/index.html
+++ b/core/src/components/segment/test/custom/index.html
@@ -197,24 +197,27 @@
    * This tests that the colors are able to be overridden on
    * a segment inside of a toolbar
    *
-   * Indicator color / ripple color can be set on ion-segment
+   * Ripple color can be set on ion-segment
    *
    * Backgrounds / colors for the button must be set on the
    * ion-segment-button
    */
   .custom-checked {
     --ripple-color: purple;
-    --indicator-color: purple;
   }
 
   .ios .custom-checked ion-segment-button {
-    --color-checked: white;
+    --color-checked: magenta;
+    --indicator-color: red;
+    --indicator-height: 50%;
   }
 
   .md .custom-checked ion-segment-button {
     --background-hover: rgba(17, 228, 10, 0.5);
     --color-checked: purple;
     --color-hover: blue;
+    --indicator-color: red;
+    --indicator-height: 5px;
   }
 
   /*