CustomSelectControl: Add flag for larger default size (#39401)

* CustomSelectControl: Add flag for larger default size * Migrate stories * Add changelog entry * Increase paddings to 16px * Fixup changelog
WordPress · Mar 21, 2022 · 8abfa33 · 8abfa33
1 parent 3c9aed0
commit 8abfa33
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 79 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   `CustomSelectControl`: Add `__next36pxDefaultSize` flag for larger default size ([#39401](https://github.com/WordPress/gutenberg/pull/39401)).
 -   `BaseControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#39325](https://github.com/WordPress/gutenberg/pull/39325)).
 -   `Divider`: Make the divider visible by default (`display: inline`) in flow layout containers when the divider orientation is vertical ([#39316](https://github.com/WordPress/gutenberg/pull/39316)).
 -   Stop using deprecated `event.keyCode` in favor of `event.key` for keyboard events in `UnitControl` and `InputControl`.  ([#39360](https://github.com/WordPress/gutenberg/pull/39360))

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -56,6 +56,8 @@ const stateReducer = (
 	}
 };
 export default function CustomSelectControl( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next36pxDefaultSize = false,
 	className,
 	hideLabelFromVision,
 	label,
@@ -141,8 +143,11 @@ export default function CustomSelectControl( {
 					// This is needed because some speech recognition software don't support `aria-labelledby`.
 					'aria-label': label,
 					'aria-labelledby': undefined,
-					className: 'components-custom-select-control__button',
-					isSmall: true,
+					className: classnames(
+						'components-custom-select-control__button',
+						{ 'is-next-36px-default-size': __next36pxDefaultSize }
+					),
+					isSmall: ! __next36pxDefaultSize,
 					describedBy: getDescribedBy(),
 				} ) }
 			>
@@ -169,6 +174,7 @@ export default function CustomSelectControl( {
 										'is-highlighted':
 											index === highlightedIndex,
 										'has-hint': !! item.__experimentalHint,
+										'is-next-36px-default-size': __next36pxDefaultSize,
 									}
 								),
 								style: item.style,

diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js
@@ -6,81 +6,84 @@ import CustomSelectControl from '../';
 export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
-};
-
-const defaultOptions = [
-	{
-		key: 'small',
-		name: 'Small',
-		style: { fontSize: '50%' },
-	},
-	{
-		key: 'normal',
-		name: 'Normal',
-		style: { fontSize: '100%' },
-		className: 'can-apply-custom-class-to-option',
-	},
-	{
-		key: 'large',
-		name: 'Large',
-		style: { fontSize: '200%' },
-	},
-	{
-		key: 'huge',
-		name: 'Huge',
-		style: { fontSize: '300%' },
-	},
-];
-export const _default = () => (
-	<CustomSelectControl label="Font size" options={ defaultOptions } />
-);
-
-const longLabelOptions = [
-	{
-		key: 'reallylonglabel1',
-		name: 'Really long labels are good for stress testing',
-	},
-	{
-		key: 'reallylonglabel2',
-		name: 'But they can take a long time to type.',
-	},
-	{
-		key: 'reallylonglabel3',
-		name:
-			'That really is ok though because you should stress test your UIs.',
+	argTypes: {
+		__next36pxDefaultSize: {
+			control: { type: 'boolean' },
+		},
 	},
-];
+};
 
-export const longLabels = () => (
-	<CustomSelectControl
-		label="Testing long labels"
-		options={ longLabelOptions }
-	/>
-);
+export const Default = CustomSelectControl.bind( {} );
+Default.args = {
+	label: 'Label',
+	options: [
+		{
+			key: 'small',
+			name: 'Small',
+			style: { fontSize: '50%' },
+		},
+		{
+			key: 'normal',
+			name: 'Normal',
+			style: { fontSize: '100%' },
+			className: 'can-apply-custom-class-to-option',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			style: { fontSize: '200%' },
+		},
+		{
+			key: 'huge',
+			name: 'Huge',
+			style: { fontSize: '300%' },
+		},
+	],
+};
 
-const withHintsOptions = [
-	{
-		key: 'thumbnail',
-		name: 'Thumbnail',
-		__experimentalHint: '150x150',
-	},
-	{
-		key: 'medium',
-		name: 'Medium',
-		__experimentalHint: '250x250',
-	},
-	{
-		key: 'large',
-		name: 'Large',
-		__experimentalHint: '1024x1024',
-	},
-	{
-		key: 'full',
-		name: 'Full Size',
-		__experimentalHint: '1600x1600',
-	},
-];
+export const WithLongLabels = CustomSelectControl.bind( {} );
+WithLongLabels.args = {
+	...Default.args,
+	options: [
+		{
+			key: 'reallylonglabel1',
+			name: 'Really long labels are good for stress testing',
+		},
+		{
+			key: 'reallylonglabel2',
+			name: 'But they can take a long time to type.',
+		},
+		{
+			key: 'reallylonglabel3',
+			name:
+				'That really is ok though because you should stress test your UIs.',
+		},
+	],
+};
 
-export const hints = () => (
-	<CustomSelectControl label="Testing hints" options={ withHintsOptions } />
-);
+export const WithHints = CustomSelectControl.bind( {} );
+WithHints.args = {
+	...Default.args,
+	options: [
+		{
+			key: 'thumbnail',
+			name: 'Thumbnail',
+			__experimentalHint: '150x150',
+		},
+		{
+			key: 'medium',
+			name: 'Medium',
+			__experimentalHint: '250x250',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			__experimentalHint: '1024x1024',
+		},
+		{
+			key: 'full',
+			name: 'Full Size',
+			__experimentalHint: '1600x1600',
+		},
+	],
+};
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
@@ -10,15 +10,26 @@
 .components-custom-select-control__button {
 	border: 1px solid $gray-700;
 	border-radius: $radius-block-ui;
-	min-height: 30px;
 	min-width: 130px;
 	position: relative;
 	text-align: left;
 
+	&:not(.is-next-36px-default-size) {
+		min-height: 30px;
+	}
+
 	// For all button sizes allow sufficient space for the
 	// dropdown "arrow" icon to display.
 	&.components-custom-select-control__button {
-		padding-right: $icon-size;
+		// TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron
+		// (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431)
+		padding-left: $grid-unit-20;
+		padding-right: $icon-size + $grid-unit-10;
+
+		&:not(.is-next-36px-default-size) {
+			padding-left: $grid-unit-10;
+			padding-right: $icon-size;
+		}
 	}
 
 	&:focus:not(:disabled) {
@@ -61,10 +72,14 @@
 	display: grid;
 	grid-template-columns: auto auto;
 	list-style-type: none;
-	padding: $grid-unit-10;
+	padding: $grid-unit-10 $grid-unit-20;
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
+	&:not(.is-next-36px-default-size) {
+		padding: $grid-unit-10;
+	}
+
 	&.has-hint {
 		grid-template-columns: auto auto 30px;
 	}