MSD: Change to use a prop to control the last element in PageHeader to control dropdown menu alignment.

[StevenDufresne]

Alternative: #107072
Related to: #107003

Proposed Changes

This PR attempts to improve devEx for PageHeader consumers, who have drop-downs in their action. Our preferred small screen layout is to right-align the menu.

The problem right now, is that the consumer is responsible for handling that layout. See this comment for context.

Here I've added a prop, hasActionDropdown, that tells the section header that it has a dropdown in the actions list, and it adds a custom style , has-action-dropdown which sets up CSS to right align the last item when the actions wrap.

I'm not sure I'm in love with the prop name, but I can't think of one that's short and descriptive.

Screenshots

Use Cases

Testing Instructions

Visit the following pages on mobile/desktop:

• /v2/sites/:site
• /v2/domains/:domain/dns
• /v2/me/billing/purchases/:purchaseId

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-161872

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-161872&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-161872&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug try/msd-try-switch-to-stretch on your sandbox.

[arthur791004]

I'm not sure whether we should push the menu icon to the end when it wraps — it might look odd if there's only one action menu 🙈

To me, if there’s an action menu, it’s better to keep it on the same line as the title. But for other actions, it would make more sense to move them to a new line. Does it make sense 🤔

I think we need designer's input on this!

[arthur791004]

Feels weird to introduce this to SectionHeader. It seems the actions should handle it itself

[StevenDufresne]

I'm not sure whether we should push the menu icon to the end when it wraps — it might look odd if there's only one action menu 🙈

Yeah, for the purchases page, this current exists. I think we should promote the menu items into buttons (the important ones). All pages should have a primary. See context: CHE-286

To me, if there’s an action menu, it’s better to keep it on the same line as the title. But for other actions, it would make more sense to move them to a new line. Does it make sense 🤔

I see your point, it kind of works, but having two different clickable zones seems a bit weird.

I think we need designer's input on this!

The dropdown menu flying out to the right is designer input :). See DOTCOM-15116

[arthur791004]

I see your point, it kind of works, but having two different clickable zones seems a bit weird.

Yes. Generally, all of them should become icons in the header if there isn’t enough space. However, I think it would be better to promote it to a text button, like More, in our case 🙂

The dropdown menu flying out to the right is designer input :). See DOTCOM-15116

Oh I see 👍

[arthur791004]

It seems we only have 2 use cases now. How about just wrapping primary actions with HStack? Or could we create something like PageHeader.ActionMenu component and replace the DropdownMenu with it? WDYT? 🤔

[StevenDufresne]

Yes. Generally, all of them should become icons in the header if there isn’t enough space. However, I think it would be better to promote it to a text button, like More, in our case 🙂

Right. These three-dots menus should strictly be used for overflow. Our standard should be max 2 buttons, everything else goes into the three-dot menu. We should never just have a three-dot menu.

Or could we create something like PageHeader.ActionMenu component and replace the DropdownMenu with it? WDYT? 🤔

I thought about that but didn't think we used that pattern until I noticed today we do that for the header bar. I think that's a good idea.

[zaguiini]

Thanks @StevenDufresne. I think your proposed solution makes more sense and I also think @arthur791004 has brought a good idea. Let's move forward with a mix of yours. I'll close my PR. 😄 👍🏻

[StevenDufresne]

Opened the alternative @arthur791004 suggested in #107117.