Skip to content

Commit e31f5b3

Browse files
ynotdrawynotdraw
authored
Merge pull request #145 from CrowdStrike/toucan-form-readonly-states
toucan-form: Add readonly support
2 parents a103022 + 752e6b1 commit e31f5b3

11 files changed

+319
-0
lines changed

‎.changeset/long-months-leave.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
'@crowdstrike/ember-toucan-form': patch
3+
---
4+
5+
Added `@isReadOnly` component argument support.
6+
7+
```hbs
8+
<ToucanForm @data={{data}} as |form|>
9+
<form.Textarea
10+
@label='Comment'
11+
@name='comment'
12+
@isReadOnly={{true}}
13+
data-textarea
14+
/>
15+
<form.Input
16+
@label='Input'
17+
@name='firstName'
18+
@isReadOnly={{true}}
19+
data-input
20+
/>
21+
<form.Checkbox
22+
@label='Terms'
23+
@name='termsAndConditions'
24+
@isReadOnly={{true}}
25+
data-checkbox
26+
/>
27+
28+
<form.RadioGroup
29+
@label='Radios'
30+
@name='radio'
31+
@isReadOnly={{true}}
32+
as |group|
33+
>
34+
<group.RadioField @label='option-1' @value='option-1' data-radio-1 />
35+
<group.RadioField @label='option-2' @value='option-2' data-radio-2 />
36+
</form.RadioGroup>
37+
38+
<form.CheckboxGroup
39+
@label='Checkboxes'
40+
@name='checkboxes'
41+
@isReadOnly={{true}}
42+
as |group|
43+
>
44+
<group.CheckboxField
45+
@label='Option 1'
46+
@value='option-1'
47+
data-checkbox-group-1
48+
/>
49+
<group.CheckboxField
50+
@label='Option 2'
51+
@value='option-2'
52+
data-checkbox-group-2
53+
/>
54+
<group.CheckboxField
55+
@label='Option 3'
56+
@value='option-3'
57+
data-checkbox-group-3
58+
/>
59+
</form.CheckboxGroup>
60+
</ToucanForm>
61+
```
62+
63+
For CheckboxGroup and RadioGroup, the argument can be set on the root component, or on individual CheckboxFields / RadioFields directly.

‎packages/ember-toucan-form/src/-private/checkbox-field.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
{{! @glint-expect-error }}
99
@onChange={{field.setValue}}
1010
@isDisabled={{@isDisabled}}
11+
@isReadOnly={{@isReadOnly}}
1112
@rootTestSelector={{@rootTestSelector}}
1213
name={{@name}}
1314
...attributes

‎packages/ember-toucan-form/src/-private/checkbox-group-field.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
{{! @glint-expect-error }}
99
@onChange={{field.setValue}}
1010
@isDisabled={{@isDisabled}}
11+
@isReadOnly={{@isReadOnly}}
1112
@rootTestSelector={{@rootTestSelector}}
1213
@name={{@name}}
1314
...attributes

‎packages/ember-toucan-form/src/-private/input-field.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
{{! @glint-expect-error }}
99
@onChange={{field.setValue}}
1010
@isDisabled={{@isDisabled}}
11+
@isReadOnly={{@isReadOnly}}
1112
@rootTestSelector={{@rootTestSelector}}
1213
name={{@name}}
1314
...attributes

‎packages/ember-toucan-form/src/-private/radio-group-field.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
{{! @glint-expect-error }}
99
@onChange={{field.setValue}}
1010
@isDisabled={{@isDisabled}}
11+
@isReadOnly={{@isReadOnly}}
1112
@rootTestSelector={{@rootTestSelector}}
1213
@name={{@name}}
1314
...attributes

‎packages/ember-toucan-form/src/-private/textarea-field.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
{{! @glint-expect-error }}
99
@onChange={{field.setValue}}
1010
@isDisabled={{@isDisabled}}
11+
@isReadOnly={{@isReadOnly}}
1112
@rootTestSelector={{@rootTestSelector}}
1213
name={{@name}}
1314
...attributes

‎test-app/tests/integration/components/toucan-form/form-checkbox-group-test.gts

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
2+
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
3+
import { render } from '@ember/test-helpers';
4+
import { module, test } from 'qunit';
5+
import { setupRenderingTest } from 'test-app/tests/helpers';
6+
7+
import ToucanForm from '@crowdstrike/ember-toucan-form/components/toucan-form';
8+
9+
interface TestData {
10+
checkboxes?: Array<string>;
11+
}
12+
13+
module(
14+
'Integration | Component | ToucanForm | CheckboxGroup',
15+
function (hooks) {
16+
setupRenderingTest(hooks);
17+
18+
test('it sets the readonly attribute with `@isReadOnly` at the root', async function (assert) {
19+
const data: TestData = {
20+
checkboxes: [],
21+
};
22+
23+
await render(<template>
24+
<ToucanForm @data={{data}} as |form|>
25+
<form.CheckboxGroup
26+
@label="Checkboxes"
27+
@name="checkboxes"
28+
@isReadOnly={{true}}
29+
as |group|
30+
>
31+
<group.CheckboxField
32+
@label="Option 1"
33+
@value="option-1"
34+
data-checkbox-group-1
35+
/>
36+
<group.CheckboxField
37+
@label="Option 2"
38+
@value="option-2"
39+
data-checkbox-group-2
40+
/>
41+
<group.CheckboxField
42+
@label="Option 3"
43+
@value="option-3"
44+
data-checkbox-group-3
45+
/>
46+
</form.CheckboxGroup>
47+
</ToucanForm>
48+
</template>);
49+
50+
assert.dom('[data-checkbox-group-1]').hasAttribute('readonly');
51+
assert.dom('[data-checkbox-group-2]').hasAttribute('readonly');
52+
assert.dom('[data-checkbox-group-3]').hasAttribute('readonly');
53+
});
54+
55+
test('it sets the readonly attribute with `@isReadOnly` on individual checkboxes', async function (assert) {
56+
const data: TestData = {
57+
checkboxes: [],
58+
};
59+
60+
await render(<template>
61+
<ToucanForm @data={{data}} as |form|>
62+
<form.CheckboxGroup @label="Checkboxes" @name="checkboxes" as |group|>
63+
<group.CheckboxField
64+
@label="Option 1"
65+
@value="option-1"
66+
data-checkbox-group-1
67+
/>
68+
<group.CheckboxField
69+
@label="Option 2"
70+
@value="option-2"
71+
@isReadOnly={{true}}
72+
data-checkbox-group-2
73+
/>
74+
<group.CheckboxField
75+
@label="Option 3"
76+
@value="option-3"
77+
data-checkbox-group-3
78+
/>
79+
</form.CheckboxGroup>
80+
</ToucanForm>
81+
</template>);
82+
83+
assert.dom('[data-checkbox-group-1]').hasNoAttribute('readonly');
84+
assert.dom('[data-checkbox-group-2]').hasAttribute('readonly');
85+
assert.dom('[data-checkbox-group-3]').hasNoAttribute('readonly');
86+
});
87+
}
88+
);

‎test-app/tests/integration/components/toucan-form/form-checkbox-test.gts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
2+
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
3+
import { render } from '@ember/test-helpers';
4+
import { module, test } from 'qunit';
5+
import { setupRenderingTest } from 'test-app/tests/helpers';
6+
7+
import ToucanForm from '@crowdstrike/ember-toucan-form/components/toucan-form';
8+
9+
interface TestData {
10+
checked?: boolean;
11+
}
12+
13+
module('Integration | Component | ToucanForm | Checkbox', function (hooks) {
14+
setupRenderingTest(hooks);
15+
16+
test('it sets the readonly attribute with `@isReadOnly`', async function (assert) {
17+
const data: TestData = {
18+
checked: false,
19+
};
20+
21+
await render(<template>
22+
<ToucanForm @data={{data}} as |form|>
23+
<form.Checkbox
24+
@label="Checked"
25+
@name="checked"
26+
@isReadOnly={{true}}
27+
data-checkbox
28+
/>
29+
</ToucanForm>
30+
</template>);
31+
32+
assert.dom('[data-checkbox]').hasAttribute('readonly');
33+
});
34+
});

‎test-app/tests/integration/components/toucan-form/form-input-test.gts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
2+
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
3+
import { render } from '@ember/test-helpers';
4+
import { module, test } from 'qunit';
5+
import { setupRenderingTest } from 'test-app/tests/helpers';
6+
7+
import ToucanForm from '@crowdstrike/ember-toucan-form/components/toucan-form';
8+
9+
interface TestData {
10+
text?: string;
11+
}
12+
13+
module('Integration | Component | ToucanForm | Input', function (hooks) {
14+
setupRenderingTest(hooks);
15+
16+
test('it sets the readonly attribute with `@isReadOnly`', async function (assert) {
17+
const data: TestData = {
18+
text: 'text',
19+
};
20+
21+
await render(<template>
22+
<ToucanForm @data={{data}} as |form|>
23+
<form.Input
24+
@label="Text"
25+
@name="text"
26+
@isReadOnly={{true}}
27+
data-input
28+
/>
29+
</ToucanForm>
30+
</template>);
31+
32+
assert.dom('[data-input]').hasAttribute('readonly');
33+
});
34+
});

‎test-app/tests/integration/components/toucan-form/form-radio-group-test.gts

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
2+
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
3+
import { render } from '@ember/test-helpers';
4+
import { module, test } from 'qunit';
5+
import { setupRenderingTest } from 'test-app/tests/helpers';
6+
7+
import ToucanForm from '@crowdstrike/ember-toucan-form/components/toucan-form';
8+
9+
interface TestData {
10+
radio?: string;
11+
}
12+
13+
module('Integration | Component | ToucanForm | RadioGroup', function (hooks) {
14+
setupRenderingTest(hooks);
15+
16+
test('it sets the readonly attribute with `@isReadOnly` at the root', async function (assert) {
17+
const data: TestData = {
18+
radio: 'option-2',
19+
};
20+
21+
await render(<template>
22+
<ToucanForm @data={{data}} as |form|>
23+
<form.RadioGroup
24+
@label="Radios"
25+
@name="radio"
26+
@isReadOnly={{true}}
27+
as |group|
28+
>
29+
<group.RadioField @label="option-1" @value="option-1" data-radio-1 />
30+
<group.RadioField @label="option-2" @value="option-2" data-radio-2 />
31+
</form.RadioGroup>
32+
</ToucanForm>
33+
</template>);
34+
35+
assert.dom('[data-radio-1]').hasAttribute('readonly');
36+
assert.dom('[data-radio-2]').hasAttribute('readonly');
37+
});
38+
39+
test('it sets the readonly attribute with `@isReadOnly` on individual radios', async function (assert) {
40+
const data: TestData = {
41+
radio: 'option-2',
42+
};
43+
44+
await render(<template>
45+
<ToucanForm @data={{data}} as |form|>
46+
<form.RadioGroup @label="Radios" @name="radio" as |group|>
47+
<group.RadioField @label="option-1" @value="option-1" data-radio-1 />
48+
<group.RadioField
49+
@label="option-2"
50+
@value="option-2"
51+
@isReadOnly={{true}}
52+
data-radio-2
53+
/>
54+
</form.RadioGroup>
55+
</ToucanForm>
56+
</template>);
57+
58+
assert.dom('[data-radio-1]').hasNoAttribute('readonly');
59+
assert.dom('[data-radio-2]').hasAttribute('readonly');
60+
});
61+
});

‎test-app/tests/integration/components/toucan-form/form-textarea-test.gts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
2+
/* eslint-disable simple-import-sort/imports,padding-line-between-statements,decorator-position/decorator-position -- Can't fix these manually, without --fix working in .gts */
3+
import { render } from '@ember/test-helpers';
4+
import { module, test } from 'qunit';
5+
import { setupRenderingTest } from 'test-app/tests/helpers';
6+
7+
import ToucanForm from '@crowdstrike/ember-toucan-form/components/toucan-form';
8+
9+
interface TestData {
10+
text?: string;
11+
}
12+
13+
module('Integration | Component | ToucanForm | Textarea', function (hooks) {
14+
setupRenderingTest(hooks);
15+
16+
test('it sets the readonly attribute with `@isReadOnly`', async function (assert) {
17+
const data: TestData = {
18+
text: 'multi-line text',
19+
};
20+
21+
await render(<template>
22+
<ToucanForm @data={{data}} as |form|>
23+
<form.Textarea
24+
@label="Text"
25+
@name="text"
26+
@isReadOnly={{true}}
27+
data-textarea
28+
/>
29+
</ToucanForm>
30+
</template>);
31+
32+
assert.dom('[data-textarea]').hasAttribute('readonly');
33+
});
34+
});

0 commit comments

Comments
 (0)