From 489c422cef11ef747150a821040d7208ed5dd495 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 26 May 2023 22:29:00 +0900 Subject: [PATCH 1/3] Button: Add opt-in prop for larger `isSmall` size --- packages/base-styles/_variables.scss | 1 + packages/components/src/button/index.tsx | 2 ++ packages/components/src/button/style.scss | 15 ++++++++++++--- packages/components/src/button/types.ts | 9 +++++++++ 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index fcfc2356168274..f66f8c275d5d7d 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -45,6 +45,7 @@ $grid-unit-80: 8 * $grid-unit; // 64px */ $icon-size: 24px; +$icon-size-next-default-32px: 32px; // transitionary variable for next small button size $button-size: 36px; $button-size-next-default-40px: 40px; // transitionary variable for next default button size $button-size-small: 24px; diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index 098f6eaac3b1cf..24932ab06a9b69 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -76,6 +76,7 @@ export function UnforwardedButton( ) { const { __next40pxDefaultSize, + __next32pxSmallSize, isSmall, isPressed, isBusy, @@ -117,6 +118,7 @@ export function UnforwardedButton( const classes = classnames( 'components-button', className, { 'is-next-40px-default-size': __next40pxDefaultSize, + 'is-next-32px-small-size': __next32pxSmallSize, '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 fefc93b4fa8e0e..518e603b3317f2 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -263,15 +263,24 @@ } &.is-small { - height: $icon-size; + height: $icon-size-next-default-32px; line-height: 22px; padding: 0 8px; font-size: 11px; &.has-icon:not(.has-text) { padding: 0; - width: $icon-size; - min-width: $icon-size; + width: $icon-size-next-default-32px; + min-width: $icon-size-next-default-32px; + } + + &:not(.is-next-32px-small-size) { + height: $icon-size; + + &.has-icon:not(.has-text) { + width: $icon-size; + min-width: $icon-size; + } } } diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts index 57e2a3df6ee61e..85188476e5f370 100644 --- a/packages/components/src/button/types.ts +++ b/packages/components/src/button/types.ts @@ -25,6 +25,15 @@ type BaseButtonProps = { * @default false */ __next40pxDefaultSize?: boolean; + /** + * Start opting into the larger `isSmall` button size that will become the + * default small size in a future version. + * + * Only takes effect when the `isSmall` prop is `true`. + * + * @default false + */ + __next32pxSmallSize?: boolean; /** * The button's children. */ From 3549448362d70e7bda4d3250dc0b18c4f62f5814 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 26 May 2023 23:20:01 +0900 Subject: [PATCH 2/3] Add changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4d514b1a740d80..a79ec034902f35 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)). + ## 25.0.0 (2023-05-24) ### Breaking Changes From e766e48afd17bd0ec772e3560557f455584c547e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 30 May 2023 00:33:58 +0900 Subject: [PATCH 3/3] Fix Sass vars --- packages/base-styles/_variables.scss | 2 +- packages/components/src/button/style.scss | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index f66f8c275d5d7d..96d7aba226996b 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -45,10 +45,10 @@ $grid-unit-80: 8 * $grid-unit; // 64px */ $icon-size: 24px; -$icon-size-next-default-32px: 32px; // transitionary variable for next small button size $button-size: 36px; $button-size-next-default-40px: 40px; // transitionary variable for next default button size $button-size-small: 24px; +$button-size-small-next-default-32px: 32px; // transitionary variable for next small button size $header-height: 60px; $panel-header-height: $grid-unit-60; $nav-sidebar-width: 360px; diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 518e603b3317f2..5916876aad589d 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -263,23 +263,23 @@ } &.is-small { - height: $icon-size-next-default-32px; + height: $button-size-small-next-default-32px; line-height: 22px; padding: 0 8px; font-size: 11px; &.has-icon:not(.has-text) { padding: 0; - width: $icon-size-next-default-32px; - min-width: $icon-size-next-default-32px; + width: $button-size-small-next-default-32px; + min-width: $button-size-small-next-default-32px; } &:not(.is-next-32px-small-size) { - height: $icon-size; + height: $button-size-small; &.has-icon:not(.has-text) { - width: $icon-size; - min-width: $icon-size; + width: $button-size-small; + min-width: $button-size-small; } } }