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 };