@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.0

package/src/slot-fill/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Component, MutableRefObject, ReactNode, RefObject } from 'react';
+import type { ReactNode, RefObject } from 'react';
 
 /**
  * WordPress dependencies
@@ -108,38 +108,17 @@ export type SlotFillProviderProps = {
 	passthrough?: boolean;
 };
 
-export type SlotFillBubblesVirtuallySlotRef = RefObject< HTMLElement >;
-export type SlotFillBubblesVirtuallyFillRef = MutableRefObject< {
-	rerender: () => void;
-} >;
+export type SlotRef = RefObject< HTMLElement >;
+export type Rerenderable = { rerender: () => void };
 
 export type SlotFillBubblesVirtuallyContext = {
-	slots: ObservableMap<
-		SlotKey,
-		{
-			ref: SlotFillBubblesVirtuallySlotRef;
-			fillProps: FillProps;
-		}
-	>;
-	fills: ObservableMap< SlotKey, SlotFillBubblesVirtuallyFillRef[] >;
-	registerSlot: (
-		name: SlotKey,
-		ref: SlotFillBubblesVirtuallySlotRef,
-		fillProps: FillProps
-	) => void;
-	unregisterSlot: (
-		name: SlotKey,
-		ref: SlotFillBubblesVirtuallySlotRef
-	) => void;
-	updateSlot: ( name: SlotKey, fillProps: FillProps ) => void;
-	registerFill: (
-		name: SlotKey,
-		ref: SlotFillBubblesVirtuallyFillRef
-	) => void;
-	unregisterFill: (
-		name: SlotKey,
-		ref: SlotFillBubblesVirtuallyFillRef
-	) => void;
+	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
+	fills: ObservableMap< SlotKey, Rerenderable[] >;
+	registerSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
+	unregisterSlot: ( name: SlotKey, ref: SlotRef ) => void;
+	updateSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
+	registerFill: ( name: SlotKey, ref: Rerenderable ) => void;
+	unregisterFill: ( name: SlotKey, ref: Rerenderable ) => void;
 
 	/**
 	 * This helps the provider know if it's using the default context value or not.
@@ -148,30 +127,14 @@ export type SlotFillBubblesVirtuallyContext = {
 };
 
 export type BaseSlotFillContext = {
-	registerSlot: (
-		name: SlotKey,
-		slot: Component< BaseSlotComponentProps >
-	) => void;
-	unregisterSlot: (
-		name: SlotKey,
-		slot: Component< BaseSlotComponentProps >
-	) => void;
+	registerSlot: ( name: SlotKey, slot: Rerenderable ) => void;
+	unregisterSlot: ( name: SlotKey, slot: Rerenderable ) => void;
 	registerFill: ( name: SlotKey, instance: FillComponentProps ) => void;
 	unregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;
-	getSlot: (
-		name: SlotKey
-	) => Component< BaseSlotComponentProps > | undefined;
+	getSlot: ( name: SlotKey ) => Rerenderable | undefined;
 	getFills: (
 		name: SlotKey,
-		slotInstance: Component< BaseSlotComponentProps >
+		slotInstance: Rerenderable
 	) => FillComponentProps[];
 	subscribe: ( listener: () => void ) => () => void;
 };
-
-export type BaseSlotComponentProps = Pick<
-	BaseSlotFillContext,
-	'registerSlot' | 'unregisterSlot' | 'getFills'
-> &
-	Omit< SlotComponentProps, 'bubblesVirtually' > & {
-		children?: ( fills: ReactNode ) => ReactNode;
-	};

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-control/README.md

@@ -63,6 +63,7 @@ const MyTextControl = () => {
 	return (
 		<TextControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }

package/src/text-control/index.tsx

@@ -16,6 +16,7 @@ import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { TextControlProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedTextControl(
 	props: WordPressComponentProps< TextControlProps, 'input', false >,
@@ -38,6 +39,12 @@ function UnforwardedTextControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'TextControl',
+		size: undefined,
+		__next40pxDefaultSize,
+	} );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -77,6 +84,7 @@ function UnforwardedTextControl(
  *   return (
  *     <TextControl
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

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

@@ -15,7 +15,8 @@ import TextControl from '..';
 
 const meta: Meta< typeof TextControl > = {
 	component: TextControl,
-	title: 'Components/TextControl',
+	title: 'Components/Selection & Input/Common/TextControl',
+	id: 'components-textcontrol',
 	argTypes: {
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
@@ -54,6 +55,7 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 };
 
 export const WithLabelAndHelpText: StoryFn< typeof TextControl > =

package/src/text-control/test/text-control.tsx

@@ -9,7 +9,13 @@ import { render, screen } from '@testing-library/react';
 import _TextControl from '..';
 
 const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
-	return <_TextControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_TextControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 const noop = () => {};

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

@@ -15,7 +15,8 @@ import TextareaControl from '..';
 
 const meta: Meta< typeof TextareaControl > = {
 	component: TextareaControl,
-	title: 'Components/TextareaControl',
+	title: 'Components/Selection & Input/Common/TextareaControl',
+	id: 'components-textareacontrol',
 	argTypes: {
 		onChange: { action: 'onChange' },
 		label: { control: { type: 'text' } },

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

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import ToggleControl from '..';
 
 const meta: Meta< typeof ToggleControl > = {
-	title: 'Components/ToggleControl',
+	title: 'Components/Selection & Input/Common/ToggleControl',
+	id: 'components-togglecontrol',
 	component: ToggleControl,
 	argTypes: {
 		checked: { control: { type: null } },

package/src/toggle-group-control/stories/index.story.tsx

@@ -27,7 +27,8 @@ const meta: Meta< typeof ToggleGroupControl > = {
 	component: ToggleGroupControl,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
-	title: 'Components (Experimental)/ToggleGroupControl',
+	title: 'Components (Experimental)/Selection & Input/ToggleGroupControl',
+	id: 'components-experimental-togglegroupcontrol',
 	argTypes: {
 		help: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
@@ -50,6 +51,7 @@ const Template: StoryFn< typeof ToggleGroupControl > = ( {
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			{ ...props }
 			onChange={ ( ...changeArgs ) => {
 				setValue( ...changeArgs );

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -44,8 +44,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   display: inline-flex;
   min-width: 0;
   position: relative;
-  min-height: 36px;
-  padding: 2px;
+  min-height: 40px;
+  padding: 3px;
 }
 
 .emotion-8:hover {
@@ -159,7 +159,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  height: 30px;
+  height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
@@ -236,7 +236,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  height: 30px;
+  height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
@@ -409,8 +409,8 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   display: inline-flex;
   min-width: 0;
   position: relative;
-  min-height: 36px;
-  padding: 2px;
+  min-height: 40px;
+  padding: 3px;
 }
 
 .emotion-8:hover {
@@ -678,8 +678,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   display: inline-flex;
   min-width: 0;
   position: relative;
-  min-height: 36px;
-  padding: 2px;
+  min-height: 40px;
+  padding: 3px;
 }
 
 .emotion-8:hover {
@@ -793,7 +793,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  height: 30px;
+  height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
@@ -870,7 +870,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  height: 30px;
+  height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
@@ -1037,8 +1037,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   display: inline-flex;
   min-width: 0;
   position: relative;
-  min-height: 36px;
-  padding: 2px;
+  min-height: 40px;
+  padding: 3px;
 }
 
 .emotion-8:hover {

package/src/toggle-group-control/test/index.tsx

@@ -28,7 +28,13 @@ const hoverOutside = async () => {
 };
 
 const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
-	return <_ToggleGroupControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_ToggleGroupControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 const ControlledToggleGroupControl = ( {

package/src/toggle-group-control/toggle-group-control/README.md

@@ -25,6 +25,7 @@ function Example() {
 			value="vertical"
 			isBlock
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
@@ -100,4 +101,4 @@ Start opting into the larger default height that will become the default size in
 Start opting into the new margin-free styles that will become the default in a future version.
 
 -   Required: No
--   Default: `false`
+-   Default: `false`

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

@@ -23,6 +23,7 @@ import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
 import { useMergeRefs } from '@wordpress/compose';
 import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -31,6 +32,7 @@ function UnconnectedToggleGroupControl(
 	const {
 		__nextHasNoMarginBottom = false,
 		__next40pxDefaultSize = false,
+		__shouldNotWarnDeprecated36pxSize,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -52,7 +54,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',
@@ -81,6 +83,13 @@ function UnconnectedToggleGroupControl(
 		? ToggleGroupControlAsButtonGroup
 		: ToggleGroupControlAsRadioGroup;
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'ToggleGroupControl',
+		size,
+		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			help={ help }
@@ -135,6 +144,7 @@ function UnconnectedToggleGroupControl(
  *       value="vertical"
  *       isBlock
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -6,7 +6,6 @@ This feature is still experimental. “Experimental” means this is an early im
 
 `ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
-
 ## Usage
 
 ```js
@@ -22,6 +21,7 @@ function Example() {
 			value="vertical"
 			isBlock
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		>
 			<ToggleGroupControlOption
 				value="horizontal"

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

@@ -53,6 +53,7 @@ function UnforwardedToggleGroupControlOption(
  *       value="vertical"
  *       isBlock
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl __nextHasNoMarginBottom>
+		<ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }

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

@@ -52,7 +52,7 @@ function UnforwardedToggleGroupControlOptionIcon(
  *
  * function Example() {
  *  return (
- *    <ToggleGroupControl __nextHasNoMarginBottom>
+ *    <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
  *      <ToggleGroupControlOptionIcon
  *        value="uppercase"
  *        label="Uppercase"

package/src/toggle-group-control/types.ts

@@ -128,6 +128,13 @@ export type ToggleGroupControlProps = Pick<
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 };
 
 export type ToggleGroupControlContextProps = {

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

@@ -110,6 +110,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 					>
 						<ToggleGroupControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label="Scale"
 							value={ scale }
 							onChange={ ( next ) => setScale( next ) }
@@ -457,6 +458,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label="Scale"
 						value={ scale }
 						onChange={ ( next ) =>
@@ -559,6 +561,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 					>
 						<ToggleGroupControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label="Scale"
 							value={ scale }
 							onChange={ ( next ) =>

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

@@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
 import TreeSelect from '../';
 
 const meta: Meta< typeof TreeSelect > = {
-	title: 'Components/TreeSelect',
+	title: 'Components/Selection & Input/Common/TreeSelect',
+	id: 'components-treeselect',
 	component: TreeSelect,
 	argTypes: {
 		help: { control: { type: 'text' } },

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

@@ -16,7 +16,8 @@ import { CSS_UNITS } from '../utils';
 
 const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
-	title: 'Components (Experimental)/UnitControl',
+	title: 'Components (Experimental)/Selection & Input/UnitControl',
+	id: 'components-experimental-unitcontrol',
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },

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

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