From 8515c4efffda260ba303b2f914a1a9f6c871f543 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 10 May 2024 10:27:43 -0400 Subject: [PATCH] fix(input): only apply the shape to the outline fill in ionic theme (#29482) Issue number: internal --------- ## What is the current behavior? The shape styles are being applied when the `fill` is unset in the `ionic` theme. This is incorrect per the input UX requirements as shape should only apply when `fill` is set to `"outline"`. This is made apparent when looking at the existing styles for `disabled`. ## What is the new behavior? - Only apply the shape styles to the `"outline"` fill - Move the use of the `--background` css variable to the native wrapper since this is what we use to style both the disabled and readonly states | Before | After | | ---| ---| | ![before](https://github.com/ionic-team/ionic-framework/assets/6577830/44b6e7e4-70f4-49d5-844f-a015b7284ed5) | ![after](https://github.com/ionic-team/ionic-framework/assets/6577830/06ac9431-17f4-4741-8ceb-19b40d8ba7d9) | I am not sure why this wasn't caught with the shape additions, but it's probably because the minimum pixel ratio was not met. ## Does this introduce a breaking change? - [ ] Yes - [x] No --- core/src/components.d.ts | 4 +-- .../components/input/input.ionic.outline.scss | 34 +++++++++++++------ core/src/components/input/input.ionic.scss | 15 -------- core/src/components/input/input.tsx | 1 + 4 files changed, 26 insertions(+), 28 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 08838a19d4..59583941f3 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1471,7 +1471,7 @@ export namespace Components { */ "setFocus": () => Promise; /** - * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. + * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`. */ "shape"?: 'soft' | 'round' | 'rectangular'; /** @@ -6751,7 +6751,7 @@ declare namespace LocalJSX { */ "required"?: boolean; /** - * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. + * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`. */ "shape"?: 'soft' | 'round' | 'rectangular'; /** diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index 247a1b446b..26597367e7 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -53,6 +53,13 @@ * input + label. */ border-bottom: none; + + /** + * Do not show a background on the input wrapper as + * this includes the label, instead we apply the + * background to the native wrapper. + */ + background: transparent; } :host(.input-fill-outline.input-shape-round) .label-text-wrapper { @@ -80,9 +87,16 @@ } :host(.input-fill-outline) .native-wrapper { + @include border-radius(inherit); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); min-height: 40px; + + /** + * Apply the background to the native input + * wrapper to only style the input. + */ + background: var(--background); } // Input Fill: Outline, Outline Container @@ -128,21 +142,19 @@ margin-inline-start: 8px; } -// Input - Disabled -// ---------------------------------------------------------------- +// Input Shapes +// -------------------------------------------------- -:host(.input-fill-outline.input-disabled) { - // color for the text within the input - --color: #{$ionic-color-neutral-400}; - --background: transparent; +:host(.input-fill-outline.input-shape-soft) { + --border-radius: #{$ionic-border-radius-rounded-medium}; } -:host(.input-fill-outline.input-disabled) .native-wrapper { - --background: #{$ionic-color-neutral-10}; +:host(.input-fill-outline.input-shape-round) { + --border-radius: #{$ionic-border-radius-rounded-full}; +} - @include border-radius(inherit); - - background: var(--background); +:host(.input-fill-outline.input-shape-rectangular) { + --border-radius: #{$ionic-border-radius-square}; } // Input Focus diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 6183016b21..9d95ab9aff 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -101,21 +101,6 @@ display: none; } -// Ionic Input Shapes -// -------------------------------------------------- - -:host(.input-shape-soft) { - --border-radius: #{$ionic-border-radius-rounded-medium}; -} - -:host(.input-shape-round) { - --border-radius: #{$ionic-border-radius-rounded-full}; -} - -:host(.input-shape-rectangular) { - --border-radius: #{$ionic-border-radius-square}; -} - // Input Bottom Content // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 7d212fc1a7..ef03c4b858 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -249,6 +249,7 @@ export class Input implements ComponentInterface { * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully * rounded corners, or `"rectangular"` for an input without rounded corners. * Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. + * Only applies when the fill is set to `"solid"` or `"outline"`. */ @Prop() shape?: 'soft' | 'round' | 'rectangular';