Skip to content

Commit

Permalink
Feat(web): Switch Checkbox component to v3 design tokens #DS-1447
Browse files Browse the repository at this point in the history
  • Loading branch information
@crishpeen
crishpeen committed Sep 11, 2024
1 parent c6adef2 commit d6c688e
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 74 deletions.
56 changes: 47 additions & 9 deletions packages/web/src/scss/components/Checkbox/_Checkbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@use 'sass:map';
// 1. We need to set the color of the validation text and helper text to inherit when the Item is hovered or active,
// because we need it contrasting with the background color.

@use 'theme';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
Expand Down Expand Up @@ -37,17 +39,28 @@ $_field-name: 'Checkbox';
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: form-fields-theme.$input-background-color;

&:hover {
background-color: form-fields-theme.$input-background-color-hover;
}

&:active {
background-color: form-fields-theme.$input-background-color-active;
}

&:checked,
&:indeterminate {
border-color: form-fields-theme.$inline-field-input-border-color-checked;
background-color: form-fields-theme.$inline-field-input-background-color-checked;
}

&:checked {
color: form-fields-theme.$inline-field-input-color-checked;
background-image: svg.escape(theme.$input-checked-mark);
background-color: form-fields-theme.$inline-field-input-color-checked;
}

&:indeterminate {
color: form-fields-theme.$inline-field-input-color-checked;
background-image: svg.escape(theme.$input-indeterminate-mark);
background-color: form-fields-theme.$inline-field-input-color-checked;
}
}

Expand Down Expand Up @@ -81,13 +94,31 @@ $_field-name: 'Checkbox';
.Checkbox--disabled > .Checkbox__input,
.Checkbox > .Checkbox__input:disabled {
@include form-fields-tools.input-disabled();

border-color: form-fields-theme.$input-border-color-disabled;
background-color: form-fields-theme.$input-background-color-disabled;
}

.Checkbox--disabled > .Checkbox__input:checked,
.Checkbox--disabled > .Checkbox__input:indeterminate {
border-color: form-fields-theme.$input-border-color-disabled;
}

.Checkbox--disabled > .Checkbox__input:checked,
.Checkbox > .Checkbox__input:disabled:checked {
background-image: svg.escape(theme.$input-checked-mark-disabled);
}

// stylelint-disable no-descending-specificity -- We allow specificity order, because we don't want to set the background-image with SVG twice
.Checkbox--disabled > .Checkbox__input:indeterminate,
.Checkbox > .Checkbox__input:disabled:indeterminate {
background-image: svg.escape(theme.$input-indeterminate-mark-disabled);
}
// stylelint-enable no-descending-specificity

.Checkbox > .Checkbox__input:disabled:checked,
.Checkbox > .Checkbox__input:disabled:indeterminate {
background-color: form-fields-theme.$input-color-disabled;
border-color: form-fields-theme.$input-border-color-disabled;
}

.Checkbox--item {
Expand All @@ -100,10 +131,16 @@ $_field-name: 'Checkbox';
@include form-fields-tools.item-disabled();
}

// stylelint-disable-next-line selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
.Checkbox--item .Checkbox__input:checked ~ .Checkbox__text > .Checkbox__label {
@include form-fields-tools.item-label-checked();
.Checkbox--item .Checkbox__label {
@include form-fields-tools.item-label();
}

// stylelint-disable selector-max-specificity -- We need to override the default styles, but not in disabled state
.Checkbox--item:not(.Checkbox--disabled) .Checkbox__input:hover:not(:checked),
.Checkbox--item:not(.Checkbox--disabled) .Checkbox__input:active:not(:checked) {
background-color: form-fields-theme.$input-background-color;
}
// stylelint-enable selector-max-specificity

.Checkbox--item .Checkbox__validationText {
@include form-fields-tools.item-validation-text();
Expand All @@ -113,6 +150,7 @@ $_field-name: 'Checkbox';
@include form-fields-tools.item-helper-text();
}

// 1.
.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__validationText,
.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__validationText,
.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__helperText,
Expand Down
11 changes: 7 additions & 4 deletions packages/web/src/scss/components/Checkbox/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
@use '@tokens' as tokens;
@use '@global' as global-tokens;
@use '../../settings/globals';

$input-border-radius: 2px;
$input-border-radius: global-tokens.$radius-200;
$input-width: 18px;
$input-margin: 3px;
$input-checked-mark: url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M7.71 13.29a.996.996 0 0 1-1.41 0L2.71 9.7a.996.996 0 1 1 1.41-1.41L7 11.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z" style="fill:#fff"/></svg>');
$input-indeterminate-mark: url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path style="fill:#fff" d="M4 8h10v2H4z"/></svg>');
$input-checked-mark: var(--#{globals.$prefix}checkbox-input-background-image-url);
$input-checked-mark-disabled: var(--#{globals.$prefix}checkbox-input-disabled-background-image-url);
$input-indeterminate-mark: var(--#{globals.$prefix}checkbox-input-indeterminate-background-image-url);
$input-indeterminate-mark-disabled: var(--#{globals.$prefix}checkbox-input-indeterminate-disabled-background-image-url);
3 changes: 1 addition & 2 deletions packages/web/src/scss/components/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
@forward 'Alert';
@forward 'Breadcrumbs';
@forward 'Button';

// @forward 'Checkbox';
@forward 'Checkbox';
@forward 'Collapse';
@forward 'Container';
@forward 'Divider';
Expand Down
106 changes: 53 additions & 53 deletions packages/web/src/scss/theme/_form-fields.scss
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,56 @@
@use '@tokens' as tokens;
@use '@global' as global-tokens;
@use '../settings/globals';

// Common for all form components
$gap: tokens.$space-400;
$input-typography: tokens.$body-medium-text-regular;
$input-color-disabled: tokens.$text-primary-disabled;
$input-border-color-success: tokens.$emotion-success-default;
$input-border-color-warning: tokens.$emotion-warning-default;
$input-border-color-danger: tokens.$emotion-danger-default;
$input-focus-shadow: tokens.$focus;
$label-color-default: tokens.$text-primary-default;
$label-color-disabled: tokens.$text-primary-disabled;
$label-required-margin-left: tokens.$space-200;
$label-required-color: tokens.$emotion-danger-default;
$validation-text-typography: tokens.$body-medium-text-regular;
$validation-text-margin-top: tokens.$space-300;
$validation-text-color-default: tokens.$text-secondary-default;
$validation-text-color-disabled: tokens.$text-secondary-disabled;
$validation-text-color-success: tokens.$emotion-success-default;
$validation-text-color-warning: tokens.$emotion-warning-default;
$validation-text-color-danger: tokens.$emotion-danger-default;
$helper-text-typography: tokens.$body-small-text-regular;
$helper-text-margin-top: tokens.$space-300;
$helper-text-color-default: tokens.$text-secondary-default;
$helper-text-color-disabled: tokens.$text-secondary-disabled;
$gap: global-tokens.$space-500;
$input-typography: global-tokens.$body-medium-regular;
$input-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$input-background-color: var(--#{globals.$prefix}color-form-field-default);
$input-background-color-hover: var(--#{globals.$prefix}color-form-field-hover);
$input-background-color-active: var(--#{globals.$prefix}color-form-field-active);
$input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background);
$input-border-color: var(--#{globals.$prefix}color-form-field-border-default);
$input-border-color-success: var(--#{globals.$prefix}color-form-field-success);
$input-border-color-warning: var(--#{globals.$prefix}color-form-field-warning);
$input-border-color-danger: var(--#{globals.$prefix}color-form-field-danger);
$input-border-color-disabled: $input-background-color-disabled;
$input-focus-shadow: global-tokens.$focus;
$label-color-default: var(--#{globals.$prefix}color-form-field-label);
$label-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$label-required-margin-left: global-tokens.$space-200;
$label-required-color: var(--#{globals.$prefix}color-form-field-danger);
$validation-text-typography: global-tokens.$body-small-semibold;
$validation-text-margin-top: global-tokens.$space-400;
$validation-text-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$validation-text-color-success: var(--#{globals.$prefix}color-form-field-success);
$validation-text-color-warning: var(--#{globals.$prefix}color-form-field-warning);
$validation-text-color-danger: var(--#{globals.$prefix}color-form-field-danger);
$helper-text-typography: global-tokens.$body-small-regular;
$helper-text-margin-top: global-tokens.$space-400;
$helper-text-color-default: var(--#{globals.$prefix}color-form-field-helper-text);
$helper-text-color-disabled: var(--#{globals.$prefix}color-disabled-content);

// Inline field form components – Checkbox, Radio, etc.
$inline-field-input-color-unchecked: tokens.$action-unselected-default;
$inline-field-input-color-unchecked-active: tokens.$action-unselected-active;
$inline-field-input-color-unchecked-hover: tokens.$action-unselected-hover;
$inline-field-input-color-checked: tokens.$action-selected-default;
$inline-field-input-color-checked-active: tokens.$action-selected-active;
$inline-field-input-color-checked-hover: tokens.$action-selected-hover;
$inline-field-input-outline-width: tokens.$border-width-200;
$inline-field-input-border-color-checked: var(--#{globals.$prefix}color-form-field-border-selected);
$inline-field-input-border-width: global-tokens.$border-width-200;
$inline-field-input-background-color-checked: var(--#{globals.$prefix}color-selected-default);

// Box field form components – TextField, TextArea, etc.
$box-field-input-color-default: tokens.$text-primary-default;
$box-field-input-border-width: tokens.$border-width-100;
$box-field-input-border-style: tokens.$border-style-100;
$box-field-input-border-color-default: tokens.$border-primary-default;
$box-field-input-border-color-disabled: tokens.$border-primary-disabled;
$box-field-input-border-color-focus: tokens.$focus-default;
$box-field-input-color-default: var(--#{globals.$prefix}color-form-field-content);
$box-field-input-border-width: global-tokens.$border-width-100;
$box-field-input-border-style: solid;
$box-field-input-border-color-disabled: var(--#{globals.$prefix}color-disabled-border);
$box-field-input-border-color-focus: var(--#{globals.$prefix}color-border-focus);
$box-field-input-focus-shadow: global-tokens.$focus;

$box-field-input-border-radius: tokens.$radius-100;
$box-field-input-background: tokens.$background-basic;
$box-field-input-background-disabled: tokens.$background-cover;
$box-field-input-placeholder-color-default: tokens.$text-secondary-default;
$box-field-input-placeholder-color-disabled: tokens.$text-secondary-disabled;
$box-field-input-padding-x: tokens.$space-400;
$box-field-input-padding-y: calc(#{tokens.$space-400} - #{tokens.$border-width-100});
$box-field-input-border-radius: global-tokens.$radius-300;
$box-field-input-placeholder-color-default: var(--#{globals.$prefix}color-form-field-placeholder);
$box-field-input-placeholder-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$box-field-input-padding-x: global-tokens.$space-600;
$box-field-input-padding-y: calc(#{global-tokens.$space-500} - #{global-tokens.$border-width-100});
$box-field-input-width: 18rem;
$box-field-label-typography: tokens.$body-small-text-regular;
$box-field-label-margin-bottom: tokens.$space-300;
$box-field-label-typography: global-tokens.$body-small-semibold;
$box-field-label-margin-bottom: global-tokens.$space-300;

$validation-states: (
success: (
Expand All @@ -68,11 +68,11 @@ $validation-states: (
);

// Item variant
$item-gap: tokens.$space-400;
$item-border-radius: tokens.$radius-100;
$item-background-color-default: tokens.$background-interactive-default;
$item-background-color-hover: tokens.$background-interactive-hover;
$item-background-color-active: tokens.$background-interactive-active;
$item-label-checked-typography: tokens.$body-medium-text-bold;
$item-validation-text-typography: tokens.$body-small-text-regular;
$item-helper-text-typography: tokens.$body-small-text-regular;
$item-gap: global-tokens.$space-500;
$item-border-radius: global-tokens.$radius-200;
$item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default);
$item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover);
$item-background-color-active: var(--#{globals.$prefix}color-background-interactive-active);
$item-label-typography: global-tokens.$body-medium-semibold;
$item-validation-text-typography: global-tokens.$body-small-semibold;
$item-helper-text-typography: global-tokens.$body-small-regular;
19 changes: 14 additions & 5 deletions packages/web/src/scss/tools/_form-fields.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
display: block;
margin-top: form-fields-theme.$validation-text-margin-top;
list-style: none;
color: form-fields-theme.$validation-text-color-default;
}

@mixin validation-text-disabled() {
Expand Down Expand Up @@ -72,14 +71,24 @@

@mixin inline-field-input() {
appearance: none;
color: form-fields-theme.$inline-field-input-color-unchecked;
border: form-fields-theme.$inline-field-input-outline-width solid currentcolor;
border: form-fields-theme.$inline-field-input-border-width solid form-fields-theme.$input-border-color;
background-color: form-fields-theme.$input-background-color;
cursor: cursors.$form-fields;

&:focus-visible {
outline: 0;
box-shadow: form-fields-theme.$input-focus-shadow;
}

@media (hover: hover) {
&:hover {
background-color: form-fields-theme.$input-background-color-hover;
}
}

&:active {
background-color: form-fields-theme.$input-background-color-active;
}
}

@mixin box-field-input() {
Expand Down Expand Up @@ -206,8 +215,8 @@
@include typography.generate(form-fields-theme.$item-validation-text-typography);
}

@mixin item-label-checked() {
@include typography.generate(form-fields-theme.$item-label-checked-typography);
@mixin item-label() {
@include typography.generate(form-fields-theme.$item-label-typography);
}

@mixin helper-text() {
Expand Down
1 change: 0 additions & 1 deletion tests/e2e/demo-components-compare.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from
// Tests that are intentionally broken, but will be fixed in the future
const IGNORED_TESTS: string[] = [
'Accordion',
'Checkbox',
'Dropdown',
'FieldGroup',
'FileUploader',
Expand Down
Binary file modified tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d6c688e

Please sign in to comment.