DropdownMenu V2 tweaks #56041

ciampo · 2023-11-10T15:33:59Z

What?

This PR includes a series of tweaks to the experimental new version of DropdownMenu, based on the specs shared in #55933.

Main tweaks:

Removed group label component (not needed)
Added new subcomponents for menu item label and help text (mostly needed because of text truncation behavior)
Added auto-indentation of menu items based on the presence, in the same popover, of at least one item with a prefix
Tweaks to spacing, typography, colors, hovered/focused/disabled states...

Why?

The design spec brings a coherent look with the rest of the components library, and addresses a few complex scenarios when dealing with some combinations of menu items and their contents.

How?

The most complex bits in the implementation:

CSS grid and subgrid were used to implement the auto-indent functionality
The Label and Help text subcomponent use the Truncate component under the hood

Testing Instructions

Open the "DropdownMenu v2 ariakit" Storybook examples, make sure that the component follows the design specs

Screenshots or screencast

dropdown-menu-v2-tweaks.mp4

ciampo · 2023-11-14T21:32:12Z

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

+// TODO:
+// - those values are different from saved variables?
+// - should bring this into the config, and make themeable
+// - border color and divider color are different?


Flagging this for us to discuss

border color and divider color are different?

Yup that's fine.

should bring this into the config, and make themeable

I'm not sure what is entailed, but the components should eventually be themable using the new color scales:

Thank you for clarifying.

There is one more question from the list above that I wanted to clarify — from the design spec, it seems that the border color is gray 300, and the divider is gray 200.

While these values seem to align with the inline comments where the grays are defined, I noticed that we have some variables specific to borders that are not using the same colors — I guess it would be good if you could review where that are being used, and potentially give feedback around whether we can tweak those variables to use gray 300 and 200.

The second group of vars seem to be applied to the experimental ToggleGroupControl. They make sense in the context of an interactive element like a form input where there are stricter a11y requirements for contrast. Visual elements (like the menu container) can use the lighter borders.

Good to know, and likely something that we should codify when working on the wider theme / design system

ciampo · 2023-11-14T21:33:05Z

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

+	display: grid;
+	grid-template-columns: minmax( 0, max-content ) 1fr;


This is where the main grid layout is defined.

The first column is for the prefix (and can collapse to 0 width if no prefixes are rendered within the same dropdownmenu popover).

The second column take all remaining available space, and is meant to host the wrapper element containing label, help text, and suffix.

ciampo · 2023-11-14T21:34:03Z

packages/components/src/dropdown-menu-v2-ariakit/index.tsx

-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>


The prefix wrapper is always rendered (even when empty) in order to correctly render in the first column of the grid layout.

ciampo · 2023-11-14T21:35:02Z

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

+	 * from the parent layout (ie. subgrid).
+	 */
+	display: grid;
+	grid-template-columns: subgrid;


CSS subgrid enables us to define a grid layout at the menu level, and "propagate" it down all the way to the menu item children.

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

ciampo · 2023-11-14T21:40:01Z

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

+	 */
+	grid-column: 2;
+
+	display: flex;


This wrapper occupies the second "column" of the grid layout, and is a flexbox container. This mixed grid + flexbox setup enables menu items to align their left indentation based on the presence of at least one prefix, but keeps independent around the right-side alignment

ciampo · 2023-11-14T21:41:03Z

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

+
+export const DropdownMenuGroup = styled( Ariakit.MenuGroup )`
+	/* Ignore this element when calculating the layout. Useful for subgrid */
+	display: contents;


Display contents allows us to ignore this element when calculating the layout, and look at its children directly

ciampo · 2023-11-14T21:42:09Z

packages/components/src/dropdown-menu-v2-ariakit/index.tsx

+											aria-hidden="true"
+											icon={ chevronRightSmall }
+											size={ 24 }
+											preserveAspectRatio="xMidYMid slice"


preserveAspectRatio is used to resize the width of the icon while preserving its real size (ie. slicing the SVG viewport)

ciampo · 2023-11-14T21:43:45Z

packages/components/src/dropdown-menu-v2-ariakit/stories/index.story.tsx

+		<ExampleSlotFill.Slot
+			fillProps={ fillProps }
+			bubblesVirtually
+			style={ { display: 'contents' } }


Adding display: contents to the Slot element is necessary, otherwise the slotfill example breaks the grid layout.

packages/components/src/slot-fill/types.ts

ciampo · 2023-11-14T22:08:59Z

packages/components/src/dropdown-menu-v2-ariakit/styles.ts

+
+export const DropdownMenuItemLabel = styled( Truncate )`
+	font-size: ${ font( 'default.fontSize' ) };
+	line-height: 20px;


Do we have any presets for line-height? Or are these values ad-hoc for this component?

We have text styles in Figma, so these values aren't ad hoc. I don't know how well those styles are reflected in the codebase though. All I'm aware of is https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/text/styles/text-mixins.native.js.

Typography is due a bit of a revamp for the admin work (#53322).

Sounds good, then I guess we can leave this as-is and make sure we revisit after we have some better common typography styles.

chad1008

This all looks good and tests well to me - the only deviation from the spec that jumped out to me was that disabled items aren't getting a not-allowed cursor when hovered, but that may be something you're planning to address separately.

andrewhayward · 2023-11-20T22:39:25Z

I don't know if this is the right place for this feedback, but for want of anywhere else...

Scroll margins

When there isn't enough space to render the whole menu, it gets a scrollbar, which is fine, but the menu items need a scroll margin to make sure they're fully visible.

A menu with a scrollbar. The first menu item has a focus ring, cut off by the scroll position.

--- a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
+++ b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
@@ -188,16 +188,21 @@ const baseItem = css`
        }
 `;

-export const DropdownMenuItem = styled( Ariakit.MenuItem )`
+const menuItem = css`
        ${ baseItem };
+       scroll-margin: ${ CONTENT_WRAPPER_PADDING };
+`;
+
+export const DropdownMenuItem = styled( Ariakit.MenuItem )`
+       ${ menuItem };
 `;

 export const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
-       ${ baseItem };
+       ${ menuItem };
 `;

 export const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`
-       ${ baseItem };
+       ${ menuItem };
 `;

 export const ItemPrefixWrapper = styled.span`

Disabled menu items

Every menu item should really be focusable, which isn't the default with Ariakit. We should set accessibleWhenDisabled as standard, so that consumers have to explicitly override it.

index aac8a8844f..a318d295a8 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
@@ -53,6 +53,7 @@ export const DropdownMenuItem = forwardRef<
        return (
                <Styled.DropdownMenuItem
                        ref={ ref }
+                       accessibleWhenDisabled
                        { ...props }
                        hideOnClick={ hideOnClick }
                        store={ dropdownMenuContext?.store }
@@ -86,6 +87,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
        return (
                <Styled.DropdownMenuCheckboxItem
                        ref={ ref }
+                       accessibleWhenDisabled
                        { ...props }
                        hideOnClick={ hideOnClick }
                        store={ dropdownMenuContext?.store }
@@ -130,6 +132,7 @@ export const DropdownMenuRadioItem = forwardRef<
        return (
                <Styled.DropdownMenuRadioItem
                        ref={ ref }
+                       accessibleWhenDisabled
                        { ...props }
                        hideOnClick={ hideOnClick }
                        store={ dropdownMenuContext?.store }

ciampo · 2023-11-22T10:18:14Z

Thank you @chad1008 and @andrewhayward for your reviews!

I've pushed 310eb12, da57e59 and 264b4fc which should address your feedback.

@jameskoster , would you be able to take a look at this PR? I also left a couple of comments (one, two) highlighting a few points that I wanted to discuss.

github-actions · 2023-11-22T10:33:43Z

Flaky tests detected in 264b4fc.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6955817559
📝 Reported issues:

[Flaky Test] should move to the start of the first line on ArrowUp (-firefox) #56087 in /test/e2e/specs/editor/various/writing-flow.spec.js
[Flaky Test] should partially select with shift + click (@webkit) #53524 in /test/e2e/specs/editor/various/multi-block-selection.spec.js

… scrolled into view

ciampo · 2023-11-23T13:06:11Z

@jameskoster and @WordPress/gutenberg-components , I believe that this PR is ready for a last round of review. It would be great if we could merge this PR soon, since it unblocks a bunch of other dropdownmenu-related work.

jameskoster

There's one tiny detail to fix. We need to update the offset position values accounting for the new padding. Notice how the flyouts aren't lining up nicely now:

ciampo · 2023-11-23T14:38:30Z

@jameskoster thank you for the detailed screenshot! Done

jameskoster

I think we're looking good. There might be some minor visual tweaks down the road as we make more practical use of the component, but those are easy to revisit in smaller PRs as required.

ciampo force-pushed the feat/dropdown-menu-v2-ariakit-style-tweaks branch 2 times, most recently from 2d40fea to 8b66d75 Compare November 14, 2023 21:26

ciampo self-assigned this Nov 14, 2023

ciampo added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Nov 14, 2023

ciampo commented Nov 14, 2023

View reviewed changes

packages/components/src/dropdown-menu-v2-ariakit/styles.ts Outdated Show resolved Hide resolved

ciampo commented Nov 14, 2023

View reviewed changes

packages/components/src/slot-fill/types.ts Outdated Show resolved Hide resolved

ciampo marked this pull request as ready for review November 14, 2023 22:00

ciampo requested a review from ajitbohra as a code owner November 14, 2023 22:00

ciampo requested review from jameskoster, richtabor and a team November 14, 2023 22:07

ciampo commented Nov 14, 2023

View reviewed changes

chad1008 reviewed Nov 20, 2023

View reviewed changes

ciampo mentioned this pull request Nov 22, 2023

Refactor experimental dropdown menu usages to latest version #55625

Merged

ciampo force-pushed the feat/dropdown-menu-v2-ariakit-style-tweaks branch from accfcf6 to 264b4fc Compare November 22, 2023 10:12

ciampo requested a review from chad1008 November 22, 2023 10:31

ciampo mentioned this pull request Nov 22, 2023

Slot: add styles prop to bubblesVirtually version #56428

Merged

ciampo added 13 commits November 23, 2023 13:35

Fix slotfill example

e37a4f9

Tweak sizes, spacing, and colors. Tidy up styles.

6c0377a

Add label subcomponent

7dd7588

Update storybook examples

96ed080

Export help text and label subcomponents

156fbda

CHANGELOG

a729bab

README

d337661

Fix unit test

202247d

Allow disabled items to be keyboard focusable / accessible

864569a

Display the "not allowed" cursor on disabled menu items

6cde2ec

Add scroll-margin to make sure that menu items are fully visible when…

56b6117

… scrolled into view

Update unit tests

d7fe484

Use inline styles instead of !important

d8e6465

ciampo force-pushed the feat/dropdown-menu-v2-ariakit-style-tweaks branch from c2c80e6 to d8e6465 Compare November 23, 2023 12:36

ciampo mentioned this pull request Nov 23, 2023

DropdownMenu v2: align component to shared styles and theme variables #50971

Open

Apply design feedback

a6d5ad4

ciampo requested a review from a team November 23, 2023 12:57

CHANGELOG

5e02c8c

ciampo force-pushed the feat/dropdown-menu-v2-ariakit-style-tweaks branch from c1ce534 to 5e02c8c Compare November 23, 2023 12:58

jameskoster reviewed Nov 23, 2023

View reviewed changes

Update submenu shift

c0f12c3

ciampo requested a review from jameskoster November 23, 2023 14:38

jameskoster approved these changes Nov 23, 2023

View reviewed changes

ciampo enabled auto-merge (squash) November 23, 2023 16:41

ciampo merged commit b55f86f into trunk Nov 23, 2023
51 checks passed

ciampo deleted the feat/dropdown-menu-v2-ariakit-style-tweaks branch November 23, 2023 16:51

github-actions bot added this to the Gutenberg 17.2 milestone Nov 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DropdownMenu V2 tweaks #56041

DropdownMenu V2 tweaks #56041

ciampo commented Nov 10, 2023 •

edited

Loading

ciampo Nov 14, 2023 •

edited

Loading

jameskoster Nov 22, 2023

ciampo Nov 22, 2023

jameskoster Nov 23, 2023

ciampo Nov 23, 2023

ciampo Nov 14, 2023 •

edited

Loading

ciampo Nov 14, 2023

ciampo Nov 14, 2023

ciampo Nov 14, 2023

ciampo Nov 14, 2023

ciampo Nov 14, 2023

ciampo Nov 14, 2023

ciampo Nov 14, 2023

jameskoster Nov 22, 2023

ciampo Nov 22, 2023

chad1008 left a comment

andrewhayward commented Nov 20, 2023 •

edited

Loading

ciampo commented Nov 22, 2023 •

edited

Loading

github-actions bot commented Nov 22, 2023

ciampo commented Nov 23, 2023

jameskoster left a comment

ciampo commented Nov 23, 2023

jameskoster left a comment

		display: grid;
		grid-template-columns: minmax( 0, max-content ) 1fr;

DropdownMenu V2 tweaks #56041

DropdownMenu V2 tweaks #56041

Conversation

ciampo commented Nov 10, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

ciampo Nov 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciampo Nov 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chad1008 left a comment

Choose a reason for hiding this comment

andrewhayward commented Nov 20, 2023 • edited Loading

Scroll margins

Disabled menu items

ciampo commented Nov 22, 2023 • edited Loading

github-actions bot commented Nov 22, 2023

ciampo commented Nov 23, 2023

jameskoster left a comment

Choose a reason for hiding this comment

ciampo commented Nov 23, 2023

jameskoster left a comment

Choose a reason for hiding this comment

ciampo commented Nov 10, 2023 •

edited

Loading

ciampo Nov 14, 2023 •

edited

Loading

ciampo Nov 14, 2023 •

edited

Loading

andrewhayward commented Nov 20, 2023 •

edited

Loading

ciampo commented Nov 22, 2023 •

edited

Loading