diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png index afbf29dd22..510cf000d3 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png index e67b8bf70a..c214d1d448 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png index a6f3702135..517195bd58 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 55b8d0153b..2e4c1cb231 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4024fc72e5..7544fdca3d 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png index baae7ac412..150c03e76c 100644 Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts b/core/src/components/textarea/test/states/textarea.e2e.ts index b816771245..defc219277 100644 --- a/core/src/components/textarea/test/states/textarea.e2e.ts +++ b/core/src/components/textarea/test/states/textarea.e2e.ts @@ -151,6 +151,31 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh await expect(container).toHaveScreenshot(screenshot(`textarea-readonly-no-fill`)); }); }); + + test.describe(title('solid'), () => { + test('should render readonly invalid textarea correctly', async ({ page }) => { + await page.setContent( + ` +
+ +
+ `, + config + ); + + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-readonly-solid-invalid`)); + }); + }); }); }); }); diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 15c5204d10..7b3ba4b7fb 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index d9601b09e7..da4eb5bfe4 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index af4f5eaceb..09b890d0dc 100644 Binary files a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f829ca42ff Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8e307a39a1 Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..eb0929c613 Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-solid-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss index 45788e33b6..3b29ab1a68 100644 --- a/core/src/components/textarea/textarea.ionic.outline.scss +++ b/core/src/components/textarea/textarea.ionic.outline.scss @@ -60,9 +60,18 @@ margin-top: globals.$ion-space-100; } -// Input Focus +// Focus // ---------------------------------------------------------------- -:host(.textarea-fill-outline.has-focus) { - --border-width: #{globals.$ion-border-size-050}; +:host(.textarea-fill-outline.has-focus.ion-valid), +:host(.textarea-fill-outline.ion-touched.ion-invalid) { + --border-color: var(--highlight-color); +} + +// Ionic Textarea - Readonly +// ---------------------------------------------------------------- + +:host(.textarea-fill-outline.textarea-readonly) { + --border-color: #{globals.$ion-border-input-default}; + --border-width: #{globals.$ion-border-size-025}; } diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss index 03b4cbc4ce..3224897450 100644 --- a/core/src/components/textarea/textarea.ionic.scss +++ b/core/src/components/textarea/textarea.ionic.scss @@ -1,6 +1,7 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; @use "./textarea.common"; @use "./textarea.ionic.outline.scss" as outline; +@use "./textarea.ionic.solid.scss" as solid; // Ionic Textarea // -------------------------------------------------- @@ -122,7 +123,7 @@ // ---------------------------------------------------------------- ion-icon { - color: globals.$ion-primitives-neutral-800; + --color: globals.$ion-icon-subtlest; font-size: globals.$ion-scale-400; } @@ -177,6 +178,7 @@ ion-icon { :host(.has-focus) { --border-color: #{globals.$ion-border-focus-default}; + --border-width: #{globals.$ion-border-size-050}; } :host(.has-focus) .textarea-highlight { @@ -188,7 +190,7 @@ ion-icon { @media (any-hover: hover) { :host(:hover) { - --border-color: #{globals.$ion-primitives-neutral-600}; + --border-color: #{globals.$ion-border-focus-default}; } } @@ -196,10 +198,10 @@ ion-icon { // ---------------------------------------------------------------- :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}; + --color: #{globals.$ion-text-disabled}; + --background: #{globals.$ion-bg-input-disabled}; + --border-color: #{globals.$ion-border-disabled}; + --placeholder-color: #{globals.$ion-text-disabled}; } :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text, @@ -229,7 +231,7 @@ ion-icon { // ---------------------------------------------------------------- :host(.textarea-readonly) { - --background: #{globals.$ion-primitives-neutral-100}; + --background: #{globals.$ion-bg-input-read-only}; } /** diff --git a/core/src/components/textarea/textarea.ionic.solid.scss b/core/src/components/textarea/textarea.ionic.solid.scss new file mode 100644 index 0000000000..e8f4482d0b --- /dev/null +++ b/core/src/components/textarea/textarea.ionic.solid.scss @@ -0,0 +1,62 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; + +// Ionic Textarea Fill: Solid +// ---------------------------------------------------------------- + +:host(.textarea-fill-solid) { + --border-color: #{globals.$ion-bg-input-bold-default}; + --border-width: #{globals.$ion-border-size-050}; + --background: #{globals.$ion-bg-input-bold-default}; +} + +:host(.textarea-fill-solid) .textarea-wrapper { + border-bottom: none; + + background: none; +} + +:host(.textarea-fill-solid) .textarea-wrapper-inner { + @include globals.border-radius(var(--border-radius)); + position: relative; + + border: var(--border-width) var(--border-style) var(--border-color); + + background: var(--background); +} + +:host(.textarea-fill-solid) .textarea-bottom { + --border-width: #{globals.$ion-scale-0}; +} + +// Focus +// ---------------------------------------------------------------- + +:host(.textarea-fill-solid.has-focus) { + --border-color: #{globals.$ion-border-focus-default}; +} + +:host(.textarea-fill-solid.has-focus.ion-valid), +:host(.textarea-fill-solid.ion-touched.ion-invalid) { + --border-width: #{globals.$ion-border-size-050}; + --border-color: var(--highlight-color); +} + +// Ionic Textarea - Readonly +// ---------------------------------------------------------------- + +:host(.textarea-fill-solid.textarea-readonly) { + --background: #{globals.$ion-bg-input-bold-read-only}; + --border-color: #{globals.$ion-bg-input-bold-read-only}; +} + +:host(.textarea-fill-solid.textarea-readonly.ion-invalid) { + --border-color: rgba(#{globals.$ion-semantics-danger-base-rgb}, 0.6); +} + +// Textarea - Disabled +// ---------------------------------------------------------------- + +:host(.textarea-fill-solid.textarea-disabled) { + --background: #{globals.$ion-bg-input-bold-disabled}; + --border-color: #{globals.$ion-bg-input-bold-disabled}; +} diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 1179a96186..6a6d51f3c4 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -776,7 +776,7 @@ export class Textarea implements ComponentInterface { const shape = this.getShape(); const value = this.getValue(); const inItem = hostContext('ion-item', this.el); - const shouldRenderHighlight = (theme === 'md' || theme === 'ionic') && fill !== 'outline' && !inItem; + const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem; const hasValue = this.hasValue(); const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;