From 7212d85dfd5744f91cdb43947d9def675b297b81 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 15 Mar 2023 11:21:34 -0400 Subject: [PATCH 01/14] Add support for __unstable-large --- packages/components/src/range-control/index.tsx | 2 ++ .../src/range-control/styles/range-control-styles.ts | 3 ++- packages/components/src/range-control/types.ts | 8 ++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 928595132e254..15ef3ef56b7f9 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -69,6 +69,7 @@ function UnforwardedRangeControl( railColor, renderTooltipContent = ( v ) => v, resetFallbackValue, + size = 'default', shiftStep = 10, showTooltip: showTooltipProp, step = 1, @@ -305,6 +306,7 @@ function UnforwardedRangeControl( onBlur={ handleOnInputNumberBlur } onChange={ handleOnChange } shiftStep={ shiftStep } + size={ size } step={ step } // @ts-expect-error TODO: Investigate if the `null` value is necessary value={ inputSliderValue } diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index a351a7db26bdd..8c413c8b163cc 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -28,7 +28,7 @@ const thumbSize = 12; export const Root = styled.div` -webkit-tap-highlight-color: transparent; - align-items: flex-start; + align-items: center; display: flex; justify-content: flex-start; padding: 0; @@ -295,6 +295,7 @@ export const Tooltip = styled.span< TooltipProps >` export const InputNumber = styled( NumberControl )` display: inline-block; font-size: 13px; + margin-bottom: 0 !important; margin-top: 0; width: ${ space( 16 ) } !important; diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts index 6d7d95a2e2bf4..b07b13bd48994 100644 --- a/packages/components/src/range-control/types.ts +++ b/packages/components/src/range-control/types.ts @@ -14,6 +14,8 @@ import type { import type { BaseControlProps } from '../base-control/types'; import type { IconType } from '../icon'; +export type Size = 'default' | 'small' | '__unstable-large'; + export type NumericProps = { /** * The minimum `value` allowed. @@ -203,6 +205,12 @@ export type RangeControlProps = Pick< * @default 10 */ shiftStep?: number; + /** + * Adjusts the size of the input. + * + * @default 'default' + */ + size?: Size; /** * Forcing the Tooltip UI to show or hide. This is overridden to `false` * when `step` is set to the special string value `any`. From 9a8758eccdd89d2904f8945284e8b7952d3abc1b Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 15 Mar 2023 12:41:42 -0400 Subject: [PATCH 02/14] Use wider number input if large --- .../styles/range-control-styles.ts | 20 ++++++++++++++++++- .../components/src/range-control/types.ts | 8 ++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 8c413c8b163cc..e7cafe712648b 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -12,6 +12,7 @@ import { COLORS, reduceMotion, rtl } from '../../utils'; import { space } from '../../ui/utils/space'; import type { + InputNumberProps, RangeMarkProps, RailProps, ThumbProps, @@ -290,6 +291,23 @@ export const Tooltip = styled.span< TooltipProps >` ) } `; +const inputNumberWidth = ( { size }: InputNumberProps ) => { + const sizes = { + default: space( 16 ), + '__unstable-large': space( 20 ), + }; + + if ( size === '__unstable-large' ) { + return css( { + width: `${ sizes[ '__unstable-large' ] } !important`, + } ); + } + + return css` + width: ${ sizes.default } !important; + `; +}; + // @todo: Refactor RangeControl with latest HStack configuration // @wordpress/components/ui/hstack. export const InputNumber = styled( NumberControl )` @@ -297,7 +315,7 @@ export const InputNumber = styled( NumberControl )` font-size: 13px; margin-bottom: 0 !important; margin-top: 0; - width: ${ space( 16 ) } !important; + ${ inputNumberWidth }; input[type='number']& { ${ rangeHeight }; diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts index b07b13bd48994..f3f0262c46784 100644 --- a/packages/components/src/range-control/types.ts +++ b/packages/components/src/range-control/types.ts @@ -14,8 +14,6 @@ import type { import type { BaseControlProps } from '../base-control/types'; import type { IconType } from '../icon'; -export type Size = 'default' | 'small' | '__unstable-large'; - export type NumericProps = { /** * The minimum `value` allowed. @@ -279,6 +277,12 @@ export type TrackProps = { trackColor: CSSProperties[ 'color' ]; }; +export type Size = 'default' | '__unstable-large'; + +export type InputNumberProps = { + size?: Size; +}; + export type UseControlledRangeValueArgs = { /** * The initial value. From 371003094345753349f3effe4cc9d7551c3e908f Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 15 Mar 2023 12:42:07 -0400 Subject: [PATCH 03/14] Add size prop to cover opacity control for testing --- packages/block-library/src/cover/edit/inspector-controls.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index fcacf44e1c685..1d20c81657973 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -303,6 +303,7 @@ export default function CoverInspectorControls( { max={ 100 } step={ 10 } required + size="__unstable-large" /> From 53f5015f2a7e1fce82a9e24ffcb6626051ff070d Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 25 May 2023 16:29:13 -0400 Subject: [PATCH 04/14] implement `__next40pxDefaultSize` instead of new `size` prop --- .../block-library/src/cover/edit/inspector-controls.js | 2 +- packages/components/src/number-control/index.tsx | 1 - packages/components/src/range-control/index.tsx | 9 ++++++--- packages/components/src/range-control/input-range.tsx | 1 - packages/components/src/range-control/types.ts | 6 +++--- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index 8313567246311..e8f3683e4d95f 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -303,7 +303,7 @@ export default function CoverInspectorControls( { max={ 100 } step={ 10 } required - size="__unstable-large" + __next40pxDefaultSize /> diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx index 0df307e4ee45c..34d78039ad39b 100644 --- a/packages/components/src/number-control/index.tsx +++ b/packages/components/src/number-control/index.tsx @@ -59,7 +59,6 @@ function UnforwardedNumberControl( } ); spinControls = 'none'; } - const inputRef = useRef< HTMLInputElement >(); const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] ); diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 15ef3ef56b7f9..69b724322e05b 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -69,7 +69,7 @@ function UnforwardedRangeControl( railColor, renderTooltipContent = ( v ) => v, resetFallbackValue, - size = 'default', + __next40pxDefaultSize = false, shiftStep = 10, showTooltip: showTooltipProp, step = 1, @@ -209,7 +209,6 @@ function UnforwardedRangeControl( const offsetStyle = { [ isRTL() ? 'right' : 'left' ]: fillValueOffset, }; - return ( ) { const { describedBy, label, value, ...otherProps } = props; - return ( Date: Tue, 30 May 2023 14:27:57 -0400 Subject: [PATCH 05/14] update to support `withInput:false` --- packages/components/src/range-control/index.tsx | 5 ++++- .../range-control/styles/range-control-styles.ts | 13 ++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 69b724322e05b..0b2a16099926d 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -218,7 +218,10 @@ function UnforwardedRangeControl( id={ `${ id }` } help={ help } > - + { beforeIcon && ( diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index e7cafe712648b..a95eabe085f8a 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -19,6 +19,7 @@ import type { TooltipProps, TrackProps, WrapperProps, + RangeControlProps, } from '../types'; const rangeHeightValue = 30; @@ -27,7 +28,14 @@ const rangeHeight = () => css( { height: rangeHeightValue, minHeight: rangeHeightValue } ); const thumbSize = 12; -export const Root = styled.div` +const deprecatedDefaultHeight = ( { + __next40pxDefaultSize, +}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) => { + return ! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } ); +}; + +type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >; +export const Root = styled.div< RootProps >` -webkit-tap-highlight-color: transparent; align-items: center; display: flex; @@ -36,6 +44,9 @@ export const Root = styled.div` position: relative; touch-action: none; width: 100%; + min-height: 40px; + + ${ deprecatedDefaultHeight } `; const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) => From 29f8e61fd2364727411e5ee5eae0985cbf6c4920 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 30 May 2023 15:51:43 -0400 Subject: [PATCH 06/14] remove unneeded `!imporants` --- .../src/range-control/styles/range-control-styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index a95eabe085f8a..67f5b4db4a559 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -310,12 +310,12 @@ const inputNumberWidth = ( { size }: InputNumberProps ) => { if ( size === '__unstable-large' ) { return css( { - width: `${ sizes[ '__unstable-large' ] } !important`, + width: `${ sizes[ '__unstable-large' ] }`, } ); } return css` - width: ${ sizes.default } !important; + width: ${ sizes.default }; `; }; From 2d90d5401676a3793c3af6d6109437534d0c6ea0 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 30 May 2023 16:11:01 -0400 Subject: [PATCH 07/14] move margin-botton style override to `block-editor` package --- .../block-editor/src/components/block-inspector/style.scss | 3 ++- .../src/range-control/styles/range-control-styles.ts | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index 07701f2e4b91d..c26038b11ee7f 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -20,7 +20,8 @@ // Reset unwanted margin-bottom from being applied to BaseControls within certain components. .components-focal-point-picker-control, - .components-query-controls { + .components-query-controls, + .components-range-control { .components-base-control { margin-bottom: 0; } diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 67f5b4db4a559..e0da254e125b1 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -324,7 +324,6 @@ const inputNumberWidth = ( { size }: InputNumberProps ) => { export const InputNumber = styled( NumberControl )` display: inline-block; font-size: 13px; - margin-bottom: 0 !important; margin-top: 0; ${ inputNumberWidth }; From df85c6b029e230b8688961ce2cec0d87d6f86e16 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 30 May 2023 16:16:08 -0400 Subject: [PATCH 08/14] 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 d9670d86cb91c..7d2cf3ae0d294 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +### Enhancements +- `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)). + ## 25.0.0 (2023-05-24) ### Breaking Changes From 15f4937e097788301661a3ad63daa040b2c79106 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 6 Jun 2023 10:24:22 -0400 Subject: [PATCH 09/14] simplify `inputNumberWidth` logic --- .../range-control/styles/range-control-styles.ts | 15 ++++++--------- packages/components/src/range-control/types.ts | 6 ------ 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index e0da254e125b1..1da80b07e4f5b 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -12,7 +12,6 @@ import { COLORS, reduceMotion, rtl } from '../../utils'; import { space } from '../../ui/utils/space'; import type { - InputNumberProps, RangeMarkProps, RailProps, ThumbProps, @@ -21,6 +20,7 @@ import type { WrapperProps, RangeControlProps, } from '../types'; +import type { NumberControlProps } from '../../number-control/types'; const rangeHeightValue = 30; const railHeight = 4; @@ -302,20 +302,17 @@ export const Tooltip = styled.span< TooltipProps >` ) } `; -const inputNumberWidth = ( { size }: InputNumberProps ) => { +const inputNumberWidth = ( { + size = 'default', +}: Pick< NumberControlProps, 'size' > ) => { const sizes = { + small: space( 16 ), default: space( 16 ), '__unstable-large': space( 20 ), }; - if ( size === '__unstable-large' ) { - return css( { - width: `${ sizes[ '__unstable-large' ] }`, - } ); - } - return css` - width: ${ sizes.default }; + width: ${ sizes[ size ?? 'default' ] }; `; }; diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts index ffccd327e38b3..4f7c5571fde9c 100644 --- a/packages/components/src/range-control/types.ts +++ b/packages/components/src/range-control/types.ts @@ -277,12 +277,6 @@ export type TrackProps = { trackColor: CSSProperties[ 'color' ]; }; -export type Size = 'default' | '__unstable-large'; - -export type InputNumberProps = { - size?: Size; -}; - export type UseControlledRangeValueArgs = { /** * The initial value. From b10871d1bbca348da81c54db84ed008db58b28aa Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 12 Jun 2023 16:17:21 -0400 Subject: [PATCH 10/14] Simplify minHeight refactor --- .../range-control/styles/range-control-styles.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 1da80b07e4f5b..dfbebbfaf422e 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -23,16 +23,20 @@ import type { import type { NumberControlProps } from '../../number-control/types'; const rangeHeightValue = 30; +const rangeHeightValueNext = 40; const railHeight = 4; const rangeHeight = () => css( { height: rangeHeightValue, minHeight: rangeHeightValue } ); const thumbSize = 12; -const deprecatedDefaultHeight = ( { +const rootMinHeight = ( { __next40pxDefaultSize, -}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) => { - return ! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } ); -}; +}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) => + css( { + minHeight: __next40pxDefaultSize + ? rangeHeightValueNext + : rangeHeightValue, + } ); type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >; export const Root = styled.div< RootProps >` @@ -44,9 +48,9 @@ export const Root = styled.div< RootProps >` position: relative; touch-action: none; width: 100%; - min-height: 40px; - ${ deprecatedDefaultHeight } + /* TODO: remove after removing the __next40pxDefaultSize prop */ + ${ rootMinHeight } `; const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) => From 1500f75210de4260d43a5824f57d0ec15e12fb4b Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 13 Jun 2023 08:30:26 -0400 Subject: [PATCH 11/14] update changelog entry --- packages/components/CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 64e7038736727..6c51af4841cd3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)). + ### Bug Fix - `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)). @@ -19,7 +21,6 @@ ### Enhancements -- `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)). - Wrapped `TabPanel` in a `forwardRef` call ([#50199](https://github.com/WordPress/gutenberg/pull/50199)). - `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)). - `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)). From 24190be73654964c24347b8d74d54ba2fd48f678 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 20 Jun 2023 08:52:22 -0400 Subject: [PATCH 12/14] exclude unneeded `small` size case --- .../src/range-control/styles/range-control-styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index dfbebbfaf422e..055a4619a0a1c 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -308,9 +308,10 @@ export const Tooltip = styled.span< TooltipProps >` const inputNumberWidth = ( { size = 'default', -}: Pick< NumberControlProps, 'size' > ) => { +}: { + size: Exclude< Pick< NumberControlProps, 'size' >[ 'size' ], 'small' >; +} ) => { const sizes = { - small: space( 16 ), default: space( 16 ), '__unstable-large': space( 20 ), }; From da32f2d92d18d449edcf4455324bb8178ed1dddd Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 20 Jun 2023 09:40:56 -0400 Subject: [PATCH 13/14] simplify deprecation flow --- .../range-control/styles/range-control-styles.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 055a4619a0a1c..642f5ee694e13 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -23,20 +23,15 @@ import type { import type { NumberControlProps } from '../../number-control/types'; const rangeHeightValue = 30; -const rangeHeightValueNext = 40; const railHeight = 4; const rangeHeight = () => css( { height: rangeHeightValue, minHeight: rangeHeightValue } ); const thumbSize = 12; -const rootMinHeight = ( { +const deprecatedHeight = ( { __next40pxDefaultSize, }: Pick< RangeControlProps, '__next40pxDefaultSize' > ) => - css( { - minHeight: __next40pxDefaultSize - ? rangeHeightValueNext - : rangeHeightValue, - } ); + ! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } ); type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >; export const Root = styled.div< RootProps >` @@ -48,9 +43,9 @@ export const Root = styled.div< RootProps >` position: relative; touch-action: none; width: 100%; - + min-height: 40px; /* TODO: remove after removing the __next40pxDefaultSize prop */ - ${ rootMinHeight } + ${ deprecatedHeight }; `; const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) => From 6fec45f1394d93e0cbd8bc020fe3e29d74929615 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 20 Jun 2023 09:58:48 -0400 Subject: [PATCH 14/14] prefer __unstableInputWidth over a css override --- packages/components/src/range-control/index.tsx | 4 ++++ .../styles/range-control-styles.ts | 17 ----------------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 0b2a16099926d..19630e39f6bfe 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -37,6 +37,7 @@ import { import type { RangeControlProps } from './types'; import type { WordPressComponentProps } from '../ui/context'; +import { space } from '../ui/utils/space'; const noop = () => {}; @@ -313,6 +314,9 @@ function UnforwardedRangeControl( ? '__unstable-large' : 'default' } + __unstableInputWidth={ + __next40pxDefaultSize ? space( 20 ) : space( 16 ) + } step={ step } // @ts-expect-error TODO: Investigate if the `null` value is necessary value={ inputSliderValue } diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 642f5ee694e13..67bac2ec2994c 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -20,7 +20,6 @@ import type { WrapperProps, RangeControlProps, } from '../types'; -import type { NumberControlProps } from '../../number-control/types'; const rangeHeightValue = 30; const railHeight = 4; @@ -301,28 +300,12 @@ export const Tooltip = styled.span< TooltipProps >` ) } `; -const inputNumberWidth = ( { - size = 'default', -}: { - size: Exclude< Pick< NumberControlProps, 'size' >[ 'size' ], 'small' >; -} ) => { - const sizes = { - default: space( 16 ), - '__unstable-large': space( 20 ), - }; - - return css` - width: ${ sizes[ size ?? 'default' ] }; - `; -}; - // @todo: Refactor RangeControl with latest HStack configuration // @wordpress/components/ui/hstack. export const InputNumber = styled( NumberControl )` display: inline-block; font-size: 13px; margin-top: 0; - ${ inputNumberWidth }; input[type='number']& { ${ rangeHeight };