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(
Date: Tue, 20 Jun 2023 19:48:13 -0400
Subject: [PATCH 11/18] Add lock icon for read-only states too
---
.../src/components/form/fields/checkbox-group.hbs | 4 ++--
.../src/components/form/fields/checkbox-group.ts | 4 ++++
.../src/components/form/fields/checkbox.hbs | 4 ++--
.../src/components/form/fields/checkbox.ts | 15 +++++++++++----
.../src/components/form/fields/file-input.hbs | 4 ++--
.../src/components/form/fields/file-input.ts | 4 ++++
.../src/components/form/fields/input.hbs | 4 ++--
.../src/components/form/fields/input.ts | 12 ++++++++----
.../src/components/form/fields/radio-group.hbs | 4 ++--
.../src/components/form/fields/radio-group.ts | 4 ++++
.../src/components/form/fields/textarea.hbs | 4 ++--
.../src/components/form/fields/textarea.ts | 12 ++++++++----
.../components/checkbox-field-test.gts | 4 +++-
.../components/checkbox-group-field-test.gts | 4 +++-
.../components/file-input-field-test.gts | 4 +++-
.../integration/components/input-field-test.gts | 4 +++-
.../components/radio-group-field-test.gts | 4 +++-
.../components/textarea-field-test.gts | 4 +++-
18 files changed, 69 insertions(+), 30 deletions(-)
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 fe319044..e8bb15d0 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
@@ -22,8 +22,8 @@
{{@label}}
{{/if}}
- {{#if @isDisabled}}
-
+ {{#if this.isReadOnlyOrDisabled}}
+
{{/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 7c3262ae..8f2f28f9 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
@@ -85,6 +85,10 @@ export default class ToucanFormCheckboxGroupFieldComponent extends Component
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
index 838f60b0..af6c6f04 100644
--- a/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs
+++ b/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs
@@ -47,8 +47,8 @@
{{@label}}
{{/if}}
- {{#if this.isDisabledAndNotInAGroup}}
-
+ {{#if this.isDisabledOrDisabledAndNotInAGroup}}
+
{{/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 cf8670c3..07d16d1b 100644
--- a/packages/ember-toucan-core/src/components/form/fields/checkbox.ts
+++ b/packages/ember-toucan-core/src/components/form/fields/checkbox.ts
@@ -132,10 +132,17 @@ export default class ToucanFormCheckboxFieldComponent extends Component
+ {{#if this.isReadOnlyOrDisabled}}
+
{{/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 6e6c20ce..a011d4d1 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
@@ -113,6 +113,10 @@ export default class ToucanFormFileInputFieldComponent extends Component
+ {{#if this.isReadOnlyOrDisabled}}
+
{{/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 f0656359..334f2179 100644
--- a/packages/ember-toucan-core/src/components/form/fields/input.ts
+++ b/packages/ember-toucan-core/src/components/form/fields/input.ts
@@ -80,6 +80,14 @@ export default class ToucanFormInputFieldComponent extends Component
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(
@@ -89,8 +97,4 @@ export default class ToucanFormInputFieldComponent extends Component
+ {{#if this.isReadOnlyOrDisabled}}
+
{{/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 0b250ab7..829d7a07 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
@@ -86,6 +86,10 @@ export default class ToucanFormRadioGroupFieldComponent extends Component
assertBlockOrArgumentExists({ blockExists, argName, arg, isRequired });
+ get isReadOnlyOrDisabled() {
+ return this.args?.isDisabled || this.args?.isReadOnly;
+ }
+
@action
handleInput(value: string, e: Event | InputEvent): void {
this.args.onChange?.(value, e);
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 e6b0fe1e..f284a621 100644
--- a/packages/ember-toucan-core/src/components/form/fields/textarea.hbs
+++ b/packages/ember-toucan-core/src/components/form/fields/textarea.hbs
@@ -20,8 +20,8 @@
{{@label}}
{{/if}}
- {{#if @isDisabled}}
-
+ {{#if this.isReadOnlyOrDisabled}}
+
{{/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 d836d3dd..6f91eebd 100644
--- a/packages/ember-toucan-core/src/components/form/fields/textarea.ts
+++ b/packages/ember-toucan-core/src/components/form/fields/textarea.ts
@@ -87,6 +87,14 @@ export default class ToucanFormTextareaFieldComponent extends Component);
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(
);
assert.dom('[data-file-input-field]').hasAttribute('readonly');
+
+ assert.dom('[data-lock-icon]').exists();
});
test('it spreads attributes to the underlying file-input-field', 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 ae41a68f..03130de4 100644
--- a/test-app/tests/integration/components/input-field-test.gts
+++ b/test-app/tests/integration/components/input-field-test.gts
@@ -228,11 +228,13 @@ module('Integration | Component | Fields | Input', function (hooks) {
assert.dom('[data-lock-icon]').exists();
});
- test('it sets readonly on the input using `@isReadOnly`', async function (assert) {
+ test('it sets readonly on the input using `@isReadOnly` and renders a lock icon', async function (assert) {
await render(
);
assert.dom('[data-input]').hasAttribute('readonly');
+
+ assert.dom('[data-lock-icon]').exists();
});
});
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 7f646f98..8f47d827 100644
--- a/test-app/tests/integration/components/radio-group-field-test.gts
+++ b/test-app/tests/integration/components/radio-group-field-test.gts
@@ -151,7 +151,7 @@ module('Integration | Component | Fields | RadioGroup', function (hooks) {
assert.dom('[data-radio-1]').hasAttribute('readonly');
});
- test('it sets readonly on all child radios using `@isReadOnly` at the root', async function (assert) {
+ test('it sets readonly on all child radios using `@isReadOnly` at the root and renders a lock icon', async function (assert) {
await render(
);
assert.dom('[data-textarea]').hasAttribute('readonly');
+
+ assert.dom('[data-lock-icon]').exists();
});
test('it spreads attributes to the underlying textarea', async function (assert) {
From d6b8be94e64965ced4e9a7c2df2a213fff09511e Mon Sep 17 00:00:00 2001
From: Tony Ward <8069555+ynotdraw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 20:04:26 -0400
Subject: [PATCH 12/18] Update lock-icon Element type
---
packages/ember-toucan-core/src/-private/components/lock-icon.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/ember-toucan-core/src/-private/components/lock-icon.ts b/packages/ember-toucan-core/src/-private/components/lock-icon.ts
index 373963bb..e5789940 100644
--- a/packages/ember-toucan-core/src/-private/components/lock-icon.ts
+++ b/packages/ember-toucan-core/src/-private/components/lock-icon.ts
@@ -1,7 +1,7 @@
import templateOnlyComponent from '@ember/component/template-only';
export interface ToucanLockIconComponentSignature {
- Element: Element;
+ Element: SVGElement;
Args: {};
Blocks: {
default: [];
From 50547ad28f6c3ea05abe7e1e86cd31891e617e36 Mon Sep 17 00:00:00 2001
From: Tony Ward <8069555+ynotdraw@users.noreply.github.com>
Date: Tue, 20 Jun 2023 20:06:01 -0400
Subject: [PATCH 13/18] Added a changeset
---
.changeset/fluffy-cameras-drum.md | 6 ++++++
1 file changed, 6 insertions(+)
create mode 100644 .changeset/fluffy-cameras-drum.md
diff --git a/.changeset/fluffy-cameras-drum.md b/.changeset/fluffy-cameras-drum.md
new file mode 100644
index 00000000..03696851
--- /dev/null
+++ 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.
From f9a52a6d43e0847377a621f30b81e024123c7ce1 Mon Sep 17 00:00:00 2001
From: Tony Ward <8069555+ynotdraw@users.noreply.github.com>
Date: Wed, 21 Jun 2023 10:31:18 -0400
Subject: [PATCH 14/18] Adjust negative margin-top
---
.../src/components/form/fields/checkbox-group.hbs | 2 +-
.../ember-toucan-core/src/components/form/fields/checkbox.hbs | 4 +++-
.../src/components/form/fields/file-input.hbs | 2 +-
.../ember-toucan-core/src/components/form/fields/input.hbs | 2 +-
.../src/components/form/fields/radio-group.hbs | 2 +-
.../ember-toucan-core/src/components/form/fields/textarea.hbs | 2 +-
6 files changed, 8 insertions(+), 6 deletions(-)
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 e8bb15d0..25c79c3a 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
@@ -23,7 +23,7 @@
{{/if}}
{{#if this.isReadOnlyOrDisabled}}
-
+
{{/if}}
{{/if}}
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 af6c6f04..09904036 100644
--- a/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs
+++ b/packages/ember-toucan-core/src/components/form/fields/checkbox.hbs
@@ -48,7 +48,9 @@
{{/if}}
{{#if this.isDisabledOrDisabledAndNotInAGroup}}
-
+
{{/if}}
{{/if}}
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 5c24cc2d..8fb54aaf 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
@@ -22,7 +22,7 @@
{{/if}}
{{#if this.isReadOnlyOrDisabled}}
-
+
{{/if}}
{{/if}}
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 c3994beb..320ae183 100644
--- a/packages/ember-toucan-core/src/components/form/fields/input.hbs
+++ b/packages/ember-toucan-core/src/components/form/fields/input.hbs
@@ -21,7 +21,7 @@
{{/if}}
{{#if this.isReadOnlyOrDisabled}}
-
+
{{/if}}
{{/if}}
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 da8bd125..3d9aee22 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
@@ -26,7 +26,7 @@
{{/if}}
{{#if this.isReadOnlyOrDisabled}}
-
+
{{/if}}
{{/if}}
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 f284a621..2effd5df 100644
--- a/packages/ember-toucan-core/src/components/form/fields/textarea.hbs
+++ b/packages/ember-toucan-core/src/components/form/fields/textarea.hbs
@@ -21,7 +21,7 @@
{{/if}}
{{#if this.isReadOnlyOrDisabled}}
-
+
{{/if}}
{{/if}}
From d7627b2c2c0e43fa46b0dff2ee0d695b8e05fb4d Mon Sep 17 00:00:00 2001
From: Tony Ward <8069555+ynotdraw@users.noreply.github.com>
Date: Mon, 26 Jun 2023 10:25:49 -0400
Subject: [PATCH 15/18] Renamed "isInAGroup" to "isGrouped"
---
.../src/components/form/fields/checkbox-group.hbs | 2 +-
.../src/components/form/fields/checkbox.ts | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
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 25c79c3a..69dc5735 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,7 +56,7 @@
isDisabled=@isDisabled
isReadOnly=@isReadOnly
selectedValues=@value
- isInAGroup=true
+ isGrouped=true
)
)
}}
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 07d16d1b..59385374 100644
--- a/packages/ember-toucan-core/src/components/form/fields/checkbox.ts
+++ b/packages/ember-toucan-core/src/components/form/fields/checkbox.ts
@@ -49,7 +49,7 @@ export interface ToucanFormCheckboxFieldComponentSignature {
*
* @internal
*/
- isInAGroup?: boolean;
+ isGrouped?: boolean;
/**
* Provide a string to this argument to render inside of the label tag.
@@ -137,9 +137,9 @@ export default class ToucanFormCheckboxFieldComponent extends Component
Date: Mon, 26 Jun 2023 10:57:20 -0400
Subject: [PATCH 16/18] Adjust lock icon + spacing
---
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/input-field/index.md | 2 +-
docs/components/radio-field/index.md | 2 +-
docs/components/radio-group-field/index.md | 2 +-
docs/components/textarea-field/index.md | 2 +-
.../src/-private/components/lock-icon.hbs | 18 ++++++++++++------
.../components/form/fields/checkbox-group.hbs | 7 +++++--
.../src/components/form/fields/checkbox.hbs | 6 ++----
.../src/components/form/fields/file-input.hbs | 4 ++--
.../src/components/form/fields/input.hbs | 8 ++++++--
.../src/components/form/fields/radio-group.hbs | 7 +++++--
.../src/components/form/fields/textarea.hbs | 8 ++++++--
14 files changed, 45 insertions(+), 27 deletions(-)
diff --git a/docs/components/checkbox-field/index.md b/docs/components/checkbox-field/index.md
index 5582715b..e0e6cb38 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 4b9ada11..02c24487 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 94c3af67..5fff82fb 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/input-field/index.md b/docs/components/input-field/index.md
index 77398ca7..17734506 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/radio-field/index.md b/docs/components/radio-field/index.md
index 5ec73e4b..f758c31d 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 6e2a590b..f0d2fe23 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
diff --git a/docs/components/textarea-field/index.md b/docs/components/textarea-field/index.md
index 68ad219c..c560c8a1 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