Add __unstable-large size variant on InputControl SelectControl UnitControl

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Experimental
 
 -   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([35621](https://github.com/WordPress/gutenberg/pull/35621)).
+-   Enlarged the `default` size variant of `InputControl` to the new 40px design. `AnglePickerControl`, `BoxControl`, `ColorPicker`, `CustomGradientPicker`, `RangeControl`, `SelectControl`, and `UnitControl` were also slightly modified (either visually or internally) to accommodate this change ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
 
 ## 19.0.0 (2021-10-22)
 

packages/components/src/angle-picker-control/index.js

@@ -48,6 +48,7 @@ export default function AnglePickerControl( {
 					suffix={
 						<Spacer
 							as={ Text }
+							marginBottom={ 0 }
 							marginRight={ space( 3 ) }
 							style={ {
 								color: 'var( --wp-admin-theme-color )',

packages/components/src/box-control/index.js

@@ -39,6 +39,7 @@ import { useControlledState } from '../utils/hooks';
 
 const defaultInputProps = {
 	min: 0,
+	size: 'small',
 };
 
 function useUniqueId( idProp ) {

packages/components/src/color-picker/styles.ts

@@ -28,7 +28,7 @@ export const NumberControlWrapper = styled( NumberControl )`
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 5em;
+	width: 6.5em;
 	${ BackdropUI } {
 		display: none;
 	}
@@ -42,14 +42,6 @@ export const RangeControl = styled( InnerRangeControl )`
 	}
 `;
 
-// All inputs should be the same height so this should be changed at the component level.
-// That involves changing heights of multiple input types probably buttons too etc.
-// So until that is done we are already using the new height on the color picker so it matches the mockups.
-const inputHeightStyle = `
-&&& ${ Input } {
-	height: 40px;
-}`;
-
 // Make the Hue circle picker not go out of the bar
 const interactiveHueStyles = `
 .react-colorful__interactive {
@@ -107,8 +99,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const DetailsControlButton = styled( Button )`
@@ -119,5 +109,5 @@ export const DetailsControlButton = styled( Button )`
 `;
 
 export const ColorHexInputControl = styled( InputControl )`
-	width: 8em;
+	width: 9em;
 `;

packages/components/src/custom-gradient-picker/style.scss

@@ -111,10 +111,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 
 // All these styles should be made generic and changed on the inputs for all components.
 .components-custom-gradient-picker {
-	.components-select-control__input,
-	.components-input-control__input {
-		height: 40px !important;
-	}
 	.components-input-control__label {
 		line-height: 1;
 		padding-bottom: $grid-unit-10 !important;

packages/components/src/input-control/styles/input-control-styles.tsx

@@ -145,14 +145,18 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 const sizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 30,
+			minHeight: 40,
+			paddingLeft: 16,
+			paddingRight: 16,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
+			paddingLeft: 8,
+			paddingRight: 8,
 		},
 	};
 
@@ -205,8 +209,6 @@ export const Input = styled.input< InputProps >`
 		display: block;
 		margin: 0;
 		outline: none;
-		padding-left: 8px;
-		padding-right: 8px;
 		width: 100%;
 
 		${ dragStyles }
@@ -315,6 +317,8 @@ export const Prefix = styled.span`
 `;
 
 export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
 	box-sizing: border-box;
-	display: block;
+	display: flex;
 `;

packages/components/src/range-control/styles/range-control-styles.js

@@ -12,7 +12,7 @@ import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
-const rangeHeightValue = 30;
+const rangeHeightValue = 40;
 const railHeight = 4;
 const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
@@ -298,7 +298,7 @@ export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
-	width: ${ space( 16 ) } !important;
+	width: ${ space( 20 ) } !important;
 
 	input[type='number']& {
 		${ rangeHeight };

packages/components/src/select-control/styles/select-control-styles.ts

@@ -46,9 +46,9 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 const sizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 30,
+			minHeight: 40,
 		},
 		small: {
 			height: 24,
@@ -62,6 +62,20 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 	return css( style );
 };
 
+const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
+	const sizes = {
+		default: {
+			paddingLeft: 16,
+			paddingRight: 32,
+		},
+		small: {
+			paddingLeft: 8,
+			paddingRight: 24,
+		},
+	};
+	return rtl( sizes[ selectSize ] );
+};
+
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -80,8 +94,7 @@ export const Select = styled.select< SelectProps >`
 		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
-
-		${ rtl( { paddingLeft: 8, paddingRight: 24 } ) }
+		${ sizePaddings };
 	}
 `;
 

packages/components/src/unit-control/stories/index.js

@@ -67,6 +67,23 @@ export const _default = () => {
 	return <Example />;
 };
 
+export const WithSingleUnit = ( props ) => {
+	const [ value, setValue ] = useState( '10px' );
+	return (
+		<ControlWrapperView>
+			<UnitControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v ) => setValue( v ) }
+			/>
+		</ControlWrapperView>
+	);
+};
+WithSingleUnit.args = {
+	label: 'Value',
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
 export function WithCustomUnits() {
 	const [ value, setValue ] = useState( '10km' );
 

packages/components/src/unit-control/styles/unit-control-styles.ts

@@ -18,18 +18,26 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
+	size: SelectSize;
 };
 
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	const value = disableUnits ? 3 : 24;
+const paddingStyles = ( { disableUnits, size }: InputProps ) => {
+	const paddings = {
+		default: {
+			paddingRight: disableUnits ? 16 : 8,
+		},
+		small: {
+			paddingRight: 8,
+		},
+	};
 
 	return css`
-		${ rtl( { paddingRight: value } )() };
+		${ rtl( paddings[ size ] )() };
 	`;
 };
 
@@ -62,49 +70,24 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-const unitSizeStyles = ( { selectSize }: SelectProps ) => {
-	const sizes = {
-		default: {
-			height: 28,
-			lineHeight: '24px',
-			minHeight: 28,
-			top: 1,
-		},
-		small: {
-			height: 22,
-			lineHeight: '18px',
-			minHeight: 22,
-			top: 1,
-		},
-	};
-
-	return css( sizes[ selectSize ] );
-};
-
-const baseUnitLabelStyles = ( props: SelectProps ) => {
-	return css`
-		appearance: none;
-		background: transparent;
-		border-radius: 2px;
-		border: none;
-		box-sizing: border-box;
-		color: ${ COLORS.darkGray[ 500 ] };
-		display: block;
-		font-size: 8px;
-		line-height: 1;
-		letter-spacing: -0.5px;
-		outline: none;
-		padding: 2px 1px;
-		position: absolute;
-		text-align-last: center;
-		text-transform: uppercase;
-		width: 20px;
-
-		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-		${ rtl( { right: 0 } )() }
-		${ unitSizeStyles( props ) }
-	`;
-};
+const baseUnitLabelStyles = css`
+	appearance: none;
+	background: transparent;
+	border-radius: 2px;
+	border: none;
+	box-sizing: border-box;
+	color: ${ COLORS.darkGray[ 500 ] };
+	display: block;
+	font-size: 8px;
+	letter-spacing: -0.5px;
+	outline: none;
+	padding: 2px 1px;
+	text-align-last: center;
+	text-transform: uppercase;
+	width: 20px;
+
+	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
+`;
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
@@ -119,6 +102,7 @@ export const UnitSelect = styled.select< SelectProps >`
 		${ baseUnitLabelStyles };
 		cursor: pointer;
 		border: 1px solid transparent;
+		height: 100%;
 
 		&:hover {
 			background-color: ${ COLORS.lightGray[ 300 ] };