From 88f1828bd8f6b9a1c1f3dcb220d93067bed7f404 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Jul 2020 10:58:40 -0400
Subject: [PATCH] fix(segment-button): allow min-width to be overridden
 (#21722)

fixes #21105
---
 .../segment-button/segment-button.md.scss     |  5 ---
 .../components/segment/test/spec/index.html   | 38 +++++++++++++++++++
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index 1af4d5ca66..175893f2f9 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -44,11 +44,6 @@
   text-transform: uppercase;
 }
 
-.button-native {
-  min-width: $segment-button-md-min-width;
-}
-
-
 // Segment Button: Disabled
 // --------------------------------------------------
 
diff --git a/core/src/components/segment/test/spec/index.html b/core/src/components/segment/test/spec/index.html
index 5bea6a39f0..1bdb135c8b 100644
--- a/core/src/components/segment/test/spec/index.html
+++ b/core/src/components/segment/test/spec/index.html
@@ -159,6 +159,40 @@
         </ion-segment-button>
       </ion-segment>
 
+      <!-- Non Scrollable, Custom Min Width -->
+      <ion-segment color="tertiary" value="heart" id="min-width-custom">
+        <ion-segment-button value="home">
+          <ion-icon name="home"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="star">
+          <ion-icon name="star"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="call">
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="globe">
+          <ion-icon name="globe"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="basket">
+          <ion-icon name="basket"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="airplane">
+          <ion-icon name="airplane"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="boat">
+          <ion-icon name="boat"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="baseball">
+          <ion-icon name="baseball"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>
+
       <!-- Scrollable Icons -->
       <ion-segment scrollable color="tertiary" value="heart">
         <ion-segment-button value="home">
@@ -212,6 +246,10 @@
     </ion-content>
 
     <style>
+      ion-segment#min-width-custom ion-segment-button {
+        min-width: auto;
+      }
+
       ion-content {
         --padding-top: 16px;
       }