Skip to content

Commit 603f80e

Browse files
authored
feat: CrowdStrike/add_labels_and_error_blocks_to_fields
Added labels and hint blocks to fields Removed Fieldset component and related docs, tests
2 parents e25d3ef + 26b324f commit 603f80e

39 files changed

+1285
-502
lines changed

.changeset/famous-foxes-joke.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@crowdstrike/ember-toucan-core': minor
3+
---
4+
5+
- Added label and hint named blocks to all the Field components.
6+
- Removed Fieldset.

docs/components/checkbox-field/index.md

+69-3
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,71 @@ Provides an underlying checkbox element building on top of the Field component.
44

55
## Label
66

7-
Provide a string to `@label` to render the text into the `<label>` of the Field.
7+
Required.
8+
9+
Use either the `@label` component argument or the `:label` named block.
10+
11+
Provide a string to the `@label` component argument or content to the `:label` named block to render into the Label section.
12+
13+
### @label
14+
15+
```hbs template
16+
<Form::Fields::Checkbox
17+
@label='Label here'
18+
@name='options'
19+
@value={{this.groupValue}}
20+
@onChange={{this.updateValue}}
21+
/>
22+
```
23+
24+
### :label
25+
26+
```hbs template
27+
<Form::Fields::Checkbox
28+
@name='options'
29+
@value={{this.groupValue}}
30+
@onChange={{this.updateValue}}
31+
>
32+
<:label>Here is a label <IconButton><Tooltip /><IconButton></:label>
33+
</Form::Fields::Checkbox>
34+
```
835

936
## Hint
1037

11-
Optional. Provide a string to `@hint` to render the text into the Hint section of the Field.
38+
Optional.
39+
40+
Use either the `@hint` component argument or the `:hint` named block.
41+
42+
Provide a string to the `@hint` component argument or content to `:hint` named block to render into the Hint section.
43+
44+
### @hint
45+
46+
```hbs template
47+
<Form::Fields::Checkbox
48+
@hint='Here is a hint'
49+
@name='options'
50+
@value={{this.groupValue}}
51+
@onChange={{this.updateValue}}
52+
/>
53+
```
54+
55+
### :hint
56+
57+
```hbs template
58+
<Form::Fields::Checkbox
59+
@name='options'
60+
@value={{this.groupValue}}
61+
@onChange={{this.updateValue}}
62+
>
63+
<:hint>Here is a hint <Link to='somewhere'>Link</Link></:hint>
64+
</Form::Fields::Checkbox>
65+
```
1266

1367
## Error
1468

15-
Optional. Provide a string or array of strings to `@error` to render the text into the Error section of the Field.
69+
Optional.
70+
71+
Provide a string or array of strings to `@error` to render the text into the Error section of the Field.
1672

1773
```hbs
1874
<Form::Fields::Checkbox @label='Single error' @error='Error' />
@@ -139,6 +195,16 @@ Target the error block via `data-error`.
139195
/>
140196
</div>
141197

198+
### CheckboxField with label and hint blocks
199+
200+
<div class='mb-4 w-64'>
201+
<Form::Fields::Checkbox
202+
>
203+
<: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>
204+
<:hint>Select <a href="https://www.crowdstrike.com/">link</a></:hint>
205+
</Form::Fields::Checkbox>
206+
</div>
207+
142208
### CheckboxField with label and isDisabled
143209

144210
<div class='mb-4 w-64'>

docs/components/checkbox-group-field/index.md

+78-2
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,73 @@ Provides a checkbox group to be used within forms. It yields [CheckboxFields](./
88

99
## Label
1010

11-
Provide a string to `@label` to render the text into the `<legend>` of the fieldset.
11+
Required.
12+
13+
Use either the `@label` component argument or the `:label` named block.
14+
15+
Provide a string to the `@label` component argument or content to the `:label` named block to render into the legend of the fieldset.
16+
17+
### @label
18+
19+
```hbs template
20+
<Form::Fields::CheckboxGroup
21+
@label='Label here'
22+
@name='options'
23+
@value={{this.groupValue}}
24+
@onChange={{this.updateValue}}
25+
/>
26+
```
27+
28+
### :label
29+
30+
```hbs template
31+
<Form::Fields::CheckboxGroup
32+
@name='options'
33+
@value={{this.groupValue}}
34+
@onChange={{this.updateValue}}
35+
>
36+
{{!-- default block is required here when using :label --}}
37+
<:default as |group|>
38+
{{!-- render checkboxes here --}}
39+
</:default>
40+
<:label>Here is a label <IconButton><Tooltip /><IconButton></:label>
41+
</Form::Fields::CheckboxGroup>
42+
```
1243

1344
## Hint
1445

15-
Optional. Provide a string to `@hint` to render the text into the Hint section of the fieldset.
46+
Optional.
47+
48+
Use either the `@hint` component argument or the `:hint` named block.
49+
50+
Provide a string to the `@hint` component argument or content to `:hint` named block to render into the Hint section.
51+
52+
### @hint
53+
54+
```hbs template
55+
<Form::Fields::CheckboxGroup
56+
@hint='Here is a hint'
57+
@name='options'
58+
@value={{this.groupValue}}
59+
@onChange={{this.updateValue}}
60+
/>
61+
```
62+
63+
### :hint
64+
65+
```hbs template
66+
<Form::Fields::CheckboxGroup
67+
@name='options'
68+
@value={{this.groupValue}}
69+
@onChange={{this.updateValue}}
70+
>
71+
{{! default block is required here when using :hint}}
72+
<:default as |group|>
73+
{{! render checkboxes here }}
74+
</:default>
75+
<:hint>Here is a hint <Link to='somewhere'>Link</Link></:hint>
76+
</Form::Fields::CheckboxGroup>
77+
```
1678

1779
## Error
1880

@@ -126,6 +188,20 @@ Consumers have direct access to the underlying [checkbox element](https://develo
126188
</Form::Fields::CheckboxGroup>
127189
</div>
128190

191+
### CheckboxGroupField with label block and hint block
192+
193+
<div class='mb-4 w-64'>
194+
<Form::Fields::CheckboxGroup @name='options-b'>
195+
<:default as |group|>
196+
<group.CheckboxField @label='Option 1' @value='option-1' />
197+
<group.CheckboxField @label='Option 2' @value='option-2' />
198+
<group.CheckboxField @label='Option 3' @value='option-3' />
199+
</:default>
200+
<: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>
201+
<:hint>Select an option <a href="https://www.crowdstrike.com/">link</a></:hint>
202+
</Form::Fields::CheckboxGroup>
203+
</div>
204+
129205
### CheckboxGroupField with label and error
130206

131207
<div class='mb-4 w-64'>

docs/components/fieldset/demo/base-demo.md

-16
This file was deleted.

docs/components/fieldset/index.md

-105
This file was deleted.

0 commit comments

Comments
 (0)