@wordpress/components 32.2.1-next.v.0 → 32.2.1-next.v.202602091733.0

package/src/font-size-picker/stories/index.story.tsx

@@ -30,6 +30,10 @@ const meta: Meta< typeof FontSizePicker > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

package/src/form-file-upload/stories/index.story.tsx

@@ -25,6 +25,10 @@ const meta: Meta< typeof FormFileUpload > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/form-toggle/stories/index.story.tsx

@@ -26,6 +26,11 @@ const meta: Meta< typeof FormToggle > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'For standard toggles with labels, use `ToggleControl` instead.',
+		},
 	},
 };
 export default meta;

package/src/form-token-field/stories/index.story.tsx

@@ -30,6 +30,11 @@ const meta: Meta< typeof FormTokenField > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SearchableChipSelect` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/gradient-picker/stories/index.story.tsx

@@ -21,6 +21,10 @@ const meta: Meta< typeof GradientPicker > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 	args: {
 		onChange: fn(),

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

@@ -36,6 +36,11 @@ const meta: Meta< typeof Grid > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation. Write your own CSS instead.',
+		},
 	},
 };
 export default meta;

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

@@ -24,6 +24,12 @@ const meta: Meta< typeof Guide > = {
 		previousButtonText: { control: 'text' },
 		onFinish: { action: 'onFinish' },
 	},
+	parameters: {
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
+	},
 };
 export default meta;
 

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

@@ -74,6 +74,11 @@ const meta: Meta< typeof HStack > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Stack` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -29,6 +29,11 @@ const meta: Meta< typeof Heading > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Values are not aligned with the current design system. Use [typography tokens](?path=/docs/tokens-typography--page) from `@wordpress/base-styles` instead.',
+		},
 	},
 };
 export default meta;

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

@@ -21,6 +21,11 @@ const meta: Meta< typeof Icon > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Prefer this component over the `Icon` component from `@wordpress/icons`.',
+		},
 	},
 };
 export default meta;

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

@@ -40,6 +40,11 @@ const meta: Meta< typeof InputControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `InputControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -23,6 +23,10 @@ const meta: Meta< typeof ItemGroup > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
+-         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-avymxl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
+-         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-avymxl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-sbyvbg-PolymorphicDiv-large-item e19lxcc00"
+-       class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
++       class="components-item css-y16wpf-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +114,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-1hvp0tq-PolymorphicDiv-separated-rounded e19lxcc00"
+-     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-12ds22-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
+-         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +142,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-1ibn92o-PolymorphicDiv-bordered-rounded e19lxcc00"
+-     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-z3k5b4-PolymorphicDiv-bordered-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
+-         class="components-item css-14dwj71-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-5pzc6i-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +170,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-161q9d5-PolymorphicDiv e19lxcc00"
+-     class="components-item-group css-7sdlfv-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-1ragr82-PolymorphicDiv e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/keyboard-shortcuts/stories/index.story.tsx

@@ -15,6 +15,10 @@ const meta: Meta< typeof KeyboardShortcuts > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -55,6 +55,11 @@ const meta: Meta< typeof Menu > = {
 			canvas: { sourceState: 'shown' },
 			source: { excludeDecorators: true },
 		},
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'When building for the Gutenberg repo, use this component instead of `DropdownMenu`. Otherwise, continue using `DropdownMenu` for now.',
+		},
 	},
 };
 export default meta;

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

@@ -25,6 +25,11 @@ const meta: Meta< typeof MenuGroup > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Subcomponent of `DropdownMenu`.',
+		},
 	},
 };
 export default meta;

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

@@ -36,6 +36,11 @@ const meta: Meta< typeof MenuItem > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Subcomponent of `DropdownMenu`.',
+		},
 	},
 };
 export default meta;

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

@@ -28,6 +28,11 @@ const meta: Meta< typeof MenuItemsChoice > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Subcomponent of `DropdownMenu`.',
+		},
 	},
 };
 export default meta;

package/src/modal/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from '@wordpress/element';
+import type { ModalProps } from './types';
+
+// Used to track and dismiss the prior modal when another opens unless nested.
+export type Dismissers = Set<
+	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+>;
+export const ModalContext = createContext< Dismissers >( new Set() );
+ModalContext.displayName = 'ModalContext';

package/src/modal/index.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	createPortal,
 	useCallback,
@@ -14,7 +7,6 @@ import {
 	useState,
 	forwardRef,
 	useLayoutEffect,
-	createContext,
 	useContext,
 } from '@wordpress/element';
 import {
@@ -27,10 +19,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { getScrollContainer } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import * as ariaHelper from './aria-helper';
 import Button from '../button';
 import StyleProvider from '../style-provider';
@@ -38,13 +26,7 @@ import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import { Spacer } from '../spacer';
 import { useModalExitAnimation } from './use-modal-exit-animation';
-
-// Used to track and dismiss the prior modal when another opens unless nested.
-type Dismissers = Set<
-	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
->;
-const ModalContext = createContext< Dismissers >( new Set() );
-ModalContext.displayName = 'ModalContext';
+import { ModalContext, type Dismissers } from './context';
 
 // Used to track body class names applied while modals are open.
 const bodyOpenClasses = new Map< string, number >();

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

@@ -44,6 +44,11 @@ const meta: Meta< typeof Modal > = {
 	},
 	parameters: {
 		controls: { expanded: true },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Dialog` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -25,6 +25,10 @@ const meta: Meta< typeof NavigableMenu > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'unaudited',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -25,6 +25,11 @@ const meta: Meta< typeof TabbableContainer > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

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

@@ -28,6 +28,10 @@ const meta: Meta< typeof Navigator > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 	decorators: [
 		( Story ) => {

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

@@ -29,6 +29,11 @@ const meta: Meta< typeof Notice > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Notice` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -6,7 +6,7 @@ exports[`Notice should match snapshot 1`] = `
     class="components-notice is-success is-dismissible"
   >
     <div
-      class="components-visually-hidden emotion-0 emotion-1"
+      class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
       data-wp-c16t="true"
       data-wp-component="VisuallyHidden"
       style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"

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

@@ -29,6 +29,11 @@ const meta: Meta< typeof NumberControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `InputControl` with `type="number"` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 

package/src/palette-edit/stories/index.story.tsx

@@ -24,6 +24,10 @@ const meta: Meta< typeof PaletteEdit > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

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

@@ -27,6 +27,10 @@ const meta: Meta< typeof Panel > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -33,6 +33,10 @@ const meta: Meta< typeof Placeholder > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

package/src/popover/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from '@wordpress/element';
+
+export const slotNameContext = createContext< string | undefined >( undefined );
+slotNameContext.displayName = '__unstableSlotNameContext';

package/src/popover/index.tsx

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
 import clsx from 'clsx';
 import {
@@ -15,15 +12,10 @@ import {
 } from '@floating-ui/react-dom';
 import type { HTMLMotionProps, MotionProps } from 'framer-motion';
 import { motion } from 'framer-motion';
-
-/**
- * WordPress dependencies
- */
 import {
 	useRef,
 	useLayoutEffect,
 	forwardRef,
-	createContext,
 	useContext,
 	useMemo,
 	useState,
@@ -40,10 +32,6 @@ import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
@@ -101,8 +89,7 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-const slotNameContext = createContext< string | undefined >( undefined );
-slotNameContext.displayName = '__unstableSlotNameContext';
+import { slotNameContext } from './context';
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
 const getPopoverFallbackContainer = () => {

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

@@ -55,6 +55,10 @@ const meta: Meta< typeof Popover > = {
 	},
 	parameters: {
 		controls: { expanded: true },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 

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

@@ -20,6 +20,10 @@ const meta: Meta< typeof ProgressBar > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/query-controls/stories/index.story.tsx

@@ -40,6 +40,10 @@ const meta: Meta< typeof QueryControls > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

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

@@ -36,6 +36,11 @@ const meta: Meta< typeof RadioControl > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `RadioGroupControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -57,6 +57,11 @@ const meta: Meta< typeof RangeControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SliderControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/resizable-box/stories/index.story.tsx

@@ -25,6 +25,10 @@ const meta: Meta< typeof ResizableBox > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/responsive-wrapper/stories/index.story.tsx

@@ -18,6 +18,11 @@ const meta: Meta< typeof ResponsiveWrapper > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

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

@@ -22,6 +22,10 @@ const meta: Meta< typeof SandBox > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -22,6 +22,10 @@ const meta: Meta< typeof ScrollLock > = {
 	parameters: {
 		controls: { hideNoControlsWarning: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -31,6 +31,11 @@ const meta: Meta< typeof Scrollable > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;