Skip to content

Commit

Permalink
BREAKING CHANGE(web): Rename RadioField to Radio #DS-521
Browse files Browse the repository at this point in the history 
 ## Migration Guide

Rename and use `Radio` instead of `RadioField`.

- `<div class="RadioField" …>` → `<div class="Radio" …>`
- `.RadioField__*` → `.Radio__*`

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.
  • Loading branch information
@crishpeen @literat
crishpeen authored and literat committed Jul 21, 2023
1 parent 5270040 commit c5219d1
Show file tree
Hide file tree
Showing 14 changed files with 300 additions and 300 deletions.
10 changes: 5 additions & 5 deletions packages/web/src/scss/components/Item/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# Item

The Item component is used to display a single item in a list. Currently we support
two types of item content: RadioField and Checkbox. In order to unify and simplify
two types of item content: Radio and Checkbox. In order to unify and simplify
API of these components and also to avoid repeating ourselves, we use Item as their modifier.

So, to create an Item of RadioField content, you need to add `RadioField--item` modifier class.
So, to create an Item of Radio content, you need to add `Radio--item` modifier class.

```html
<label for="radiofieldItem" class="RadioField RadioField--item">
<input type="radio" id="radiofieldItem" name="example" class="RadioField__input" checked />
<span class="RadioField__label">Item</span>
<label for="radioItem" class="Radio Radio--item">
<input type="radio" id="radioItem" name="example" class="Radio__input" checked />
<span class="Radio__label">Item</span>
</label>
```

Expand Down
8 changes: 4 additions & 4 deletions packages/web/src/scss/components/Item/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ <h2 class="docs-Heading">Checkbox Item</h2>
</span>
</label>

<h2 class="docs-Heading">RadioField Item</h2>
<h2 class="docs-Heading">Radio Item</h2>

<label for="radiofieldItem" class="RadioField RadioField--item">
<input type="radio" id="radiofieldItem" name="example3" class="RadioField__input" />
<span class="RadioField__label">Radio Item</span>
<label for="radioItem" class="Radio Radio--item">
<input type="radio" id="radioItem" name="example3" class="Radio__input" />
<span class="Radio__label">Radio Item</span>
</label>
</div>

Expand Down
18 changes: 9 additions & 9 deletions packages/web/src/scss/components/Modal/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,17 @@ <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
</script>
<form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
<div>Footer alignment (from tablet up):</div>
<label for="footer_alignment_left" class="RadioField mr-600">
<input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="RadioField__input" autocomplete="off" />
<span class="RadioField__label">Left</span>
<label for="footer_alignment_left" class="Radio mr-600">
<input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="Radio__input" autocomplete="off" />
<span class="Radio__label">Left</span>
</label>
<label for="footer_alignment_center" class="RadioField mr-600">
<input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="RadioField__input" autocomplete="off" />
<span class="RadioField__label">Center</span>
<label for="footer_alignment_center" class="Radio mr-600">
<input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="Radio__input" autocomplete="off" />
<span class="Radio__label">Center</span>
</label>
<label for="footer_alignment_right" class="RadioField mr-600">
<input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="RadioField__input" autocomplete="off" checked />
<span class="RadioField__label">Right</span>
<label for="footer_alignment_right" class="Radio mr-600">
<input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="Radio__input" autocomplete="off" checked />
<span class="Radio__label">Right</span>
</label>
</form>
<form class="d-tablet-none">
Expand Down
98 changes: 98 additions & 0 deletions packages/web/src/scss/components/Radio/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Radio

## Basic usage:

```html
<label for="radioDefault" class="Radio">
<input type="radio" id="radioDefault" class="Radio__input" name="default" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>
```

## Selected state:

```html
<label for="radioDefaultChecked" class="Radio">
<input type="radio" id="radioDefaultChecked" class="Radio__input" name="default" checked />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>
```

## Disabled state:

```html
<label for="radioDisabled" class="Radio Radio--disabled">
<input type="radio" id="radioDisabled" class="Radio__input" name="default" disabled />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>
```

## Validation States:

See Validation state [dictionary][dictionary-validation].

```html
<label for="radioSuccess" class="Radio Radio--success">
<input type="radio" id="radioSuccess" class="Radio__input" name="validation" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>

<label for="radioWarning" class="Radio Radio--warning">
<input type="radio" id="radioWarning" class="Radio__input" name="validation" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>

<label for="radioDanger" class="Radio Radio--danger">
<input type="radio" id="radioDanger" class="Radio__input" name="validation" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>
```

## With helper text:

```html
<label for="radioHelperText" class="Radio">
<input type="radio" id="radioHelperText" class="Radio__input" name="helperText" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
<span class="Radio__helperText">Helper text</span>
</span>
</label>
```

## As an Item:

```html
<label for="radioItemDefault" class="Radio Radio--item">
<input type="radio" id="radioItemDefault" class="Radio__input" name="item" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
</span>
</label>
```

## As an Item wrapped with helper text:

```html
<label for="radioItemHelperText" class="Radio Radio--item">
<input type="radio" id="radioItemHelperText" class="Radio__input" name="item" />
<span class="Radio__text">
<span class="Radio__label">Radio Label</span>
<span class="Radio__helperText">Helper text</span>
</span>
</label>
```

[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
46 changes: 23 additions & 23 deletions ...ss/components/RadioField/_RadioField.scss → ...web/src/scss/components/Radio/_Radio.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// 1. Use `box-shadow` to ensure the state of the radio field is visible when printed.
// 2. Make sure the state of the radio field is accessible in forced-colors mode (e.g. Windows High Contrast Mode) where
// 1. Use `box-shadow` to ensure the state of the radio is visible when printed.
// 2. Make sure the state of the radio is accessible in forced-colors mode (e.g. Windows High Contrast Mode) where
// our `box-shadow` indicator is removed.
//
// See: https://moderncss.dev/pure-css-custom-styled-radio-buttons/
Expand All @@ -9,13 +9,13 @@
@use '../../tools/form-fields' as form-fields-tools;
@use 'theme';

$_field-name: 'RadioField';
$_field-name: 'Radio';

.RadioField {
.Radio {
@include form-fields-tools.inline-field-root();
}

.RadioField__input {
.Radio__input {
@include form-fields-tools.inline-field-input();

display: grid;
Expand Down Expand Up @@ -49,7 +49,7 @@ $_field-name: 'RadioField';
}
}

.RadioField__helperText {
.Radio__helperText {
@include form-fields-tools.helper-text();

margin-left: form-fields-theme.$spacing;
Expand All @@ -61,66 +61,66 @@ $_field-name: 'RadioField';
theme.$input-box-shadow-y
);

.RadioField__label {
.Radio__label {
@include form-fields-tools.inline-field-label();

margin-left: form-fields-theme.$spacing;
}

.RadioField__label--hidden {
.Radio__label--hidden {
@include form-fields-tools.label-hidden();
}

.RadioField__label--required::after {
.Radio__label--required::after {
@include form-fields-tools.label-required();
}

.RadioField--disabled {
.Radio--disabled {
@include form-fields-tools.inline-field-root-disabled();
}

.RadioField--disabled .RadioField__label {
.Radio--disabled .Radio__label {
@include form-fields-tools.label-disabled();
}

.RadioField--disabled .RadioField__helperText {
.Radio--disabled .Radio__helperText {
@include form-fields-tools.helper-text-disabled();
}

.RadioField--disabled > .RadioField__input,
.RadioField > .RadioField__input:disabled {
.Radio--disabled > .Radio__input,
.Radio > .Radio__input:disabled {
border-color: form-fields-theme.$input-color-disabled;

&:checked {
border-color: form-fields-theme.$input-color-disabled;
}
}

.RadioField--disabled > .RadioField__input::before,
.RadioField > .RadioField__input:disabled::before {
.Radio--disabled > .Radio__input::before,
.Radio > .Radio__input:disabled::before {
box-shadow: theme.$input-box-shadow-disabled; // 1.
}

.RadioField--item {
.Radio--item {
@include form-fields-tools.item();
}

.RadioField--item.RadioField--disabled {
.Radio--item.Radio--disabled {
@include form-fields-tools.item-disabled();
}

// stylelint-disable selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
.RadioField--item .RadioField__input:checked ~ .RadioField__label,
.RadioField--item .RadioField__input:checked ~ .RadioField__text > .RadioField__label {
.Radio--item .Radio__input:checked ~ .Radio__label,
.Radio--item .Radio__input:checked ~ .Radio__text > .Radio__label {
// stylelint-enable selector-max-class, selector-max-compound-selectors, selector-max-specificity
@include form-fields-tools.item-label-checked();
}

.RadioField--item .RadioField__helperText {
.Radio--item .Radio__helperText {
@include form-fields-tools.item-helper-text();
}

.RadioField--item:not(.RadioField--disabled):hover .RadioField__helperText,
.RadioField--item:not(.RadioField--disabled):active .RadioField__helperText {
.Radio--item:not(.Radio--disabled):hover .Radio__helperText,
.Radio--item:not(.Radio--disabled):active .Radio__helperText {
color: inherit;
}
0 ...rc/scss/components/RadioField/_theme.scss → ...web/src/scss/components/Radio/_theme.scss
View file
File renamed without changes.
Loading

0 comments on commit c5219d1

Please sign in to comment.