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 <brandyscarney@users.noreply.github.com>
|
Before Width: | Height: | Size: 585 B After Width: | Height: | Size: 534 B |
|
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 653 B |
|
Before Width: | Height: | Size: 575 B After Width: | Height: | Size: 526 B |
|
Before Width: | Height: | Size: 590 B After Width: | Height: | Size: 496 B |
|
Before Width: | Height: | Size: 509 B After Width: | Height: | Size: 588 B |
|
Before Width: | Height: | Size: 573 B After Width: | Height: | Size: 478 B |
@ -28,16 +28,6 @@
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.input-fill-outline.input-shape-round) .input-bottom,
|
|
||||||
:host(.input-fill-outline.input-label-placement-floating) .input-bottom {
|
|
||||||
/**
|
|
||||||
* The bottom content should take on the start and end
|
|
||||||
* padding so it is always aligned with either the label
|
|
||||||
* or the start of the text input.
|
|
||||||
*/
|
|
||||||
@include padding-horizontal(var(--padding-start), var(--padding-end));
|
|
||||||
}
|
|
||||||
|
|
||||||
:host(.input-fill-outline) .input-wrapper {
|
:host(.input-fill-outline) .input-wrapper {
|
||||||
/**
|
/**
|
||||||
* For the ionic theme, the padding needs to sit on the
|
* For the ionic theme, the padding needs to sit on the
|
||||||
@ -62,10 +52,6 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.input-fill-outline.input-shape-round) .label-text-wrapper {
|
|
||||||
@include padding(null, var(--padding-end), null, var(--padding-start));
|
|
||||||
}
|
|
||||||
|
|
||||||
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
|
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
|
||||||
@include transform-origin(start, top);
|
@include transform-origin(start, top);
|
||||||
|
|
||||||
@ -142,7 +128,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:host(.input-fill-outline.input-shape-round) {
|
:host(.input-fill-outline.input-shape-round) {
|
||||||
--border-radius: #{$ion-border-radius-full};
|
--border-radius: #{$ion-border-radius-400};
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.input-fill-outline.input-shape-rectangular) {
|
:host(.input-fill-outline.input-shape-rectangular) {
|
||||||
|
|||||||
@ -6,11 +6,11 @@
|
|||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
--color: #{globals.$ion-primitives-neutral-1000};
|
--color: #{globals.$ion-primitives-neutral-1200};
|
||||||
--border-width: #{globals.$ion-border-size-025};
|
--border-width: #{globals.$ion-border-size-025};
|
||||||
--border-color: #{globals.$ion-primitives-neutral-300};
|
--border-color: #{globals.$ion-primitives-neutral-500};
|
||||||
--highlight-color-valid: #{globals.$ion-semantics-success-base};
|
--highlight-color-valid: #{globals.$ion-semantics-success-900};
|
||||||
--highlight-color-invalid: #{globals.$ion-semantics-danger-base};
|
--highlight-color-invalid: #{globals.$ion-semantics-danger-800};
|
||||||
--placeholder-color: #{globals.$ion-primitives-neutral-800};
|
--placeholder-color: #{globals.$ion-primitives-neutral-800};
|
||||||
--placeholder-opacity: 1;
|
--placeholder-opacity: 1;
|
||||||
--text-color-invalid: #{globals.$ion-semantics-danger-800};
|
--text-color-invalid: #{globals.$ion-semantics-danger-800};
|
||||||
@ -88,7 +88,7 @@
|
|||||||
width: globals.$ion-scale-400;
|
width: globals.$ion-scale-400;
|
||||||
height: globals.$ion-scale-400;
|
height: globals.$ion-scale-400;
|
||||||
|
|
||||||
color: globals.$ion-primitives-neutral-500;
|
color: globals.$ion-primitives-neutral-1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-clear-icon:focus-visible {
|
.input-clear-icon:focus-visible {
|
||||||
@ -176,8 +176,10 @@
|
|||||||
|
|
||||||
:host(.input-disabled) {
|
:host(.input-disabled) {
|
||||||
// color for the text within the input
|
// color for the text within the input
|
||||||
--color: #{globals.$ion-primitives-neutral-400};
|
--color: #{globals.$ion-primitives-neutral-500};
|
||||||
--background: #{globals.$ion-primitives-neutral-100};
|
--background: #{globals.$ion-primitives-neutral-100};
|
||||||
|
--border-color: #{globals.$ion-primitives-neutral-300};
|
||||||
|
--placeholder-color: #{globals.$ion-primitives-neutral-500};
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 919 B After Width: | Height: | Size: 918 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 960 B |
|
Before Width: | Height: | Size: 898 B After Width: | Height: | Size: 896 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 936 B After Width: | Height: | Size: 936 B |
|
Before Width: | Height: | Size: 923 B After Width: | Height: | Size: 920 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 967 B After Width: | Height: | Size: 956 B |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.4 KiB |