From cf944f6f31a9b95b0fd2fb89942a06866373448a Mon Sep 17 00:00:00 2001
From: Tony Ward <8069555+ynotdraw@users.noreply.github.com>
Date: Tue, 27 Jun 2023 15:59:34 -0400
Subject: [PATCH] fix: Set disabled label+hint styles

---
 .changeset/pretty-cheetahs-burn.md                         | 6 ++++++
 .../ember-toucan-core/src/-private/components/hint.hbs     | 3 ++-
 packages/ember-toucan-core/src/-private/components/hint.ts | 7 ++++++-
 .../ember-toucan-core/src/-private/components/label.hbs    | 6 +++++-
 .../ember-toucan-core/src/-private/components/label.ts     | 7 ++++++-
 .../src/components/form/fields/checkbox-group.hbs          | 5 +++--
 .../src/components/form/fields/checkbox.hbs                | 2 +-
 .../src/components/form/fields/file-input.hbs              | 4 ++--
 .../ember-toucan-core/src/components/form/fields/input.hbs | 4 +++-
 .../src/components/form/fields/radio-group.hbs             | 5 +++--
 .../ember-toucan-core/src/components/form/fields/radio.hbs | 2 +-
 .../src/components/form/fields/textarea.hbs                | 3 ++-
 .../tests/integration/components/checkbox-field-test.gts   | 3 +++
 .../integration/components/checkbox-group-field-test.gts   | 3 +++
 .../tests/integration/components/file-input-field-test.gts | 4 ++++
 test-app/tests/integration/components/input-field-test.gts | 4 ++++
 test-app/tests/integration/components/radio-field-test.gts | 3 +++
 .../integration/components/radio-group-field-test.gts      | 3 +++
 .../tests/integration/components/textarea-field-test.gts   | 3 +++
 19 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/pretty-cheetahs-burn.md

diff --git a/.changeset/pretty-cheetahs-burn.md b/.changeset/pretty-cheetahs-burn.md
new file mode 100644
index 00000000..5c3ad9cd
--- /dev/null
+++ 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
index 2377291d..61afb9f6 100644
--- 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>
\ No newline at end of file
diff --git a/packages/ember-toucan-core/src/-private/components/hint.ts b/packages/ember-toucan-core/src/-private/components/hint.ts
index 91e8f344..75b9bd91 100644
--- 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: {
+    /**
+     * Sets disabled styling on the hint.
+     */
+    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
index abbf94ca..8972d2bd 100644
--- 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>
\ No newline at end of file
diff --git a/packages/ember-toucan-core/src/-private/components/label.ts b/packages/ember-toucan-core/src/-private/components/label.ts
index 71cbe24f..cfe9a13f 100644
--- 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: {
+    /**
+     * Sets disabled styling on the label.
+     */
+    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
index 99da4d42..c4d014f7 100644
--- 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
index 255c50dd..078e67a1 100644
--- 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
index 1f8cb551..94745b02 100644
--- 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 data-hint @isDisabled={{@isDisabled}}>
           {{#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
index 835650f4..d9b074ca 100644
--- 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,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}}
@@ -43,6 +44,7 @@
         {{/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
index c44753e8..f242a62b 100644
--- 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
index d2a0f039..ddabf017 100644
--- 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
index 30976599..eca9cf8b 100644
--- 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}}
diff --git a/test-app/tests/integration/components/checkbox-field-test.gts b/test-app/tests/integration/components/checkbox-field-test.gts
index 954f7bb3..6c1fcf1b 100644
--- a/test-app/tests/integration/components/checkbox-field-test.gts
+++ b/test-app/tests/integration/components/checkbox-field-test.gts
@@ -15,6 +15,7 @@ module('Integration | Component | Fields | CheckboxField', function (hooks) {
     </template>);
 
     assert.dom('[data-label]').hasText('Label');
+    assert.dom('[data-label]').hasClass('text-titles-and-attributes');
 
     assert
       .dom('[data-hint]')
@@ -122,6 +123,8 @@ module('Integration | Component | Fields | CheckboxField', function (hooks) {
     assert.dom('[data-checkbox]').isDisabled();
 
     assert.dom('[data-lock-icon]').exists();
+
+    assert.dom('[data-label]').hasClass('text-disabled');
   });
 
   test('it sets readonly on the checkbox using `@isReadOnly` and renders a lock icon', async function (assert) {
diff --git a/test-app/tests/integration/components/checkbox-group-field-test.gts b/test-app/tests/integration/components/checkbox-group-field-test.gts
index 4b1d6e85..1d8d9fd7 100644
--- a/test-app/tests/integration/components/checkbox-group-field-test.gts
+++ b/test-app/tests/integration/components/checkbox-group-field-test.gts
@@ -18,6 +18,7 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) {
     assert.dom('[data-group-field]').hasNoAttribute('aria-invalid');
 
     assert.dom('[data-label]').hasText('Label');
+    assert.dom('[data-label]').hasClass('text-body-and-labels');
 
     assert.dom('[data-lock-icon]').doesNotExist();
   });
@@ -180,6 +181,8 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) {
     assert.dom('[data-checkbox-2]').isDisabled();
 
     assert.dom('[data-lock-icon]').exists();
+
+    assert.dom('[data-label]').hasClass('text-disabled');
   });
 
   test('it sets an individual checkbox to disabled with `@isDisabled`', async function (assert) {
diff --git a/test-app/tests/integration/components/file-input-field-test.gts b/test-app/tests/integration/components/file-input-field-test.gts
index de4faf1b..ad820a4b 100644
--- a/test-app/tests/integration/components/file-input-field-test.gts
+++ b/test-app/tests/integration/components/file-input-field-test.gts
@@ -57,6 +57,8 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
     </template>);
 
     assert.dom('[data-label]').hasText('Label');
+    assert.dom('label').hasClass('text-body-and-labels');
+
     assert.dom('[data-trigger]').hasText('Select Files');
 
     assert
@@ -192,6 +194,8 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
     assert.dom('[data-file-input-field]').hasClass('text-disabled');
 
     assert.dom('[data-lock-icon]').exists();
+
+    assert.dom('label').hasClass('text-disabled');
   });
 
   test('it sets readonly on the input using `@isReadOnly` and renders a lock icon', async function (assert) {
diff --git a/test-app/tests/integration/components/input-field-test.gts b/test-app/tests/integration/components/input-field-test.gts
index 03130de4..d41852dc 100644
--- a/test-app/tests/integration/components/input-field-test.gts
+++ b/test-app/tests/integration/components/input-field-test.gts
@@ -21,6 +21,8 @@ module('Integration | Component | Fields | Input', function (hooks) {
     assert.dom(label).exists('Expected to have label block rendered');
     assert.dom(label).hasText('Label', 'Expected to have label text "label"');
     assert.dom(label).hasAttribute('for', inputId);
+    assert.dom(label).hasClass('text-body-and-labels');
+
     assert.dom(input).exists('Expected to have input tag rendered');
     assert.dom(input).hasAttribute('type', 'text');
     assert.dom(input).hasAttribute('id');
@@ -226,6 +228,8 @@ module('Integration | Component | Fields | Input', function (hooks) {
     assert.dom('[data-input]').isDisabled();
 
     assert.dom('[data-lock-icon]').exists();
+
+    assert.dom('[data-label]').hasClass('text-disabled');
   });
 
   test('it sets readonly on the input using `@isReadOnly` and renders a lock icon', async function (assert) {
diff --git a/test-app/tests/integration/components/radio-field-test.gts b/test-app/tests/integration/components/radio-field-test.gts
index e7b8a986..c670f825 100644
--- a/test-app/tests/integration/components/radio-field-test.gts
+++ b/test-app/tests/integration/components/radio-field-test.gts
@@ -20,6 +20,7 @@ module('Integration | Component | Fields | Radio', function (hooks) {
     </template>);
 
     assert.dom('[data-label]').hasText('Label');
+    assert.dom('[data-label]').hasClass('text-titles-and-attributes');
 
     assert
       .dom('[data-hint]')
@@ -88,6 +89,8 @@ module('Integration | Component | Fields | Radio', function (hooks) {
     </template>);
 
     assert.dom('[data-radio]').isDisabled();
+
+    assert.dom('[data-label]').hasClass('text-disabled');
   });
 
   test('it sets readonly on the radio using `@isReadOnly`', async function (assert) {
diff --git a/test-app/tests/integration/components/radio-group-field-test.gts b/test-app/tests/integration/components/radio-group-field-test.gts
index 8f47d827..f3336c4f 100644
--- a/test-app/tests/integration/components/radio-group-field-test.gts
+++ b/test-app/tests/integration/components/radio-group-field-test.gts
@@ -18,6 +18,7 @@ module('Integration | Component | Fields | RadioGroup', function (hooks) {
     assert.dom('[data-group-field]').hasAttribute('aria-required');
 
     assert.dom('[data-label]').hasText('Label');
+    assert.dom('[data-label]').hasClass('text-body-and-labels');
 
     assert.dom('[data-lock-icon]').doesNotExist();
   });
@@ -119,6 +120,8 @@ module('Integration | Component | Fields | RadioGroup', function (hooks) {
     assert.dom('[data-radio-2]').isDisabled();
 
     assert.dom('[data-lock-icon]').exists();
+
+    assert.dom('[data-group-field] [data-label]').hasClass('text-disabled');
   });
 
   test('it sets an individual radio to disabled with `@isDisabled`', async function (assert) {
diff --git a/test-app/tests/integration/components/textarea-field-test.gts b/test-app/tests/integration/components/textarea-field-test.gts
index 3b804b05..cf7bbc4e 100644
--- a/test-app/tests/integration/components/textarea-field-test.gts
+++ b/test-app/tests/integration/components/textarea-field-test.gts
@@ -14,6 +14,7 @@ module('Integration | Component | Fields | Textarea', function (hooks) {
     </template>);
 
     assert.dom('[data-label]').hasText('Label');
+    assert.dom('[data-label]').hasClass('text-body-and-labels');
 
     assert
       .dom('[data-hint]')
@@ -130,6 +131,8 @@ module('Integration | Component | Fields | Textarea', function (hooks) {
     assert.dom('[data-textarea]').hasClass('text-disabled');
 
     assert.dom('[data-lock-icon]').exists();
+
+    assert.dom('[data-label]').hasClass('text-disabled');
   });
 
   test('it sets readonly on the textarea using `@isReadOnly` and renders a lock icon', async function (assert) {