@wordpress/components 28.14.1-next.cd6172eb0.0 → 29.0.1-next.a9f418477.0

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

@@ -33,18 +33,18 @@ const meta: Meta< typeof RangeControl > = {
 		},
 		color: { control: { type: 'color' } },
 		help: { control: { type: 'text' } },
-		icon: { control: { type: null } },
+		icon: { control: false },
 		marks: { control: { type: 'object' } },
-		onBlur: { control: { type: null } },
-		onChange: { control: { type: null } },
-		onFocus: { control: { type: null } },
-		onMouseLeave: { control: { type: null } },
-		onMouseMove: { control: { type: null } },
+		onBlur: { control: false },
+		onChange: { control: false },
+		onFocus: { control: false },
+		onMouseLeave: { control: false },
+		onMouseMove: { control: false },
 		railColor: { control: { type: 'color' } },
 		step: { control: { type: 'number' } },
 		trackColor: { control: { type: 'color' } },
 		type: { control: { type: 'check' }, options: [ 'stepper' ] },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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/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/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: {

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

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