fix: Set disabled label+hint styles

CrowdStrike · Jun 27, 2023 · d53d3ce · d53d3ce
1 parent 8d05e67
commit d53d3ce
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 14 deletions.
diff --git a/.changeset/pretty-cheetahs-burn.md b/.changeset/pretty-cheetahs-burn.md
@@ -0,0 +1,6 @@
+---
+'@crowdstrike/ember-toucan-core': patch
+'@crowdstrike/ember-toucan-form': patch
+---
+
+Updates disabled styling for all form components to set the `text-disabled` class on the label and hint elements.
diff --git a/packages/ember-toucan-core/src/-private/components/hint.hbs b/packages/ember-toucan-core/src/-private/components/hint.hbs
@@ -1,4 +1,5 @@
 <div
-  class="type-xs-tight text-body-and-labels mt-0.5"
+  class="type-xs-tight mt-0.5
+    {{if @isDisabled 'text-disabled' 'text-body-and-labels'}}"
   ...attributes
 >{{yield}}</div>
diff --git a/packages/ember-toucan-core/src/-private/components/hint.ts b/packages/ember-toucan-core/src/-private/components/hint.ts
@@ -2,7 +2,12 @@ import templateOnlyComponent from '@ember/component/template-only';
 
 export interface ToucanFormHintComponentSignature {
   Element: HTMLDivElement;
-  Args: {};
+  Args: {
+    /**
+     * Should the hint text be styled in a disabled state?
+     */
+    isDisabled?: boolean;
+  };
   Blocks: {
     default: [];
   };

diff --git a/packages/ember-toucan-core/src/-private/components/label.hbs b/packages/ember-toucan-core/src/-private/components/label.hbs
@@ -1,3 +1,7 @@
-<label class="type-md-tight text-body-and-labels block" ...attributes>
+<label
+  class="type-md-tight block
+    {{if @isDisabled 'text-disabled' 'text-body-and-labels'}}"
+  ...attributes
+>
   {{yield}}
 </label>
diff --git a/packages/ember-toucan-core/src/-private/components/label.ts b/packages/ember-toucan-core/src/-private/components/label.ts
@@ -2,7 +2,12 @@ import templateOnlyComponent from '@ember/component/template-only';
 
 export interface ToucanFormLabelComponentSignature {
   Element: HTMLLabelElement;
-  Args: {};
+  Args: {
+    /**
+     * Should the label text be styled in a disabled state?
+     */
+    isDisabled?: boolean;
+  };
   Blocks: {
     default: [];
   };

diff --git a/packages/ember-toucan-core/src/components/form/fields/checkbox-group.hbs b/packages/ember-toucan-core/src/components/form/fields/checkbox-group.hbs
@@ -16,7 +16,8 @@
       )
     }}
       <legend
-        class="type-md-tight text-body-and-labels flex items-center gap-1.5"
+        class="type-md-tight flex items-center gap-1.5
+          {{if @isDisabled 'text-disabled' 'text-body-and-labels'}}"
         data-label
       >
         {{#if (has-block "label")}}
@@ -36,7 +37,7 @@
         (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
       )
     }}
-      <field.Hint id={{field.hintId}} data-hint>
+      <field.Hint id={{field.hintId}} data-hint @isDisabled={{@isDisabled}}>
         {{#if (has-block "hint")}}
           {{yield to="hint"}}
         {{else}}

diff --git a/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs b/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs
@@ -58,7 +58,7 @@
               (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
             )
           }}
-            <field.Hint data-hint>
+            <field.Hint data-hint @isDisabled={{@isDisabled}}>
               {{#if (has-block "hint")}}
                 {{yield to="hint"}}
               {{else}}

diff --git a/packages/ember-toucan-core/src/components/form/fields/file-input.hbs b/packages/ember-toucan-core/src/components/form/fields/file-input.hbs
@@ -3,7 +3,7 @@
   data-root-field={{if @rootTestSelector @rootTestSelector}}
 >
   <Form::Field as |field|>
-    <field.Label for={{field.id}}>
+    <field.Label for={{field.id}} @isDisabled={{@isDisabled}}>
       {{#if
         (this.assertBlockOrArgumentExists
           (hash
@@ -32,7 +32,7 @@
           (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
         )
       }}
-        <field.Hint data-hint>
+        <field.Hint @isDisabled={{@isDisabled}} data-hint>
           {{#if (has-block "hint")}}
             {{yield to="hint"}}
           {{else}}

diff --git a/packages/ember-toucan-core/src/components/form/fields/input.hbs b/packages/ember-toucan-core/src/components/form/fields/input.hbs
@@ -17,6 +17,7 @@
         class="flex items-center gap-1.5"
         for={{field.id}}
         data-label
+        @isDisabled={{@isDisabled}}
       >
         {{#if (has-block "label")}}
           {{yield to="label"}}
@@ -35,14 +36,15 @@
         (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
       )
     }}
-      <field.Hint id={{field.hintId}} data-hint>
+      <field.Hint id={{field.hintId}} data-hint @isDisabled={{@isDisabled}}>
         {{#if (has-block "hint")}}
           {{yield to="hint"}}
         {{else}}
           {{@hint}}
         {{/if}}
       </field.Hint>
     {{/if}}
+
     <field.Control class="mt-1.5 flex">
       <Form::Controls::Input
         id={{field.id}}

diff --git a/packages/ember-toucan-core/src/components/form/fields/radio-group.hbs b/packages/ember-toucan-core/src/components/form/fields/radio-group.hbs
@@ -19,7 +19,8 @@
       )
     }}
       <legend
-        class="type-md-tight text-body-and-labels flex items-center gap-1.5"
+        class="type-md-tight flex items-center gap-1.5
+          {{if @isDisabled 'text-disabled' 'text-body-and-labels'}}"
         data-label
       >
         {{#if (has-block "label")}}
@@ -39,7 +40,7 @@
         (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
       )
     }}
-      <field.Hint id={{field.hintId}} data-hint>
+      <field.Hint id={{field.hintId}} data-hint @isDisabled={{@isDisabled}}>
         {{#if (has-block "hint")}}
           {{yield to="hint"}}
         {{else}}

diff --git a/packages/ember-toucan-core/src/components/form/fields/radio.hbs b/packages/ember-toucan-core/src/components/form/fields/radio.hbs
@@ -47,7 +47,7 @@
               (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
             )
           }}
-            <field.Hint data-hint>
+            <field.Hint data-hint @isDisabled={{@isDisabled}}>
               {{#if (has-block "hint")}}
                 {{yield to="hint"}}
               {{else}}

diff --git a/packages/ember-toucan-core/src/components/form/fields/textarea.hbs b/packages/ember-toucan-core/src/components/form/fields/textarea.hbs
@@ -17,6 +17,7 @@
         class="flex items-center gap-1.5"
         for={{field.id}}
         data-label
+        @isDisabled={{@isDisabled}}
       >
         {{#if (has-block "label")}}
           {{yield to="label"}}
@@ -35,7 +36,7 @@
         (hash blockExists=(has-block "hint") argName="hint" arg=@hint)
       )
     }}
-      <field.Hint id={{field.hintId}} data-hint>
+      <field.Hint id={{field.hintId}} data-hint @isDisabled={{@isDisabled}}>
         {{#if (has-block "hint")}}
           {{yield to="hint"}}
         {{else}}