WP Button: Add reusable style for secondary A8C override #101626

mirka · 2025-03-19T21:58:48Z

Proposed Changes

Add a way to override the @wordpress/components secondary Button variant style as frequently done in Calypso.

CleanShot.2025-03-20.at.06.56.15.mp4

Why are these changes being made?

While we may want to abstract this differently in the near future, having this override class available will unblock us quickly for now in a way that's relatively simple to refactor.

Testing Instructions

yarn components:storybook:start and see the documentation for "WP Overrides".

Styles for pseudostates (e.g. :hover) should be looking good for the busy, destructive, disabled, and pressed button states.

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-03-19T21:59:01Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-03-19T22:58:38Z

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

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

blaze-dashboard
command-palette-wp-admin
help-center
notifications
odyssey-stats
whats-new
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug button-secondary-override on your sandbox.

matticbot · 2025-03-19T23:01:27Z

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.

ciampo · 2025-03-20T05:44:53Z

Better than having many variations of these overrides scattered across the codebase 😓 Do you think we should try to consolidate all those overrides to use this new classname?

mirka · 2025-03-20T21:44:17Z

Do you think we should try to consolidate all those overrides to use this new classname?

@ciampo From a quick skim, I estimate the number of @wordpress/components secondary Button overrides in the codebase to be less than 20. So it is doable.

However I think the bigger problem is that the standard @automattic/components Button style is basically what this override is trying to emulate. So my estimate here is that we have like 500–800 counts of these now deprecated A8C Buttons in the codebase. These cannot be mass migrated to this flimsy CSS class on top of WP Button 😂 We need a solid commitment to whatever design system we're moving to, and we need a more robust component setup to support it. @Automattic/dotcom-design Let's figure out a plan on Linear.

mirka · 2025-03-20T21:51:33Z

packages/components/styles/wp-button-override.stories.tsx

+ */
+const meta: Meta< typeof Button > = {
+	title: 'packages/components/WP Overrides/Button',
+	component: Button,


@ciampo Aside: Apparently react-docgen-typescript doesn't pull types from external dependencies, which WP Button is in this case. It could be that there are config tweaks we could do to make that happen, but I didn't go down that rabbit hole for now. Anyway, that's why the full props table is not showing in Storybook.

Mhh, definitely not ideal — maybe we can create, only for the purpose of Storybook, a Button component that more explicitly defines prop types (something like props: React.ComponentProps< typeof Button >, or any other technique) ?

That kind of thing didn't work either 🫤 I also tried some of these tricks on Storybook 8, but didn't work.

Ok, it's annoying but I figured out some workarounds. Will update.

mirka · 2025-03-20T22:05:11Z

packages/components/styles/wp-button-override.scss

+
+.a8c-components-wp-button {
+	&.is-secondary:not(:disabled, [aria-disabled="true"], [aria-pressed="true"]) {
+		box-shadow: inset 0 0 0 $border-width theme.$components-color-gray-300;


@ciampo Are the $components-color- variables too much? They're not strictly necessary but I thought some consistency here could be helpful since we're seeing some ad hoc CSS variable-based theming starting to happen.

I don't like the idea because it can quickly spread across the codebase and become really hard to migrate away from.

I honestly think more and more that we should spend some time to create the theming engine that we've been long discussed about. It could live in @automattic/theme-provider and be general enough that, if/when needed, it can be ported to Gutenberg with virtually zero changes.

CC: @jameskoster @youknowriad. Would love to see if parts of this can be reused. Also connecting some dots to this conversation: pgle0O-7K-p2#comment-193

We can definitely reuse parts of Saxon's exploratory work — from my point of view, it's mostly a matter of prioritisation and resource assignment.

adamwoodnz

Thanks for this!

I've rebased my social buttons PR on this branch again today and it's still working well. I've stripped back the styles on those buttons to the bare minimum; font size and layout rules for the internals. There are still overrides for some heavily branded buttons (eg. Woo, Gravatar), but otherwise it's mostly just theming using --color-accent.

Storybook works for me.

LGTM

jasmussen · 2025-03-21T08:23:07Z

We need a solid commitment to whatever design system we're moving to, and we need a more robust component setup to support it. Let's figure out a plan on Linear.

Will you ping us there? I'm doing some Linear work today to hopefully set up some ping-groups, probably a design-system related one. But otherwise, just let me know if there was a specific action item, such as feedback on this particular PR. Visualyl this is solid, I'll defer to engineering on the technical side of things. But as-is, the existing Calypso/a8c button component does not seem superior to the core Button, as far as keeping around.

I don't think a manual search/replace of the entire codebase, with the sole purpose of replacing one component with another, is an effort we should undertake. I think the legacy instances can exist until that section gets organically revisited for some other purpose. This is also to say, between completing untangling work, and work on an improved hosting dashboard, there will both be many such opportunities, but there will also be cases where the entire context disappears, gets retired, or deleted.

mirka · 2025-03-21T11:55:48Z

@Automattic/team-calypso I'm going to merge now so we don't keep @adamwoodnz in rebase hell, but please leave any comments so I can address them as follow-up 🙏

* Button: Support secondary style override * Rejigger * Add to tsconfig * Add decorator for sans-serif font * Fix up * Improve theming support * Fix for destructive and disabled states

mirka added 4 commits March 20, 2025 05:52

Button: Support secondary style override

7be32ba

Rejigger

3f5341e

Add to tsconfig

b36b8d1

Add decorator for sans-serif font

71aa5b4

mirka added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it Components Storybook labels Mar 19, 2025

mirka self-assigned this Mar 19, 2025

Fix up

1798488

mirka mentioned this pull request Mar 19, 2025

Add interactive states for social buttons in login and signup #100807

Merged

8 tasks

Improve theming support

79d254c

mirka marked this pull request as ready for review March 20, 2025 21:44

mirka requested a review from ciampo March 20, 2025 21:45

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

mirka requested review from a team and adamwoodnz March 20, 2025 21:46

mirka commented Mar 20, 2025

View reviewed changes

Fix for destructive and disabled states

c5482bb

mirka commented Mar 20, 2025

View reviewed changes

adamwoodnz approved these changes Mar 21, 2025

View reviewed changes

mirka merged commit d918707 into trunk Mar 21, 2025
14 checks passed

mirka deleted the button-secondary-override branch March 21, 2025 11:54

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 21, 2025

jasmussen mentioned this pull request Mar 25, 2025

Onboarding + Hosting dashboard: Unify background color #101133

Closed

mirka mentioned this pull request Apr 4, 2025

Reader: Use ToggleGroupControl on /tag/:name page #102038

Merged

8 tasks

jsnajdr mentioned this pull request May 19, 2025

Fix Storybook compilation in components package #103362

Merged

8 tasks

WP Button: Add reusable style for secondary A8C override #101626

WP Button: Add reusable style for secondary A8C override #101626

Uh oh!

Conversation

mirka commented Mar 19, 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 Mar 19, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

matticbot commented Mar 19, 2025

Uh oh!

ciampo commented Mar 20, 2025

Uh oh!

mirka commented Mar 20, 2025

Uh oh!

mirka Mar 20, 2025

Choose a reason for hiding this comment

Uh oh!

ciampo Mar 24, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Mar 20, 2025

Choose a reason for hiding this comment

Uh oh!

ciampo Mar 24, 2025

Choose a reason for hiding this comment

Uh oh!

jasmussen Mar 25, 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!

ciampo Mar 25, 2025

Choose a reason for hiding this comment

Uh oh!

adamwoodnz left a comment • 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!

jasmussen commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mirka commented Mar 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mirka commented Mar 19, 2025 •

edited

Loading

github-actions bot commented Mar 19, 2025 •

edited by matticbot

Loading

matticbot commented Mar 19, 2025 •

edited

Loading

jasmussen Mar 25, 2025 •

edited

Loading

adamwoodnz left a comment •

edited

Loading

jasmussen commented Mar 21, 2025 •

edited

Loading