Move explicit width handling to UnitControl instead of styles

WordPress · Jul 22, 2022 · ef4c90b · ef4c90b
1 parent fc71ace
commit ef4c90b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
@@ -43,6 +43,7 @@ const UnconnectedBorderControl = (
 		enableStyle = true,
 		hideLabelFromVision,
 		innerWrapperClassName,
+		inputWidth,
 		label,
 		onBorderChange,
 		onSliderChange,
@@ -96,6 +97,7 @@ const UnconnectedBorderControl = (
 					onChange={ onWidthChange }
 					value={ border?.width || '' }
 					placeholder={ placeholder }
+					__unstableInputWidth={ inputWidth }
 				/>
 				{ withSlider && (
 					<RangeControl

diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
@@ -118,14 +118,13 @@ export function useBorderControl(
 		return cx( styles.borderControl, className );
 	}, [ className, cx ] );
 
+	const wrapperWidth = isCompact ? '90px' : width;
 	const innerWrapperClassName = useMemo( () => {
-		const wrapperWidth = isCompact ? '90px' : width;
-		const widthStyle =
-			!! wrapperWidth && styles.wrapperWidth( wrapperWidth );
+		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
 		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ isCompact, width, cx, __next36pxDefaultSize ] );
+	}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -135,6 +134,7 @@ export function useBorderControl(
 		...otherProps,
 		className: classes,
 		innerWrapperClassName,
+		inputWidth: wrapperWidth,
 		onBorderChange,
 		onSliderChange,
 		onWidthChange,

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import type { CSSProperties } from 'react';
 
 /**
  * Internal dependencies
@@ -35,20 +34,26 @@ export const borderControl = css`
 `;
 
 export const innerWrapper = () => css`
+	${ UnitControlWrapper } {
+		flex: 1 1 40%;
+	}
 	&& ${ UnitSelect } {
 		/* Prevent unit select forcing min height larger than its UnitControl */
 		min-height: 0;
 	}
 `;
 
-export const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {
-	return css`
-		${ UnitControlWrapper } {
-			width: ${ width };
-			flex: 0 0 auto;
-		}
-	`;
-};
+/*
+ * This style is only applied to the UnitControl wrapper when the border width
+ * field should be a set width. Omitting this allows the UnitControl &
+ * RangeControl to share the available width in a 40/60 split respectively.
+ */
+export const wrapperWidth = css`
+	${ UnitControlWrapper } {
+		/* Force the UnitControl's set width. */
+		flex: 0 0 auto;
+	}
+`;
 
 /*
  * When default control height is 36px the following should be removed.