@wordpress/components 28.14.1-next.cd6172eb0.0 → 29.0.0

package/src/range-control/styles/range-control-styles.ts

@@ -130,6 +130,10 @@ export const Track = styled.span`
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
+	@media not ( prefers-reduced-motion ) {
+		transition: width ease 0.1s;
+	}
+
 	${ trackBackgroundColor };
 `;
 
@@ -139,28 +143,18 @@ export const MarksWrapper = styled.span`
 	position: relative;
 	width: 100%;
 	user-select: none;
+	margin-top: 17px;
 `;
 
-const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
-	let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];
-
-	if ( disabled ) {
-		backgroundColor = COLORS.gray[ 400 ];
-	}
-
-	return css( {
-		backgroundColor,
-	} );
-};
-
 export const Mark = styled.span`
-	height: ${ thumbSize }px;
-	left: 0;
 	position: absolute;
-	top: 9px;
-	width: 1px;
-
-	${ markFill };
+	left: 0;
+	top: -4px;
+	height: 4px;
+	width: 2px;
+	transform: translateX( -50% );
+	background-color: ${ COLORS.ui.background };
+	z-index: 1;
 `;
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
@@ -173,7 +167,7 @@ export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
-	top: 22px;
+	top: 8px;
 	white-space: nowrap;
 
 	${ rtl( { left: 0 } ) };
@@ -207,6 +201,11 @@ export const ThumbWrapper = styled.span`
 	user-select: none;
 	width: ${ thumbSize }px;
 	border-radius: ${ CONFIG.radiusRound };
+	z-index: 3;
+
+	@media not ( prefers-reduced-motion ) {
+		transition: left ease 0.1s;
+	}
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };

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

@@ -18,7 +18,7 @@ const meta: Meta< typeof ResizableBox > = {
 	id: 'components-resizablebox',
 	component: ResizableBox,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		enable: { control: 'object' },
 		onResizeStop: { action: 'onResizeStop' },
 	},

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof ResponsiveWrapper > = {
 	title: 'Components/Layout/ResponsiveWrapper',
 	id: 'components-responsivewrapper',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof SandBox > = {
 	title: 'Components/Utilities/SandBox',
 	id: 'components-sandbox',
 	argTypes: {
-		onFocus: { control: { type: null } },
+		onFocus: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof Scrollable > = {
 			control: { type: 'text' },
 		},
 		children: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {
@@ -70,6 +70,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 					} }
 					type="text"
 					value="Focus me"
+					readOnly
 				/>
 			</View>
 		</Scrollable>

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof SearchControl > = {
 	component: SearchControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof SelectControl > = {
 		label: { control: { type: 'text' } },
 		prefix: { control: { type: 'text' } },
 		suffix: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -20,9 +20,9 @@ const meta: Meta< typeof Slot > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Fill, SlotFillProvider },
 	argTypes: {
-		name: { control: { type: null } },
+		name: { control: false },
 		as: { control: { type: 'text' } },
-		fillProps: { control: { type: null } },
+		fillProps: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -19,17 +19,17 @@ const meta: Meta< typeof Snackbar > = {
 	id: 'components-snackbar',
 	component: Snackbar,
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		onRemove: {
 			action: 'onRemove',
-			control: { type: null },
+			control: false,
 		},
 		onDismiss: {
 			action: 'onDismiss',
-			control: { type: null },
+			control: false,
 		},
 		listRef: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

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

@@ -18,10 +18,10 @@ const meta: Meta< typeof SnackbarList > = {
 	id: 'components-snackbarlist',
 	component: SnackbarList,
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		onRemove: {
 			action: 'onRemove',
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof Surface > = {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		as: { control: { type: 'text' } },
 	},
 	parameters: {

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

@@ -21,7 +21,7 @@ const meta: Meta< typeof TextControl > = {
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: {

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

@@ -21,7 +21,7 @@ const meta: Meta< typeof TextareaControl > = {
 		onChange: { action: 'onChange' },
 		label: { control: { type: 'text' } },
 		help: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: {

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

@@ -37,7 +37,7 @@ export const Default = Template.bind( {} );
 Default.args = {};
 
 export const Nested: StoryFn< typeof Theme > = ( args ) => (
-	<Theme accent="tomato">
+	<Theme accent="crimson">
 		<Button variant="primary">Outer theme (hardcoded)</Button>
 
 		<Theme { ...args }>

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

@@ -18,7 +18,7 @@ const meta: Meta< typeof ToggleControl > = {
 	id: 'components-togglecontrol',
 	component: ToggleControl,
 	argTypes: {
-		checked: { control: { type: null } },
+		checked: { control: false },
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof ToggleGroupControl > = {
 	argTypes: {
 		help: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -72,7 +72,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -158,12 +158,12 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -183,7 +183,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-12:active {
@@ -211,7 +211,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -235,7 +235,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -259,7 +259,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-17:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 <div>
@@ -437,7 +437,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -499,7 +499,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -542,7 +542,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-13 {
@@ -706,7 +706,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -768,7 +768,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -792,12 +792,12 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -817,7 +817,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-12:active {
@@ -845,7 +845,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -869,7 +869,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -893,7 +893,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-17:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 <div>
@@ -1065,7 +1065,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -1127,7 +1127,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -1170,7 +1170,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-13 {

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

@@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		background: ${ COLORS.gray[ 900 ] };
+		background: ${ COLORS.theme.foreground };
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -38,7 +38,7 @@ export const buttonView = ( {
 	background: transparent;
 	border: none;
 	border-radius: ${ CONFIG.radiusXSmall };
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
 	display: flex;
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.controlBackgroundColor };
+		background: ${ COLORS.ui.background };
 	}
 
 	${ isDeselectable && deselectable }
@@ -79,7 +79,7 @@ export const buttonView = ( {
 `;
 
 const pressed = css`
-	color: ${ COLORS.white };
+	color: ${ COLORS.theme.foregroundInverted };
 
 	&:active {
 		background: transparent;
@@ -87,11 +87,11 @@ const pressed = css`
 `;
 
 const deselectable = css`
-	color: ${ COLORS.gray[ 900 ] };
+	color: ${ COLORS.theme.foreground };
 
 	&:focus {
 		box-shadow:
-			inset 0 0 0 1px ${ COLORS.white },
+			inset 0 0 0 1px ${ COLORS.ui.background },
 			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
@@ -112,7 +112,7 @@ const isIconStyles = ( {
 	};
 
 	return css`
-		color: ${ COLORS.gray[ 900 ] };
+		color: ${ COLORS.theme.foreground };
 		height: ${ iconButtonSizes[ size ] };
 		aspect-ratio: 1;
 		padding-left: 0;

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

@@ -51,7 +51,7 @@ const meta: Meta< typeof Toolbar > = {
 		ToolbarDropdownMenu,
 	},
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		variant: {
 			options: [ undefined, 'unstyled' ],
 			control: { type: 'radio' },

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

@@ -31,9 +31,9 @@ const meta: Meta< typeof ToolsPanel > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToolsPanelItem },
 	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
-		panelId: { control: { type: null } },
+		as: { control: false },
+		children: { control: false },
+		panelId: { control: false },
 		resetAll: { action: 'resetAll' },
 	},
 	parameters: {

package/src/tools-panel/test/index.tsx

@@ -154,7 +154,6 @@ const renderWrappedItemInPanel = () => {
 const renderPanel = () => {
 	return render(
 		<ToolsPanel { ...defaultProps }>
-			{ false && <div>Hidden</div> }
 			<ToolsPanelItem { ...controlProps }>
 				<div>Example control</div>
 			</ToolsPanelItem>
@@ -236,22 +235,6 @@ describe( 'ToolsPanel', () => {
 		it( 'should not render panel menu when there are no panel items', () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
-					{ false && (
-						<ToolsPanelItem
-							label="Not rendered 1"
-							hasValue={ () => false }
-						>
-							Should not show
-						</ToolsPanelItem>
-					) }
-					{ false && (
-						<ToolsPanelItem
-							label="Not rendered 2"
-							hasValue={ () => false }
-						>
-							Not shown either
-						</ToolsPanelItem>
-					) }
 					<span>Visible but insignificant</span>
 				</ToolsPanel>
 			);

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof Tooltip > = {
 	id: 'components-tooltip',
 	component: Tooltip,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		position: {
 			control: { type: 'select' },
 			options: [

package/src/tree-grid/cell.tsx

@@ -21,7 +21,11 @@ function UnforwardedTreeGridCell(
 	return (
 		<td { ...props } role="gridcell">
 			{ withoutGridItem ? (
-				<>{ children }</>
+				<>
+					{ typeof children === 'function'
+						? children( { ...props, ref } )
+						: children }
+				</>
 			) : (
 				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
 			) }

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof TreeGrid > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/tree-grid/types.ts

@@ -36,7 +36,7 @@ export type TreeGridRowProps = {
 type RovingTabIndexItemPassThruProps = {
 	ref: React.ForwardedRef< any >;
 	tabIndex?: number;
-	onFocus: React.FocusEventHandler< any >;
+	onFocus?: React.FocusEventHandler< any >;
 	[ key: string ]: any;
 };
 

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof TreeSelect > = {
 		label: { control: { type: 'text' } },
 		prefix: { control: { type: 'text' } },
 		suffix: { control: { type: 'text' } },
-		selectedId: { control: { type: null } },
+		selectedId: { control: false },
 	},
 	parameters: {
 		controls: {

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

@@ -20,11 +20,11 @@ const meta: Meta< typeof UnitControl > = {
 	id: 'components-experimental-unitcontrol',
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: { type: null } },
-		onChange: { control: { type: null } },
-		onUnitChange: { control: { type: null } },
+		__unstableStateReducer: { control: false },
+		onChange: { control: false },
+		onUnitChange: { control: false },
 		prefix: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/utils/colors-values.js

@@ -75,6 +75,9 @@ export const COLORS = Object.freeze( {
 	 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
 	 */
 	gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
+	/**
+	 * @deprecated Prefer theme-ready variables in `COLORS.theme`.
+	 */
 	white,
 	alert: ALERT,
 	/**

package/src/utils/config-values.js

@@ -12,7 +12,6 @@ const CONTROL_PROPS = {
 	controlPaddingXSmall: 8,
 	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
 
-	controlBackgroundColor: COLORS.white,
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,

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

@@ -12,7 +12,7 @@ const meta: Meta< typeof View > = {
 	component: View,
 	title: 'Components (Experimental)/View',
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		children: { control: { type: 'text' } },
 	},
 	parameters: {

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof VisuallyHidden > = {
 	title: 'Components/Typography/VisuallyHidden',
 	id: 'components-visuallyhidden',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		as: { control: { type: 'text' } },
 	},
 	parameters: {