From 7be32ba355f37b9dda857e2152b3e04203eb1e34 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 20 Mar 2025 05:52:35 +0900 Subject: [PATCH 1/7] Button: Support secondary style override --- packages/components/.storybook/main.js | 4 +- packages/components/package.json | 3 +- .../components/styles/wp-button/index.scss | 19 ++++++++ .../styles/wp-button/index.stories.tsx | 44 +++++++++++++++++++ 4 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 packages/components/styles/wp-button/index.scss create mode 100644 packages/components/styles/wp-button/index.stories.tsx diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js index dfda91f34e9a..cf4519e5c46e 100644 --- a/packages/components/.storybook/main.js +++ b/packages/components/.storybook/main.js @@ -1,6 +1,8 @@ const storybookDefaultConfig = require( '@automattic/calypso-storybook' ); module.exports = { - ...storybookDefaultConfig(), + ...storybookDefaultConfig( { + stories: [ '../{src,styles}/**/*.stories.{js,jsx,ts,tsx}' ], + } ), docs: { autodocs: true }, }; diff --git a/packages/components/package.json b/packages/components/package.json index d146e30fce9b..24aa70c766ee 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -23,7 +23,8 @@ "bugs": "https://github.com/Automattic/wp-calypso/issues", "files": [ "dist", - "src" + "src", + "styles" ], "types": "dist/types", "dependencies": { diff --git a/packages/components/styles/wp-button/index.scss b/packages/components/styles/wp-button/index.scss new file mode 100644 index 000000000000..162ab9ea8891 --- /dev/null +++ b/packages/components/styles/wp-button/index.scss @@ -0,0 +1,19 @@ +@import '@wordpress/base-styles/colors'; +@import '@wordpress/base-styles/variables'; + +.a8c-components-wp-button { + &.is-secondary:not([aria-pressed="true"]) { + color: $gray-900; + box-shadow: inset 0 0 0 $border-width $gray-300; + + &:hover:not(:disabled, [aria-disabled="true"], :focus) { + color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 $border-width $gray-300; + } + + &:active, + &:active:hover { + background-color: $white; + } + } +} \ No newline at end of file diff --git a/packages/components/styles/wp-button/index.stories.tsx b/packages/components/styles/wp-button/index.stories.tsx new file mode 100644 index 000000000000..cea976e35f35 --- /dev/null +++ b/packages/components/styles/wp-button/index.stories.tsx @@ -0,0 +1,44 @@ +import { Button } from '@wordpress/components'; +import type { Meta, StoryObj } from '@storybook/react'; + +import './index.scss'; + +Button.displayName = 'Button'; + +/** + * This reference is for A8C-specific style overrides for the `Button` component from `@wordpress/components`. + * + * See the [WordPress Storybook](https://wordpress.github.io/gutenberg/?path=/docs/components-button--docs) docs for more information. + */ +const meta: Meta< typeof Button > = { + title: 'packages/components/WP Overrides/Button', + component: Button, +}; + +export default meta; +type Story = StoryObj< typeof Button >; + +export const Default: Story = { + args: { + children: 'Button', + __next40pxDefaultSize: true, + accessibleWhenDisabled: true, + }, +}; + +/** + * The secondary button styles can be overridden to the A8C styles by adding the + * `.a8c-components-wp-button` class. + */ +export const Secondary: Story = { + args: { + ...Default.args, + variant: 'secondary', + className: 'a8c-components-wp-button', + }, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + }, + }, +}; From 3f5341e908a1573ecd34692712ab88b744355a61 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 20 Mar 2025 06:40:33 +0900 Subject: [PATCH 2/7] Rejigger --- .../{wp-button/index.scss => wp-button-override.scss} | 0 .../index.stories.tsx => wp-button-override.stories.tsx} | 6 +++++- 2 files changed, 5 insertions(+), 1 deletion(-) rename packages/components/styles/{wp-button/index.scss => wp-button-override.scss} (100%) rename packages/components/styles/{wp-button/index.stories.tsx => wp-button-override.stories.tsx} (80%) diff --git a/packages/components/styles/wp-button/index.scss b/packages/components/styles/wp-button-override.scss similarity index 100% rename from packages/components/styles/wp-button/index.scss rename to packages/components/styles/wp-button-override.scss diff --git a/packages/components/styles/wp-button/index.stories.tsx b/packages/components/styles/wp-button-override.stories.tsx similarity index 80% rename from packages/components/styles/wp-button/index.stories.tsx rename to packages/components/styles/wp-button-override.stories.tsx index cea976e35f35..d2d2ba12d204 100644 --- a/packages/components/styles/wp-button/index.stories.tsx +++ b/packages/components/styles/wp-button-override.stories.tsx @@ -1,8 +1,9 @@ import { Button } from '@wordpress/components'; import type { Meta, StoryObj } from '@storybook/react'; -import './index.scss'; +import './wp-button-override.scss'; +// TODO: Investigate why displayName becomes `UnforwardedButton` when imported. Button.displayName = 'Button'; /** @@ -29,6 +30,9 @@ export const Default: Story = { /** * The secondary button styles can be overridden to the A8C styles by adding the * `.a8c-components-wp-button` class. + * + * To load these styles, import the `@automattic/components/styles/wp-button-override.scss` file + * somewhere in your project. */ export const Secondary: Story = { args: { From b36b8d10f83a533094b948dfd1521399971e65be Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 20 Mar 2025 06:51:03 +0900 Subject: [PATCH 3/7] Add to tsconfig --- packages/components/tsconfig.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index f7355b979353..27f230b3f417 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -5,9 +5,9 @@ "checkJs": false, "outDir": "dist/esm", "declarationDir": "dist/types", - "rootDir": "src" + "rootDir": "." }, - "include": [ "src" ], + "include": [ "src", "styles" ], "exclude": [ "**/docs/*", "**/test/*" ], "references": [ { "path": "../calypso-analytics" }, From 71aa5b4063c8f9387ae9fe1cd243b58a491d2f01 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 20 Mar 2025 06:51:30 +0900 Subject: [PATCH 4/7] Add decorator for sans-serif font --- packages/components/styles/wp-button-override.stories.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/styles/wp-button-override.stories.tsx b/packages/components/styles/wp-button-override.stories.tsx index d2d2ba12d204..6d0efba3b977 100644 --- a/packages/components/styles/wp-button-override.stories.tsx +++ b/packages/components/styles/wp-button-override.stories.tsx @@ -14,6 +14,13 @@ Button.displayName = 'Button'; const meta: Meta< typeof Button > = { title: 'packages/components/WP Overrides/Button', component: Button, + decorators: [ + ( Story ) => ( +
+ +
+ ), + ], }; export default meta; From 1798488eb586f98c46467874ca80982a45e6f2a2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 20 Mar 2025 07:50:35 +0900 Subject: [PATCH 5/7] Fix up --- packages/components/styles/wp-button-override.stories.tsx | 4 +++- packages/components/tsconfig.json | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/components/styles/wp-button-override.stories.tsx b/packages/components/styles/wp-button-override.stories.tsx index 6d0efba3b977..5e5f603f79a9 100644 --- a/packages/components/styles/wp-button-override.stories.tsx +++ b/packages/components/styles/wp-button-override.stories.tsx @@ -1,7 +1,9 @@ import { Button } from '@wordpress/components'; +import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import './wp-button-override.scss'; +// Not using a relative path here to ensure that the build is working. +import '@automattic/components/styles/wp-button-override.scss'; // TODO: Investigate why displayName becomes `UnforwardedButton` when imported. Button.displayName = 'Button'; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 27f230b3f417..f7355b979353 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -5,9 +5,9 @@ "checkJs": false, "outDir": "dist/esm", "declarationDir": "dist/types", - "rootDir": "." + "rootDir": "src" }, - "include": [ "src", "styles" ], + "include": [ "src" ], "exclude": [ "**/docs/*", "**/test/*" ], "references": [ { "path": "../calypso-analytics" }, From 79d254c0117719023b84afbf271a8cadeb834ca0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 21 Mar 2025 06:22:57 +0900 Subject: [PATCH 6/7] Improve theming support --- .../styles/_wp-components-theme-variables.scss | 9 +++++++++ packages/components/styles/wp-button-override.scss | 14 ++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 packages/components/styles/_wp-components-theme-variables.scss diff --git a/packages/components/styles/_wp-components-theme-variables.scss b/packages/components/styles/_wp-components-theme-variables.scss new file mode 100644 index 000000000000..512ff43af571 --- /dev/null +++ b/packages/components/styles/_wp-components-theme-variables.scss @@ -0,0 +1,9 @@ +/** + * Makes the `$components-color-*` variables from `@wordpress/components` available + * for local overrides. + * + * Remember to import this file with `@use` (not `@import`) so it doesn't pollute the global namespace. + */ + +@import '@wordpress/base-styles/colors'; // TODO: The theme-variables.scss file itself should import this. +@import '@wordpress/components/src/utils/theme-variables'; diff --git a/packages/components/styles/wp-button-override.scss b/packages/components/styles/wp-button-override.scss index 162ab9ea8891..3a2e514d5d10 100644 --- a/packages/components/styles/wp-button-override.scss +++ b/packages/components/styles/wp-button-override.scss @@ -1,19 +1,21 @@ +@use './_wp-components-theme-variables' as theme; + @import '@wordpress/base-styles/colors'; @import '@wordpress/base-styles/variables'; .a8c-components-wp-button { &.is-secondary:not([aria-pressed="true"]) { - color: $gray-900; - box-shadow: inset 0 0 0 $border-width $gray-300; + color: theme.$components-color-foreground; + box-shadow: inset 0 0 0 $border-width theme.$components-color-gray-300; &:hover:not(:disabled, [aria-disabled="true"], :focus) { - color: var(--wp-admin-theme-color); - box-shadow: inset 0 0 0 $border-width $gray-300; + color: theme.$components-color-accent; + box-shadow: inset 0 0 0 $border-width theme.$components-color-gray-300; } &:active, &:active:hover { - background-color: $white; + background-color: theme.$components-color-background; } } -} \ No newline at end of file +} From c5482bbc9bfa2758b8a23759bcc2d2e08491697d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 21 Mar 2025 07:03:25 +0900 Subject: [PATCH 7/7] Fix for destructive and disabled states --- packages/components/styles/wp-button-override.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/components/styles/wp-button-override.scss b/packages/components/styles/wp-button-override.scss index 3a2e514d5d10..719d113fb087 100644 --- a/packages/components/styles/wp-button-override.scss +++ b/packages/components/styles/wp-button-override.scss @@ -4,10 +4,13 @@ @import '@wordpress/base-styles/variables'; .a8c-components-wp-button { - &.is-secondary:not([aria-pressed="true"]) { - color: theme.$components-color-foreground; + &.is-secondary:not(:disabled, [aria-disabled="true"], [aria-pressed="true"]) { box-shadow: inset 0 0 0 $border-width theme.$components-color-gray-300; - + + &:not(.is-destructive) { + color: theme.$components-color-foreground; + } + &:hover:not(:disabled, [aria-disabled="true"], :focus) { color: theme.$components-color-accent; box-shadow: inset 0 0 0 $border-width theme.$components-color-gray-300;