Skip to content

Commit dfdc323

Browse files
jameskosterciampojasmussenmirkafcoveram
authored andcommitted
Menu: Align group labels and separators with indented item labels. (WordPress#83993)
Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: fcoveram <fcoveram@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
1 parent edc808c commit dfdc323

2 files changed

Lines changed: 18 additions & 6 deletions

File tree

‎packages/ui/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
### Enhancements
1919

20+
- `Menu`: Align group labels and separators with item labels when a radio or checkbox column indents those labels ([#83993](https://github.com/WordPress/gutenberg/pull/83993)).
2021
- `Checkbox`, `CheckboxControl`, `CheckboxGroup`: Mark as recommended for use in a WordPress environment ([#83771](https://github.com/WordPress/gutenberg/pull/83771)).
2122
- `Spinner`: Show a trackless half-circle like the `Button` loading indicator, with a `color` prop that accepts any CSS color value and defaults to weak neutral foreground. Keep the arc visible in forced-colors mode ([#83775](https://github.com/WordPress/gutenberg/pull/83775)).
2223
- Native text inputs and textareas use at least 16px below 600px to avoid iOS Safari zoom. Prefix and suffix text on `Input` match that size. Select and combobox trigger text stay at the `md` font size. ([#82764](https://github.com/WordPress/gutenberg/pull/82764))

‎packages/ui/src/menu/style.module.css‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
--wp-ui-menu-min-width: 160px;
1212
--wp-ui-menu-max-width: var(--wpds-dimension-surface-width-md);
1313
--wp-ui-menu-item-padding-inline: var(--wpds-dimension-padding-md);
14-
--wp-ui-menu-group-head-padding-inline: var(--wpds-dimension-padding-md);
14+
--_wp-ui-menu-group-head-padding-base: var(--wpds-dimension-padding-md);
15+
--wp-ui-menu-group-head-padding-inline: var(--_wp-ui-menu-group-head-padding-base);
1516
--wp-ui-menu-selection-indicator-track-size: 0px;
1617
--wp-ui-menu-selection-indicator-size: var(--wpds-dimension-size-sm);
1718
--wp-ui-menu-selection-indicator-gap: 0px;
@@ -57,7 +58,8 @@
5758
/*
5859
* The list is the implicit alignment group for direct items. Explicit
5960
* groups and radio groups each establish an independent prefix track while
60-
* inheriting the menu-wide selection tracks.
61+
* inheriting the menu-wide selection tracks. Group labels and separators
62+
* follow that shared selection track so they line up with item labels.
6163
*/
6264
.list,
6365
.group,
@@ -88,13 +90,22 @@
8890
--wp-ui-menu-group-prefix-gap: var(--wpds-dimension-gap-xs);
8991
}
9092

93+
/*
94+
* Start after the selection track (`prefix-start`) and stop before the
95+
* trailing item padding (`content-end`). A zero-width prefix track keeps
96+
* this on the label line; a real prefix stays in its own column so one
97+
* group's icons do not shift every heading and divider.
98+
* `--wp-ui-menu-group-head-padding-inline` still nudges both edges. Its
99+
* default matches the item padding the grid already applies.
100+
*/
91101
.group-label {
92-
grid-column: 1 / -1;
102+
grid-column: prefix-start / content-end;
93103
display: flex;
94104
align-items: center;
105+
min-width: 0;
95106
min-height: var(--wpds-dimension-size-md);
96107
padding-block: var(--wpds-dimension-padding-xs);
97-
padding-inline: var(--wp-ui-menu-group-head-padding-inline);
108+
margin-inline: calc(var(--wp-ui-menu-group-head-padding-inline) - var(--_wp-ui-menu-group-head-padding-base));
98109
font-family: var(--wpds-typography-font-family-body);
99110
font-size: var(--wpds-typography-font-size-xs);
100111
font-weight: var(--wpds-typography-font-weight-emphasis);
@@ -104,10 +115,10 @@
104115
}
105116

106117
.separator {
107-
grid-column: 1 / -1;
118+
grid-column: prefix-start / content-end;
108119
height: var(--wpds-border-width-xs);
109120
margin-block: var(--wpds-dimension-gap-xs);
110-
margin-inline: var(--wp-ui-menu-group-head-padding-inline);
121+
margin-inline: calc(var(--wp-ui-menu-group-head-padding-inline) - var(--_wp-ui-menu-group-head-padding-base));
111122
background-color: var(--wpds-color-stroke-surface-neutral-weak);
112123

113124
@media ( forced-colors: active ) {

0 commit comments

Comments
 (0)