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.

Sign up for GitHub

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

Jump to bottom

Align checkbox, radio, and toggle input design #63490

Merged
merged 17 commits into from
Jul 23, 2024
Merged

Align checkbox, radio, and toggle input design #63490

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
13c9e8a
Align checkbox, radio, and toggle inputs
jameskoster Jul 12, 2024
c2a8564
Radio line-height
jameskoster Jul 15, 2024
234176d
Merge branch 'trunk' into update/align-radio-checkbox-toggle
jameskoster Jul 16, 2024
95a77a7
Reset label font weight
jameskoster Jul 16, 2024
2bc1317
ToggleControl: Make override safer
mirka Jul 16, 2024
f1b9be4
CheckboxControl: Explain height fix
mirka Jul 16, 2024
5777c65
ToggleControl: Move label styles to correct file
mirka Jul 16, 2024
35aef25
ToggleControl: Correct cursor style when disabled
mirka Jul 16, 2024
73c150f
FormToggle: Show pointer cursor when enabled
mirka Jul 16, 2024
0d73cc5
Move back FormToggle sass vars
mirka Jul 17, 2024
19e47a9
Update snapshots
mirka Jul 17, 2024
0bca6a2
Merge branch 'trunk' into update/align-radio-checkbox-toggle
jameskoster Jul 18, 2024
a25ea66
Update changelog
jameskoster Jul 18, 2024
6b25589
FormToggle
jameskoster Jul 18, 2024
d93bb7a
Fix changelog
jameskoster Jul 18, 2024
f27d3e9
Merge branch 'trunk' into update/align-radio-checkbox-toggle
jameskoster Jul 19, 2024
fe40895
Rebase
jameskoster Jul 22, 2024
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
15 changes: 10 additions & 5 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,7 @@
height: $radio-input-size-sm;
min-width: $radio-input-size-sm;
max-width: $radio-input-size-sm;
position: relative;

@include break-small() {
height: $radio-input-size;
Expand All @@ -328,17 +329,21 @@

&:checked::before {
box-sizing: inherit;
width: 8px;
height: 8px;
transform: translate(7px, 7px);
width: math.div($radio-input-size-sm, 2);
height: math.div($radio-input-size-sm, 2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
background-color: $white;

// This border serves as a background color in Windows High Contrast mode.
border: 4px solid $white;

@include break-small() {
transform: translate(5px, 5px);
width: math.div($radio-input-size, 2);
height: math.div($radio-input-size, 2);
}
}

Expand All @@ -351,7 +356,7 @@

&:checked {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border: none;
}
}

Expand Down
6 changes: 5 additions & 1 deletion packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,12 @@ $border-width-tab: 1.5px;
$helptext-font-size: 12px;
$radius-round: 50%;
$radius-block-ui: 2px;
$radio-input-size: 20px;
$radio-input-size: 16px;
$radio-input-size-sm: 24px; // Width & height for small viewports.
$toggle-width: $grid-unit-40;
$toggle-height: $grid-unit-20;
$toggle-border-width: 1px;
$toggle-thumb-size: $grid-unit-15;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary to lift all these variables up into base-styles? I'm not sure how conservative we are about adding global variables, but personally I wouldn't add them if it isn't necessary to share them across packages.

If it's just to share values between the FormToggle and ToggleControl components, we can keep them within the @wordpress/components package.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. On a separate note, at some point we should look at tidying up shared styles in the package: some variables are defined in Sass, some as CSS custom properties, and some in JS.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's just to share values between the FormToggle and ToggleControl components

That was it. Your suggestion makes sense, though I'm not sure how to do it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved back to the FormToggle styles in 0d73cc5. (Ideally this should use a @use to scope the variables better, but we're not set up to do that properly right now.)


// Deprecated, please avoid using these.
$block-padding: 14px; // Used to define space between block footprint and surrouding borders.
Expand Down
4 changes: 3 additions & 1 deletion packages/components/src/checkbox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
--checkbox-input-size: 24px; // Width & height for small viewports.

@include break-small() {
--checkbox-input-size: 20px;
--checkbox-input-size: 16px;
}

--checkbox-input-margin: #{$grid-unit-10};
Expand All @@ -12,6 +12,7 @@
.components-checkbox-control__label {
// Ensure label is aligned with checkbox along X axis
line-height: var(--checkbox-input-size);
cursor: pointer;
}

.components-checkbox-control__input[type="checkbox"] {
Expand Down Expand Up @@ -61,6 +62,7 @@
vertical-align: middle;
width: var(--checkbox-input-size);
aspect-ratio: 1;
line-height: 1; // maintains proper height even with WP common.css
flex-shrink: 0;
}

Expand Down
22 changes: 11 additions & 11 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
@use "sass:math";

$toggle-width: 36px;
$toggle-height: 18px;
$toggle-border-width: 1px;
$thumb-size: $toggle-height - ($toggle-border-width * 6);

$transition-duration: 0.2s;

.components-form-toggle {
position: relative;
display: inline-block;
height: $toggle-height;

// Unchecked state.
.components-form-toggle__track {
Expand All @@ -19,7 +15,7 @@ $transition-duration: 0.2s;
box-sizing: border-box;
vertical-align: top;
background-color: $white;
border: $toggle-border-width solid $gray-900;
border: $toggle-border-width solid $gray-600;
width: $toggle-width;
height: $toggle-height;
border-radius: math.div($toggle-height, 2);
Expand Down Expand Up @@ -49,10 +45,10 @@ $transition-duration: 0.2s;
display: block;
position: absolute;
box-sizing: border-box;
top: $toggle-border-width * 3;
left: $toggle-border-width * 3;
width: $thumb-size;
height: $thumb-size;
top: math.div($toggle-thumb-size, 6);
left: math.div($toggle-thumb-size, 6);
width: $toggle-thumb-size;
height: $toggle-thumb-size;
border-radius: 50%;
transition:
$transition-duration transform ease,
Expand All @@ -61,7 +57,7 @@ $transition-duration: 0.2s;
background-color: $gray-900;

// Transparent border acts as a fill in Windows High Contrast Mode.
border: math.div($thumb-size, 2) solid transparent;
border: math.div($toggle-thumb-size, 2) solid transparent;
}

// Checked state.
Expand Down Expand Up @@ -116,4 +112,8 @@ $transition-duration: 0.2s;
&::before {
content: "";
}

&:not(:disabled, [aria-disabled="true"]) {
cursor: pointer;
}
}
2 changes: 1 addition & 1 deletion packages/components/src/radio-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function RadioControl(
help={ help }
className={ clsx( className, 'components-radio-control' ) }
>
<VStack spacing={ 3 }>
<VStack spacing={ 2 }>
{ options.map( ( option, index ) => (
<div
key={ `${ id }-${ index }` }
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/radio-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
cursor: pointer;

&:focus {
box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
@include button-style-outset__focus(var(--wp-admin-theme-color));
}

&:checked {
Expand All @@ -29,4 +29,9 @@

.components-radio-control__label {
cursor: pointer;
line-height: $radio-input-size-sm;

@include break-small() {
line-height: $radio-input-size;
}
}
1 change: 1 addition & 0 deletions packages/components/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
@import "./tab-panel/style.scss";
@import "./text-control/style.scss";
@import "./tip/style.scss";
@import "./toggle-control/style.scss";
@import "./toolbar/toolbar/style.scss";
@import "./toolbar/toolbar-button/style.scss";
@import "./toolbar/toolbar-group/style.scss";
Expand Down
15 changes: 12 additions & 3 deletions packages/components/src/toggle-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import type { ChangeEvent, ForwardedRef } from 'react';
import { css } from '@emotion/react';
import clsx from 'clsx';

/**
* WordPress dependencies
Expand Down Expand Up @@ -87,11 +88,17 @@ export function ToggleControl(
return (
<BaseControl
id={ id }
help={ helpLabel }
help={
helpLabel && (
<span className="components-toggle-control__help">
{ helpLabel }
</span>
)
}
className={ classes }
__nextHasNoMarginBottom
>
<HStack justify="flex-start" spacing={ 3 }>
<HStack justify="flex-start" spacing={ 2 }>
<FormToggle
id={ id }
checked={ checked }
Expand All @@ -103,7 +110,9 @@ export function ToggleControl(
<FlexBlock
as="label"
htmlFor={ id }
className="components-toggle-control__label"
className={ clsx( 'components-toggle-control__label', {
'is-disabled': disabled,
} ) }
>
{ label }
</FlexBlock>
Expand Down
11 changes: 11 additions & 0 deletions packages/components/src/toggle-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.components-toggle-control__label {
line-height: $toggle-height;

&:not(.is-disabled) {
cursor: pointer;
}
}

.components-toggle-control__help {
margin-left: $toggle-width + $grid-unit-10;
}
5 changes: 0 additions & 5 deletions packages/preferences/src/components/preference-base-option/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@
& + & {
margin-top: $grid-unit-20;
}

.components-base-control__help {
margin-top: 0;
margin-left: 48px;
}
}
Loading