From b992cbe4bae07b45dd3380d96d61dc049212aa56 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 22 Jun 2023 22:45:45 +0900 Subject: [PATCH 01/12] Revert "Button: Add opt-in prop for larger `isSmall` size (#51012)" This reverts commit 19bcabfcbbc483028d1a429d9abe6a0fd595d233. # Conflicts: # packages/components/CHANGELOG.md --- 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, 3 insertions(+), 24 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 31f197ba64270e..c6c5cc41f076da 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -48,7 +48,6 @@ $icon-size: 24px; $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/index.tsx b/packages/components/src/button/index.tsx index 24932ab06a9b69..098f6eaac3b1cf 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -76,7 +76,6 @@ export function UnforwardedButton( ) { const { __next40pxDefaultSize, - __next32pxSmallSize, isSmall, isPressed, isBusy, @@ -118,7 +117,6 @@ 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 c93d7e2070c43b..3b6b7f539aba2a 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -258,24 +258,15 @@ } &.is-small { - height: $button-size-small-next-default-32px; + height: $icon-size; line-height: 22px; padding: 0 8px; font-size: 11px; &.has-icon:not(.has-text) { padding: 0; - width: $button-size-small-next-default-32px; - min-width: $button-size-small-next-default-32px; - } - - &:not(.is-next-32px-small-size) { - height: $button-size-small; - - &.has-icon:not(.has-text) { - width: $button-size-small; - min-width: $button-size-small; - } + width: $icon-size; + min-width: $icon-size; } } diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts index 85188476e5f370..57e2a3df6ee61e 100644 --- a/packages/components/src/button/types.ts +++ b/packages/components/src/button/types.ts @@ -25,15 +25,6 @@ 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 5f1f4a87c418ff614e5d438fb176d2e8a8c4d497 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 22 Jun 2023 23:29:10 +0900 Subject: [PATCH 02/12] Add docs for `size` prop Also fixes type duplicate prop name issues in NumberControl and FontSizePicker --- packages/components/src/button/README.md | 11 +++++++++++ packages/components/src/button/index.tsx | 13 +++++++++++-- packages/components/src/button/types.ts | 14 ++++++++++++++ packages/components/src/font-size-picker/index.tsx | 14 +++++++++----- packages/components/src/font-size-picker/styles.ts | 10 ---------- packages/components/src/number-control/index.tsx | 4 ++-- .../number-control/styles/number-control-styles.ts | 8 +++++--- 7 files changed, 52 insertions(+), 22 deletions(-) diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md index 66bbae67ebcd57..df4a87548fbee2 100644 --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -216,6 +216,17 @@ If provided with `showTooltip`, appends the Shortcut label to the tooltip conten If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) component for the button. +- Required: No + +#### `size`: `'default'` | `'compact'` | `'small'` + +The size of the button. + +- `'default'`: For normal text-label buttons, unless it is a toggle button. +- `'compact'`: For toggle buttons and icon buttons. +- `'small'`: For icon buttons associated with more advanced or auxiliary features. + + - Required: No #### `target`: `string` diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index 098f6eaac3b1cf..c88902e0a88810 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -33,11 +33,18 @@ function useDeprecatedProps( { isSecondary, isTertiary, isLink, + isSmall, + size, variant, ...otherProps }: ButtonProps & DeprecatedButtonProps ): ButtonProps { + let computedSize = size; let computedVariant = variant; + if ( isSmall ) { + computedSize = 'small'; + } + if ( isPrimary ) { computedVariant ??= 'primary'; } @@ -66,6 +73,7 @@ function useDeprecatedProps( { return { ...otherProps, + size: computedSize, variant: computedVariant, }; } @@ -76,7 +84,6 @@ export function UnforwardedButton( ) { const { __next40pxDefaultSize, - isSmall, isPressed, isBusy, isDestructive, @@ -90,6 +97,7 @@ export function UnforwardedButton( shortcut, label, children, + size = 'default', text, variant, __experimentalIsFocusable: isFocusable, @@ -119,7 +127,8 @@ export function UnforwardedButton( 'is-next-40px-default-size': __next40pxDefaultSize, 'is-secondary': variant === 'secondary', 'is-primary': variant === 'primary', - 'is-small': isSmall, + 'is-small': size === 'small', + 'is-compact': size === 'compact', 'is-tertiary': variant === 'tertiary', 'is-pressed': isPressed, 'is-busy': isBusy, diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts index 57e2a3df6ee61e..8664fd90668974 100644 --- a/packages/components/src/button/types.ts +++ b/packages/components/src/button/types.ts @@ -67,6 +67,10 @@ type BaseButtonProps = { isPressed?: boolean; /** * Decreases the size of the button. + * + * Deprecated in favor of the `size` prop. + * + * @deprecated Use the `'small'` value on the `size` prop instead. */ isSmall?: boolean; /** @@ -83,6 +87,16 @@ type BaseButtonProps = { * If provided, renders a Tooltip component for the button. */ showTooltip?: boolean; + /** + * The size of the button. + * + * - `'default'`: For normal text-label buttons, unless it is a toggle button. + * - `'compact'`: For toggle buttons and icon buttons. + * - `'small'`: For icon buttons associated with more advanced or auxiliary features. + * + * @default 'default' + */ + size?: 'default' | 'compact' | 'small'; /** * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them. */ diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 74d8e54e8fd651..e454b3093bf6a5 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -14,6 +14,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element'; /** * Internal dependencies */ +import { Button } from '../button'; import RangeControl from '../range-control'; import { Flex, FlexItem } from '../flex'; import { @@ -31,7 +32,6 @@ import { HeaderLabel, HeaderToggle, Controls, - ResetButton, } from './styles'; import { Spacer } from '../spacer'; import FontSizePickerSelect from './font-size-picker-select'; @@ -268,17 +268,21 @@ const UnforwardedFontSizePicker = ( ) } { withReset && ( - { onChange?.( undefined ); } } - isSmall variant="secondary" - size={ size } + __next40pxDefaultSize + size={ + size !== '__unstable-large' + ? 'small' + : 'default' + } > { __( 'Reset' ) } - + ) } diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index 525c1be0c94b07..8ba0ce661c5eb7 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -11,7 +11,6 @@ import Button from '../button'; import { HStack } from '../h-stack'; import { space } from '../ui/utils/space'; import { COLORS } from '../utils'; -import type { FontSizePickerProps } from './types'; export const Container = styled.fieldset` border: 0; @@ -44,12 +43,3 @@ export const Controls = styled.div< { ${ ( props ) => ! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` } `; - -export const ResetButton = styled( Button )< { - size: FontSizePickerProps[ 'size' ]; -} >` - &&& { - height: ${ ( props ) => - props.size === '__unstable-large' ? '40px' : '30px' }; - } -`; diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx index 0df307e4ee45c2..0910c7b23db829 100644 --- a/packages/components/src/number-control/index.tsx +++ b/packages/components/src/number-control/index.tsx @@ -244,7 +244,7 @@ function UnforwardedNumberControl( onClick={ buildSpinButtonClickHandler( 'up' ) } - size={ size } + spinButtonSize={ size } /> diff --git a/packages/components/src/number-control/styles/number-control-styles.ts b/packages/components/src/number-control/styles/number-control-styles.ts index dfc6171cf411b4..16a9fff81e97f8 100644 --- a/packages/components/src/number-control/styles/number-control-styles.ts +++ b/packages/components/src/number-control/styles/number-control-styles.ts @@ -36,9 +36,11 @@ export const Input = styled( InputControl )` `; const spinButtonSizeStyles = ( { - size, -}: Pick< NumberControlProps, 'size' > ) => { - if ( size !== 'small' ) { + spinButtonSize, +}: { + spinButtonSize: NumberControlProps[ 'size' ]; +} ) => { + if ( spinButtonSize !== 'small' ) { return ``; } From 82cff3862dda08f71693ee9bc7867911b83a7cab Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 23 Jun 2023 17:35:32 +0900 Subject: [PATCH 03/12] Add CSS --- packages/base-styles/_variables.scss | 1 + packages/components/src/button/style.scss | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index c6c5cc41f076da..584c057ec1ecab 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -48,6 +48,7 @@ $icon-size: 24px; $button-size: 36px; $button-size-next-default-40px: 40px; // transitionary variable for next default button size $button-size-small: 24px; +$button-size-compact: 32px; $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 3b6b7f539aba2a..a450ef60b46afd 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -257,16 +257,26 @@ /* stylelint-enable */ } + &.is-compact { + height: $button-size-compact; + + &.has-icon:not(.has-text) { + padding: 0; + width: $button-size-compact; + min-width: $button-size-compact; + } + } + &.is-small { - height: $icon-size; + height: $button-size-small; line-height: 22px; padding: 0 8px; font-size: 11px; &.has-icon:not(.has-text) { padding: 0; - width: $icon-size; - min-width: $icon-size; + width: $button-size-small; + min-width: $button-size-small; } } From 5446c80980b0d4741901ded37c61845ae5819044 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 23 Jun 2023 17:48:09 +0900 Subject: [PATCH 04/12] Fixup --- packages/components/src/button/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md index df4a87548fbee2..41fe9d118707a2 100644 --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -228,6 +228,7 @@ The size of the button. - Required: No +- Default: `'default'` #### `target`: `string` From 9f703d677dcc6928ad075c323b3b02f670ed0dc5 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 23 Jun 2023 17:53:33 +0900 Subject: [PATCH 05/12] Add TODO for deprecation --- packages/components/src/button/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts index 8664fd90668974..9eecdaa45c1184 100644 --- a/packages/components/src/button/types.ts +++ b/packages/components/src/button/types.ts @@ -65,6 +65,7 @@ type BaseButtonProps = { * Renders a pressed button style. */ isPressed?: boolean; + // TODO: Deprecate officially (add console warning and move to DeprecatedButtonProps). /** * Decreases the size of the button. * From ae12f012670f3bdc06de8912a063974bba1a1397 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 23 Jun 2023 17:53:48 +0900 Subject: [PATCH 06/12] Add test for back compat --- packages/components/src/button/test/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx index 0219896781534e..96fdad591c96d6 100644 --- a/packages/components/src/button/test/index.tsx +++ b/packages/components/src/button/test/index.tsx @@ -402,6 +402,11 @@ describe( 'Button', () => { ); expect( console ).toHaveWarned(); } ); + + it( 'should not break when the legacy isSmall prop is passed', () => { + render(