feat(textarea): readonly styles (#1768)

* feat(textarea): readonly styles

* fix(textarea): stories

* fix(textarea): bootstrap focused styles

---------

Co-authored-by: Marin Popov <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

src/components/input/themes/shared/input.indigo.scss

@@ -167,7 +167,7 @@ $transition-duration: .25s;
     }
 }
 
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]) {
+:host(:not([aria-haspopup='dialog'],[role='combobox'],[disabled])[readonly]) {
     [part^='container'] {
         border-color: var-get($theme, 'disabled-text-color');
     }

src/components/textarea/themes/shared/textarea.bootstrap.scss

@@ -117,6 +117,19 @@ textarea {
     }
 }
 
+:host([readonly]) {
+    [part~='prefix'],
+    [part~='suffix'],
+    textarea {
+        background: var-get($theme, 'border-disabled-background');
+    }
+
+    [part~='prefix'],
+    [part~='suffix'] {
+        color: var-get($theme, 'disabled-text-color');
+    }
+}
+
 :host([invalid]:not(:disabled)),
 :host([invalid]:not([disabled])) {
     textarea {

src/components/textarea/themes/shared/textarea.common.scss

@@ -46,7 +46,14 @@ textarea {
     }
 }
 
-:host(:hover),
+:host([readonly]) {
+    [part='prefix'],
+    [part='suffix'] {
+        color: var-get($theme, 'disabled-text-color');
+    }
+}
+
+:host(:not([readonly]):hover),
 :host(:focus) {
     textarea {
         &::placeholder {

src/components/textarea/themes/shared/textarea.fluent.scss

@@ -71,6 +71,13 @@ $border-size: rem(1px);
     }
 }
 
+:host([readonly]) {
+    [part='prefix'],
+    [part='suffix'] {
+        background: transparent;
+    }
+}
+
 :host([invalid]) {
     [part~='label'] {
         color: var-get($theme, 'idle-text-color');

src/components/textarea/themes/shared/textarea.indigo.scss

@@ -24,7 +24,7 @@ $theme: $indigo;
 
 }
 
-:host(:hover) {
+:host(:not([readonly], :focus-within):hover) {
     [part~='container'] {
         background: var-get($theme, 'box-background-hover');
 
@@ -38,7 +38,8 @@ $theme: $indigo;
     }
 }
 
-:host(:focus-within) {
+:host(:focus-within),
+:host([readonly]:focus-within) {
     [part~='label'] {
         color: var-get($theme, 'focused-secondary-color');
     }
@@ -135,6 +136,12 @@ textarea {
     height: calc(100% - #{rem(1px)});
 }
 
+:host([readonly]) {
+    [part~='container']::after {
+        border-block-end-color: var-get($theme, 'disabled-text-color');
+    }
+}
+
 :host([invalid]:not(:disabled)),
 :host([invalid]:not([disabled])) {
     ::part(validation-icon) {

src/components/textarea/themes/shared/textarea.material.scss

@@ -95,7 +95,7 @@ textarea {
     }
 }
 
-:host(:not([outlined]):hover) {
+:host(:not([outlined], [readonly]):hover) {
     [part~='container'] {
         background: var-get($theme, 'box-background-hover');
 
@@ -138,10 +138,14 @@ textarea {
     }
 }
 
-:host(:focus-within) {
+:host(:not([readonly]):focus-within) {
     [part~='label'] {
         @extend %label-filled;
+    }
+}
 
+:host(:focus-within) {
+    [part~='label'] {
         color: var-get($theme, 'focused-secondary-color');
     }
 }
@@ -160,7 +164,9 @@ textarea {
             );
         }
     }
+}
 
+:host(:not([outlined], [readonly]):focus-within) {
     [part~='prefix'] {
         color: var-get($theme, 'input-prefix-color--focused');
         background: var-get($theme, 'input-prefix-background--focused');
@@ -172,6 +178,12 @@ textarea {
     }
 }
 
+:host(:not([outlined], [disabled])[readonly]) {
+    [part~='container'] {
+        background: var-get($theme, 'box-background-focus');
+    }
+}
+
 :host([invalid]:not([outlined]):focus-within) {
     [part~='container'] {
         &::after {
@@ -335,7 +347,7 @@ textarea {
     }
 }
 
-:host([outlined]:hover) {
+:host(:not([readonly], :focus-within)[outlined]:hover) {
     [part='notch'],
     [part='start'],
     [part='end'],
@@ -351,22 +363,64 @@ textarea {
     }
 }
 
-:host([outlined]:focus-within) {
-    [part='filler'],
+:host(:not([readonly])[outlined]:focus-within) {
+    [part='label'] {
+        @extend %label-outlined-filled;
+    }
+
     [part='notch'] {
-        border-block-width: rem(2px);
+        border-block-start-color: transparent;
     }
+}
 
+:host([readonly][outlined]) {
+    [part~='container'][part~='filled'],
+    [part~='container'][part~='placeholder'] {
+        [part='label'] {
+            @extend %label-outlined-filled;
+        }
+
+        [part='notch'] {
+            border-block-start-color: transparent;
+        }
+    }
+}
+
+:host([readonly][outlined]:focus-within) {
     [part='label'] {
-        @extend %label-outlined-filled;
+        inset-block-start: calc($input-top-padding - #{rem(3px)});
+    }
+
+    [part='notch'] {
+        border-block-start-color: var-get($theme, 'focused-border-color');
+    }
+}
+
+:host(:not(:disabled)[readonly][outlined][invalid]:focus-within),
+:host(:not([disabled])[readonly][outlined][invalid]:focus-within) {
+    [part='notch'] {
+        border-block-start-color: var-get($theme, 'error-secondary-color');
+    }
+
+    [part~='container'][part~='filled'],
+    [part~='container'][part~='placeholder'] {
+        [part='notch'] {
+            border-block-start-color: transparent;
+        }
+    }
+}
+
+:host([outlined]:focus-within) {
+    [part='filler'],
+    [part='notch'] {
+        border-block-width: rem(2px);
     }
 
     [part='filler'] {
         border-block-color: var-get($theme, 'focused-border-color');
     }
 
     [part='notch'] {
-        border-block-start-color: transparent;
         border-block-end-color: var-get($theme, 'focused-border-color');
     }
 

stories/textarea.stories.ts

@@ -261,13 +261,16 @@ export const Default: Story = {
       ?invalid=${args.invalid}
       ?validate-only=${args.validateOnly}
       ?spellcheck=${args.spellcheck}
-    ></igc-textarea>
+    >
+      <igc-icon name="source-code" aria-hidden="true" slot="prefix"></igc-icon>
+      <igc-icon name="source-code" aria-hidden="true" slot="suffix"></igc-icon>
+    </igc-textarea>
   `,
 };
 
 export const ProjectContent: Story = {
   render: (
-    { rows, resize, required, disabled, outlined },
+    { rows, resize, required, disabled, outlined, readOnly },
     { globals: { direction } }
   ) => {
     return html`
@@ -276,6 +279,7 @@ export const ProjectContent: Story = {
         dir=${direction}
         spellcheck="false"
         .outlined=${outlined}
+        ?readonly=${readOnly}
         autofocus
         label="Leave your comment"
         .rows=${rows}