Skip to content

Fix Hds::Form::Label argument for with boolean values #2863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 9, 2025
Merged

Fix Hds::Form::Label argument for with boolean values #2863

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bbd6988
forced `for` attribute in `Hds::Form::Label` to be a string
didoo May 9, 2025
0496be7
added special use case for `Hds::Form::Radio::Group` with boolean val…
didoo May 9, 2025
4d8d2af
added integration test for `Hds::Form::Label` for use case when `@con…
didoo May 9, 2025
b61a9da
changeset
didoo May 9, 2025
8f55053
added missing test for the radio field group
didoo May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/nine-fans-cough.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hashicorp/design-system-components": patch
---

`Form::Label` - Forced the `for` HTML attribute to be converted to a string
2 changes: 1 addition & 1 deletion packages/components/src/components/hds/form/label/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}
<label class={{this.classNames}} for={{@controlId}} id={{this.id}} ...attributes>
<label class={{this.classNames}} for="{{@controlId}}" id={{this.id}} ...attributes>
{{yield}}
<Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
</label>
17 changes: 17 additions & 0 deletions showcase/app/templates/components/form/radio.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,4 +327,21 @@
</SF.Item>
</Shw::Flex>

<Shw::Text::H3>Special cases</Shw::Text::H3>

<Shw::Flex as |SF|>
<SF.Item as |SFI|>
<SFI.Label>With <code>true/false</code> as boolean values</SFI.Label>
<Hds::Form::Radio::Group @name="control-booleans" as |G|>
{{#let (array true false) as |bools|}}
{{#each bools as |bool|}}
<G.RadioField @id={{bool}} @value={{bool}} as |F|>
<F.Label>{{bool}}</F.Label>
</G.RadioField>
{{/each}}
{{/let}}
</Hds::Form::Radio::Group>
</SF.Item>
</Shw::Flex>

</section>
10 changes: 10 additions & 0 deletions showcase/tests/integration/components/hds/form/label/index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,16 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
assert.dom('#test-form-label').hasAttribute('for', 'my-control-id');
});

test('it renders a label with the "for" attribute even if the @controlId argument is a boolean', async function (assert) {
await render(
hbs`<Hds::Form::Label @controlId={{true}} id="test-form-label-true">True</Hds::Form::Label>
<Hds::Form::Label @controlId={{false}} id="test-form-label-false">False</Hds::Form::Label>
`
);
assert.dom('#test-form-label-true').hasAttribute('for', 'true');
assert.dom('#test-form-label-false').hasAttribute('for', 'false');
});

// ID

test('it renders a label with the correct "id" attribute if the @controlId argument is provided', async function (assert) {
Expand Down