Dashboard V2: Introduce ActionList and ActionItem components #103371

arthur791004 · 2025-05-13T08:31:04Z

Proposed Changes

Introduce the ActionList and ActionItem component

Without heading	With heading

Why are these changes being made?

We need the ActionList and ActionItem components on Site Settings page

Testing Instructions

Run the storybook by yarn run storybook:start
Open http://localhost:6006/
Check each story on the ActionItem component

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 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 · 2025-05-13T08:31:16Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

ciampo · 2025-05-13T08:32:38Z

Hi there 👋 Could you explain a bit more about the need for this component? Has it been already reviewed and approved by designers to belong in the Design System?

matticbot · 2025-05-13T08:40:15Z

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

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

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug feat/action-item-component on your sandbox.

matticbot · 2025-05-13T08:42:37Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

arthur791004 · 2025-05-13T08:44:15Z

We need this components for Site Settings, Domain Settings like the SummaryButton. I was asked whether it makes sense to extend the Summary button but it would be better to have ActionItem to be more specific about action intent. See QOBjujZah0UlGDDdLKZhzi-fi-74_35008#1246206155

ActionItem	Site Settings

tyxla

We need this components for Site Settings, Domain Settings like the SummaryButton. I was asked whether it makes sense to extend the Summary button but it would be better to have ActionItem to be more specific about action intent. See QOBjujZah0UlGDDdLKZhzi-fi-74_35008#1246206155

Makes sense, looks like a useful component.

Still, I'd echo what @ciampo suggested above - I see in the FIgma file that the component is marked as "WIP". Ideally, we'd have design approved first, and then potentially the component can be built outside of @automattic/components before promoting it to be formally part of the design system.

Talking about design, what's the state of the design review here?

arthur791004 · 2025-05-13T09:59:43Z

the component is marked as "WIP". Ideally, we'd have design approved first, and then potentially the component can be built outside of @automattic/components before promoting it to be formally part of the design system

Ok, sounds good to me! I'll move the component to dashboard v2 first if it's still not ready 🙂

Talking about design, what's the state of the design review here?

@matt-west @jasmussen I noticed the ActionItem component has been in progress for a while. Do you think it's ready for dev, or is there anything still missing?

jasmussen · 2025-05-13T10:19:15Z

@jameskoster any thoughts? My understanding is that it's ready for implementation.

jameskoster · 2025-05-13T11:12:29Z

I think the design is ready. We use the 'WIP:' prefix in Figma to indicate the component isn't implemented yet. We should probably revise this so we have more granular status indicators.

tyxla · 2025-05-13T11:46:13Z

I think the design is ready. We use the 'WIP:' prefix in Figma to indicate the component isn't implemented yet. We should probably revise this so we have more granular status indicators.

I guess the broader question to ask here is: is every new component DS-worthy? I believe we can't just put every component in the DS. What's the criteria we've used to assess whether a component should be part of the DS or not?

arthur791004 · 2025-05-13T13:17:41Z

What's the criteria we've used to assess whether a component should be part of the DS or not?

I'm happy to go with either adding the component to Dashboard V2 or DS. I’m also wondering if there are specific criteria we follow when deciding where a component belongs. From my perspective, the ActionItem feels quite similar to the SummaryButton used on the Settings pages (Site, Domain, Email, etc.), so it seems like it could make sense to include it in DS as well. If not, I’d really appreciate some insight into what distinguishes it from the SummaryButton.

tyxla · 2025-05-13T13:23:43Z

I'm happy to go with either adding the component to Dashboard V2 or DS. I’m also wondering if there are specific criteria we follow when deciding where a component belongs. From my perspective, the ActionItem feels quite similar to the SummaryButton used on the Settings pages (Site, Domain, Email, etc.), so it seems like it could make sense to include it in DS as well. If not, I’d really appreciate some insight into what distinguishes it from the SummaryButton.

Exactly - we don't know what the criteria are. How ActionItem is similar to SummaryButton feels irrelevant here. Rather, the question should be what the specific acceptance criteria are, and whether each component ticks the boxes. Today, I can't say with certainty whether SummaryButton ticks the criteria either.

Definitely don't consider this a blocker. Feel free to put the component inline in the dashboard directory for now if you want to move it forward. We have a DS call on Thursday, and we're planning to discuss this problem more broadly and agree on acceptance criteria for components in DS.

arthur791004 · 2025-05-13T13:26:52Z

Feel free to put the component inline in the dashboard directory for now if you want to move it forward

Ok! I'll go ahead and place the component inline in the dashboard for now. Thanks for catching this! 🙂

client/dashboard/components/action-item/index.tsx

jameskoster · 2025-05-14T10:18:45Z

The icon property is virtually identical to the decoration property in PageHeader; specifically we want to support images as well as icons. Should the implementation be aligned?

jameskoster · 2025-05-14T10:20:09Z

In terms of adding this to the Design System, I'm not sure whether we need to expose ActionItem as a public component. It's unlikely a consumer would ever use it in isolation—preferably it would always be contained in an ActionList (Figma spec) instance, even when there's only one action.

The relationship is a bit similar to Menu, where things like Item are private subcomponents.

What do y'all think?

client/dashboard/components/action-list/action-item.scss

youknowriad · 2025-05-15T06:57:37Z

client/dashboard/components/action-list/test/index.tsx

+		expect( screen.getByText( 'Action item title 1' ) ).toBeVisible();
+		expect( screen.getByText( 'Action item title 2' ) ).toBeVisible();
+	} );
+} );


This is just my opinion, I know it's not shared by everyone, but I'm going to share it anyway :)

Testing our code is very important but there are good and bad tests and I prefer no tests over bad tests. For me these tests are useless, they test the output without any behavior testing. So these tests will never break or only break when we actually need to change them, so they won't catch any regressions, so I don't really think they are good tests.

Ok. Removed these tests 🙂

youknowriad

Left some comments about what I would have done differently (or tried) but overall looks to me.

matt-west · 2025-05-15T09:21:11Z

In terms of adding this to the Design System, I'm not sure whether we need to expose ActionItem as a public component. It's unlikely a consumer would ever use it in isolation—preferably it would always be contained in an ActionList (Figma spec) instance, even when there's only one action.

I agree. I haven't seen a need for using ActionItem outside of an ActionList.

fushar · 2025-05-15T09:41:04Z

client/dashboard/components/action-list/index.tsx

+) {
+	return (
+		<Card className="action-list" ref={ ref }>
+			{ ( title || description ) && (


Should we render <CardBody /> to surround the content?

fushar

Checked the storybook. Looks good to me, thanks for working on this!

jameskoster · 2025-05-15T15:10:02Z

Unless designs that I've missed call for it I think it would be simpler to start with a single action for now. The action should always be a compact sized button, but there should be a way to pass certain properties like isDestructive.

A group of contextual controls, such as buttons, dropdowns, or a search input, relevant to the action.

We can be stricter with this description:

Renders a button that invokes the related action.

arthur791004 · 2025-05-16T01:20:40Z

Unless designs that I've missed call for it I think it would be simpler to start with a single action for now. The action should always be a compact sized button, but there should be a way to pass certain properties like isDestructive.

Yes, that's my first proposal. But we're favor composition and we might want multiple actions in the future, so the current way provides more flexibility. We'll still use the single action and compact sized button on hosting dashboard v2.

We can be stricter with this description:
Renders a button that invokes the related action.

👍

ciampo · 2025-05-22T15:28:12Z

client/dashboard/components/action-list/index.tsx

+	ref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >
+) {
+	return (
+		<Card className="action-list" ref={ ref }>


I haven't taken a deep look at the code, but one thing that we should consider (even while this component is still implemented locally) is to introduce list semantics — ie. action list could render a title + ul element (the ul should be the .action-list__actions) and action item could render a li element

Additionally, the ul should be aria-labelledby the title (and optionally, the description)

Also that classname is way too generic and doesn't follow the guidelines.

Yup. We should try to scope our class names better (ie. a8c-dashboard-action-list or something similar)

per our guidelines, this one would be dashboard-action-list

arthur791004 requested a review from a team as a code owner May 13, 2025 08:31

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 13, 2025

arthur791004 changed the title ~~Components: Introduce ActionItem component~~ WIP Components: Introduce ActionItem component May 13, 2025

tyxla reviewed May 13, 2025

View reviewed changes

arthur791004 self-assigned this May 13, 2025

arthur791004 requested review from youknowriad and a team as code owners May 13, 2025 13:32

arthur791004 changed the title ~~WIP Components: Introduce ActionItem component~~ Dashboard V2: Introduce ActionItem component May 13, 2025

arthur791004 added the [Feature] Hosting Dashboard label May 13, 2025

arthur791004 requested review from matt-west, jameskoster and jasmussen May 13, 2025 15:12

youknowriad reviewed May 13, 2025

View reviewed changes

client/dashboard/components/action-item/index.tsx Outdated Show resolved Hide resolved

ntsekouras added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label May 14, 2025

github-actions bot added the [Status] Design Input Requested Label automatically added to PRs where design feedback is requested label May 14, 2025

youknowriad reviewed May 15, 2025

View reviewed changes

client/dashboard/components/action-list/action-item.scss Outdated Show resolved Hide resolved

youknowriad reviewed May 15, 2025

View reviewed changes

youknowriad approved these changes May 15, 2025

View reviewed changes

fushar reviewed May 15, 2025

View reviewed changes

fushar approved these changes May 15, 2025

View reviewed changes

arthur791004 force-pushed the feat/action-item-component branch from 9509283 to c4c8e9d Compare May 15, 2025 14:22

arthur791004 added 13 commits May 16, 2025 10:24

Components: Introduce ActionItem component

0e7560e

Support RenderModal

75af112

Add tests

4202bfe

Fix types

0067479

Move to client/dashboard/components

3f221be

Make the props of the ActionItem align with the PageHeader component

eda5467

Implement ActionList

af52bfd

Update stories

2354559

Don't modify the padding of the button

eef916c

Address feedback

9fc183b

Reduce CSS

b3089b0

Add CardBody

fff675e

Update description

c9dc67f

arthur791004 force-pushed the feat/action-item-component branch from c4c8e9d to c9dc67f Compare May 16, 2025 01:24

Fix typo

ea5989f

arthur791004 merged commit 77a43f2 into trunk May 16, 2025
14 checks passed

arthur791004 deleted the feat/action-item-component branch May 16, 2025 01:54

ciampo reviewed May 22, 2025

View reviewed changes

Dashboard V2: Introduce ActionList and ActionItem components #103371

Dashboard V2: Introduce ActionList and ActionItem components #103371

Uh oh!

Conversation

arthur791004 commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented May 13, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ciampo commented May 13, 2025

Uh oh!

matticbot commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 13, 2025

Uh oh!

arthur791004 commented May 13, 2025

Uh oh!

tyxla left a comment

Choose a reason for hiding this comment

Uh oh!

arthur791004 commented May 13, 2025

Uh oh!

jasmussen commented May 13, 2025

Uh oh!

jameskoster commented May 13, 2025

Uh oh!

tyxla commented May 13, 2025

Uh oh!

arthur791004 commented May 13, 2025

Uh oh!

tyxla commented May 13, 2025

Uh oh!

arthur791004 commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jameskoster commented May 14, 2025

Uh oh!

jameskoster commented May 14, 2025

Uh oh!

Uh oh!

youknowriad May 15, 2025

Choose a reason for hiding this comment

Uh oh!

arthur791004 May 15, 2025

Choose a reason for hiding this comment

Uh oh!

youknowriad left a comment

Choose a reason for hiding this comment

Uh oh!

matt-west commented May 15, 2025

Uh oh!

fushar May 15, 2025

Choose a reason for hiding this comment

Uh oh!

arthur791004 May 15, 2025

Choose a reason for hiding this comment

Uh oh!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

jameskoster commented May 15, 2025

Uh oh!

arthur791004 commented May 16, 2025

Uh oh!

Uh oh!

ciampo May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

youknowriad May 22, 2025

Choose a reason for hiding this comment

Uh oh!

ciampo May 22, 2025

arthur791004 commented May 13, 2025 •

edited

Loading

github-actions bot commented May 13, 2025 •

edited by matticbot

Loading

matticbot commented May 13, 2025 •

edited

Loading

arthur791004 commented May 13, 2025 •

edited

Loading

ciampo May 22, 2025 •

edited

Loading