QueryControls: Add opt-in prop for 40px default size (#56576)

* `QueryControls`: Add opt-in prop for 40px default size * Update RangeControl 40px size to be opt-in * Update changelog
WordPress · Dec 7, 2023 · b6bd315 · b6bd315
1 parent 54d02b4
commit b6bd315
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `QueryControls`: Add opt-in prop for 40px default size ([#56576](https://github.com/WordPress/gutenberg/pull/56576)).
+
 ## 25.13.0 (2023-11-29)
 
 ### Enhancements
@@ -23,7 +27,7 @@
 
 ### Documentation
 
--  `Text` and `Heading`: improve docs around default values and truncation logic ([#56518](https://github.com/WordPress/gutenberg/pull/56518))
+-   `Text` and `Heading`: improve docs around default values and truncation logic ([#56518](https://github.com/WordPress/gutenberg/pull/56518))
 
 ### Internal
 

diff --git a/packages/components/src/query-controls/author-select.tsx b/packages/components/src/query-controls/author-select.tsx
@@ -6,6 +6,7 @@ import TreeSelect from '../tree-select';
 import type { AuthorSelectProps } from './types';
 
 export default function AuthorSelect( {
+	__next40pxDefaultSize,
 	label,
 	noOptionLabel,
 	authorList,
@@ -28,6 +29,7 @@ export default function AuthorSelect( {
 					: undefined
 			}
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 		/>
 	);
 }
diff --git a/packages/components/src/query-controls/category-select.tsx b/packages/components/src/query-controls/category-select.tsx
@@ -11,6 +11,7 @@ import { useMemo } from '@wordpress/element';
 import type { CategorySelectProps } from './types';
 
 export default function CategorySelect( {
+	__next40pxDefaultSize,
 	label,
 	noOptionLabel,
 	categoriesList,
@@ -37,6 +38,7 @@ export default function CategorySelect( {
 			}
 			{ ...props }
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 		/>
 	);
 }
diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx
@@ -60,6 +60,7 @@ function isMultipleCategorySelection(
  * ```
  */
 export function QueryControls( {
+	__next40pxDefaultSize = false,
 	authorList,
 	selectedAuthorId,
 	numberOfItems,
@@ -81,6 +82,7 @@ export function QueryControls( {
 				onOrderChange && onOrderByChange && (
 					<SelectControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
 						value={ `${ orderBy }/${ order }` }
@@ -131,6 +133,7 @@ export function QueryControls( {
 					props.categoriesList &&
 					props.onCategoryChange && (
 						<CategorySelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
@@ -143,6 +146,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
@@ -166,6 +170,7 @@ export function QueryControls( {
 					),
 				onAuthorChange && (
 					<AuthorSelect
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
@@ -177,7 +182,7 @@ export function QueryControls( {
 				onNumberOfItemsChange && (
 					<RangeControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }

diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts
@@ -31,6 +31,7 @@ export type CategorySelectProps = Pick<
 	categoriesList: Category[];
 	onChange: ( newCategory: string ) => void;
 	selectedCategoryId?: Category[ 'id' ];
+	__next40pxDefaultSize: boolean;
 };
 
 export type AuthorSelectProps = Pick<
@@ -40,6 +41,7 @@ export type AuthorSelectProps = Pick<
 	authorList?: Author[];
 	onChange: ( newAuthor: string ) => void;
 	selectedAuthorId?: Author[ 'id' ];
+	__next40pxDefaultSize: boolean;
 };
 
 type Order = 'asc' | 'desc';
@@ -101,6 +103,13 @@ type BaseQueryControlsProps = {
 	 * The selected author ID.
 	 */
 	selectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type QueryControlsWithSingleCategorySelectionProps =