fix(components): color for disabled state (#2234)

Teradata · Sep 4, 2024 · 179b78f · 179b78f
1 parent b7b9327
commit 179b78f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/libs/components/src/textarea/textarea.stories.js b/libs/components/src/textarea/textarea.stories.js
@@ -10,15 +10,17 @@ export default {
   },
   args: {
     style: 'outlined',
+    disabled: false,
   },
 };
 
-const Template = ({ label, style, required, helper }) => {
+const Template = ({ label, style, disabled, required, helper }) => {
   return `
         <cv-textarea 
             label="${label ?? style}"
             ${style}
             ${helper ? `helper="${helper}"` : null}
+            ${disabled ? `disabled` : null}
             ${required ? `required` : null}>
         </cv-textarea>`;
 };

diff --git a/libs/components/src/textfield/textfield.scss b/libs/components/src/textfield/textfield.scss
@@ -10,6 +10,8 @@
   --mdc-text-field-outlined-hover-border-color: var(
     --mdc-theme-text-icon-on-background
   );
+  --mdc-text-field-outlined-disabled-border-color: var(--cv-theme-outline-12);
+  --mdc-text-field-disabled-ink-color: var(--cv-theme-on-surface-38);
   --mdc-typography-subtitle1-font-family: var(
     --mdc-typography-body1-font-family
   );

diff --git a/libs/components/src/textfield/textfield.stories.js b/libs/components/src/textfield/textfield.stories.js
@@ -10,10 +10,19 @@ export default {
   },
   args: {
     style: 'outlined',
+    disabled: false,
   },
 };
 
-const Template = ({ icon, iconTrailing, label, style, required, helper }) => {
+const Template = ({
+  icon,
+  iconTrailing,
+  label,
+  style,
+  disabled,
+  required,
+  helper,
+}) => {
   return `
         <cv-textfield 
             label="${label ?? style}"
@@ -26,6 +35,7 @@ const Template = ({ icon, iconTrailing, label, style, required, helper }) => {
                 : null
             }
             ${helper ? `helper="${helper}"` : null}
+            ${disabled ? `disabled` : null}
             ${required ? `required` : null}>
         </cv-textfield>`;
 };