@wordpress/components 28.11.0 → 28.12.0

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

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/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/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/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-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/snackbar/index.tsx

@@ -150,9 +150,10 @@ function UnforwardedSnackbar(
 				{ actions.map( ( { label, onClick, url }, index ) => {
 					return (
 						<Button
+							__next40pxDefaultSize
 							key={ index }
 							href={ url }
-							variant="tertiary"
+							variant="link"
 							onClick={ (
 								event: MouseEvent< HTMLButtonElement >
 							) => onActionClick( event, onClick ) }

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

@@ -15,7 +15,8 @@ import Icon from '../../icon';
 import Snackbar from '..';
 
 const meta: Meta< typeof Snackbar > = {
-	title: 'Components/Snackbar',
+	title: 'Components/Feedback/Snackbar',
+	id: 'components-snackbar',
 	component: Snackbar,
 	argTypes: {
 		as: { control: { type: null } },

package/src/snackbar/stories/list.story.tsx

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import SnackbarList from '../list';
 
 const meta: Meta< typeof SnackbarList > = {
-	title: 'Components/SnackbarList',
+	title: 'Components/Feedback/SnackbarList',
+	id: 'components-snackbarlist',
 	component: SnackbarList,
 	argTypes: {
 		as: { control: { type: null } },

package/src/snackbar/style.scss

@@ -48,25 +48,16 @@
 .components-snackbar__action.components-button {
 	margin-left: $grid-unit-40;
 	color: $white;
-	height: auto;
 	flex-shrink: 0;
-	line-height: $default-line-height;
-	padding: 0;
-
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) {
-		text-decoration: underline;
-		background-color: transparent;
 
-		&:focus {
-			color: $white;
-			box-shadow: none;
-			outline: 1px dotted $white;
-		}
+	&:focus {
+		box-shadow: none;
+		outline: 1px dotted $white;
+	}
 
-		&:hover {
-			text-decoration: none;
-			color: $white;
-		}
+	&:hover {
+		text-decoration: none;
+		color: currentColor;
 	}
 }
 

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

@@ -10,7 +10,8 @@ import Spinner from '../';
 import { space } from '../../utils/space';
 
 const meta: Meta< typeof Spinner > = {
-	title: 'Components/Spinner',
+	title: 'Components/Feedback/Spinner',
+	id: 'components-spinner',
 	component: Spinner,
 	parameters: {
 		controls: {

package/src/tabs/tablist.tsx

@@ -48,10 +48,21 @@ function useScrollRectIntoView(
 		const childRightEdge = childLeft + childWidth;
 		const rightOverflow = childRightEdge + margin - parentRightEdge;
 		const leftOverflow = parentScroll - ( childLeft - margin );
+
+		let scrollLeft = null;
 		if ( leftOverflow > 0 ) {
-			parent.scrollLeft = parentScroll - leftOverflow;
+			scrollLeft = parentScroll - leftOverflow;
 		} else if ( rightOverflow > 0 ) {
-			parent.scrollLeft = parentScroll + rightOverflow;
+			scrollLeft = parentScroll + rightOverflow;
+		}
+
+		if ( scrollLeft !== null ) {
+			/**
+			 * The optional chaining is used here to avoid unit test failures.
+			 * It can be removed when JSDOM supports `Element` scroll methods.
+			 * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096
+			 */
+			parent.scroll?.( { left: scrollLeft } );
 		}
 	}, [ margin, parent, rect ] );
 }

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

@@ -10,7 +10,8 @@ import { Text } from '../component';
 
 const meta: Meta< typeof Text > = {
 	component: Text,
-	title: 'Components (Experimental)/Text',
+	title: 'Components (Experimental)/Typography/Text',
+	id: 'components-experimental-text',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },

package/src/text-highlight/stories/index.story.tsx

@@ -10,7 +10,8 @@ import TextHighlight from '..';
 
 const meta: Meta< typeof TextHighlight > = {
 	component: TextHighlight,
-	title: 'Components/TextHighlight',
+	title: 'Components/Typography/TextHighlight',
+	id: 'components-texthighlight',
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -10,7 +10,8 @@ import Tip from '..';
 
 const meta: Meta< typeof Tip > = {
 	component: Tip,
-	title: 'Components/Tip',
+	title: 'Components/Feedback/Tip',
+	id: 'components-tip',
 	argTypes: {
 		children: { control: { type: 'text' } },
 	},

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -52,7 +52,7 @@ function UnconnectedToggleGroupControl(
 	const [ controlElement, setControlElement ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
 	const selectedRect = useTrackElementOffsetRect(
-		value ? selectedElement : undefined
+		value || value === 0 ? selectedElement : undefined
 	);
 	useAnimatedOffsetRect( controlElement, selectedRect, {
 		prefix: 'selected',

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

@@ -15,7 +15,8 @@ import Tooltip from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof Tooltip > = {
-	title: 'Components/Tooltip',
+	title: 'Components/Overlays/Tooltip',
+	id: 'components-tooltip',
 	component: Tooltip,
 	argTypes: {
 		children: { control: { type: null } },

package/src/tree-grid/stories/index.story.tsx

@@ -16,7 +16,8 @@ import { Button } from '../../button';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof TreeGrid > = {
-	title: 'Components (Experimental)/TreeGrid',
+	title: 'Components (Experimental)/Navigation/TreeGrid',
+	id: 'components-experimental-treegrid',
 	component: TreeGrid,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { TreeGridRow, TreeGridCell },

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

@@ -10,7 +10,8 @@ import { Truncate } from '..';
 
 const meta: Meta< typeof Truncate > = {
 	component: Truncate,
-	title: 'Components (Experimental)/Truncate',
+	title: 'Components (Experimental)/Typography/Truncate',
+	id: 'components-experimental-truncate',
 	argTypes: {
 		children: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },

package/src/utils/deprecated-36px-size.ts

@@ -10,9 +10,12 @@ export function maybeWarnDeprecated36pxSize( {
 }: {
 	componentName: string;
 	__next40pxDefaultSize: boolean | undefined;
-	size: string;
+	size: string | undefined;
 } ) {
-	if ( __next40pxDefaultSize || size !== 'default' ) {
+	if (
+		__next40pxDefaultSize ||
+		( size !== undefined && size !== 'default' )
+	) {
 		return;
 	}
 

package/src/visually-hidden/stories/index.story.tsx

@@ -10,7 +10,7 @@ import { VisuallyHidden } from '..';
 
 const meta: Meta< typeof VisuallyHidden > = {
 	component: VisuallyHidden,
-	title: 'Components/Utilities/VisuallyHidden',
+	title: 'Components/Typography/VisuallyHidden',
 	id: 'components-visuallyhidden',
 	argTypes: {
 		children: { control: { type: null } },