ComboboxControl: Add flag for larger default size

WordPress · Jun 17, 2022 · 2514e59 · 2514e59
1 parent 94878bf
commit 2514e59
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
@@ -22,11 +22,12 @@ import { closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { Flex, FlexBlock, FlexItem } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 
 const noop = () => {};
@@ -44,6 +45,7 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	__next36pxDefaultSize,
 	value,
 	label,
 	options,
@@ -225,7 +227,9 @@ function ComboboxControl( {
 					tabIndex="-1"
 					onKeyDown={ onKeyDown }
 				>
-					<Flex>
+					<InputWrapperFlex
+						__next36pxDefaultSize={ __next36pxDefaultSize }
+					>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"
@@ -257,7 +261,7 @@ function ComboboxControl( {
 								/>
 							</FlexItem>
 						) }
-					</Flex>
+					</InputWrapperFlex>
 					{ isExpanded && (
 						<SuggestionsList
 							instanceId={ instanceId }

diff --git a/packages/components/src/combobox-control/stories/index.js b/packages/components/src/combobox-control/stories/index.js
@@ -266,23 +266,24 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl( { allowReset } ) {
+function CountryCodeComboboxControl( args ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
 		<>
 			<ComboboxControl
+				{ ...args }
 				value={ value }
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
-				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
 export const _default = CountryCodeComboboxControl.bind( {} );
 _default.args = {
+	__next36pxDefaultSize: false,
 	allowReset: false,
 };
diff --git a/packages/components/src/combobox-control/style.scss b/packages/components/src/combobox-control/style.scss
@@ -32,7 +32,7 @@ input.components-combobox-control__input[type="text"] {
 	align-items: flex-start;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05;
+	padding: 0;
 
 	&:focus-within {
 		@include input-style__focus();

diff --git a/packages/components/src/combobox-control/styles.ts b/packages/components/src/combobox-control/styles.ts
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
+	! __next36pxDefaultSize &&
+	css`
+		height: 30px;
+		padding-left: ${ space( 1 ) };
+		padding-right: ${ space( 1 ) };
+	`;
+
+export const InputWrapperFlex = styled( Flex )`
+	height: 36px;
+	padding-left: ${ space( 2 ) };
+	padding-right: ${ space( 2 ) };
+
+	${ deprecatedDefaultSize }
+`;