Skip to content

Commit b757b95

Browse files
MaxLardenoisMaxLardenois
committed
feat: add other radio specific styles
1 parent 1282dfe commit b757b95

File tree

2 files changed

+78
-58
lines changed

2 files changed

+78
-58
lines changed

‎scss/forms/_control-item.scss‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -154,16 +154,20 @@
154154
mask-repeat: no-repeat;
155155
}
156156

157-
&:indeterminate,
158-
&:checked {
159-
color: $ouds-color-action-selected;
160-
border-color: $ouds-color-action-selected;
161-
}
162-
163157
&[type="checkbox"] {
164158
@include border-radius($form-check-input-border-radius);
165159
}
166160

161+
&[type="radio"] {
162+
@include border-radius($form-check-radio-border-radius);
163+
}
164+
165+
&:checked,
166+
&:indeterminate {
167+
color: $ouds-color-action-selected;
168+
border-color: $ouds-color-action-selected;
169+
}
170+
167171
&:indeterminate[type="checkbox"] {
168172
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-selected};
169173

@@ -185,22 +189,41 @@
185189
}
186190
}
187191

192+
&[type="radio"] {
193+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-selected};
194+
&::before {
195+
mask-image: escape-svg($form-check-radio-checked-bg-image);
196+
}
197+
}
198+
188199
&:hover {
189200
&[type="checkbox"] {
190201
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-selected-hover};
191202
}
203+
204+
&[type="radio"] {
205+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-selected-hover};
206+
}
192207
}
193208

194209
&:focus-visible {
195210
&[type="checkbox"] {
196211
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-selected-focus};
197212
}
213+
214+
&[type="radio"] {
215+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-selected-focus};
216+
}
198217
}
199218

200219
&:active {
201220
&[type="checkbox"] {
202221
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-selected-pressed};
203222
}
223+
224+
&[type="radio"] {
225+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-selected-pressed};
226+
}
204227
}
205228
}
206229

@@ -211,6 +234,10 @@
211234
&[type="checkbox"] {
212235
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-unselected-hover};
213236
}
237+
238+
&[type="radio"] {
239+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-unselected-hover};
240+
}
214241
}
215242

216243
&:focus-visible {
@@ -220,6 +247,10 @@
220247
&[type="checkbox"] {
221248
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-unselected-focus};
222249
}
250+
251+
&[type="radio"] {
252+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-unselected-focus};
253+
}
223254
}
224255

225256
&:active {
@@ -229,6 +260,9 @@
229260
&[type="checkbox"] {
230261
--#{$prefix}control-item-indicator-border: #{$ouds-checkbox-border-width-unselected-pressed};
231262
}
263+
&[type="radio"] {
264+
--#{$prefix}control-item-indicator-border: #{$ouds-radio-button-border-width-unselected-pressed};
265+
}
232266
}
233267

234268
// Use disabled attribute in addition of :disabled pseudo-class

‎site/content/docs/0.2/forms/radio-button.md‎

Lines changed: 38 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ You can display a divider by adding `.control-item-divider` to a `.control-item`
8686
{{< example >}}
8787
<div class="radio-button-item control-item-divider">
8888
<div class="control-item-assets-container">
89-
<input class="control-item-indicator" type="radio" value="" id="radioDivider" name="radioDivider">
89+
<input class="control-item-indicator" type="radio" value="" id="radioDivider" name="radioDivider" checked>
9090
</div>
9191
<div class="control-item-text-container">
9292
<label class="control-item-label" for="radioDivider">Label</label>
@@ -109,7 +109,7 @@ You can display an icon by adding `.control-item-assets-container` with an icon
109109
{{< example >}}
110110
<div class="radio-button-item">
111111
<div class="control-item-assets-container">
112-
<input class="control-item-indicator" type="radio" value="" id="radioWithSVG" name="radioIcon">
112+
<input class="control-item-indicator" type="radio" value="" id="radioWithSVG" name="radioIcon" checked>
113113
</div>
114114
<div class="control-item-text-container">
115115
<label class="control-item-label" for="radioWithSVG">Label</label>
@@ -171,15 +171,15 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
171171

172172
{{< example >}}
173173
<div class="form-check form-check-reverse">
174-
<input class="form-check-input" type="radio" value="" id="reverseCheck1">
174+
<input class="form-check-input" type="radio" value="" id="reverseCheck1" name="radioInverse">
175175
<label class="form-check-label" for="reverseCheck1">
176176
Reverse radio
177177
</label>
178178
</div>
179179
<div class="form-check form-check-reverse">
180-
<input class="form-check-input" type="radio" value="" id="reverseCheck2" disabled>
180+
<input class="form-check-input" type="radio" value="" id="reverseCheck2" disabled name="radioInverse">
181181
<label class="form-check-label" for="reverseCheck2">
182-
Disabled reverse radio
182+
Disabled reverse radioradio
183183
</label>
184184
</div>
185185
{{< /example >}}
@@ -191,26 +191,18 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
191191

192192
Add the `disabled` attribute and the associated `<label>` are automatically styled to match with a lighter color to help indicate the input's state.
193193

194-
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
194+
{{< example stackblitz_add_js="true" >}}
195195
<div class="radio-button-item">
196196
<div class="control-item-assets-container">
197-
<input class="control-item-indicator" type="radio" value="" id="radioIndeterminateDisabled" disabled>
198-
</div>
199-
<div class="control-item-text-container">
200-
<label class="control-item-label" for="radioIndeterminateDisabled">Label</label>
201-
</div>
202-
</div>
203-
<div class="radio-button-item">
204-
<div class="control-item-assets-container">
205-
<input class="control-item-indicator" type="radio" value="" id="radioDisabled" disabled>
197+
<input class="control-item-indicator" type="radio" value="" id="radioDisabled" disabled name="radioDisabled">
206198
</div>
207199
<div class="control-item-text-container">
208200
<label class="control-item-label" for="radioDisabled">Label</label>
209201
</div>
210202
</div>
211203
<div class="radio-button-item">
212204
<div class="control-item-assets-container">
213-
<input class="control-item-indicator" type="radio" value="" id="radioCheckedDisabled" checked disabled>
205+
<input class="control-item-indicator" type="radio" value="" id="radioCheckedDisabled" checked disabled name="radioDisabled">
214206
</div>
215207
<div class="control-item-text-container">
216208
<label class="control-item-label" for="radioCheckedDisabled">Label</label>
@@ -219,13 +211,7 @@ Add the `disabled` attribute and the associated `<label>` are automatically styl
219211
{{< /example >}}
220212

221213
{{< bootstrap-compatibility false >}}
222-
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
223-
<div class="form-check">
224-
<input class="form-check-input" type="radio" value="" id="checkIndeterminateDisabled" disabled>
225-
<label class="form-check-label" for="checkIndeterminateDisabled">
226-
Disabled indeterminate radio button
227-
</label>
228-
</div>
214+
{{< example stackblitz_add_js="true" >}}
229215
<div class="form-check">
230216
<input class="form-check-input" type="radio" value="" id="checkDisabled" disabled>
231217
<label class="form-check-label" for="checkDisabled">
@@ -258,33 +244,6 @@ Add the `disabled` attribute and the associated `<label>` are automatically styl
258244
</div>
259245
{{< /example >}}
260246

261-
## Standalone
262-
263-
{{< callout warning >}}
264-
They are commonly used to build custom component, and shouldn't be used alone. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.
265-
{{< /callout >}}
266-
267-
For the standalone Checkbox, we provide a completely different architecture to ease the integration inside your projects.
268-
269-
{{< example >}}
270-
<label class="radio-button-standalone">
271-
<input class="control-item-indicator" type="radio" value="">
272-
<span class="visually-hidden">Label</span>
273-
</label>
274-
{{< /example >}}
275-
276-
{{< bootstrap-compatibility false >}}
277-
{{< callout warning >}}
278-
Be careful using this, you must implement the background on hover, focus and active states and take care of the focus-visible.
279-
{{< /callout >}}
280-
281-
{{< example >}}
282-
<div>
283-
<input class="form-check-input" type="radio" id="radioNoLabel" value="" aria-label="...">
284-
</div>
285-
{{< /example >}}
286-
{{< /bootstrap-compatibility >}}
287-
288247
## Group
289248

290249
When radio buttons belong to a group (e.g., in a form), you must provide clear context by using a `<legend>` element inside a `<fieldset>` for the group title, this way screen readers will read the legend before navigating through the checkboxes.
@@ -295,7 +254,7 @@ When radio buttons belong to a group (e.g., in a form), you must provide clear c
295254
<legend>Checkboxes group example</legend>
296255
<div class="radio-button-item control-item-divider">
297256
<div class="control-item-assets-container">
298-
<input class="control-item-indicator" type="radio" value="" id="checkboxGroup1">
257+
<input class="control-item-indicator" type="radio" value="" id="checkboxGroup1" name="radioGroup">
299258
</div>
300259
<div class="control-item-text-container">
301260
<label class="control-item-label" for="checkboxGroup1">Label</label>
@@ -309,7 +268,7 @@ When radio buttons belong to a group (e.g., in a form), you must provide clear c
309268
</div>
310269
<div class="radio-button-item control-item-divider">
311270
<div class="control-item-assets-container">
312-
<input class="control-item-indicator" type="radio" value="" id="checkboxGroup2" checked>
271+
<input class="control-item-indicator" type="radio" value="" id="checkboxGroup2" checked name="radioGroup">
313272
</div>
314273
<div class="control-item-text-container">
315274
<label class="control-item-label" for="checkboxGroup2">A longer label for showing behaviour in this case, checkbox indicator and icon will stick to the top area of the component instead of being centered like in a smaller label</label>
@@ -324,3 +283,30 @@ When radio buttons belong to a group (e.g., in a form), you must provide clear c
324283
</fieldset>
325284
</div>
326285
{{< /example >}}
286+
287+
## Standalone
288+
289+
{{< callout warning >}}
290+
They are commonly used to build custom component, and shouldn't be used alone. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-labelledby`, a `.visually-hidden`, `aria-label` or a second label). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.
291+
{{< /callout >}}
292+
293+
For the standalone Checkbox, we provide a completely different architecture to ease the integration inside your projects.
294+
295+
{{< example >}}
296+
<label class="radio-button-standalone">
297+
<input class="control-item-indicator" type="radio" value="">
298+
<span class="visually-hidden">Label</span>
299+
</label>
300+
{{< /example >}}
301+
302+
{{< bootstrap-compatibility false >}}
303+
{{< callout warning >}}
304+
Be careful using this, you must implement the background on hover, focus and active states and take care of the focus-visible.
305+
{{< /callout >}}
306+
307+
{{< example >}}
308+
<div>
309+
<input class="form-check-input" type="radio" id="radioNoLabel" value="" aria-label="...">
310+
</div>
311+
{{< /example >}}
312+
{{< /bootstrap-compatibility >}}

0 commit comments

Comments
 (0)