From 7edaf5c119eff2474e2a90454e8c043d21127a70 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 18 Mar 2024 13:01:40 -0700
Subject: [PATCH] refactor(button): use min-width instead

---
 core/src/components/button/button.ios.scss | 28 +++++++++-----
 core/src/components/button/button.md.scss  | 44 ++++++++++++----------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 42b3d3d5d15..adc6036e887 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -136,31 +136,39 @@
 // iOS Icon Only Button
 // --------------------------------------------------
 
-::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.125em;
-}
-
 :host(.button-has-icon-only) {
   --padding-top: 0;
   --padding-bottom: var(--padding-top);
-  --padding-end: 0.5em;
-  --padding-start: var(--padding-end);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-top);
+
+  min-width: $button-ios-min-height;
+}
+
+::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.125em;
 }
 
 :host(.button-small.button-has-icon-only) {
-  --padding-end: 0.42em;
+  // Opted out from creating a new variable since the
+  // value is only used here and it's based on the
+  // min-height variable.
+  min-width: $button-ios-small-min-height;
 }
 
 :host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.31em;
+  font-size: 1.4em;
 }
 
 :host(.button-large.button-has-icon-only) {
-  --padding-end: 0.6em;
+  // Opted out from creating a new variable since the
+  // value is only used here and it's based on the
+  // min-height variable.
+  min-width: $button-ios-large-min-height;
 }
 
 :host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.3em;
+  font-size: 1em;
 }
 
 // iOS Button Focused
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index f4434fe342e..e00729171b5 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -121,43 +121,47 @@
 }
 
 // MD Icon Only Button
+//
+// MD does not specify a small size, these
+// styles are based on the iOS small size.
+//
+// MD does not specify a large size, these
+// styles are based on the iOS large size.
 // --------------------------------------------------
 
-::slotted(ion-icon[slot="icon-only"]) {
-  @include padding(0);
-
-  font-size: 1.6em;
-}
-
 :host(.button-has-icon-only) {
   --padding-top: 0;
   --padding-bottom: var(--padding-top);
-  --padding-end: 0.65em;
-  --padding-start: var(--padding-end);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-top);
+
+  min-width: $button-md-min-height;
+}
+
+::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.6em;
 }
 
-// MD does not specify a small size, these
-// styles are based on the iOS small size.
 :host(.button-small.button-has-icon-only) {
-  --padding-end: 0.42em;
+  // Opted out from creating a new variable since the
+  // value is only used here and it's based on the
+  // min-height variable.
+  min-width: $button-md-small-min-height;
 }
 
-// MD does not specify a small size, these
-// styles are based on the iOS small size.
 :host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.31em;
+  font-size: 1.23em;
 }
 
-// MD does not specify a large size, these
-// styles are based on the iOS large size.
 :host(.button-large.button-has-icon-only) {
-  --padding-end: 0.6em;
+  // Opted out from creating a new variable since the
+  // value is only used here and it's based on the
+  // min-height variable.
+  min-width: $button-md-large-min-height;
 }
 
-// MD does not specify a large size, these
-// styles are based on the iOS large size.
 :host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.3em;
+  font-size: 1.4em;
 }
 
 // Material Design Button: Hover