prefer __unstableInputWidth over a css override

WordPress · Jun 20, 2023 · 6fec45f · 6fec45f
1 parent da32f2d
commit 6fec45f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 17 deletions.
diff --git 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
@@ -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 };