Fix: Apply text-disabled to labels and hint blocks when components are disabled

.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.

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>

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: [];
   };

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>

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: [];
   };

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}}

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}}

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}}

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}}

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}}

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}}

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}}

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) {

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) {

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) {

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) {

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) {

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) {

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) {