Skip to content

Components, DataViews: Adopt --wpds-dimension-size-* tokens #79093

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

Merged
ciampo merged 5 commits into from
Jun 16, 2026
Merged

Components, DataViews: Adopt --wpds-dimension-size-* tokens #79093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f64dda
Components, DataViews: Adopt --wpds-dimension-size-* tokens
shrivastavanolo Jun 10, 2026
54484f5
refactor: address reviews
shrivastavanolo Jun 12, 2026
36dd5c0
changelog: Add CHANGELOG entries for dataviews, components, and ui pa…
shrivastavanolo Jun 12, 2026
9c2e7af
refactor: remove unused vars import from dataviews list layout styles
shrivastavanolo Jun 12, 2026
fa964aa
refactor: address reviews
shrivastavanolo Jun 12, 2026
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
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@

- `SandBox`: Fix the viewport-unit (`vh`, `vw`, etc.) stripping so user-supplied HTML using these units in `width`/`height` no longer triggers a runaway resize loop in the preview ([#78677](https://github.com/WordPress/gutenberg/pull/78677)).

### Internal

- Adopt `--wpds-dimension-size-*` design tokens [#79093](https://github.com/WordPress/gutenberg/pull/79093).

### Code Quality

- Move `@types/react` from `dependencies` to an optional peer dependency so consumers' React type version is used [#79095](https://github.com/WordPress/gutenberg/pull/79095).
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,14 +321,14 @@
}

&.is-small {
height: $button-size-small;
height: var(--wpds-dimension-size-sm);
line-height: 22px;
padding: 0 8px;
font-size: 11px;

&.has-icon:not(.has-text) {
padding: 0;
min-width: $button-size-small;
min-width: var(--wpds-dimension-size-sm);
}
}

Expand Down
4 changes: 1 addition & 3 deletions packages/components/src/notice/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@
// consistent across variants, matching `@wordpress/ui` Notice (`.title` /
// `.description` always use `--text-vertical-padding` whether or not `CloseIcon`
// is rendered).
// TODO: Replace `$button-size-small` with a WPDS size token once size tokens
// land in `@wordpress/theme`.
padding-block: calc((#{$button-size-small} - 1lh) / 2);
padding-block: calc((var(--wpds-dimension-size-sm) - 1lh) / 2);
}

.components-notice__actions {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/toolbar/toolbar-group/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
padding-right: $grid-unit-15 * 0.5;

svg {
min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
min-width: var(--wpds-dimension-size-sm); // This is the optimal icon size, and we size the whole button after this.
}

&::before {
Expand Down
4 changes: 4 additions & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@

- Move `@types/react` from `dependencies` to an optional peer dependency so consumers' React type version is used [#79095](https://github.com/WordPress/gutenberg/pull/79095).

### Internal

- Adopt `--wpds-dimension-size-*` design tokens [#79093](https://github.com/WordPress/gutenberg/pull/79093).

## 16.0.1 (2026-06-16)

## 16.0.0 (2026-06-10)
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataform-layouts/details/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.dataforms-layouts-details__summary-content {
display: inline-flex;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
}

.dataforms-layouts-details__content {
Expand Down
6 changes: 3 additions & 3 deletions packages/dataviews/src/components/dataform-layouts/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
color: inherit;
display: flex;
width: 100%;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
cursor: var(--wpds-cursor-control);
align-items: flex-start;
border-radius: var(--wpds-border-radius-sm);
Expand Down Expand Up @@ -85,7 +85,7 @@
.dataforms-layouts-panel__field-label {
width: 38%;
flex-shrink: 0;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
display: flex;
align-items: center;
line-height: var(--wpds-typography-line-height-sm);
Expand Down Expand Up @@ -120,7 +120,7 @@
.dataforms-layouts-panel__field-control {
flex-grow: 1;
min-width: 0;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
line-height: var(--wpds-typography-line-height-md);
display: flex;
align-items: center;
Expand Down
6 changes: 3 additions & 3 deletions packages/dataviews/src/components/dataform-layouts/regular/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.dataforms-layouts-regular__field {
width: 100%;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
justify-content: flex-start !important;
align-items: flex-start !important;

Expand All @@ -14,7 +14,7 @@
.dataforms-layouts-regular__field-label {
width: 38%;
flex-shrink: 0;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
display: flex;
align-items: center;
line-height: var(--wpds-typography-line-height-sm);
Expand All @@ -31,7 +31,7 @@

.dataforms-layouts-regular__field-control {
flex-grow: 1;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
display: flex;
align-items: center;
}
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataviews-bulk-actions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@

.dataviews-bulk-actions-footer__container {
margin-right: auto;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
}
21 changes: 10 additions & 11 deletions packages/dataviews/src/components/dataviews-filters/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
cursor: var(--wpds-cursor-control);
padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
color: var(--wpds-color-foreground-interactive-neutral);
position: relative;
display: flex;
Expand All @@ -88,7 +88,7 @@
}

&.has-reset {
padding-inline-end: calc(#{vars.$icon-size} + var(--wpds-dimension-padding-xs));
padding-inline-end: calc(var(--wpds-dimension-size-sm) + var(--wpds-dimension-padding-xs));
}

&:hover:not(&.is-not-clickable),
Expand Down Expand Up @@ -125,9 +125,8 @@
}

.dataviews-filters__summary-chip-remove {
// TODO: use size token when available.

@ciampo ciampo Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

vars.$icon-size is still being used, can we remove it entirely and rely on the DS size tokens ?

width: vars.$icon-size;
height: vars.$icon-size;
width: var(--wpds-dimension-size-sm);
height: var(--wpds-dimension-size-sm);
border-radius: var(--wpds-border-radius-md);
border: 0;
padding: 0;
Expand Down Expand Up @@ -197,7 +196,7 @@
box-sizing: border-box;
padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
cursor: default;
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
@include body-medium();

&:last-child {
Expand Down Expand Up @@ -329,9 +328,9 @@
.dataviews-filters__search-widget-filter-combobox__input {
@include input-control;
display: block;
padding: 0 var(--wpds-dimension-padding-sm) 0 calc(var(--wpds-dimension-base) * 8);
padding: 0 var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-size-md);
width: 100%;
height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
height: var(--wpds-dimension-size-md);

// Unset inherited values.
margin-left: 0;
Expand Down Expand Up @@ -370,7 +369,7 @@
display: flex;
align-items: center;
justify-content: center;
width: vars.$icon-size;
width: var(--wpds-dimension-size-sm);

&:dir(ltr) {
transform: scaleX(-1);
Expand All @@ -389,8 +388,8 @@
right: 0;
transform: translate(50%, -50%);
background: var(--wpds-color-background-interactive-brand-strong);
height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
min-width: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
height: var(--wpds-dimension-size-2xs);
min-width: var(--wpds-dimension-size-2xs);
line-height: var(--wpds-typography-line-height-xs);
padding: 0 var(--wpds-dimension-padding-xs);
text-align: center;
Expand Down
14 changes: 7 additions & 7 deletions packages/dataviews/src/components/dataviews-layouts/activity/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

.dataviews-view-activity__item-actions {
min-width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-width: var(--wpds-dimension-size-sm);
}

.dataviews-view-activity__item-content {
Expand All @@ -22,7 +22,7 @@
.dataviews-view-activity__item-title,
.dataviews-view-activity__item-description,
.dataviews-view-activity__item-fields {
min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
min-height: var(--wpds-dimension-size-2xs);
}

.dataviews-view-activity__item-title {
Expand Down Expand Up @@ -105,7 +105,7 @@
width: var(--wpds-dimension-padding-md);

&::before {
height: calc(var(--wpds-dimension-base) * 3);
height: var(--wpds-dimension-size-3xs);
}
}
.dataviews-view-activity__item-type-icon {
Expand All @@ -119,10 +119,10 @@

&.is-balanced {
.dataviews-view-activity__item-type {
width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
width: var(--wpds-dimension-size-sm);

&::before {
height: calc(var(--wpds-dimension-base) * 3);
height: var(--wpds-dimension-size-3xs);
}
}
.dataviews-view-activity__item-type-icon {
Expand All @@ -137,10 +137,10 @@

&.is-comfortable {
.dataviews-view-activity__item-type {
width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
width: var(--wpds-dimension-size-md);

&::before {
height: calc(var(--wpds-dimension-base) * 2);
height: var(--wpds-dimension-size-4xs);
}
}
.dataviews-view-activity__item-type-icon {
Expand Down
6 changes: 3 additions & 3 deletions packages/dataviews/src/components/dataviews-layouts/grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
}

.dataviews-view-grid__title-field {
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available. Preserve layout when there is no ellipsis button
min-height: var(--wpds-dimension-size-sm); // TODO: Preserve layout when there is no ellipsis button
overflow: hidden;
align-content: center;
text-align: start;
Expand Down Expand Up @@ -145,13 +145,13 @@
}

.dataviews-view-grid__field-value:not(:empty) {
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
line-height: var(--wpds-typography-line-height-sm);
padding-top: calc(var(--wpds-dimension-base) / 2);
}

.dataviews-view-grid__field {
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
align-items: center;

.dataviews-view-grid__field-name {
Expand Down
21 changes: 10 additions & 11 deletions packages/dataviews/src/components/dataviews-layouts/list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "@wordpress/base-styles/variables" as vars;
@use "../../../dataviews/style" as *;

div.dataviews-view-list {
Expand Down Expand Up @@ -32,7 +31,7 @@ div.dataviews-view-list {
}

> div {
height: vars.$button-size-small;
height: var(--wpds-dimension-size-sm);
}

> :not(:last-child) {
Expand Down Expand Up @@ -126,7 +125,7 @@ div.dataviews-view-list {
}
.dataviews-view-list__title-field {
flex: 1;
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
line-height: var(--wpds-typography-line-height-md);
overflow: hidden;
// The field should be in front of the main button in case it has a link/button.
Expand Down Expand Up @@ -190,7 +189,7 @@ div.dataviews-view-list {
}

.dataviews-view-list__field-value {
min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
min-height: var(--wpds-dimension-size-sm);
line-height: var(--wpds-typography-line-height-sm);
display: flex;
align-items: center;
Expand All @@ -209,25 +208,25 @@ div.dataviews-view-list {
}

.dataviews-view-list__title-field {
min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
min-height: var(--wpds-dimension-size-2xs);
line-height: var(--wpds-typography-line-height-xs);
}

.dataviews-view-list__media-wrapper {
width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
width: var(--wpds-dimension-size-md);
height: var(--wpds-dimension-size-md);
}

.dataviews-view-list__field-wrapper {
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
}

.dataviews-view-list__fields {
gap: var(--wpds-dimension-gap-sm);
row-gap: var(--wpds-dimension-gap-xs);

.dataviews-view-list__field-value {
min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
min-height: var(--wpds-dimension-size-2xs);
line-height: var(--wpds-typography-line-height-xs);
}
}
Expand All @@ -241,7 +240,7 @@ div.dataviews-view-list {
}

.dataviews-view-list__title-field {
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
line-height: var(--wpds-typography-line-height-xl);
}

Expand All @@ -259,7 +258,7 @@ div.dataviews-view-list {
row-gap: var(--wpds-dimension-gap-sm);

.dataviews-view-list__field-value {
min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
min-height: var(--wpds-dimension-size-md);
line-height: var(--wpds-typography-line-height-md);
}
}
Expand Down
Loading
Loading