-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add Radio, update Checkbox and Switch (#1100)
Co-authored-by: Vincent Smedinga <[email protected]>
- Loading branch information
1 parent
492fc37
commit 79224e3
Showing
19 changed files
with
637 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| /** | ||
| * @license EUPL-1.2+ | ||
| * Copyright Gemeente Amsterdam | ||
| */ | ||
|
|
||
| @mixin hide-input { | ||
| appearance: none; | ||
| margin-block: 0; | ||
| margin-inline: 0; | ||
| opacity: 0%; /* to hide native input field in older iOS */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * @license EUPL-1.2+ | ||
| * Copyright Gemeente Amsterdam | ||
| */ | ||
|
|
||
| /** | ||
| * Focus is first set on the label next to a focussed input, and then | ||
| * hidden when the focussed input 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). | ||
| */ | ||
|
|
||
| @mixin input-label-focus { | ||
| &:focus + label { | ||
| outline: auto; | ||
| } | ||
|
|
||
| &:focus:not(:focus-visible) + label { | ||
| outline: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| /** | ||
| * @license EUPL-1.2+ | ||
| * Copyright Gemeente Amsterdam | ||
| */ | ||
|
|
||
| @import "../../common/input-label-focus"; | ||
| @import "../../common/hide-input"; | ||
|
|
||
| .amsterdam-radio__input { | ||
| @include hide-input; | ||
| @include input-label-focus; | ||
| } | ||
|
|
||
| .amsterdam-radio__circle { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-shrink: 0; | ||
| height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height)); | ||
| width: 1.5rem; | ||
|
|
||
| &::after { | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: 1rem; | ||
| 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); | ||
| } | ||
| } | ||
|
|
||
| // Invalid unchecked | ||
| .amsterdam-radio__input[aria-invalid="true"] { | ||
| + .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[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[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 | ||
| .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 | ||
| .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 | ||
| .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); | ||
| } | ||
|
|
||
| // DISABLED INVALID STATES | ||
|
|
||
| // Disabled invalid 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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
Oops, something went wrong.