@wordpress/components 28.10.0 → 28.12.0

package/src/palette-edit/index.tsx

@@ -24,7 +24,7 @@ import Button from '../button';
 import { ColorPicker } from '../color-picker';
 import { FlexItem } from '../flex';
 import { HStack } from '../h-stack';
-import { ItemGroup } from '../item-group';
+import { Item, ItemGroup } from '../item-group';
 import { VStack } from '../v-stack';
 import GradientPicker from '../gradient-picker';
 import ColorPalette from '../color-palette';
@@ -35,7 +35,6 @@ import {
 	PaletteEditStyles,
 	PaletteHeading,
 	IndicatorStyled,
-	PaletteItem,
 	NameContainer,
 	NameInputControl,
 	DoneButton,
@@ -213,9 +212,10 @@ function Option< T extends PaletteElement >( {
 	);
 
 	return (
-		<PaletteItem ref={ setPopoverAnchor } as="div">
+		<Item ref={ setPopoverAnchor } size="small">
 			<HStack justify="flex-start">
 				<Button
+					size="small"
 					onClick={ () => {
 						setIsEditingColor( true );
 					} }
@@ -282,7 +282,7 @@ function Option< T extends PaletteElement >( {
 					onClose={ () => setIsEditingColor( false ) }
 				/>
 			) }
-		</PaletteItem>
+		</Item>
 	);
 }
 
@@ -309,7 +309,7 @@ function PaletteEditListView< T extends PaletteElement >( {
 
 	return (
 		<VStack spacing={ 3 }>
-			<ItemGroup isRounded>
+			<ItemGroup isRounded isBordered isSeparated>
 				{ elements.map( ( element, index ) => (
 					<Option
 						isGradient={ isGradient }
@@ -502,6 +502,7 @@ export function PaletteEdit( {
 										<NavigableMenu role="menu">
 											{ ! isEditing && (
 												<Button
+													__next40pxDefaultSize
 													variant="tertiary"
 													onClick={ () => {
 														setIsEditing( true );
@@ -514,6 +515,7 @@ export function PaletteEdit( {
 											) }
 											{ ! canOnlyChangeValues && (
 												<Button
+													__next40pxDefaultSize
 													variant="tertiary"
 													onClick={ () => {
 														setEditingElement(
@@ -536,6 +538,8 @@ export function PaletteEdit( {
 											) }
 											{ canReset && (
 												<Button
+													__next40pxDefaultSize
+													className="components-palette-edit__menu-button"
 													variant="tertiary"
 													onClick={ () => {
 														setEditingElement(

package/src/palette-edit/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
@@ -10,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../button';
 import { Heading } from '../heading';
 import { space } from '../utils/space';
-import { COLORS, CONFIG, font } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
 import {
@@ -42,71 +41,6 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
-const buttonStyleReset = ( {
-	as,
-}: {
-	as: React.ComponentProps< typeof View >[ 'as' ];
-} ) => {
-	if ( as === 'button' ) {
-		return css`
-			display: flex;
-			align-items: center;
-			width: 100%;
-			appearance: none;
-			background: transparent;
-			border: none;
-			border-radius: 0;
-			padding: 0;
-			cursor: pointer;
-
-			&:hover {
-				color: ${ COLORS.theme.accent };
-			}
-		`;
-	}
-	return null;
-};
-
-export const PaletteItem = styled( View )`
-	${ buttonStyleReset }
-
-	padding-block: 3px;
-	padding-inline-start: ${ space( 3 ) };
-	border: 1px solid ${ CONFIG.surfaceBorderColor };
-	border-bottom-color: transparent;
-	font-size: ${ font( 'default.fontSize' ) };
-
-	&:focus-visible {
-		border-color: transparent;
-		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-			${ COLORS.theme.accent };
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-		outline-offset: 0;
-	}
-
-	border-top-left-radius: ${ CONFIG.radiusSmall };
-	border-top-right-radius: ${ CONFIG.radiusSmall };
-
-	& + & {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	&:last-child {
-		border-bottom-left-radius: ${ CONFIG.radiusSmall };
-		border-bottom-right-radius: ${ CONFIG.radiusSmall };
-		border-bottom-color: ${ CONFIG.surfaceBorderColor };
-	}
-
-	&.is-selected + & {
-		border-top-color: transparent;
-	}
-	&.is-selected {
-		border-color: ${ COLORS.theme.accent };
-	}
-`;
-
 export const NameContainer = styled.div`
 	line-height: ${ space( 8 ) };
 	margin-left: ${ space( 2 ) };

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/panel/stories/index.story.tsx

@@ -17,7 +17,8 @@ import InputControl from '../../input-control';
 import { wordpress } from '@wordpress/icons';
 
 const meta: Meta< typeof Panel > = {
-	title: 'Components/Panel',
+	title: 'Components/Containers/Panel',
+	id: 'components-panel',
 	component: Panel,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { PanelRow, PanelBody },

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

@@ -3,10 +3,10 @@
  */
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
-import { DropdownMenuV2 } from './dropdown-menu-v2';
+import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
-import Tabs from './tabs';
+import { Tabs } from './tabs';
 import { kebabCase } from './utils/strings';
 import { lock } from './lock-unlock';
 
@@ -17,6 +17,6 @@ lock( privateApis, {
 	ComponentsContext,
 	Tabs,
 	Theme,
-	DropdownMenuV2,
+	Menu,
 	kebabCase,
 } );

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

@@ -7,6 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useMemo, forwardRef } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,6 +35,7 @@ function UnforwardedRadioGroup(
 		setValue: ( newValue ) => {
 			onChange?.( newValue ?? undefined );
 		},
+		rtl: isRTL(),
 	} );
 
 	const contextValue = useMemo(

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/resizable-box/stories/index.story.tsx

@@ -14,7 +14,8 @@ import ResizableBox from '..';
 import { useState } from '@wordpress/element';
 
 const meta: Meta< typeof ResizableBox > = {
-	title: 'Components/ResizableBox',
+	title: 'Components/Utilities/ResizableBox',
+	id: 'components-resizablebox',
 	component: ResizableBox,
 	argTypes: {
 		children: { control: { type: null } },

package/src/sandbox/index.native.js

@@ -336,9 +336,7 @@ const Sandbox = forwardRef( function Sandbox(
 
 	useEffect( () => {
 		updateContentHtml();
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {

package/src/sandbox/index.tsx

@@ -262,23 +262,20 @@ function SandBox( {
 				checkMessageForResize
 			);
 		};
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useEffect( () => {
 		trySandBox();
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandBox( true );
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ html, type ] );
 
 	return (

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

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

package/src/scroll-lock/stories/index.story.tsx

@@ -17,7 +17,8 @@ import ScrollLock from '..';
 
 const meta: Meta< typeof ScrollLock > = {
 	component: ScrollLock,
-	title: 'Components/ScrollLock',
+	title: 'Components/Utilities/ScrollLock',
+	id: 'components-scrolllock',
 	parameters: {
 		controls: { hideNoControlsWarning: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/search-control/index.native.js

@@ -122,9 +122,7 @@ function SearchControl( {
 		mergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );
 
 		setCurrentStyles( futureStyles );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ isActive, isDark ] );
 
 	const clearInput = useCallback( () => {

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

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

package/src/slot-fill/bubbles-virtually/slot.tsx

@@ -49,11 +49,10 @@ function Slot(
 		return () => {
 			unregisterSlot( name, ref );
 		};
-		// Ignore reason: We don't want to unregister and register the slot whenever
+		// We don't want to unregister and register the slot whenever
 		// `fillProps` change, which would cause the fill to be re-mounted. Instead,
 		// we can just update the slot (see hook below).
 		// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ registerSlot, unregisterSlot, name ] );
 	// fillProps may be an update that interacts with the layout, so we
 	// useLayoutEffect.

package/src/slot-fill/fill.ts

@@ -23,9 +23,8 @@ export default function Fill( { name, children }: FillComponentProps ) {
 		const refValue = ref.current;
 		registerFill( name, refValue );
 		return () => unregisterFill( name, refValue );
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
 		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useLayoutEffect( () => {
@@ -33,9 +32,8 @@ export default function Fill( { name, children }: FillComponentProps ) {
 		if ( slot ) {
 			slot.forceUpdate();
 		}
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
 		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ children ] );
 
 	useLayoutEffect( () => {
@@ -46,9 +44,8 @@ export default function Fill( { name, children }: FillComponentProps ) {
 		unregisterFill( ref.current.name, ref.current );
 		ref.current.name = name;
 		registerFill( name, ref.current );
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
 		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
 	return null;

package/src/slot-fill/stories/index.story.tsx

@@ -15,7 +15,8 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
 
 const meta: Meta< typeof Slot > = {
 	component: Slot,
-	title: 'Components/SlotFill',
+	title: 'Components/Utilities/SlotFill',
+	id: 'components-slotfill',
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Fill, SlotFillProvider },
 	argTypes: {

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/spacer/hook.ts

@@ -12,8 +12,9 @@ import { space } from '../utils/space';
 import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';
 
-const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
-	typeof o !== 'undefined' && o !== null;
+function isDefined< T >( o: T ): o is Exclude< T, null | undefined > {
+	return typeof o !== 'undefined' && o !== null;
+}
 
 export function useSpacer(
 	props: WordPressComponentProps< SpacerProps, 'div' >

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

@@ -16,6 +16,7 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { useInstanceId, usePrevious } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -120,6 +121,7 @@ const UnforwardedTabPanel = (
 		orientation,
 		selectOnMove,
 		defaultSelectedId: prependInstanceId( initialTabName ),
+		rtl: isRTL(),
 	} );
 
 	const selectedTabName = extractTabName(
@@ -218,6 +220,7 @@ const UnforwardedTabPanel = (
 							) }-view` }
 							render={
 								<Button
+									__next40pxDefaultSize
 									icon={ tab.icon }
 									label={ tab.icon && tab.title }
 									showTooltip={ !! tab.icon }

package/src/tab-panel/stories/index.story.tsx

@@ -14,7 +14,8 @@ import { link, more, wordpress } from '@wordpress/icons';
 import TabPanel from '..';
 
 const meta: Meta< typeof TabPanel > = {
-	title: 'Components/TabPanel',
+	title: 'Components/Containers/TabPanel',
+	id: 'components-tabpanel',
 	component: TabPanel,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/tab-panel/style.scss

@@ -7,12 +7,10 @@
 	}
 }
 
-// This tab style CSS is duplicated verbatim in
-// /packages/edit-post/src/components/sidebar/settings-header/style.scss
 .components-tab-panel__tabs-item {
 	position: relative;
 	border-radius: 0;
-	height: $grid-unit-60;
+	height: $grid-unit-60 !important; // https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	background: transparent;
 	border: none;
 	box-shadow: none;