From cdfd50b554d1d8f89c3d9948c7613ce75ede1e52 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 18 Mar 2020 16:14:06 -0400
Subject: [PATCH] fix(segment): automatically expand width for scrollable
 segment buttons (#20763)

fixes #20566
---
 .../segment-button/segment-button.md.scss     |  4 +++
 core/src/components/segment/segment.md.scss   |  2 +-
 .../components/segment/test/spec/index.html   | 29 +++++++++++++++++--
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index f8fa1e2a51..1af4d5ca66 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -44,6 +44,10 @@
   text-transform: uppercase;
 }
 
+.button-native {
+  min-width: $segment-button-md-min-width;
+}
+
 
 // Segment Button: Disabled
 // --------------------------------------------------
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index ab60499cce..0f99d548a7 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -13,5 +13,5 @@
 // --------------------------------------------------
 
 :host(.segment-scrollable) ::slotted(ion-segment-button) {
-  min-width: $segment-button-md-min-width;
+  min-width: auto;
 }
\ No newline at end of file
diff --git a/core/src/components/segment/test/spec/index.html b/core/src/components/segment/test/spec/index.html
index c94dc7a929..5bea6a39f0 100644
--- a/core/src/components/segment/test/spec/index.html
+++ b/core/src/components/segment/test/spec/index.html
@@ -45,7 +45,7 @@
         <ion-segment-button value="two">
           <ion-label>Item Two</ion-label>
         </ion-segment-button>
-        <ion-segment-button value="three"> 
+        <ion-segment-button value="three">
           <ion-label>Item Three</ion-label>
         </ion-segment-button>
       </ion-segment>
@@ -184,6 +184,31 @@
         </ion-segment-button>
       </ion-segment>
 
+      <!-- Scrollable text -->
+      <ion-segment scrollable color="tertiary" value="heart">
+        <ion-segment-button value="home">
+          This is some long text
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          Short text
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          This is some long text
+        </ion-segment-button>
+        <ion-segment-button value="star">
+          Short text
+        </ion-segment-button>
+        <ion-segment-button value="call">
+          Short text
+        </ion-segment-button>
+        <ion-segment-button value="globe">
+          Medium long text
+        </ion-segment-button>
+        <ion-segment-button value="basket">
+          Medium long text
+        </ion-segment-button>
+      </ion-segment>
+
     </ion-content>
 
     <style>
@@ -202,7 +227,7 @@
       .md ion-content ion-segment {
         background: white;
       }
-      
+
       #multi-color ion-segment-button:first-of-type {
         --indicator-color: rgba(255, 0, 0, 0.5);
       }