From 061712318c9a322a18b164b37ed1443760048c4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Thu, 13 Feb 2025 19:19:35 +0000 Subject: [PATCH] fix(textarea): update disabled and readonly to match ionic theme (#30187) Issue number: internal --------- ## What is the current behavior? - There was a misalignment between the disabled and readonly state textarea with the desired designed UX. ## What is the new behavior? - update textarea css vars; - add styles for disabled textarea; - add styles for readonly textarea; ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [textarea preview](https://ionic-framework-git-rou-11586-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic) --------- Co-authored-by: Maria Hutt --- .../textarea/test/states/textarea.e2e.ts | 2 +- ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2730 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 4044 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2768 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2987 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 4349 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 3061 bytes .../components/textarea/textarea.ionic.scss | 37 +++++++++++++++++- core/src/components/textarea/textarea.tsx | 3 +- 9 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts b/core/src/components/textarea/test/states/textarea.e2e.ts index dc6b3ef5fa..942044e71d 100644 --- a/core/src/components/textarea/test/states/textarea.e2e.ts +++ b/core/src/components/textarea/test/states/textarea.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('textarea: states'), () => { test('should render readonly textarea correctly', async ({ page }) => { await page.setContent( diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..29daa819f4152a4948abfccb5d1e5b0693182c2b GIT binary patch literal 2730 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 literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..db2d1c9673c4aba39aac5e1aaf4549ef38f35c84 GIT binary patch literal 4044 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 literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..95e234ad2db9bee6038d65f54fb2fb34a225aa59 GIT binary patch literal 2987 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 SI%OQVZwPK?V_I^~GwvTY+wVXC literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8dbc9ac6e482fd0493e5df4409a534f130c6be85 GIT binary patch literal 4349 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 literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..33aba4af40866687d17233bf3790d461404eb5c9 GIT binary patch literal 3061 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 literal 0 HcmV?d00001 diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss index 4a19f85638..32d0d055b0 100644 --- a/core/src/components/textarea/textarea.ionic.scss +++ b/core/src/components/textarea/textarea.ionic.scss @@ -6,9 +6,10 @@ // -------------------------------------------------- :host { + --border-color: #{globals.$ion-primitives-neutral-500}; --color: #{globals.$ion-primitives-neutral-1200}; - --highlight-color-valid: #{globals.$ion-semantics-success-base}; - --highlight-color-invalid: #{globals.$ion-semantics-danger-base}; + --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; --background: #{globals.$ion-primitives-base-white}; @@ -166,3 +167,35 @@ ion-icon { :host(.has-focus) .textarea-highlight { transform: scale(1); } + +// Textarea Hover +// ---------------------------------------------------------------- + +@media (any-hover: hover) { + :host(:hover) { + --border-color: #{globals.$ion-primitives-neutral-600}; + } +} + +// Textarea - Disabled +// ---------------------------------------------------------------- + +:host(.textarea-disabled) { + --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}; +} + +:host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text, +:host(.textarea-disabled) .textarea-bottom .counter, +:host(.textarea-disabled) .label-text-wrapper { + color: globals.$ion-primitives-neutral-500; +} + +// Textarea - Readonly +// ---------------------------------------------------------------- + +:host(.textarea-readonly) { + --background: #{globals.$ion-primitives-neutral-100}; +} diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 96a3616522..9d76878875 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -676,7 +676,7 @@ export class Textarea implements ComponentInterface { } render() { - const { inputId, disabled, size, labelPlacement, el, hasFocus } = this; + const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this; const fill = this.getFill(); const theme = getIonTheme(this); const shape = this.getShape(); @@ -719,6 +719,7 @@ export class Textarea implements ComponentInterface { [`textarea-size-${size}`]: true, [`textarea-label-placement-${labelPlacement}`]: true, 'textarea-disabled': disabled, + 'textarea-readonly': readonly, })} > {/**