@wordpress/components 28.11.0 → 28.13.0

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;
 	}
 

package/src/v-stack/stories/index.story.tsx

@@ -25,7 +25,8 @@ const ALIGNMENTS = {
 
 const meta: Meta< typeof VStack > = {
 	component: VStack,
-	title: 'Components (Experimental)/VStack',
+	title: 'Components (Experimental)/Layout/VStack',
+	id: 'components-experimental-vstack',
 	argTypes: {
 		alignment: {
 			control: { type: 'select' },

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