8000 fix(input, textarea, select): reduce padding on slotted buttons (#28676) · ionic-team/ionic-framework@516b844 · GitHub
[go: up one dir, main page]
Skip to content

Commit 516b844

Browse files
averyjohnstonIonitron
averyjohnston
and
Ionitron
authored
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>
1 parent bc51dd0 commit 516b844

File tree

84 files changed

+162
-6
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+162
-6
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,25 @@
3737
:host(.input-disabled) {
3838
opacity: #{$input-ios-disabled-opacity};
3939
}
40+
41+
// Start/End Slots
42+
// ----------------------------------------------------------------
43+
44+
/**
45+
* Slotted buttons have a lot of default padding that can
46+
* cause them to look misaligned from other pieces such
47+
* as the control's label, especially when using a clear
48+
* fill. We also make them circular to ensure that non-
49+
* clear buttons and the focus/hover state on clear ones
50+
* don't look too crowded.
51+
*/
52+
::slotted(ion-button[slot="start"].button-has-icon-only),
53+
::slotted(ion-button[slot="end"].button-has-icon-only) {
54+
--border-radius: 50%;
55+
--padding-start: 0;
56+
--padding-end: 0;
57+
--padding-top: 0;
58+
--padding-bottom: 0;
59+
60+
aspect-ratio: 1;
61+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,3 +117,27 @@
117117
:host(.input-shape-round) {
118118
--border-radius: 16px;
119119
}
120+
121+
// Start/End Slots
122+
// ----------------------------------------------------------------
123+
124+
/**
125+
* Slotted buttons have a lot of default padding that can
126+
* cause them to look misaligned from other pieces such
127+
* as the control's label, especially when using a clear
128+
* fill. We also make them circular to ensure that non-
129+
* clear buttons and the focus/hover state on clear ones
130+
* don't look too crowded.
131+
*/
132+
::slotted(ion-button[slot="start"].button-has-icon-only),
133+
::slotted(ion-button[slot="end"].button-has-icon-only) {
134+
--border-radius: 50%;
135+
--padding-start: 8px;
136+
--padding-end: 8px;
137+
--padding-top: 8px;
138+
--padding-bottom: 8px;
139+
140+
aspect-ratio: 1;
141+
142+
min-height: 40px;
143+
}

‎core/src/components/input/input.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -659,8 +659,10 @@
659659

660660
::slotted([slot="start"]) {
661661
margin-inline-end: $form-control-label-margin;
662+
margin-inline-start: 0;
662663
}
663664

664665
::slotted([slot="end"]) {
665666
margin-inline-start: $form-control-label-margin;
667+
margin-inline-end: 0;
666668
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
88
`
99
<ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
1010
<ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
11-
<ion-label slot="end">lbs</ion-label>
11+
<ion-button slot="end" aria-label="Show/hide password">
12+
<ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
13+
</ion-button>
1214
</ion-input>
1315
`,
1416
config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
2325
`
2426
<ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
2527
<ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
26-
<ion-label slot="end">lbs</ion-label>
28+
<ion-button slot="end" aria-label="Show/hide password">
29+
<ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
30+
</ion-button>
2731
</ion-input>
2832
`,
2933
config

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png

917 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png

1.13 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png

877 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png

916 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png

1.19 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png

900 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png

1.54 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png

2.01 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png

1.45 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png

1.51 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png

2.06 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png

1.43 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png

901 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png

1011 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png

857 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png

905 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png

1 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Safari-linux.png

885 Bytes

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Chrome-linux.png

1.51 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Firefox-linux.png

1.89 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Safari-linux.png

1.4 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Chrome-linux.png

1.55 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Firefox-linux.png

1.88 KB

‎core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Safari-linux.png

1.4 KB

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,25 @@
3838
:host(.select-disabled) {
3939
opacity: $select-ios-disabled-opacity;
4040
}
41+
42+
// Start/End Slots
43+
// ----------------------------------------------------------------
44+
45+
/**
46+
* Slotted buttons have a lot of default padding that can
47+
* cause them to look misaligned from other pieces such
48+
* as the control's label, especially when using a clear
49+
* fill. We also make them circular to ensure that non-
50+
* clear buttons and the focus/hover state on clear ones
51+
* don't look too crowded.
52+
*/
53+
::slotted(ion-button[slot="start"].button-has-icon-only),
54+
::slotted(ion-button[slot="end"].button-has-icon-only) {
55+
--border-radius: 50%;
56+
--padding-start: 0;
57+
--padding-end: 0;
58+
--padding-top: 0;
59+
--padding-bottom: 0;
60+
61+
aspect-ratio: 1;
62+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,3 +155,27 @@
155155
:host(.select-disabled) {
156156
opacity: $select-md-disabled-opacity;
157157
}
158+
159+
// Start/End Slots
160+
// ----------------------------------------------------------------
161+
162+
/**
163+
* Slotted buttons have a lot of default padding that can
164+
* cause them to look misaligned from other pieces such
165+
* as the control's label, especially when using a clear
166+
* fill. We also make them circular to ensure that non-
167+
* clear buttons and the focus/hover state on clear ones
168+
* don't look too crowded.
169+
*/
170+
::slotted(ion-button[slot="start"].button-has-icon-only),
171+
::slotted(ion-button[slot="end"].button-has-icon-only) {
172+
--border-radius: 50%;
173+
--padding-start: 8px;
174+
--padding-end: 8px;
175+
--padding-top: 8px;
176+
--padding-bottom: 8px;
177+
178+
aspect-ratio: 1;
179+
180+
min-height: 40px;
181+
}

‎core/src/components/select/select.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -592,8 +592,10 @@ button {
592592

593593
::slotted([slot="start"]) {
594594
margin-inline-end: $form-control-label-margin;
595+
margin-inline-start: 0;
595596
}
596597

597598
::slotted([slot="end"]) {
598599
margin-inline-start: $form-control-label-margin;
600+
margin-inline-end: 0;
599601
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
88
`
99
<ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
1010
<ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
11-
<ion-label slot="end">lbs</ion-label>
11+
<ion-button slot="end" aria-label="Show/hide password">
12+
<ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
13+
</ion-button>
1214
</ion-select>
1315
`,
1416
config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
2325
`
2426
<ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
2527
<ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
26-
<ion-label slot="end">lbs</ion-label>
28+
<ion-button slot="end" aria-label="Show/hide password">
29+
<ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
30+
</ion-button>
2731
</ion-select>
2832
`,
2933
config

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png

987 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png

1.3 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Safari-linux.png

1004 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png

978 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png

1.26 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Safari-linux.png

1.01 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Chrome-linux.png

1.53 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Firefox-linux.png

2.02 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Safari-linux.png

1.46 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Chrome-linux.png

1.49 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Firefox-linux.png

1.99 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Safari-linux.png

1.43 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Chrome-linux.png

814 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Firefox-linux.png

1004 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Safari-linux.png

852 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Chrome-linux.png

843 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Firefox-linux.png

1.01 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Safari-linux.png

937 Bytes

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Chrome-linux.png

1.46 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Firefox-linux.png

1.91 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Safari-linux.png

1.41 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Chrome-linux.png

1.45 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Firefox-linux.png

1.93 KB

‎core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Safari-linux.png

1.42 KB

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
88
`
99
<ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
1010
<ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
11-
<ion-label slot="end">lbs</ion-label>
11+
<ion-button slot="end" aria-label="Show/hide password">
12+
<ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
13+
</ion-button>
1214
</ion-textarea>
1315
`,
1416
config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
2325
`
2426
<ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
2527
<ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
26-
<ion-label slot="end">lbs</ion-label>
28+
<ion-button slot="end" aria-label="Show/hide password">
29+
<ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
30+
</ion-button>
2731
</ion-textarea>
2832
`,
2933
config

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png

856 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png

933 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Safari-linux.png

836 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png

873 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png

1002 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Safari-linux.png

893 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Chrome-linux.png

1.5 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Firefox-linux.png

1.91 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Safari-linux.png

1.42 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Chrome-linux.png

1.48 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Firefox-linux.png

1.93 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Safari-linux.png

1.4 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Chrome-linux.png

907 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Firefox-linux.png

1009 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Safari-linux.png

842 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Chrome-linux.png

937 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Firefox-linux.png

1004 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Safari-linux.png

923 Bytes

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Chrome-linux.png

1.6 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Firefox-linux.png

2.01 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Safari-linux.png

1.46 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Chrome-linux.png

1.57 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Firefox-linux.png

2 KB

‎core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Safari-linux.png

1.45 KB

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,25 @@
4040
:host(.textarea-disabled) {
4141
opacity: #{$textarea-ios-disabled-opacity};
4242
}
43+
44+
// Start/End Slots
45+
// ----------------------------------------------------------------
46+
47+
/**
48+
* Slotted buttons have a lot of default padding that can
49+
* cause them to look misaligned from other pieces such
50+
* as the control's label, especially when using a clear
51+
* fill. We also make them circular to ensure that non-
52+
* clear buttons and the focus/hover state on clear ones
53+
* don't look too crowded.
54+
*/
55+
::slotted(ion-button[slot="start"].button-has-icon-only),
56+
::slotted(ion-button[slot="end"].button-has-icon-only) {
57+
--border-radius: 50%;
58+
--padding-start: 0;
59+
--padding-end: 0;
60+
--padding-top: 0;
61+
--padding-bottom: 0;
62+
63+
aspect-ratio: 1;
64+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,27 @@
109109
:host(.textarea-shape-round) {
110110
--border-radius: 16px;
111111
}
112+
113+
// Start/End Slots
114+
// ----------------------------------------------------------------
115+
116+
/**
117+
* Slotted buttons have a lot of default padding that can
118+
* cause them to look misaligned from other pieces such
119+
* as the control's label, especially when using a clear
120+
* fill. We also make them circular to ensure that non-
121+
* clear buttons and the focus/hover state on clear ones
122+
* don't look too crowded.
123+
*/
124+
::slotted(ion-button[slot="start"].button-has-icon-only),
125+
::slotted(ion-button[slot="end"].button-has-icon-only) {
126+
--border-radius: 50%;
127+
--padding-start: 8px;
128+
--padding-end: 8px;
129+
--padding-top: 8px;
130+
--padding-bottom: 8px;
131+
132+
aspect-ratio: 1;
133+
134+
min-height: 40px;
135+
}

‎core/src/components/textarea/textarea.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -753,8 +753,10 @@
753753

754754
::slotted([slot="start"]) {
755755
margin-inline-end: $form-control-label-margin;
756+
margin-inline-start: 0;
756757
}
757758

758759
::slotted([slot="end"]) {
759760
margin-inline-start: $form-control-label-margin;
761+
margin-inline-end: 0;
760762
}

0 commit comments

Comments
 (0)
0