From 0f80370f3da256f1e7a5666570aee2d26fd15862 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 3 May 2023 00:27:08 +0900 Subject: [PATCH 1/2] Button: Add opt-in prop for next 40px default size --- packages/base-styles/_variables.scss | 1 + packages/components/src/button/index.tsx | 2 ++ packages/components/src/button/style.scss | 8 ++++++++ packages/components/src/button/types.ts | 7 +++++++ 4 files changed, 18 insertions(+) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 1a23bf77fb8a66..fcfc2356168274 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -46,6 +46,7 @@ $grid-unit-80: 8 * $grid-unit; // 64px $icon-size: 24px; $button-size: 36px; +$button-size-next-default-40px: 40px; // transitionary variable for next default button size $button-size-small: 24px; $header-height: 60px; $panel-header-height: $grid-unit-60; diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index 5ffc22d3020e1c..098f6eaac3b1cf 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -75,6 +75,7 @@ export function UnforwardedButton( ref: ForwardedRef< any > ) { const { + __next40pxDefaultSize, isSmall, isPressed, isBusy, @@ -115,6 +116,7 @@ export function UnforwardedButton( children?.[ 0 ]?.props?.className !== 'components-tooltip' ); const classes = classnames( 'components-button', className, { + 'is-next-40px-default-size': __next40pxDefaultSize, 'is-secondary': variant === 'secondary', 'is-primary': variant === 'primary', 'is-small': isSmall, diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index e114756f9614f1..69cf7c5eb9acb9 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -18,6 +18,10 @@ border-radius: $radius-block-ui; color: $components-color-foreground; + &.is-next-40px-default-size { + height: $button-size-next-default-40px; + } + &[aria-expanded="true"], &:hover { color: $components-color-accent; @@ -284,6 +288,10 @@ min-width: $button-size; justify-content: center; + &.is-next-40px-default-size { + min-width: $button-size-next-default-40px; + } + .dashicon { display: inline-block; flex: 0 0 auto; diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts index 7bddf3b9d8f6f8..57e2a3df6ee61e 100644 --- a/packages/components/src/button/types.ts +++ b/packages/components/src/button/types.ts @@ -18,6 +18,13 @@ export type ButtonAsButtonProps = BaseButtonProps & _ButtonProps; export type ButtonAsAnchorProps = BaseButtonProps & AnchorProps; type BaseButtonProps = { + /** + * Start opting into the larger default height that will become the + * default size in a future version. + * + * @default false + */ + __next40pxDefaultSize?: boolean; /** * The button's children. */ From 6ef8a5355f849abd6d0f226def93bc6f214e676e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 3 May 2023 00:46:17 +0900 Subject: [PATCH 2/2] Update changelog --- packages/components/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4b39d87de055f6..726b297145452c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +### Bug Fix + - `CheckboxControl`, `CustomGradientPicker`, `FormToggle`, : Refactor and correct the focus style for consistency ([#50127](https://github.com/WordPress/gutenberg/pull/50127)). ### Internal @@ -18,6 +20,7 @@ ### Enhancements - `Modal`: Add css class to children container ([#50099](https://github.com/WordPress/gutenberg/pull/50099)). +- `Button`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#50254](https://github.com/WordPress/gutenberg/pull/50254)). ## 23.9.0 (2023-04-26)