Skip to content
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.

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

feat: Add Radio, update Checkbox and Switch #1100

Merged
merged 17 commits into from
Mar 6, 2024
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
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
24 changes: 16 additions & 8 deletions packages/css/src/components/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,16 @@
margin-inline: 0;
opacity: 0%; /* to hide native input field in older iOS */

&:focus-visible + label {
/* Focus is first set on the label next to a focussed checkbox button, and then
hidden when the focussed checkbox button doesn't have focus-visible.
This progressive enhancement means you get the benefits of focus-visible
while still showing a focus ring on browsers that don't support focus-visible (like older Safari) */
&:focus + label {
outline: auto;
outline-offset: var(--amsterdam-checkbox-outline-offset);
}

&:focus:not(:focus-visible) + label {
outline: 0;
}
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
}

Expand All @@ -25,7 +32,7 @@
&::after {
border-color: var(--amsterdam-checkbox-checkmark-border-color);
border-style: solid;
border-width: 2px;
border-width: 0.125rem;
box-sizing: border-box;
content: "";
height: 1.5rem;
Expand All @@ -43,9 +50,10 @@
display: inline-flex;
font-family: var(--amsterdam-checkbox-font-family);
font-size: var(--amsterdam-checkbox-font-size);
font-weight: 400;
font-weight: var(--amsterdam-checkbox-font-weight);
gap: 0.5rem;
line-height: var(--amsterdam-checkbox-line-height);
outline-offset: var(--amsterdam-checkbox-outline-offset);

&:hover {
color: var(--amsterdam-checkbox-hover-color);
Expand All @@ -55,7 +63,7 @@

.amsterdam-checkbox__checkmark::after {
border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
border-width: 3px;
border-width: 0.1875rem;
}
}

Expand All @@ -66,7 +74,7 @@
.amsterdam-checkbox__input:checked {
+ .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
background-image: var(--amsterdam-checkbox-checkmark-checked-background-image);
background-position: center;
background-repeat: no-repeat;
background-size: 1rem;
Expand All @@ -78,7 +86,7 @@
.amsterdam-checkbox__input:indeterminate {
+ .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
background-image: var(--amsterdam-checkbox-checkmark-indeterminate-background-image);
background-position: center;
background-repeat: no-repeat;
background-size: 1rem;
Expand All @@ -102,7 +110,7 @@

.amsterdam-checkbox__checkmark::after {
border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
border-width: 2px;
border-width: 0.125rem;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/css/src/components/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

/* Append here */
@import "./radio/radio";
@import "./tabs/tabs";
@import "./column/column";
@import "./margin/margin";
Expand Down
18 changes: 18 additions & 0 deletions packages/css/src/components/radio/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!-- @license CC0-1.0 -->

# Radio

Allows users to select one option from a list.

## Guidelines

- Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone.
If needed, add a hint explaining this, for example, ‘Select one option’.
- Order radio options alphabetically by default.
In some cases, it can be helpful to order them from most-to-least common options.
For example, you could order options for ‘Where do you live?’ based on population size.
However you should do this with extreme caution as it can reinforce bias.
If in doubt, order alphabetically.
- Labels should be concise. Try to keep labels shorter than 4 words.

Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list.
178 changes: 178 additions & 0 deletions packages/css/src/components/radio/radio.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

.amsterdam-radio__input {
appearance: none;
margin-block: 0;
margin-inline: 0;
opacity: 0%; /* to hide native input field in older iOS */
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved

/* Focus is first set on the label next to a focussed radio button, and then
hidden when the focussed radio button doesn't have focus-visible.
This progressive enhancement means you get the benefits of focus-visible
while still showing a focus ring on browsers that don't support focus-visible (like older Safari) */
&:focus + label {
outline: auto;
}

&:focus:not(:focus-visible) + label {
outline: 0;
}
}

.amsterdam-radio__circle {
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
align-items: center;
display: flex;
flex-shrink: 0;
height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height));
width: 1.5rem;

&::after {
border-color: var(--amsterdam-radio-circle-border-color);
border-radius: 100%;
border-style: solid;
border-width: 0.125rem;
box-sizing: border-box;
content: "";
height: 1.5rem;
width: 100%;
}
}

@mixin reset {
-webkit-text-size-adjust: 100%;
}

.amsterdam-radio__label {
color: var(--amsterdam-radio-color);
cursor: pointer;
display: inline-flex;
font-family: var(--amsterdam-radio-font-family);
font-size: var(--amsterdam-radio-font-size);
font-weight: var(--amsterdam-radio-font-weight);
gap: 0.5rem;
line-height: var(--amsterdam-radio-line-height);
outline-offset: var(--amsterdam-radio-outline-offset);

&:hover {
color: var(--amsterdam-radio-hover-color);
text-decoration-line: underline;
text-decoration-thickness: 0.125rem;
text-underline-offset: 0.375rem;

.amsterdam-radio__circle::after {
border-color: var(--amsterdam-radio-circle-hover-border-color);
}
}

@include reset;
}

// Default checked
.amsterdam-radio__input:checked {
+ .amsterdam-radio__label .amsterdam-radio__circle::after {
background-image: var(--amsterdam-radio-circle-checked-background-image);
background-position: center;
background-repeat: no-repeat;
background-size: 1rem;
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
}
}

// Invalid unchecked
.amsterdam-radio__input:invalid,
.amsterdam-radio__input[aria-invalid="true"] {
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
+ .amsterdam-radio__label .amsterdam-radio__circle::after {
border-color: var(--amsterdam-radio-circle-invalid-border-color);
}
}

// Disabled unchecked
.amsterdam-radio__input:disabled {
+ .amsterdam-radio__label {
color: var(--amsterdam-radio-disabled-color);
cursor: not-allowed;

.amsterdam-radio__circle::after {
border-color: var(--amsterdam-radio-circle-disabled-border-color);
border-width: 0.125rem;
}
}
}

// Invalid checked
.amsterdam-radio__input:invalid:checked,
.amsterdam-radio__input[aria-invalid="true"]:checked {
+ .amsterdam-radio__label .amsterdam-radio__circle::after {
background-image: var(--amsterdam-radio-circle-invalid-checked-background-image);
}
}

// Disabled label
.amsterdam-radio__input:disabled + .amsterdam-radio__label:hover {
text-decoration: none;
}

// Disabled checked
.amsterdam-radio__input:disabled:checked {
+ .amsterdam-radio__label .amsterdam-radio__circle::after {
background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
}
}

// Disabled invalid unchecked
.amsterdam-radio__input:invalid:disabled,
.amsterdam-radio__input[aria-invalid="true"]:disabled {
+ .amsterdam-radio__label .amsterdam-radio__circle::after {
// TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
border-color: var(--amsterdam-radio-circle-disabled-border-color);
}
}

// HOVER STATES

// Invalid unchecked hover
:is(.amsterdam-radio__input:invalid, .amsterdam-radio__input[aria-invalid="true"])
+ .amsterdam-radio__label:hover
.amsterdam-radio__circle::after {
// TODO: this should be the (currently non-existent) dark red hover color
border-color: var(--amsterdam-radio-circle-invalid-hover-border-color);
}

// Default checked hover
.amsterdam-radio__input:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
background-image: var(--amsterdam-radio-circle-checked-hover-background-image);
}

// Invalid checked hover
:is(.amsterdam-radio__input:invalid:checked, .amsterdam-radio__input[aria-invalid="true"]:checked)
+ .amsterdam-radio__label:hover
.amsterdam-radio__circle::after {
// TODO: this should be the (currently non-existent) dark red hover color
background-image: var(--amsterdam-radio-circle-invalid-checked-hover-background-image);
}

// Disabled checked hover
.amsterdam-radio__input:disabled:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
background-image: var(--amsterdam-radio-circle-disabled-checked-hover-background-image);
}

// Disabled invalid unchecked hover
:is(.amsterdam-radio__input:invalid:disabled, .amsterdam-radio__input[aria-invalid="true"]:disabled)
+ .amsterdam-radio__label:hover
.amsterdam-radio__circle::after {
// TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
border-color: var(--amsterdam-radio-circle-disabled-border-color);
}
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved

// DISABLED INVALID STATES

// Disabled invalid checked
.amsterdam-radio__input:invalid:disabled:checked,
.amsterdam-radio__input[aria-invalid="true"]:disabled:checked {
+ .amsterdam-radio__label .amsterdam-radio__circle::after {
// TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
}
}
19 changes: 13 additions & 6 deletions packages/css/src/components/switch/switch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,26 @@
margin-block: 0;
margin-inline: 0;
opacity: 0%; /* to hide native input field in older iOS */

/* Focus is first set on the label next to a focussed checkbox button, and then
hidden when the focussed checkbox button doesn't have focus-visible.
This progressive enhancement means you get the benefits of focus-visible
while still showing a focus ring on browsers that don't support focus-visible (like older Safari) */
&:focus + label {
outline: auto;
}

&:focus:not(:focus-visible) + label {
outline: 0;
}
}

.amsterdam-switch__label {
background-color: var(--amsterdam-switch-background-color);
border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
cursor: pointer;
display: inline-block;
outline-offset: var(--amsterdam-switch-outline-offset);
padding-block: 1px;
padding-inline: 1px;
transition: background-color 0.2s ease-in-out;
Expand Down Expand Up @@ -48,12 +61,6 @@
cursor: not-allowed;
}

.amsterdam-switch__input:focus-visible + .amsterdam-switch__label {
outline-color: -webkit-focus-ring-color;
outline-offset: var(--amsterdam-switch-outline-offset);
outline-style: auto;
}

.amsterdam-switch__input:checked + .amsterdam-switch__label::before {
// The 2px is to account for the 1px padding-inline on the label
transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/Radio/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- @license CC0-1.0 -->

# React Radio component

[Radio documentation](../../../css/src/components/radio/README.md)
Loading
Loading