@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/notice/README.md

@@ -4,12 +4,6 @@ Use Notices to communicate prominent messages to the user.
 
 ![Notice component](https://make.wordpress.org/design/files/2019/03/Notice-Screenshot-alt.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 A Notice displays a succinct message. It can also offer the user options, like viewing a published post or updating a setting, and requires a user action to be dismissed.

package/src/number-control/README.md

@@ -46,9 +46,9 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 
 ### spinControls
 
- The type of spin controls to display. These are butons that allow the user to
+ The type of spin controls to display. These are buttons that allow the user to
  quickly increment and decrement the number.
- 
+
  - 'none' - Do not show spin controls.
  - 'native' - Use browser's native HTML `input` controls.
  - 'custom' - Use plus and minus icon buttons.

package/src/number-control/index.tsx

@@ -246,10 +246,8 @@ function UnforwardedNumberControl(
 								<SpinButton
 									className={ spinButtonClasses }
 									icon={ plusIcon }
-									isSmall
-									aria-hidden="true"
-									aria-label={ __( 'Increment' ) }
-									tabIndex={ -1 }
+									size="small"
+									label={ __( 'Increment' ) }
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
@@ -257,10 +255,8 @@ function UnforwardedNumberControl(
 								<SpinButton
 									className={ spinButtonClasses }
 									icon={ resetIcon }
-									isSmall
-									aria-hidden="true"
-									aria-label={ __( 'Decrement' ) }
-									tabIndex={ -1 }
+									size="small"
+									label={ __( 'Decrement' ) }
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }

package/src/number-control/types.ts

@@ -15,7 +15,7 @@ export type NumberControlProps = Omit<
 	 */
 	hideHTMLArrows?: boolean;
 	/**
-	 * The type of spin controls to display. These are butons that allow the
+	 * The type of spin controls to display. These are buttons that allow the
 	 * user to quickly increment and decrement the number.
 	 *
 	 * - 'none' - Do not show spin controls.

package/src/palette-edit/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -49,6 +48,7 @@ import {
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
+import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
@@ -74,8 +74,8 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 }
 
 /**
- * Returns a temporary name for a palette item in the format "Color + id".
- * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * Returns a name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs.
  * It expects slugs to be in the format: slugPrefix + color- + number.
  * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
  *
@@ -88,10 +88,10 @@ export function getNameForPosition(
 	elements: PaletteElement[],
 	slugPrefix: string
 ) {
-	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const nameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
 	const position = elements.reduce( ( previousValue, currentValue ) => {
 		if ( typeof currentValue?.slug === 'string' ) {
-			const matches = currentValue?.slug.match( temporaryNameRegex );
+			const matches = currentValue?.slug.match( nameRegex );
 			if ( matches ) {
 				const id = parseInt( matches[ 1 ], 10 );
 				if ( id >= previousValue ) {
@@ -103,7 +103,7 @@ export function getNameForPosition(
 	}, 1 );
 
 	return sprintf(
-		/* translators: %s: is a temporary id for a custom color */
+		/* translators: %s: is an id for a custom color */
 		__( 'Color %s' ),
 		position
 	);
@@ -241,7 +241,7 @@ function Option< T extends Color | Gradient >( {
 				{ isEditing && ! canOnlyChangeValues && (
 					<FlexItem>
 						<RemoveButton
-							isSmall
+							size="small"
 							icon={ lineSolid }
 							label={ __( 'Remove color' ) }
 							onClick={ onRemove }
@@ -261,18 +261,6 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-function isTemporaryElement(
-	slugPrefix: string,
-	{ slug, color, gradient }: Color | Gradient
-) {
-	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
-	return (
-		regex.test( slug ) &&
-		( ( !! color && color === DEFAULT_COLOR ) ||
-			( !! gradient && gradient === DEFAULT_GRADIENT ) )
-	);
-}
-
 function PaletteEditListView< T extends Color | Gradient >( {
 	elements,
 	onChange,
@@ -288,23 +276,6 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	useEffect( () => {
 		elementsReference.current = elements;
 	}, [ elements ] );
-	useEffect( () => {
-		return () => {
-			if (
-				elementsReference.current?.some( ( element ) =>
-					isTemporaryElement( slugPrefix, element )
-				)
-			) {
-				const newElements = elementsReference.current.filter(
-					( element ) => ! isTemporaryElement( slugPrefix, element )
-				);
-				onChange( newElements.length ? newElements : undefined );
-			}
-		};
-		// Disable reason: adding the missing dependency here would cause breaking changes that will require
-		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );
 
@@ -440,7 +411,7 @@ export function PaletteEdit( {
 				<PaletteActionsContainer>
 					{ hasElements && isEditing && (
 						<DoneButton
-							isSmall
+							size="small"
 							onClick={ () => {
 								setIsEditing( false );
 								setEditingElement( null );
@@ -451,7 +422,7 @@ export function PaletteEdit( {
 					) }
 					{ ! canOnlyChangeValues && (
 						<Button
-							isSmall
+							size="small"
 							isPressed={ isAdding }
 							icon={ plus }
 							label={
@@ -460,7 +431,7 @@ export function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const tempOptionName = getNameForPosition(
+								const optionName = getNameForPosition(
 									elements,
 									slugPrefix
 								);
@@ -470,10 +441,10 @@ export function PaletteEdit( {
 										...gradients,
 										{
 											gradient: DEFAULT_GRADIENT,
-											name: tempOptionName,
+											name: optionName,
 											slug:
 												slugPrefix +
-												kebabCase( tempOptionName ),
+												kebabCase( optionName ),
 										},
 									] );
 								} else {
@@ -481,10 +452,10 @@ export function PaletteEdit( {
 										...colors,
 										{
 											color: DEFAULT_COLOR,
-											name: tempOptionName,
+											name: optionName,
 											slug:
 												slugPrefix +
-												kebabCase( tempOptionName ),
+												kebabCase( optionName ),
 										},
 									] );
 								}

package/src/palette-edit/style.scss

@@ -1,6 +1,6 @@
 .components-palette-edit__popover-gradient-picker {
-	width: 280px;
-	padding: 8px;
+	width: 260px;
+	padding: $grid-unit-10;
 }
 .components-dropdown-menu__menu {
 	.components-palette-edit__menu-button {

package/src/panel/README.md

@@ -4,12 +4,6 @@ Panels expand and collapse multiple sections of content.
 
 ![](https://make.wordpress.org/design/files/2019/03/panel.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Anatomy

package/src/private-apis.native.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { kebabCase } from './utils/strings';
+import { lock } from './lock-unlock';
+
+/**
+ * Private @wordpress/components APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	kebabCase,
+} );

package/src/private-apis.ts

@@ -19,35 +19,19 @@ import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
 	DropdownMenuGroup as DropdownMenuGroupV2,
 	DropdownMenuItem as DropdownMenuItemV2,
-	DropdownMenuLabel as DropdownMenuLabelV2,
-	DropdownMenuRadioGroup as DropdownMenuRadioGroupV2,
+	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
 	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
 	DropdownMenuSeparator as DropdownMenuSeparatorV2,
-	DropdownSubMenu as DropdownSubMenuV2,
-	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
+	DropdownMenuItemLabel as DropdownMenuItemLabelV2,
+	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2,
 } from './dropdown-menu-v2';
-import {
-	DropdownMenu as DropdownMenuV2Ariakit,
-	DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
-	DropdownMenuItem as DropdownMenuItemV2Ariakit,
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
-	DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
-	DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
-	DropdownMenuItemLabel as DropdownMenuItemLabelV2Ariakit,
-	DropdownMenuItemHelpText as DropdownMenuItemHelpTextV2Ariakit,
-} from './dropdown-menu-v2-ariakit';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
-
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
-		'@wordpress/components'
-	);
+import { kebabCase } from './utils/strings';
+import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -60,25 +44,16 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
+	ProgressBar,
+	Tabs,
+	Theme,
 	DropdownMenuV2,
-	DropdownMenuCheckboxItemV2,
 	DropdownMenuGroupV2,
 	DropdownMenuItemV2,
-	DropdownMenuLabelV2,
-	DropdownMenuRadioGroupV2,
+	DropdownMenuCheckboxItemV2,
 	DropdownMenuRadioItemV2,
 	DropdownMenuSeparatorV2,
-	DropdownSubMenuV2,
-	DropdownSubMenuTriggerV2,
-	ProgressBar,
-	Tabs,
-	Theme,
-	DropdownMenuV2Ariakit,
-	DropdownMenuGroupV2Ariakit,
-	DropdownMenuItemV2Ariakit,
-	DropdownMenuCheckboxItemV2Ariakit,
-	DropdownMenuRadioItemV2Ariakit,
-	DropdownMenuSeparatorV2Ariakit,
-	DropdownMenuItemLabelV2Ariakit,
-	DropdownMenuItemHelpTextV2Ariakit,
+	DropdownMenuItemLabelV2,
+	DropdownMenuItemHelpTextV2,
+	kebabCase,
 } );

package/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 }
 		/>
 	);
 }

package/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 }
 		/>
 	);
 }

package/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 }

package/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 =

package/src/radio-control/README.md

@@ -5,12 +5,6 @@ Use radio buttons when you want users to select one option from a set, and you w
 ![](https://make.wordpress.org/design/files/2018/11/radio.png)
 Selected and unselected radio buttons
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/radio-control/index.tsx

@@ -92,7 +92,10 @@ export function RadioControl(
 							}
 							{ ...additionalProps }
 						/>
-						<label htmlFor={ `${ id }-${ index }` }>
+						<label
+							className="components-radio-control__label"
+							htmlFor={ `${ id }-${ index }` }
+						>
 							{ option.label }
 						</label>
 					</div>

package/src/radio-control/style.scss

@@ -1,5 +1,32 @@
+.components-radio-control__option {
+	display: flex;
+	align-items: center;
+}
+
 .components-radio-control__input[type="radio"] {
 	@include radio-control;
-	margin-top: 0;
-	margin-right: 6px;
+
+	display: inline-flex;
+	margin: 0 6px 0 0;
+	padding: 0;
+	appearance: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
+	}
+
+	&:checked {
+		background: $components-color-accent;
+		border-color: $components-color-accent;
+
+		&::before {
+			content: "";
+			border-radius: 50%;
+		}
+	}
+}
+
+.components-radio-control__label {
+	cursor: pointer;
 }

package/src/radio-group/README.md

@@ -12,12 +12,6 @@ Use a RadioGroup component when you want users to select one option from a small
 
 ![RadioGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/range-control/README.md

@@ -2,15 +2,7 @@
 
 RangeControls are used to make selections from a range of incremental values.
 
-![](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
-
-A RangeControl for volume
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![A RangeControl for volume](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
 
 ## Design guidelines
 

package/src/range-control/index.tsx

@@ -328,7 +328,7 @@ function UnforwardedRangeControl(
 							className="components-range-control__reset"
 							disabled={ disabled || value === undefined }
 							variant="secondary"
-							isSmall
+							size="small"
 							onClick={ handleOnReset }
 						>
 							{ __( 'Reset' ) }

package/src/search-control/README.md

@@ -2,11 +2,7 @@
 
 SearchControl components let users display a search control.
 
-
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
+Check out the [Storybook page](https://wordpress.github.io/gutenberg/?path=/docs/components-searchcontrol--docs) for a visual exploration of this component.
 
 ## Development guidelines
 

package/src/select-control/README.md

@@ -4,12 +4,6 @@ SelectControl allow users to select from a single or multiple option menu. It fu
 
 ![A “Link To” select with “none” selected.](https://wordpress.org/gutenberg/files/2018/12/select.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage

package/src/select-control/styles/select-control-styles.ts

@@ -11,6 +11,7 @@ import { COLORS, rtl } from '../../utils';
 import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
+import { fontSizeStyles } from '../../input-control/styles/input-control-styles';
 
 interface SelectProps
 	extends Pick<
@@ -30,27 +31,6 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 	} );
 };
 
-const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
-	const sizes = {
-		default: '13px',
-		small: '11px',
-		'__unstable-large': '13px',
-	};
-
-	const fontSize = sizes[ selectSize ];
-	const fontSizeMobile = '16px';
-
-	if ( ! fontSize ) return '';
-
-	return css`
-		font-size: ${ fontSizeMobile };
-
-		@media ( min-width: 600px ) {
-			font-size: ${ fontSize };
-		}
-	`;
-};
-
 const sizeStyles = ( {
 	__next40pxDefaultSize,
 	multiple,
@@ -75,6 +55,12 @@ const sizeStyles = ( {
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
+		compact: {
+			height: 32,
+			minHeight: 32,
+			paddingTop: 0,
+			paddingBottom: 0,
+		},
 		'__unstable-large': {
 			height: 40,
 			minHeight: 40,
@@ -84,12 +70,7 @@ const sizeStyles = ( {
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		sizes.default = {
-			height: 32,
-			minHeight: 32,
-			paddingTop: 0,
-			paddingBottom: 0,
-		};
+		sizes.default = sizes.compact;
 	}
 
 	const style = sizes[ selectSize ] || sizes.default;
@@ -107,11 +88,12 @@ const sizePaddings = ( {
 	const padding = {
 		default: 16,
 		small: 8,
+		compact: 8,
 		'__unstable-large': 16,
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		padding.default = 8;
+		padding.default = padding.compact;
 	}
 
 	const selectedPadding = padding[ selectSize ] || padding.default;

package/src/slot-fill/index.tsx

@@ -55,9 +55,12 @@ export function UnforwardedSlot(
 }
 export const Slot = forwardRef( UnforwardedSlot );
 
-export function Provider( { children }: SlotFillProviderProps ) {
+export function Provider( {
+	children,
+	passthrough = false,
+}: SlotFillProviderProps ) {
 	const parent = useContext( SlotFillContext );
-	if ( ! parent.isDefault ) {
+	if ( ! parent.isDefault && passthrough ) {
 		return <>{ children }</>;
 	}
 	return (

package/src/slot-fill/types.ts

@@ -96,6 +96,11 @@ export type SlotFillProviderProps = {
 	 * The children elements.
 	 */
 	children: ReactNode;
+
+	/**
+	 * Whether to pass slots to the parent provider if existent.
+	 */
+	passthrough?: boolean;
 };
 
 export type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;