From 72f619645d4d5fcbfa8ed714945619860cb988bd Mon Sep 17 00:00:00 2001 From: Tony Ward <8069555+ynotdraw@users.noreply.github.com> Date: Tue, 20 Jun 2023 15:30:19 -0400 Subject: [PATCH 01/18] Fix: Adjust iconography in examples --- docs/components/input-field/index.md | 2 +- docs/components/textarea-field/index.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/input-field/index.md b/docs/components/input-field/index.md index 0833a4e2..77398ca7 100644 --- 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`.
- <:label>Label + <:label>Label <:hint>Hint text link
diff --git a/docs/components/textarea-field/index.md b/docs/components/textarea-field/index.md index ef1598b6..68ad219c 100644 --- 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`.
- <:label>Label + <:label>Label <:hint>Select an option link
@@ -242,7 +242,7 @@ Target the error block via `data-error`. /> -### TextareaField with character count +### TextareaField with character count
-### TextareaField with character count with a single error +### TextareaField with character count with a single error
-### TextareaField with character count with multiple errors +### TextareaField with character count with multiple errors
Date: Tue, 20 Jun 2023 15:30:30 -0400 Subject: [PATCH 02/18] Add lock icon component --- .../src/-private/components/lock-icon.hbs | 13 +++++++++++++ .../src/-private/components/lock-icon.ts | 11 +++++++++++ 2 files changed, 24 insertions(+) create mode 100644 packages/ember-toucan-core/src/-private/components/lock-icon.hbs create mode 100644 packages/ember-toucan-core/src/-private/components/lock-icon.ts diff --git a/packages/ember-toucan-core/src/-private/components/lock-icon.hbs b/packages/ember-toucan-core/src/-private/components/lock-icon.hbs new file mode 100644 index 00000000..564db2b3 --- /dev/null +++ b/packages/ember-toucan-core/src/-private/components/lock-icon.hbs @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/packages/ember-toucan-core/src/-private/components/lock-icon.ts b/packages/ember-toucan-core/src/-private/components/lock-icon.ts new file mode 100644 index 00000000..373963bb --- /dev/null +++ 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: Element; + Args: {}; + Blocks: { + default: []; + }; +} + +export default templateOnlyComponent(); From a4b0e66ab600faaad7eb0ae201577d4657ebb141 Mon Sep 17 00:00:00 2001 From: Tony Ward <8069555+ynotdraw@users.noreply.github.com> Date: Tue, 20 Jun 2023 15:30:40 -0400 Subject: [PATCH 03/18] Add lock to input-field --- .../ember-toucan-core/src/components/form/fields/input.hbs | 4 ++++ .../ember-toucan-core/src/components/form/fields/input.ts | 2 ++ 2 files changed, 6 insertions(+) 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 5a3e9a10..bd92ee47 100644 --- a/packages/ember-toucan-core/src/components/form/fields/input.hbs +++ b/packages/ember-toucan-core/src/components/form/fields/input.hbs @@ -19,6 +19,10 @@ {{else}} {{@label}} {{/if}} + + {{#if @isDisabled}} + + {{/if}} {{/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 index 41a7b3cc..f0656359 100644 --- 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 Date: Tue, 20 Jun 2023 15:30:51 -0400 Subject: [PATCH 04/18] Add lock to textarea-field --- .../ember-toucan-core/src/components/form/fields/textarea.hbs | 4 ++++ .../ember-toucan-core/src/components/form/fields/textarea.ts | 3 +++ 2 files changed, 7 insertions(+) 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 25a3cdbc..e6b0fe1e 100644 --- a/packages/ember-toucan-core/src/components/form/fields/textarea.hbs +++ b/packages/ember-toucan-core/src/components/form/fields/textarea.hbs @@ -19,6 +19,10 @@ {{else}} {{@label}} {{/if}} + + {{#if @isDisabled}} + + {{/if}} {{/if}} diff --git a/packages/ember-toucan-core/src/components/form/fields/textarea.ts b/packages/ember-toucan-core/src/components/form/fields/textarea.ts index 49474584..d836d3dd 100644 --- a/packages/ember-toucan-core/src/components/form/fields/textarea.ts +++ b/packages/ember-toucan-core/src/components/form/fields/textarea.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,8 @@ export default class ToucanFormTextareaFieldComponent extends Component Date: Tue, 20 Jun 2023 15:32:08 -0400 Subject: [PATCH 05/18] Add lock to checkbox-group-field --- .../src/components/form/fields/checkbox-group.hbs | 4 ++++ .../src/components/form/fields/checkbox-group.ts | 2 ++ 2 files changed, 6 insertions(+) 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 a9fc0894..533a7dfe 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 @@ -21,6 +21,10 @@ {{else}} {{@label}} {{/if}} + + {{#if @isDisabled}} + + {{/if}} {{/if}} 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 index 17d77ad8..7c3262ae 100644 --- 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 { CheckboxFieldComponent = CheckboxFieldComponent; + LockIcon = LockIcon; assertBlockOrArgumentExists = ({ blockExists, From 5aaf9722686a9d0c7e9d2e5a980a84329b393f39 Mon Sep 17 00:00:00 2001 From: Tony Ward <8069555+ynotdraw@users.noreply.github.com> Date: Tue, 20 Jun 2023 15:35:06 -0400 Subject: [PATCH 06/18] Fix: Adjust iconography in examples --- docs/components/checkbox-field/index.md | 2 +- docs/components/checkbox-group-field/index.md | 2 +- docs/components/file-input-field/index.md | 2 +- docs/components/radio-field/index.md | 2 +- docs/components/radio-group-field/index.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/checkbox-field/index.md b/docs/components/checkbox-field/index.md index 20eed1c0..5582715b 100644 --- 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`.
- <:label>Label + <:label>Label <:hint>Select link
diff --git a/docs/components/checkbox-group-field/index.md b/docs/components/checkbox-group-field/index.md index 1f232588..4b9ada11 100644 --- 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 - <:label>Label + <:label>Label <:hint>Select an option link
diff --git a/docs/components/file-input-field/index.md b/docs/components/file-input-field/index.md index 8d4eb041..94c3af67 100644 --- 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 + <:label>Label <:hint>Hint text link diff --git a/docs/components/radio-field/index.md b/docs/components/radio-field/index.md index f5908192..5ec73e4b 100644 --- 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 + <:label>Label <:hint>Hint text link diff --git a/docs/components/radio-group-field/index.md b/docs/components/radio-group-field/index.md index 8e27c86b..6e2a590b 100644 --- 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 - <:label>Label + <:label>Label <:hint>Select an option link From ec03888650283c94fd8e487b3a297bf1c7f2463e Mon Sep 17 00:00:00 2001 From: Tony Ward <8069555+ynotdraw@users.noreply.github.com> Date: Tue, 20 Jun 2023 15:35:20 -0400 Subject: [PATCH 07/18] Add lock to radio-group-field --- .../src/components/form/fields/radio-group.hbs | 4 ++++ .../src/components/form/fields/radio-group.ts | 2 ++ 2 files changed, 6 insertions(+) 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 50175dc2..c9c8e32a 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 @@ -24,6 +24,10 @@ {{else}} {{@label}} {{/if}} + + {{#if @isDisabled}} + + {{/if}} {{/if}} diff --git a/packages/ember-toucan-core/src/components/form/fields/radio-group.ts b/packages/ember-toucan-core/src/components/form/fields/radio-group.ts index 42ea9674..0b250ab7 100644 --- a/packages/ember-toucan-core/src/components/form/fields/radio-group.ts +++ b/packages/ember-toucan-core/src/components/form/fields/radio-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 RadioFieldComponent from './radio'; import type { AssertBlockOrArg } from '../../../-private/assert-block-or-argument-exists'; @@ -75,6 +76,7 @@ export interface ToucanFormRadioGroupFieldComponentSignature { export default class ToucanFormRadioGroupFieldComponent extends Component { RadioFieldComponent = RadioFieldComponent; + LockIcon = LockIcon; assertBlockOrArgumentExists = ({ blockExists, From aa435558a73fd76da45f7cc7209f4cf555b00267 Mon Sep 17 00:00:00 2001 From: Tony Ward <8069555+ynotdraw@users.noreply.github.com> Date: Tue, 20 Jun 2023 15:56:34 -0400 Subject: [PATCH 08/18] Add lock to checkbox-field --- .../components/form/fields/checkbox-group.hbs | 1 + .../src/components/form/fields/checkbox.hbs | 4 ++++ .../src/components/form/fields/checkbox.ts | 19 +++++++++++++++++++ 3 files changed, 24 insertions(+) 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 533a7dfe..fe319044 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 @@ -56,6 +56,7 @@ isDisabled=@isDisabled isReadOnly=@isReadOnly selectedValues=@value + isInAGroup=true ) ) }} 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 eea0746d..838f60b0 100644 --- a/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs +++ b/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs @@ -46,6 +46,10 @@ {{else}} {{@label}} {{/if}} + + {{#if this.isDisabledAndNotInAGroup}} + + {{/if}} {{/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 index e4487adb..cf8670c3 100644 --- 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 + */ + isInAGroup?: 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 { + LockIcon = LockIcon; + assertBlockOrArgumentExists = ({ blockExists, argName, @@ -119,4 +130,12 @@ export default class ToucanFormCheckboxFieldComponent extends Component Date: Tue, 20 Jun 2023 16:04:30 -0400 Subject: [PATCH 09/18] Add tests --- .../tests/integration/components/checkbox-field-test.gts | 6 +++++- .../integration/components/checkbox-group-field-test.gts | 6 +++++- test-app/tests/integration/components/input-field-test.gts | 6 +++++- .../tests/integration/components/radio-group-field-test.gts | 6 +++++- .../tests/integration/components/textarea-field-test.gts | 6 +++++- 5 files changed, 25 insertions(+), 5 deletions(-) diff --git a/test-app/tests/integration/components/checkbox-field-test.gts b/test-app/tests/integration/components/checkbox-field-test.gts index 564dee3e..03453666 100644 --- a/test-app/tests/integration/components/checkbox-field-test.gts +++ b/test-app/tests/integration/components/checkbox-field-test.gts @@ -34,6 +34,8 @@ module('Integration | Component | Fields | CheckboxField', function (hooks) { assert .dom('[data-root-field="test"] > [data-control]') .hasNoClass('shadow-error-outline'); + + assert.dom('[data-lock-icon]').doesNotExist(); }); test('it renders with a hint', async function (assert) { @@ -112,12 +114,14 @@ module('Integration | Component | Fields | CheckboxField', function (hooks) { ); }); - test('it disables the checkbox using `@isDisabled`', async function (assert) { + test('it disables the checkbox using `@isDisabled` and renders a lock icon', async function (assert) { await render(); assert.dom('[data-checkbox]').isDisabled(); + + assert.dom('[data-lock-icon]').exists(); }); test('it sets readonly on the checkbox using `@isReadOnly`', 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 d65534fc..bcedbb4a 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,8 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) { assert.dom('[data-group-field]').hasNoAttribute('aria-invalid'); assert.dom('[data-label]').hasText('Label'); + + assert.dom('[data-lock-icon]').doesNotExist(); }); test('it renders yielded CheckboxFields', async function (assert) { @@ -151,7 +153,7 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) { assert.dom('[data-checkbox-2]').isChecked(); }); - test('it disables the fieldset and all child checkboxes using `@isDisabled` at the root', async function (assert) { + test('it disables the fieldset and all child checkboxes using `@isDisabled` at the root and renders a lock icon', async function (assert) { await render(); assert.dom('[data-input]').isDisabled(); + + assert.dom('[data-lock-icon]').exists(); }); test('it sets readonly on the input 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 67004434..7f646f98 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,8 @@ module('Integration | Component | Fields | RadioGroup', function (hooks) { assert.dom('[data-group-field]').hasAttribute('aria-required'); assert.dom('[data-label]').hasText('Label'); + + assert.dom('[data-lock-icon]').doesNotExist(); }); test('it sets "role" by default', async function (assert) { @@ -98,7 +100,7 @@ module('Integration | Component | Fields | RadioGroup', function (hooks) { assert.dom('[data-radio-2]').isChecked(); }); - test('it disables the fieldset and all child radios using `@isDisabled` at the root', async function (assert) { + test('it disables the fieldset and all child radios using `@isDisabled` at the root and renders a lock icon', async function (assert) { await render(); assert.dom('[data-textarea]').isDisabled(); assert.dom('[data-textarea]').hasClass('text-disabled'); + + assert.dom('[data-lock-icon]').exists(); }); test('it sets readonly on the textarea using `@isReadOnly`', async function (assert) { From 718dd1d76863b24f41a0be09d7101ee71ea2c14e Mon Sep 17 00:00:00 2001 From: Tony Ward <8069555+ynotdraw@users.noreply.github.com> Date: Tue, 20 Jun 2023 16:07:39 -0400 Subject: [PATCH 10/18] Add lock icon to file-input-field --- .../src/components/form/fields/file-input.hbs | 4 ++++ .../src/components/form/fields/file-input.ts | 3 +++ .../tests/integration/components/file-input-field-test.gts | 6 +++++- 3 files changed, 12 insertions(+), 1 deletion(-) 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 88f0df26..7f530ffc 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 @@ -20,6 +20,10 @@ {{else}} {{@label}} {{/if}} + + {{#if @isDisabled}} + + {{/if}} {{/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 index bafc0a4c..6e6c20ce 100644 --- 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 { + LockIcon = LockIcon; + assertBlockOrArgumentExists = ({ blockExists, argName, 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 979c1a51..4d84bd25 100644 --- a/test-app/tests/integration/components/file-input-field-test.gts +++ b/test-app/tests/integration/components/file-input-field-test.gts @@ -76,6 +76,8 @@ module('Integration | Component | Fields | FileInput', function (hooks) { .doesNotExist( 'Expected hint block not to be displayed as an error was not provided' ); + + assert.dom('[data-lock-icon]').doesNotExist(); }); test('it renders with a hint', async function (assert) { @@ -174,7 +176,7 @@ module('Integration | Component | Fields | FileInput', function (hooks) { ); }); - test('it disables the file input using @isDisabled', async function (assert) { + test('it disables the file input using `@isDisabled` and renders a lock icon', async function (assert) { await render(); assert.dom('[data-checkbox]').hasAttribute('readonly'); + + assert.dom('[data-lock-icon]').exists(); }); test('it spreads attributes to the underlying checkbox', 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 bcedbb4a..4b1d6e85 100644 --- a/test-app/tests/integration/components/checkbox-group-field-test.gts +++ b/test-app/tests/integration/components/checkbox-group-field-test.gts @@ -222,7 +222,7 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) { assert.dom('[data-checkbox-1]').hasAttribute('readonly'); }); - test('it sets readonly on all child checkboxes using `@isReadOnly` at the root', async function (assert) { + test('it sets readonly on all child checkboxes using `@isReadOnly` at the root and renders a lock icon', async function (assert) { await render(