fix(input, textarea, select): reduce padding on slotted buttons (#28676)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Buttons slotted in the start/end slots of input, textarea, or select
have a lot of excess padding that can cause them to look misaligned from
other pieces such as the control's label, especially when using
`fill="clear"`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Padding removed, and a border radius added so that non-clear buttons as
well as the focus state on clear buttons still look okay. Existing
screenshot tests have also been updated to include buttons (non-clear
ones so you can see the border radius in the screenshots).

Let me know if you think this should go on a feature branch instead. I
chose `main` because the current experience looks somewhat broken and we
just did a minor release recently, but this could be considered a
notable enough behavior change.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/input/input.ios.scss

@@ -37,3 +37,25 @@
 :host(.input-disabled) {
   opacity: #{$input-ios-disabled-opacity};
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}

core/src/components/input/input.md.scss

@@ -117,3 +117,27 @@
 :host(.input-shape-round) {
   --border-radius: 16px;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}

core/src/components/input/input.scss

@@ -659,8 +659,10 @@
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }

core/src/components/input/test/slot/input.e2e.ts

@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `,
         config

core/src/components/select/select.ios.scss

@@ -38,3 +38,25 @@
 :host(.select-disabled) {
   opacity: $select-ios-disabled-opacity;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}

core/src/components/select/select.md.scss

@@ -155,3 +155,27 @@
 :host(.select-disabled) {
   opacity: $select-md-disabled-opacity;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}

core/src/components/select/select.scss

@@ -592,8 +592,10 @@ button {
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }

core/src/components/select/test/slot/select.e2e.ts

@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `,
         config

core/src/components/textarea/test/slot/textarea.e2e.ts

@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `,
         config

core/src/components/textarea/textarea.ios.scss

@@ -40,3 +40,25 @@
 :host(.textarea-disabled) {
   opacity: #{$textarea-ios-disabled-opacity};
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}

core/src/components/textarea/textarea.md.scss

@@ -109,3 +109,27 @@
 :host(.textarea-shape-round) {
   --border-radius: 16px;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}

core/src/components/textarea/textarea.scss

@@ -753,8 +753,10 @@
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }