Skip to content

Commit

Permalink
Move legends inside fieldsets
Browse files Browse the repository at this point in the history
  • Loading branch information
@anselmbradford
anselmbradford committed Aug 2, 2024
1 parent e1dddda commit 58d078a
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 67 deletions.
89 changes: 41 additions & 48 deletions docs/pages/fieldsets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,12 @@ variation_groups:
- variations:
- variation_code_snippet: >-
<form class="o-form">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field m-form-field--checkbox">
<input class="a-checkbox" type="checkbox" id="test_checkbox_1" name="test_checkbox">
<label class="a-label" for="test_checkbox_1">Inline label</label>
Expand All @@ -42,14 +40,12 @@ variation_groups:
variation_name: Fieldset with checkboxes
- variation_code_snippet: >-
<form class="o-form">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field m-form-field--radio">
<input class="a-radio" type="radio" id="test_radio_1" name="test_radio">
<label class="a-label" for="test_radio_1">Inline label</label>
Expand All @@ -70,14 +66,12 @@ variation_groups:
- variation_name: Large target fieldset with checkboxes
variation_code_snippet: >-
<form class="o-form">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field
m-form-field--checkbox
m-form-field--lg-target">
Expand Down Expand Up @@ -109,40 +103,39 @@ variation_groups:
variation_code_snippet: >-
<fieldset class="o-form__fieldset">
<legend class="h4">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
<label class="a-label" for="is_helpful_1">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
<label class="a-label" for="is_helpful_1">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_2">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_2">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_3" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_3">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_3" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_3">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_4" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_4">Inline label
</label>
</div>
</fieldset>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_4" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_4">Inline label
</label>
</div>
</fieldset>
use_cases: ''
guidelines: ''
eyebrow: Components
Expand Down
33 changes: 16 additions & 17 deletions docs/pages/labels.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,24 @@ variation_groups:
variation_specs: ''
- variation_code_snippet: >-
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
</legend>
<legend class="h4">
Basic legend
</legend>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
<label class="a-label" for="is_helpful_1">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
<label class="a-label" for="is_helpful_1">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_2">Inline label
</label>
</div>
</fieldset>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_2">Inline label
</label>
</div>
</fieldset>
variation_description: The legend serves as the heading for a
[fieldset](https://cfpb.github.io/design-system/components/fieldsets).
variation_name: Basic legend
Expand Down
1 change: 0 additions & 1 deletion packages/cfpb-forms/src/cfpb-forms.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@

@import (less) 'atoms/form-alert.less';
@import (less) 'atoms/label.less';
@import (less) 'atoms/legend.less';
@import (less) 'atoms/range.less';
@import (less) 'atoms/select.less';
@import (less) 'atoms/text-input.less';
Expand Down
1 change: 0 additions & 1 deletion packages/cfpb-forms/src/cfpb-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ $select-height: 35px;

@import 'atoms/form-alert';
@import 'atoms/label';
@import 'atoms/legend';
@import 'atoms/range';
@import 'atoms/select';
@import 'atoms/text-input';
Expand Down

0 comments on commit 58d078a

Please sign in to comment.