CrowdStrike · ynotdraw · Jun 27, 2023 · Jun 20, 2023 · Jun 20, 2023 · Jun 20, 2023
diff --git a/.changeset/fluffy-cameras-drum.md b/.changeset/fluffy-cameras-drum.md
@@ -0,0 +1,6 @@
+---
+'@crowdstrike/ember-toucan-core': patch
+'@crowdstrike/ember-toucan-form': patch
+---
+
+Add a lock icon to readonly and disabled states for all form components.
diff --git a/docs/components/checkbox-field/index.md b/docs/components/checkbox-field/index.md
@@ -204,7 +204,7 @@ Target the error block via `data-error`.
 <div class='mb-4 w-64'>
   <Form::Fields::Checkbox
   >
-    <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+    <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
     <:hint>Select <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::Checkbox>
 </div>

diff --git a/docs/components/checkbox-group-field/index.md b/docs/components/checkbox-group-field/index.md
@@ -237,7 +237,7 @@ Consumers have direct access to the underlying [checkbox element](https://develo
       <group.CheckboxField @label='Option 2' @value='option-2' />
       <group.CheckboxField @label='Option 3' @value='option-3' />
     </:default>
-    <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+    <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
     <:hint>Select an option <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::CheckboxGroup>
 </div>

diff --git a/docs/components/file-input-field/index.md b/docs/components/file-input-field/index.md
@@ -250,7 +250,7 @@ Target the trash icon button via `data-delete-file`.
     @deleteLabel='Delete file'
     @trigger='Browse Files'
   >
-  <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+  <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
   <:hint>Hint text <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::FileInput>
 </div>

diff --git a/docs/components/input-field/index.md b/docs/components/input-field/index.md
@@ -177,7 +177,7 @@ Target the error block via `data-error`.
 <div class='mb-4 w-64'>
   <Form::Fields::Input
   >
-  <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+  <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
   <:hint>Hint text <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::Input>
 </div>

diff --git a/docs/components/radio-field/index.md b/docs/components/radio-field/index.md
@@ -186,7 +186,7 @@ Target the hint block via `data-hint`.
     @name='options-b'
     @value='option-1'
   >
-  <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+  <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
   <:hint>Hint text <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::Radio>
 </div>

diff --git a/docs/components/radio-group-field/index.md b/docs/components/radio-group-field/index.md
@@ -245,7 +245,7 @@ Consumers have direct access to the underlying [radio element](https://developer
       <group.RadioField @label='Option 2' @value='option-2' />
       <group.RadioField @label='Option 3' @value='option-3' />
     </:default>
-  <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+  <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
   <:hint>Select an option <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::RadioGroup>
 </div>

diff --git a/docs/components/textarea-field/index.md b/docs/components/textarea-field/index.md
@@ -198,7 +198,7 @@ Target the error block via `data-error`.
 <div class='mb-4 w-64'>
   <Form::Fields::Textarea
   >
-  <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+  <:label>Label <svg class="inline w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
   <:hint>Select an option <a href="https://www.crowdstrike.com/">link</a></:hint>
   </Form::Fields::Textarea>
 </div>
@@ -242,7 +242,7 @@ Target the error block via `data-error`.
   />
 </div>
 
-### TextareaField with character count 
+### TextareaField with character count
 
 <div class='mb-4 w-64'>
   <Form::Fields::Textarea
@@ -256,7 +256,7 @@ Target the error block via `data-error`.
   </Form::Fields::Textarea>
 </div>
 
-### TextareaField with character count with a single error 
+### TextareaField with character count with a single error
 
 <div class='mb-4 w-64'>
   <Form::Fields::Textarea
@@ -271,7 +271,7 @@ Target the error block via `data-error`.
   </Form::Fields::Textarea>
 </div>
 
-### TextareaField with character count with multiple errors 
+### TextareaField with character count with multiple errors
 
 <div class='mb-4 w-64'>
   <Form::Fields::Textarea

diff --git a/packages/ember-toucan-core/src/-private/components/lock-icon.hbs b/packages/ember-toucan-core/src/-private/components/lock-icon.hbs
@@ -0,0 +1,19 @@
+<svg
+  width="12"
+  height="12"
+  viewBox="0 0 12 12"
+  fill="currentColor"
+  aria-hidden="true"
+  class="text-disabled"
+  data-lock-icon
+  ...attributes
+>
+  <g>
+    <path d="M5.5 6v3h1V6h-1Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3 3.5V3a3 3 0 0 1 6 0v.5h.5A1.5 1.5 0 0 1 11 5v5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 1 10V5a1.5 1.5 0 0 1 1.5-1.5H3ZM4 3a2 2 0 1 1 4 0v.5H4V3ZM2 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-7A.5.5 0 0 1 2 10V5Z"
+    />
+  </g>
+</svg>
diff --git a/packages/ember-toucan-core/src/-private/components/lock-icon.ts b/packages/ember-toucan-core/src/-private/components/lock-icon.ts
@@ -0,0 +1,11 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export interface ToucanLockIconComponentSignature {
+  Element: SVGElement;
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+}
+
+export default templateOnlyComponent<ToucanLockIconComponentSignature>();
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
@@ -15,12 +15,19 @@
         )
       )
     }}
-      <legend class="type-md-tight text-body-and-labels block" data-label>
+      <legend
+        class="type-md-tight text-body-and-labels flex items-center gap-1.5"
+        data-label
+      >
         {{#if (has-block "label")}}
           {{yield to="label"}}
         {{else}}
           {{@label}}
         {{/if}}
+
+        {{#if this.isReadOnlyOrDisabled}}
+          <this.LockIcon />
+        {{/if}}
       </legend>
     {{/if}}
 
@@ -52,6 +59,7 @@
             isDisabled=@isDisabled
             isReadOnly=@isReadOnly
             selectedValues=@value
+            isGrouped=true
           )
         )
       }}

diff --git a/packages/ember-toucan-core/src/components/form/fields/checkbox-group.ts b/packages/ember-toucan-core/src/components/form/fields/checkbox-group.ts
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
 import assertBlockOrArgumentExists from '../../../-private/assert-block-or-argument-exists';
+import LockIcon from '../../../-private/components/lock-icon';
 import CheckboxFieldComponent from './checkbox';
 
 import type { AssertBlockOrArg } from '../../../-private/assert-block-or-argument-exists';
@@ -74,6 +75,7 @@ export interface ToucanFormCheckboxGroupFieldComponentSignature {
 
 export default class ToucanFormCheckboxGroupFieldComponent extends Component<ToucanFormCheckboxGroupFieldComponentSignature> {
   CheckboxFieldComponent = CheckboxFieldComponent;
+  LockIcon = LockIcon;
 
   assertBlockOrArgumentExists = ({
     blockExists,
@@ -83,6 +85,10 @@ export default class ToucanFormCheckboxGroupFieldComponent extends Component<Tou
   }: AssertBlockOrArg) =>
     assertBlockOrArgumentExists({ blockExists, argName, arg, isRequired });
 
+  get isReadOnlyOrDisabled() {
+    return this.args?.isDisabled || this.args?.isReadOnly;
+  }
+
   @action
   handleInput(_: boolean, e: Event | InputEvent): void {
     let value = this.args.value ? [...this.args.value] : [];

diff --git a/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs b/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs
@@ -37,7 +37,7 @@
             )
           }}
             <span
-              class="type-md-tight block leading-4
+              class="type-md-tight flex items-center gap-1.5 leading-4
                 {{if @isDisabled 'text-disabled' 'text-titles-and-attributes'}}"
               data-label
             >
@@ -46,6 +46,10 @@
               {{else}}
                 {{@label}}
               {{/if}}
+
+              {{#if this.isDisabledOrDisabledAndNotInAGroup}}
+                <this.LockIcon />
+              {{/if}}
             </span>
           {{/if}}
 

diff --git a/packages/ember-toucan-core/src/components/form/fields/checkbox.ts b/packages/ember-toucan-core/src/components/form/fields/checkbox.ts
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
 import assertBlockOrArgumentExists from '../../../-private/assert-block-or-argument-exists';
+import LockIcon from '../../../-private/components/lock-icon';
 
 import type { AssertBlockOrArg } from '../../../-private/assert-block-or-argument-exists';
 import type { ErrorMessage } from '../../../-private/types';
@@ -42,6 +43,14 @@ export interface ToucanFormCheckboxFieldComponentSignature {
      */
     isIndeterminate?: ToucanFormCheckboxControlComponentSignature['Args']['isIndeterminate'];
 
+    /**
+     * Helps us determine if we are in a checkbox-group or not. This should only be applied internally
+     * when using CheckboxGroup.
+     *
+     * @internal
+     */
+    isGrouped?: boolean;
+
     /**
      * Provide a string to this argument to render inside of the label tag.
      */
@@ -88,6 +97,8 @@ export interface ToucanFormCheckboxFieldComponentSignature {
 }
 
 export default class ToucanFormCheckboxFieldComponent extends Component<ToucanFormCheckboxFieldComponentSignature> {
+  LockIcon = LockIcon;
+
   assertBlockOrArgumentExists = ({
     blockExists,
     argName,
@@ -119,4 +130,19 @@ export default class ToucanFormCheckboxFieldComponent extends Component<ToucanFo
 
     return this.args.selectedValues?.includes(this.args.value);
   }
+
+  /**
+   * We want to add a lock icon when a checkbox-field is used by itself and is disabled
+   * or readonly, but we do *not* want that icon rendered when we are inside of a
+   * checkbox group.
+   */
+  get isDisabledOrDisabledAndNotInAGroup() {
+    let { isDisabled, isGrouped, isReadOnly } = this.args;
+
+    if (isGrouped) {
+      return false;
+    }
+
+    return isDisabled || isReadOnly;
+  }
 }
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
@@ -14,12 +14,16 @@
           )
         )
       }}
-        <span data-label>
+        <span class="flex items-center gap-1.5" data-label>
           {{#if (has-block "label")}}
             {{yield to="label"}}
           {{else}}
             {{@label}}
           {{/if}}
+
+          {{#if this.isReadOnlyOrDisabled}}
+            <this.LockIcon />
+          {{/if}}
         </span>
       {{/if}}
 

diff --git a/packages/ember-toucan-core/src/components/form/fields/file-input.ts b/packages/ember-toucan-core/src/components/form/fields/file-input.ts
@@ -3,6 +3,7 @@ import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 
 import assertBlockOrArgumentExists from '../../../-private/assert-block-or-argument-exists';
+import LockIcon from '../../../-private/components/lock-icon';
 
 import type { AssertBlockOrArg } from '../../../-private/assert-block-or-argument-exists';
 import type { ErrorMessage } from '../../../-private/types';
@@ -81,6 +82,8 @@ export interface ToucanFormFileInputFieldComponentSignature {
 }
 
 export default class ToucanFormFileInputFieldComponent extends Component<ToucanFormFileInputFieldComponentSignature> {
+  LockIcon = LockIcon;
+
   assertBlockOrArgumentExists = ({
     blockExists,
     argName,
@@ -110,6 +113,10 @@ export default class ToucanFormFileInputFieldComponent extends Component<ToucanF
     return Boolean(this.args?.error);
   }
 
+  get isReadOnlyOrDisabled() {
+    return this.args?.isDisabled || this.args?.isReadOnly;
+  }
+
   @action
   handleChange(field: { id: string }) {
     if (this.args.isReadOnly) {

diff --git a/packages/ember-toucan-core/src/components/form/fields/input.hbs b/packages/ember-toucan-core/src/components/form/fields/input.hbs
@@ -13,12 +13,20 @@
         )
       )
     }}
-      <field.Label for={{field.id}} data-label>
+      <field.Label
+        class="flex items-center gap-1.5"
+        for={{field.id}}
+        data-label
+      >
         {{#if (has-block "label")}}
           {{yield to="label"}}
         {{else}}
           {{@label}}
         {{/if}}
+
+        {{#if this.isReadOnlyOrDisabled}}
+          <this.LockIcon />
+        {{/if}}
       </field.Label>
     {{/if}}
 

diff --git a/packages/ember-toucan-core/src/components/form/fields/input.ts b/packages/ember-toucan-core/src/components/form/fields/input.ts
@@ -4,6 +4,7 @@ import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 
 import assertBlockOrArgumentExists from '../../../-private/assert-block-or-argument-exists';
+import LockIcon from '../../../-private/components/lock-icon';
 import CharacterCount from '../../../components/form/controls/character-count';
 
 import type { AssertBlockOrArg } from '../../../-private/assert-block-or-argument-exists';
@@ -69,6 +70,7 @@ export default class ToucanFormInputFieldComponent extends Component<ToucanFormI
   @tracked count = this.args.value?.length ?? 0;
 
   CharacterCount = CharacterCount;
+  LockIcon = LockIcon;
 
   assertBlockOrArgumentExists = ({
     blockExists,
@@ -78,6 +80,14 @@ export default class ToucanFormInputFieldComponent extends Component<ToucanFormI
   }: AssertBlockOrArg) =>
     assertBlockOrArgumentExists({ blockExists, argName, arg, isRequired });
 
+  get hasError() {
+    return Boolean(this.args?.error);
+  }
+
+  get isReadOnlyOrDisabled() {
+    return this.args?.isDisabled || this.args?.isReadOnly;
+  }
+
   @action
   handleCount(event: Event | InputEvent): void {
     assert(
@@ -87,8 +97,4 @@ export default class ToucanFormInputFieldComponent extends Component<ToucanFormI
 
     this.count = event.target?.value.length ?? 0;
   }
-
-  get hasError() {
-    return Boolean(this.args?.error);
-  }
 }
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
@@ -18,12 +18,19 @@
         )
       )
     }}
-      <legend class="type-md-tight text-body-and-labels block" data-label>
+      <legend
+        class="type-md-tight text-body-and-labels flex items-center gap-1.5"
+        data-label
+      >
         {{#if (has-block "label")}}
           {{yield to="label"}}
         {{else}}
           {{@label}}
         {{/if}}
+
+        {{#if this.isReadOnlyOrDisabled}}
+          <this.LockIcon />
+        {{/if}}
       </legend>
     {{/if}}