@wordpress/components 28.11.0 → 28.13.0

package/src/icon/stories/index.story.tsx

@@ -47,26 +47,68 @@ FillColor.args = {
 	...Default.args,
 };
 
+/**
+ * When `icon` is a function, it will be passed the `size` prop and any other additional props.
+ */
 export const WithAFunction = Template.bind( {} );
 WithAFunction.args = {
 	...Default.args,
-	icon: () => (
-		<SVG>
-			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-		</SVG>
+	icon: ( { size }: { size?: number } ) => (
+		<img
+			width={ size }
+			height={ size }
+			src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+			alt="WordPress"
+		/>
 	),
 };
+WithAFunction.parameters = {
+	docs: {
+		source: {
+			code: `
+<Icon
+  icon={ ( { size } ) => (
+    <img
+      width={ size }
+      height={ size }
+      src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+      alt="WordPress"
+    />
+  ) }
+/>
+		`,
+		},
+	},
+};
 
-const MyIconComponent = () => (
-	<SVG>
+const MyIconComponent = ( { size }: { size?: number } ) => (
+	<SVG width={ size } height={ size }>
 		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
 	</SVG>
 );
 
+/**
+ * When `icon` is a component, it will be passed the `size` prop and any other additional props.
+ */
 export const WithAComponent = Template.bind( {} );
 WithAComponent.args = {
 	...Default.args,
-	icon: MyIconComponent,
+	icon: <MyIconComponent />,
+};
+WithAComponent.parameters = {
+	docs: {
+		source: {
+			code: `
+const MyIconComponent = ( { size } ) => (
+  <SVG width={ size } height={ size }>
+    <Path d="M5 4v3h5.5v12h3V7H19V4z" />
+  </SVG>
+);
+
+<Icon icon={ <MyIconComponent /> } />
+		`,
+		},
+	},
 };
 
 export const WithAnSVG = Template.bind( {} );
@@ -80,7 +122,7 @@ WithAnSVG.args = {
 };
 
 /**
- * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * Although it's preferred to use icons from the `@wordpress/icons` package, [Dashicons](https://developer.wordpress.org/resource/dashicons/) are still supported,
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */

package/src/input-control/stories/index.story.tsx

@@ -16,7 +16,8 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
-	title: 'Components (Experimental)/InputControl',
+	title: 'Components (Experimental)/Selection & Input/InputControl',
+	id: 'components-experimental-inputcontrol',
 	component: InputControl,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },

package/src/menu/stories/index.story.tsx

@@ -22,7 +22,8 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
 
 const meta: Meta< typeof Menu > = {
-	title: 'Components (Experimental)/Menu',
+	id: 'components-experimental-menu',
+	title: 'Components (Experimental)/Actions/Menu',
 	component: Menu,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/menu/styles.ts

@@ -380,7 +380,7 @@ export const MenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ LIGHTER_TEXT_COLOR };
-	word-break: break-all;
+	overflow-wrap: anywhere;
 
 	[data-active-item]:not( [data-focus-visible] )
 		*:not( ${ MenuPopoverInnerWrapper } )

package/src/menu-group/stories/index.story.tsx

@@ -16,8 +16,9 @@ import MenuItemsChoice from '../../menu-items-choice';
 import type { Meta, StoryFn } from '@storybook/react';
 
 const meta: Meta< typeof MenuGroup > = {
-	title: 'Components/MenuGroup',
+	title: 'Components/Actions/MenuGroup',
 	component: MenuGroup,
+	id: 'components-menugroup',
 	argTypes: {
 		children: { control: { type: null } },
 	},

package/src/menu-item/index.tsx

@@ -56,6 +56,7 @@ function UnforwardedMenuItem(
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			ref={ ref }
 			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
 			aria-checked={

package/src/menu-item/stories/index.story.tsx

@@ -17,7 +17,8 @@ import Shortcut from '../../shortcut';
 
 const meta: Meta< typeof MenuItem > = {
 	component: MenuItem,
-	title: 'Components/MenuItem',
+	title: 'Components/Actions/MenuItem',
+	id: 'components-menuitem',
 	argTypes: {
 		children: { control: { type: null } },
 		icon: {

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
-  class="components-button components-menu-item__button my-class"
+  class="components-button components-menu-item__button my-class is-next-40px-default-size"
   role="menuitemcheckbox"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
 <button
-  class="components-button components-menu-item__button"
+  class="components-button components-menu-item__button is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
@@ -62,7 +62,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
-  class="components-button components-menu-item__button my-class"
+  class="components-button components-menu-item__button my-class is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
 <button
-  class="components-button components-menu-item__button"
+  class="components-button components-menu-item__button is-next-40px-default-size"
   role="menuitem"
   type="button"
 >

package/src/menu-items-choice/stories/index.story.tsx

@@ -16,7 +16,8 @@ import MenuGroup from '../../menu-group';
 
 const meta: Meta< typeof MenuItemsChoice > = {
 	component: MenuItemsChoice,
-	title: 'Components/MenuItemsChoice',
+	title: 'Components/Actions/MenuItemsChoice',
+	id: 'components-menuitemschoice',
 	argTypes: {
 		onHover: { action: 'onHover' },
 		onSelect: { action: 'onSelect' },

package/src/modal/index.tsx

@@ -335,10 +335,10 @@ function UnforwardedModal(
 									<>
 										<Spacer
 											marginBottom={ 0 }
-											marginLeft={ 3 }
+											marginLeft={ 2 }
 										/>
 										<Button
-											size="small"
+											size="compact"
 											onClick={ (
 												event: React.MouseEvent< HTMLButtonElement >
 											) =>

package/src/modal/stories/index.story.tsx

@@ -19,7 +19,8 @@ import type { ModalProps } from '../types';
 
 const meta: Meta< typeof Modal > = {
 	component: Modal,
-	title: 'Components/Modal',
+	title: 'Components/Overlays/Modal',
+	id: 'components-modal',
 	argTypes: {
 		children: {
 			control: { type: null },
@@ -110,7 +111,7 @@ export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
 	headerActions: (
-		<Button icon={ fullscreen } label="Fullscreen mode" size="small" />
+		<Button icon={ fullscreen } label="Fullscreen mode" size="compact" />
 	),
 	children: <div style={ { height: '200px' } } />,
 };

package/src/navigator/stories/index.story.tsx

@@ -21,7 +21,8 @@ const meta: Meta< typeof Navigator > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		BackButton: Navigator.BackButton,
 	},
-	title: 'Components/Navigator',
+	title: 'Components/Navigation/Navigator',
+	id: 'components-navigator',
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },

package/src/notice/index.tsx

@@ -142,6 +142,7 @@ function Notice( {
 
 							return (
 								<Button
+									__next40pxDefaultSize
 									key={ index }
 									href={ url }
 									variant={ computedVariant }
@@ -160,6 +161,7 @@ function Notice( {
 			</div>
 			{ isDismissible && (
 				<Button
+					size="small"
 					className="components-notice__dismiss"
 					icon={ close }
 					label={ __( 'Close' ) }

package/src/notice/stories/index.story.tsx

@@ -17,7 +17,8 @@ import NoticeList from '../list';
 import type { NoticeListProps } from '../types';
 
 const meta: Meta< typeof Notice > = {
-	title: 'Components/Notice',
+	title: 'Components/Feedback/Notice',
+	id: 'components-notice',
 	component: Notice,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { NoticeList },
@@ -109,7 +110,11 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	return (
 		<>
 			<NoticeList notices={ notices } onRemove={ removeNotice } />
-			<Button variant="primary" onClick={ resetNotices }>
+			<Button
+				__next40pxDefaultSize
+				variant="primary"
+				onClick={ resetNotices }
+			>
 				Reset Notices
 			</Button>
 		</>

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -21,19 +21,19 @@ exports[`Notice should match snapshot 1`] = `
         class="components-notice__actions"
       >
         <a
-          class="components-button components-notice__action is-link"
+          class="components-button components-notice__action is-next-40px-default-size is-link"
           href="https://example.com"
         >
           More information
         </a>
         <button
-          class="components-button components-notice__action is-secondary"
+          class="components-button components-notice__action is-next-40px-default-size is-secondary"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="components-button components-notice__action is-primary"
+          class="components-button components-notice__action is-next-40px-default-size is-primary"
           type="button"
         >
           Submit
@@ -42,7 +42,7 @@ exports[`Notice should match snapshot 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="components-button components-notice__dismiss has-icon"
+      class="components-button components-notice__dismiss is-small has-icon"
       type="button"
     >
       <svg

package/src/number-control/stories/index.story.tsx

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 
 const meta: Meta< typeof NumberControl > = {
-	title: 'Components (Experimental)/NumberControl',
+	title: 'Components (Experimental)/Selection & Input/NumberControl',
+	id: 'components-experimental-numbercontrol',
 	component: NumberControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

package/src/palette-edit/index.tsx

@@ -215,6 +215,7 @@ function Option< T extends PaletteElement >( {
 		<Item ref={ setPopoverAnchor } size="small">
 			<HStack justify="flex-start">
 				<Button
+					size="small"
 					onClick={ () => {
 						setIsEditingColor( true );
 					} }
@@ -501,6 +502,7 @@ export function PaletteEdit( {
 										<NavigableMenu role="menu">
 											{ ! isEditing && (
 												<Button
+													__next40pxDefaultSize
 													variant="tertiary"
 													onClick={ () => {
 														setIsEditing( true );
@@ -513,6 +515,7 @@ export function PaletteEdit( {
 											) }
 											{ ! canOnlyChangeValues && (
 												<Button
+													__next40pxDefaultSize
 													variant="tertiary"
 													onClick={ () => {
 														setEditingElement(
@@ -535,6 +538,8 @@ export function PaletteEdit( {
 											) }
 											{ canReset && (
 												<Button
+													__next40pxDefaultSize
+													className="components-palette-edit__menu-button"
 													variant="tertiary"
 													onClick={ () => {
 														setEditingElement(

package/src/panel/body.tsx

@@ -116,6 +116,7 @@ const PanelBodyTitle = forwardRef(
 		return (
 			<h2 className="components-panel__body-title">
 				<Button
+					__next40pxDefaultSize
 					className="components-panel__body-toggle"
 					aria-expanded={ isOpened }
 					ref={ ref }

package/src/placeholder/stories/index.story.tsx

@@ -45,6 +45,7 @@ const Template: StoryFn< typeof Placeholder > = ( args ) => {
 			<div>
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label="Sample Field"
 					placeholder="Enter something here"
 					value={ value }

package/src/popover/index.tsx

@@ -39,6 +39,7 @@ import {
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -419,8 +420,10 @@ const UnforwardedPopover = (
 					</span>
 					<Button
 						className="components-popover__close"
+						size="small"
 						icon={ close }
 						onClick={ onClose }
+						label={ __( 'Close' ) }
 					/>
 				</div>
 			) }

package/src/popover/stories/index.story.tsx

@@ -33,7 +33,8 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
 ];
 
 const meta: Meta< typeof Popover > = {
-	title: 'Components/Popover',
+	title: 'Components/Overlays/Popover',
+	id: 'components-popover',
 	component: Popover,
 	argTypes: {
 		anchor: { control: { type: null } },

package/src/private-apis.ts

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
-import { createPrivateSlotFill } from './slot-fill';
 import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
@@ -13,7 +12,6 @@ import { lock } from './lock-unlock';
 export const privateApis = {};
 lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
-	createPrivateSlotFill,
 	ComponentsContext,
 	Tabs,
 	Theme,

package/src/progress-bar/stories/index.story.tsx

@@ -10,7 +10,8 @@ import { ProgressBar } from '..';
 
 const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
-	title: 'Components/ProgressBar',
+	title: 'Components/Feedback/ProgressBar',
+	id: 'components-progressbar',
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},

package/src/radio-control/stories/index.story.tsx

@@ -15,7 +15,8 @@ import RadioControl from '..';
 
 const meta: Meta< typeof RadioControl > = {
 	component: RadioControl,
-	title: 'Components/RadioControl',
+	title: 'Components/Selection & Input/Common/RadioControl',
+	id: 'components-radiocontrol',
 	argTypes: {
 		onChange: {
 			action: 'onChange',

package/src/radio-group/README.md

@@ -57,10 +57,10 @@ const MyControlledRadioRadioGroup = () => {
 	const [ checked, setChecked ] = useState( '25' );
 	return (
 		<RadioGroup label="Width" onChange={ setChecked } checked={ checked }>
-			<Radio value="25">25%</Radio>
-			<Radio value="50">50%</Radio>
-			<Radio value="75">75%</Radio>
-			<Radio value="100">100%</Radio>
+			<Radio __next40pxDefaultSize value="25">25%</Radio>
+			<Radio __next40pxDefaultSize value="50">50%</Radio>
+			<Radio __next40pxDefaultSize value="75">75%</Radio>
+			<Radio __next40pxDefaultSize value="100">100%</Radio>
 		</RadioGroup>
 	);
 };
@@ -80,10 +80,10 @@ import {
 const MyUncontrolledRadioRadioGroup = () => {
 	return (
 		<RadioGroup label="Width" defaultChecked="25">
-			<Radio value="25">25%</Radio>
-			<Radio value="50">50%</Radio>
-			<Radio value="75">75%</Radio>
-			<Radio value="100">100%</Radio>
+			<Radio __next40pxDefaultSize value="25">25%</Radio>
+			<Radio __next40pxDefaultSize value="50">50%</Radio>
+			<Radio __next40pxDefaultSize value="75">75%</Radio>
+			<Radio __next40pxDefaultSize value="100">100%</Radio>
 		</RadioGroup>
 	);
 };

package/src/radio-group/radio.tsx

@@ -16,6 +16,7 @@ import Button from '../button';
 import { RadioGroupContext } from './context';
 import type { WordPressComponentProps } from '../context';
 import type { RadioProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedRadio(
 	{
@@ -30,6 +31,12 @@ function UnforwardedRadio(
 	const selectedValue = useStoreState( store, 'value' );
 	const isChecked = selectedValue !== undefined && selectedValue === value;
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'Radio',
+		size: undefined,
+		__next40pxDefaultSize: props.__next40pxDefaultSize,
+	} );
+
 	return (
 		<Ariakit.Radio
 			disabled={ disabled }

package/src/radio-group/stories/index.story.tsx

@@ -28,7 +28,13 @@ const meta: Meta< typeof RadioGroup > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { canvas: { sourceState: 'shown' } },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
+			},
+		},
 	},
 };
 export default meta;
@@ -44,9 +50,15 @@ Default.args = {
 	defaultChecked: 'option2',
 	children: (
 		<>
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-			<Radio value="option3">Option 3</Radio>
+			<Radio __next40pxDefaultSize value="option1">
+				Option 1
+			</Radio>
+			<Radio __next40pxDefaultSize value="option2">
+				Option 2
+			</Radio>
+			<Radio __next40pxDefaultSize value="option3">
+				Option 3
+			</Radio>
 		</>
 	),
 };

package/src/radio-group/types.ts

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import type { ButtonProps } from '../button/types';
+
 export type RadioGroupProps = {
 	/**
 	 * Accessible label for the radio group
@@ -27,7 +32,7 @@ export type RadioGroupProps = {
 	children: React.ReactNode;
 };
 
-export type RadioProps = {
+export type RadioProps = Pick< ButtonProps, '__next40pxDefaultSize' > & {
 	/**
 	 * The actual value of the radio element.
 	 */

package/src/range-control/README.md

@@ -88,9 +88,10 @@ import { RangeControl } from '@wordpress/components';
 const MyRangeControl = () => {
 	const [ columns, setColumns ] = useState( 2 );
 
-	return(
+	return (
 		<RangeControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -153,7 +154,6 @@ Disables the `input`, preventing new values from being applied.
 -   Required: No
 -   Platform: Web
 
-
 ### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
@@ -165,7 +165,7 @@ If this property is added, a help text will be generated using help property as
 
 Provides control over whether the label will only be visible to screen readers.
 
-- Required: No
+-   Required: No
 
 ### `icon`: `string`
 
@@ -334,6 +334,7 @@ The minimum amount by which `value` changes. It is also a factor in validation a
 
 -   Required: No
 -   Platform: Web
+
 ### `trackColor`: `CSSProperties[ 'color' ]`
 
 CSS color string to customize the track element's background.

package/src/range-control/index.tsx

@@ -38,6 +38,7 @@ import {
 import type { RangeControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import { space } from '../utils/space';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -96,6 +97,7 @@ function UnforwardedRangeControl(
 		trackColor,
 		value: valueProp,
 		withInputField = true,
+		__shouldNotWarnDeprecated36pxSize,
 		...otherProps
 	} = props;
 
@@ -229,6 +231,14 @@ function UnforwardedRangeControl(
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
 
+	// Add default size deprecation warning.
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'RangeControl',
+		__next40pxDefaultSize,
+		size: undefined,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -384,6 +394,7 @@ function UnforwardedRangeControl(
  *   return (
  *     <RangeControl
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
  *       initialPosition={50}
  *       label="Opacity"