@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.738bb1424.0

package/src/range-control/index.tsx

@@ -66,7 +66,7 @@ function UnforwardedRangeControl(
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		__nextHasNoMarginBottom = false,
+		__nextHasNoMarginBottom: _, // Prevent passing to internal component
 		afterIcon,
 		allowReset = false,
 		beforeIcon,
@@ -241,8 +241,6 @@ function UnforwardedRangeControl(
 
 	return (
 		<BaseControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="RangeControl"
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
@@ -259,7 +257,6 @@ function UnforwardedRangeControl(
 					</BeforeIconWrapper>
 				) }
 				<Wrapper
-					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 					className={ wrapperClasses }
 					color={ colorProp }
 					marks={ !! marks }
@@ -394,7 +391,6 @@ function UnforwardedRangeControl(
  *   const [ value, setValue ] = useState();
  *   return (
  *     <RangeControl
- *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
  *       initialPosition={ 50 }

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

@@ -78,7 +78,6 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 
 export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
@@ -114,7 +113,6 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	);
 };
 WithAnyStep.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	label: 'Brightness',
 	step: 'any',
@@ -179,7 +177,6 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	label: 'Integer Step',
 	marks: marksBase,
@@ -197,7 +194,6 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	marks: [
 		...marksBase,
@@ -218,7 +214,6 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: 10,
@@ -235,7 +230,6 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: -1,
@@ -252,7 +246,6 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	marks: marksBase,
 	max: 10,

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

@@ -50,16 +50,9 @@ export const Root = styled.div< RootProps >`
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
 	css( { color } );
 
-const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
-	if ( ! __nextHasNoMarginBottom ) {
-		return css( { marginBottom: marks ? 16 : undefined } );
-	}
-	return '';
-};
-
 export const Wrapper = styled( 'div', {
 	shouldForwardProp: ( prop: string ) =>
-		! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),
+		! [ 'color', 'marks' ].includes( prop ),
 } )< WrapperProps >`
 	display: block;
 	flex: 1;
@@ -68,7 +61,6 @@ export const Wrapper = styled( 'div', {
 
 	${ wrapperColor };
 	${ rangeHeight };
-	${ wrapperMargin };
 `;
 
 export const BeforeIconWrapper = styled.span`

package/src/range-control/test/index.tsx

@@ -18,13 +18,7 @@ const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 const RangeControl = (
 	props: React.ComponentProps< typeof _RangeControl >
 ) => {
-	return (
-		<_RangeControl
-			{ ...props }
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-		/>
-	);
+	return <_RangeControl { ...props } __next40pxDefaultSize />;
 };
 
 describe( 'RangeControl', () => {

package/src/range-control/types.ts

@@ -76,7 +76,7 @@ export type ControlledRangeValue = number | '' | null;
 
 export type RangeControlProps = Pick<
 	BaseControlProps,
-	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
+	'__nextHasNoMarginBottom' | 'hideLabelFromVision' | 'help'
 > &
 	MarksProps & {
 		/**
@@ -254,10 +254,7 @@ export type InputRangeProps = {
 	value?: number | '';
 };
 
-export type WrapperProps = Pick<
-	BaseControlProps,
-	'__nextHasNoMarginBottom'
-> & {
+export type WrapperProps = {
 	color?: CSSProperties[ 'color' ];
 	marks?: RangeMarks;
 };

package/src/search-control/README.md

@@ -20,7 +20,6 @@ function MySearchControl( { className, setState } ) {
 
     return (
         <SearchControl
-            __nextHasNoMarginBottom
             label={ __( 'Search posts' ) }
             value={ searchInput }
             onChange={ setSearchInput }
@@ -100,14 +99,6 @@ If true, the label will not be visible, but will be read by screen readers. Defa
 -   Required: No
 -   Default: `true`
 
-#### __nextHasNoMarginBottom
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 #### `size`: `'default'` | `'compact'`
 
 The size of the component.

package/src/search-control/index.tsx

@@ -10,7 +10,7 @@ import type { ForwardedRef } from 'react';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { search, closeSmall } from '@wordpress/icons';
-import { forwardRef, useMemo, useRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -21,7 +21,6 @@ import { InputControlPrefixWrapper } from '../input-control/input-prefix-wrapper
 import { InputControlSuffixWrapper } from '../input-control/input-suffix-wrapper';
 import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { SearchControlProps, SuffixItemProps } from './types';
-import { ContextSystemProvider } from '../context';
 import { StyledInputControl, StyledIcon } from './styles';
 
 function SuffixItem( {
@@ -59,7 +58,7 @@ function SuffixItem( {
 
 function UnforwardedSearchControl(
 	{
-		__nextHasNoMarginBottom = false,
+		__nextHasNoMarginBottom: _, // Prevent passing to internal component
 		className,
 		onChange,
 		value,
@@ -86,52 +85,35 @@ function UnforwardedSearchControl(
 		'components-search-control'
 	);
 
-	const contextValue = useMemo(
-		() => ( {
-			BaseControl: {
-				// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
-				// to provide backwards compatible margin for SearchControl.
-				// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
-				_overrides: { __nextHasNoMarginBottom },
-				__associatedWPComponentName: 'SearchControl',
-			},
-		} ),
-		[ __nextHasNoMarginBottom ]
-	);
-
 	return (
-		<ContextSystemProvider value={ contextValue }>
-			<StyledInputControl
-				__next40pxDefaultSize
-				id={ instanceId }
-				hideLabelFromVision={ hideLabelFromVision }
-				label={ label }
-				ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
-				type="search"
-				size={ size }
-				className={ clsx( 'components-search-control', className ) }
-				onChange={ ( nextValue?: string ) =>
-					onChange( nextValue ?? '' )
-				}
-				autoComplete="off"
-				placeholder={ placeholder }
-				value={ value ?? '' }
-				prefix={
-					<InputControlPrefixWrapper variant="icon">
-						<StyledIcon icon={ search } fill="currentColor" />
-					</InputControlPrefixWrapper>
-				}
-				suffix={
-					<SuffixItem
-						searchRef={ searchRef }
-						value={ value }
-						onChange={ onChange }
-						onClose={ onClose }
-					/>
-				}
-				{ ...filteredRestProps }
-			/>
-		</ContextSystemProvider>
+		<StyledInputControl
+			__next40pxDefaultSize
+			id={ instanceId }
+			hideLabelFromVision={ hideLabelFromVision }
+			label={ label }
+			ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
+			type="search"
+			size={ size }
+			className={ clsx( 'components-search-control', className ) }
+			onChange={ ( nextValue?: string ) => onChange( nextValue ?? '' ) }
+			autoComplete="off"
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			prefix={
+				<InputControlPrefixWrapper variant="icon">
+					<StyledIcon icon={ search } fill="currentColor" />
+				</InputControlPrefixWrapper>
+			}
+			suffix={
+				<SuffixItem
+					searchRef={ searchRef }
+					value={ value }
+					onChange={ onChange }
+					onClose={ onClose }
+				/>
+			}
+			{ ...filteredRestProps }
+		/>
 	);
 }
 
@@ -147,7 +129,6 @@ function UnforwardedSearchControl(
  *
  *   return (
  *     <SearchControl
- *       __nextHasNoMarginBottom
  *       value={ searchInput }
  *       onChange={ setSearchInput }
  *     />

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

@@ -49,5 +49,4 @@ const Template: StoryFn< typeof SearchControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	help: 'Help text to explain the input.',
-	__nextHasNoMarginBottom: true,
 };

package/src/search-control/test/index.tsx

@@ -23,7 +23,6 @@ function ControlledSearchControl( {
 	return (
 		<SearchControl
 			{ ...restProps }
-			__nextHasNoMarginBottom
 			value={ value }
 			onChange={ ( ...args ) => {
 				setValue( ...args );

package/src/search-control/types.ts

@@ -13,6 +13,9 @@ export type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & {
 	 * Start opting into the new margin-free styles that will become the default in a future version.
 	 *
 	 * @default false
+	 *
+	 * @deprecated Default behavior since WordPress 7.0. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**

package/src/select-control/README.md

@@ -93,7 +93,6 @@ const MySelectControl = () => {
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
 			__next40pxDefaultSize
-			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -116,7 +115,6 @@ Render a user interface to select multiple users from a list.
 		{ value: 'c', label: 'User c' },
 	] }
 	__next40pxDefaultSize
-	__nextHasNoMarginBottom
 />
 ```
 
@@ -132,7 +130,6 @@ const [ item, setItem ] = useState( '' );
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
     __next40pxDefaultSize
-    __nextHasNoMarginBottom
 >
 	<optgroup label="Theropods">
 		<option value="Tyrannosaurus">Tyrannosaurus</option>
@@ -240,14 +237,6 @@ Start opting into the larger default height that will become the default size in
 -   Required: No
 -   Default: `false`
 
-### __nextHasNoMarginBottom
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To select one option from a set, and you want to show them all the available options at once, use the `Radio` component.

package/src/select-control/index.tsx

@@ -65,7 +65,7 @@ function UnforwardedSelectControl< V extends string >(
 		suffix,
 		variant = 'default',
 		__next40pxDefaultSize = false,
-		__nextHasNoMarginBottom = false,
+		__nextHasNoMarginBottom: _, // Prevent passing to internal component
 		__shouldNotWarnDeprecated36pxSize,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp( props );
@@ -103,13 +103,7 @@ function UnforwardedSelectControl< V extends string >(
 	} );
 
 	return (
-		<BaseControl
-			help={ help }
-			id={ id }
-			className={ classes }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="SelectControl"
-		>
+		<BaseControl help={ help } id={ id } className={ classes }>
 			<StyledInputBase
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -163,7 +157,6 @@ function UnforwardedSelectControl< V extends string >(
  *   return (
  *     <SelectControl
  *       __next40pxDefaultSize
- *       __nextHasNoMarginBottom
  *       label="Size"
  *       value={ size }
  *       options={ [

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

@@ -69,7 +69,6 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
 	__next40pxDefaultSize: true,
-	__nextHasNoMarginBottom: true,
 	label: 'Label',
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
@@ -92,7 +91,6 @@ WithLabelAndHelpText.args = {
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
 	__next40pxDefaultSize: true,
-	__nextHasNoMarginBottom: true,
 	label: 'Label',
 	children: (
 		<>

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

@@ -12,13 +12,7 @@ import _SelectControl from '..';
 const SelectControl = (
 	props: React.ComponentProps< typeof _SelectControl >
 ) => {
-	return (
-		<_SelectControl
-			{ ...props }
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-		/>
-	);
+	return <_SelectControl { ...props } __next40pxDefaultSize />;
 };
 
 describe( 'SelectControl', () => {

package/src/select-control/types.ts

@@ -22,7 +22,7 @@ type SelectControlBaseProps< V extends string > = Pick<
 	| 'size'
 	| 'suffix'
 > &
-	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
+	Pick< BaseControlProps, '__nextHasNoMarginBottom' | 'help' > & {
 		/**
 		 * An array of option property objects to be rendered,
 		 * each with a `label` and `value` property, as well as any other

package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { observableMap } from '@wordpress/compose';
 
 /**

package/src/snackbar/index.tsx

@@ -27,7 +27,7 @@ import type { SnackbarProps } from './types';
 import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../context';
 
-const NOTICE_TIMEOUT = 10000;
+const NOTICE_TIMEOUT = 6000;
 
 /**
  * Custom hook which announces the message with the given politeness, if a

package/src/text-control/README.md

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

package/src/text-control/index.tsx

@@ -23,7 +23,8 @@ function UnforwardedTextControl(
 	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		__nextHasNoMarginBottom,
+		// Prevent passing this to `input`.
+		__nextHasNoMarginBottom: _,
 		__next40pxDefaultSize = false,
 		label,
 		hideLabelFromVision,
@@ -47,8 +48,6 @@ function UnforwardedTextControl(
 
 	return (
 		<BaseControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="TextControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
@@ -83,7 +82,6 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
- *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *       label="Additional CSS Class"
  *       value={ className }

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

@@ -54,7 +54,6 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	placeholder: 'Placeholder',
 };

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

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

package/src/text-control/types.ts

@@ -5,11 +5,11 @@ import type { BaseControlProps } from '../base-control/types';
 
 export type TextControlProps = Pick<
 	BaseControlProps,
+	| '__nextHasNoMarginBottom'
 	| 'className'
 	| 'hideLabelFromVision'
 	| 'help'
 	| 'label'
-	| '__nextHasNoMarginBottom'
 > & {
 	/**
 	 * A function that receives the value of the input.

package/src/textarea-control/README.md

@@ -79,7 +79,6 @@ const MyTextareaControl = () => {
 
 	return (
 		<TextareaControl
-		  __nextHasNoMarginBottom
 			label="Text"
 			help="Enter some text"
 			value={ text }
@@ -132,13 +131,6 @@ The current value of the textarea.
 
 -   Required: Yes
 
-#### `__nextHasNoMarginBottom`: `Boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   For a field where users only enter one line of text, use the `TextControl` component.

package/src/textarea-control/index.tsx

@@ -22,7 +22,8 @@ function UnforwardedTextareaControl(
 	ref: React.ForwardedRef< HTMLTextAreaElement >
 ) {
 	const {
-		__nextHasNoMarginBottom,
+		// Prevent passing this to `textarea`.
+		__nextHasNoMarginBottom: _,
 		label,
 		hideLabelFromVision,
 		value,
@@ -41,8 +42,6 @@ function UnforwardedTextareaControl(
 
 	return (
 		<BaseControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="TextareaControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
@@ -77,7 +76,6 @@ function UnforwardedTextareaControl(
  *
  *   return (
  *     <TextareaControl
- *       __nextHasNoMarginBottom
  *       label="Text"
  *       help="Enter some text"
  *       value={ text }

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

@@ -52,7 +52,6 @@ const Template: StoryFn< typeof TextareaControl > = ( {
 
 export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	label: 'Text',
 	help: 'Enter some text',
 	placeholder: 'Placeholder',

package/src/textarea-control/types.ts

@@ -10,7 +10,7 @@ import type { BaseControlProps } from '../base-control/types';
 
 export type TextareaControlProps = Pick<
 	BaseControlProps,
-	'hideLabelFromVision' | 'help' | 'label' | '__nextHasNoMarginBottom'
+	'__nextHasNoMarginBottom' | 'hideLabelFromVision' | 'help' | 'label'
 > & {
 	/**
 	 * A function that receives the new value of the textarea each time it

package/src/toggle-control/README.md

@@ -15,7 +15,6 @@ const MyToggleControl = () => {
 
 	return (
 		<ToggleControl
-			__nextHasNoMarginBottom
 			label="Fixed Background"
 			help={
 				hasFixedBackground
@@ -79,11 +78,3 @@ The class that will be added with `components-base-control` and `components-togg
 
 -		Type: `String`
 -		Required: No
-
-### `__nextHasNoMarginBottom`
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`