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;
|
||||
}
|
||||
|
||||
: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 {
|
||||
/**
|
||||
* For the ionic theme, the padding needs to sit on the
|
||||
@ -62,10 +52,6 @@
|
||||
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 {
|
||||
@include transform-origin(start, top);
|
||||
|
||||
@ -142,7 +128,7 @@
|
||||
}
|
||||
|
||||
: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) {
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--color: #{globals.$ion-primitives-neutral-1000};
|
||||
--color: #{globals.$ion-primitives-neutral-1200};
|
||||
--border-width: #{globals.$ion-border-size-025};
|
||||
--border-color: #{globals.$ion-primitives-neutral-300};
|
||||
--highlight-color-valid: #{globals.$ion-semantics-success-base};
|
||||
--highlight-color-invalid: #{globals.$ion-semantics-danger-base};
|
||||
--border-color: #{globals.$ion-primitives-neutral-500};
|
||||
--highlight-color-valid: #{globals.$ion-semantics-success-900};
|
||||
--highlight-color-invalid: #{globals.$ion-semantics-danger-800};
|
||||
--placeholder-color: #{globals.$ion-primitives-neutral-800};
|
||||
--placeholder-opacity: 1;
|
||||
--text-color-invalid: #{globals.$ion-semantics-danger-800};
|
||||
@ -88,7 +88,7 @@
|
||||
width: 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 {
|
||||
@ -176,8 +176,10 @@
|
||||
|
||||
:host(.input-disabled) {
|
||||
// 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};
|
||||
--border-color: #{globals.$ion-primitives-neutral-300};
|
||||
--placeholder-color: #{globals.$ion-primitives-neutral-500};
|
||||
|
||||
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 |