Skip to content

Commit 94d28ea

Browse files
fix(input): update label padding to align with the outline input in ionic theme (#30152)
Issue number: internal --------- ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> There were a misalignment between the labels' input and the labels' Textarea. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates label text padding to match textarea structure - Updates helper and counter text padding to match textarea structure - Updates e2e tests snapshots to include changes ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [input preview](https://ionic-framework-git-rou-11544-ionic1.vercel.app/src/components/input/test/bottom-content?ionic:theme=ionic) [textarea preview](https://ionic-framework-git-rou-11544-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic) --------- Co-authored-by: Brandy Smith <[email protected]>
1 parent b3e869e commit 94d28ea

File tree

168 files changed

+22
-22
lines changed

Some content is hidden

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

168 files changed

+22
-22
lines changed

core/src/components/input/input.ionic.outline.scss

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,6 @@
2828
border-top: none;
2929
}
3030

31-
:host(.input-fill-outline.input-shape-round) .input-bottom,
32-
:host(.input-fill-outline.input-label-placement-floating) .input-bottom {
33-
/**
34-
* The bottom content should take on the start and end
35-
* padding so it is always aligned with either the label
36-
* or the start of the text input.
37-
*/
38-
@include padding-horizontal(var(--padding-start), var(--padding-end));
39-
}
40-
4131
:host(.input-fill-outline) .input-wrapper {
4232
/**
4333
* For the ionic theme, the padding needs to sit on the
@@ -62,10 +52,6 @@
6252
background: transparent;
6353
}
6454

65-
:host(.input-fill-outline.input-shape-round) .label-text-wrapper {
66-
@include padding(null, var(--padding-end), null, var(--padding-start));
67-
}
68-
6955
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
7056
@include transform-origin(start, top);
7157

@@ -142,7 +128,7 @@
142128
}
143129

144130
:host(.input-fill-outline.input-shape-round) {
145-
--border-radius: #{$ion-border-radius-full};
131+
--border-radius: #{$ion-border-radius-400};
146132
}
147133

148134
:host(.input-fill-outline.input-shape-rectangular) {

core/src/components/input/input.ionic.scss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
// --------------------------------------------------
77

88
:host {
9-
--color: #{globals.$ion-primitives-neutral-1000};
9+
--color: #{globals.$ion-primitives-neutral-1200};
1010
--border-width: #{globals.$ion-border-size-025};
11-
--border-color: #{globals.$ion-primitives-neutral-300};
12-
--highlight-color-valid: #{globals.$ion-semantics-success-base};
13-
--highlight-color-invalid: #{globals.$ion-semantics-danger-base};
11+
--border-color: #{globals.$ion-primitives-neutral-500};
12+
--highlight-color-valid: #{globals.$ion-semantics-success-900};
13+
--highlight-color-invalid: #{globals.$ion-semantics-danger-800};
1414
--placeholder-color: #{globals.$ion-primitives-neutral-800};
1515
--placeholder-opacity: 1;
1616
--text-color-invalid: #{globals.$ion-semantics-danger-800};
@@ -88,7 +88,7 @@
8888
width: globals.$ion-scale-400;
8989
height: globals.$ion-scale-400;
9090

91-
color: globals.$ion-primitives-neutral-500;
91+
color: globals.$ion-primitives-neutral-1000;
9292
}
9393

9494
.input-clear-icon:focus-visible {
@@ -176,8 +176,10 @@
176176

177177
:host(.input-disabled) {
178178
// color for the text within the input
179-
--color: #{globals.$ion-primitives-neutral-400};
179+
--color: #{globals.$ion-primitives-neutral-500};
180180
--background: #{globals.$ion-primitives-neutral-100};
181+
--border-color: #{globals.$ion-primitives-neutral-300};
182+
--placeholder-color: #{globals.$ion-primitives-neutral-500};
181183

182184
pointer-events: none;
183185
}
-88 Bytes
132 Bytes

0 commit comments

Comments
 (0)