@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.2.1

package/src/notice/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/Notice',
 	component: Notice,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/number-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/NumberControl',
 	component: NumberControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/palette-edit/index.js

@@ -40,6 +40,8 @@ import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
 
+const DEFAULT_COLOR = '#000';
+
 function NameInput( { value, onChange, label } ) {
 	return (
 		<NameInputControl
@@ -51,6 +53,14 @@ function NameInput( { value, onChange, label } ) {
 	);
 }
 
+function getNameForPosition( position ) {
+	return sprintf(
+		/* translators: %s: is a temporary id for a custom color */
+		__( 'Color %s ' ),
+		position + 1
+	);
+}
+
 function Option( {
 	canOnlyChangeValues,
 	element,
@@ -143,6 +153,14 @@ function Option( {
 	);
 }
 
+function isTemporaryElement( slugPrefix, { slug, color, gradient }, index ) {
+	return (
+		slug === slugPrefix + kebabCase( getNameForPosition( index ) ) &&
+		( ( !! color && color === DEFAULT_COLOR ) ||
+			( !! gradient && gradient === DEFAULT_GRADIENT ) )
+	);
+}
+
 function PaletteEditListView( {
 	elements,
 	onChange,
@@ -159,9 +177,14 @@ function PaletteEditListView( {
 	}, [ elements ] );
 	useEffect( () => {
 		return () => {
-			if ( elementsReference.current.some( ( { slug } ) => ! slug ) ) {
+			if (
+				elementsReference.current.some( ( element, index ) =>
+					isTemporaryElement( slugPrefix, element, index )
+				)
+			) {
 				const newElements = elementsReference.current.filter(
-					( { slug } ) => slug
+					( element, index ) =>
+						! isTemporaryElement( slugPrefix, element, index )
 				);
 				onChange( newElements.length ? newElements : undefined );
 			}
@@ -272,19 +295,19 @@ export default function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const tempOptionName = sprintf(
-									/* translators: %s: is a temporary id for a custom color */
-									__( 'Color %s ' ),
-									elementsLength + 1
+								const tempOptionName = getNameForPosition(
+									elementsLength
 								);
 								onChange( [
 									...elements,
 									{
 										...( isGradient
 											? { gradient: DEFAULT_GRADIENT }
-											: { color: '#000' } ),
+											: { color: DEFAULT_COLOR } ),
 										name: tempOptionName,
-										slug: '',
+										slug:
+											slugPrefix +
+											kebabCase( tempOptionName ),
 									},
 								] );
 								setIsEditing( true );
@@ -293,71 +316,81 @@ export default function PaletteEdit( {
 						/>
 					) }
 
-					{ hasElements && ( canReset || ! canOnlyChangeValues ) && (
-						<DropdownMenu
-							icon={ moreVertical }
-							label={
-								isGradient
-									? __( 'Gradient options' )
-									: __( 'Color options' )
-							}
-							toggleProps={ {
-								isSmall: true,
-							} }
-						>
-							{ ( { onClose } ) => (
-								<>
-									<NavigableMenu role="menu">
-										<Button
-											variant="tertiary"
-											disabled={ isEditing }
-											onClick={ () => {
-												setIsEditing( true );
-												onClose();
-											} }
-											className="components-palette-edit__menu-button"
-										>
-											{ __( 'Edit custom colors' ) }
-										</Button>
-										{ ! canOnlyChangeValues && (
-											<Button
-												variant="tertiary"
-												onClick={ () => {
-													setEditingElement( null );
-													setIsEditing( false );
-													onChange();
-													onClose();
-												} }
-												className="components-palette-edit__menu-button"
-											>
-												{ isGradient
-													? __(
-															'Remove all gradients'
-													  )
-													: __(
-															'Remove all colors'
-													  ) }
-											</Button>
-										) }
-										{ canReset && (
-											<Button
-												variant="tertiary"
-												onClick={ () => {
-													setEditingElement( null );
-													onChange();
-													onClose();
-												} }
-											>
-												{ isGradient
-													? __( 'Reset gradient' )
-													: __( 'Reset colors' ) }
-											</Button>
-										) }
-									</NavigableMenu>
-								</>
-							) }
-						</DropdownMenu>
-					) }
+					{ hasElements &&
+						( ! isEditing ||
+							! canOnlyChangeValues ||
+							canReset ) && (
+							<DropdownMenu
+								icon={ moreVertical }
+								label={
+									isGradient
+										? __( 'Gradient options' )
+										: __( 'Color options' )
+								}
+								toggleProps={ {
+									isSmall: true,
+								} }
+							>
+								{ ( { onClose } ) => (
+									<>
+										<NavigableMenu role="menu">
+											{ ! isEditing && (
+												<Button
+													variant="tertiary"
+													onClick={ () => {
+														setIsEditing( true );
+														onClose();
+													} }
+													className="components-palette-edit__menu-button"
+												>
+													{ isGradient
+														? __( 'Edit gradients' )
+														: __( 'Edit colors' ) }
+												</Button>
+											) }
+											{ ! canOnlyChangeValues && (
+												<Button
+													variant="tertiary"
+													onClick={ () => {
+														setEditingElement(
+															null
+														);
+														setIsEditing( false );
+														onChange();
+														onClose();
+													} }
+													className="components-palette-edit__menu-button"
+												>
+													{ isGradient
+														? __(
+																'Remove all gradients'
+														  )
+														: __(
+																'Remove all colors'
+														  ) }
+												</Button>
+											) }
+											{ canReset && (
+												<Button
+													variant="tertiary"
+													onClick={ () => {
+														setEditingElement(
+															null
+														);
+														onChange();
+														onClose();
+													} }
+												>
+													{ isGradient
+														? __( 'Reset gradient' )
+														: __( 'Reset colors' ) }
+												</Button>
+											) }
+										</NavigableMenu>
+									</>
+								) }
+							</DropdownMenu>
+						) }
 				</PaletteActionsContainer>
 			</PaletteHStackHeader>
 			{ hasElements && (

package/src/panel/stories/index.js

@@ -19,7 +19,7 @@ export default {
 	title: 'Components/Panel',
 	component: Panel,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/placeholder/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	title: 'Components/Placeholder',
 	component: Placeholder,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/popover/stories/index.js

@@ -19,7 +19,7 @@ export default {
 	title: 'Components/Popover',
 	component: Popover,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/query-controls/README.md

@@ -1,14 +1,14 @@
 # QueryControls
 
-## Development Guidelines
-
-### Usage
+## Usage
 
 ```jsx
 import { QueryControls } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const QUERY_DEFAULTS = {
+	orderBy: 'title',
+	order: 'asc',
 	category: 1,
 	categories: [
 		{
@@ -27,16 +27,12 @@ const QUERY_DEFAULTS = {
 			parent: 0,
 		},
 	],
-	maxItems: 20,
-	minItems: 1,	
 	numberOfItems: 10,
-	order: 'asc',
-	orderBy: 'title',	
 };
 
 const MyQueryControls = () => {
 	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
-	const { category, categories, maxItems, minItems, numberOfItems, order, orderBy  } = query;
+	const { orderBy, order, category, categories, numberOfItems } = query;
 
 	const updateQuery = ( newQuery ) => {
 		setQuery( { ...query, ...newQuery } );
@@ -44,7 +40,7 @@ const MyQueryControls = () => {
 
 	return (
 		<QueryControls
-			{ ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+			{ ...{ orderBy, order, numberOfItems } }
 			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
 			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
 			categoriesList={ categories }
@@ -58,7 +54,7 @@ const MyQueryControls = () => {
 };
 ```
 
-### Multiple category selector
+## Multiple category selector
 
 The `QueryControls` component now supports multiple category selection, to replace the single category selection available so far. To enable it use the component with the new props instead: `categorySuggestions` in place of `categoriesList` and the `selectedCategories` array instead of `selectedCategoryId` like so:
 
@@ -112,131 +108,3 @@ const MyQueryControls = () => {
 ```
 
 The format of the categories list also needs to be updated to match what `FormTokenField` expects for making suggestions.
-
-### Props
-
-#### authorList
-
-An array of author IDs that is passed into an `AuthorSelect` sub-component.
-
--   Type: `Array`
--   Required: No
--   Platform: Web
-
-#### selectedAuthorId
-
-The selected author ID.
-
--   Type: `Number`
--   Required: No
--   Platform: Web
-
-#### categoriesList
-
-An array of category IDs; renders a `CategorySelect` sub-component when passed in conjunction with `onCategoryChange`.
-
--   Type: `Array`
--   Required: No
--   Platform: Web
-
-#### categorySuggestions
-
-An array of category names; renders a `FormTokenField` component when passed in conjunction with `onCategoryChange`.
-
--   Type: `Array`
--   Required: No
--   Platform: Web
-
-#### maxItems
-
--   Type: `Number`
--   Required: No
--   Default: 100
--   Platform: Web
-
-#### minItems
-
--   Type: `Number`
--   Required: No
--   Default: 1
--   Platform: Web
-
-#### numberOfItems
-
-The selected number of items to retrieve via the query.
-
--   Type: `Number`
--   Required: No
--   Platform: Web
-
-#### onAuthorChange
-
-A function that receives the new author value. If this is not specified, the author controls are not included.
-
--   Type: `Function`
--   Required: No
--   Platform: Web
-
-#### onCategoryChange
-
-A function that receives the new author value. If this is not specified, the category controls are not included.
-
--   Type: `Function`
--   Required: No
--   Platform: Web
-
-#### onNumberOfItemsChange
-
-A function that receives the new number of items value. If this is not specified, then the number of items range control is not included.
-
--   Type: `Function`
--   Required: No
--   Platform: Web
-
-#### onOrderChange
-
-A function that receives the new order value. If this or onOrderByChange are not specified, then the order controls are not included.
-
--   Type: `Function`
--   Required: No
--   Platform: Web
-
-#### onOrderByChange
-
-A function that receives the new orderby value. If this or onOrderChange are not specified, then the order controls are not included.
-
--   Type: `Function`
--   Required: No
--   Platform: Web
-
-#### order
-
-The order in which to retrieve posts. Can be 'asc' or 'desc'.
-
--   Type: `String`
--   Required: No
--   Platform: Web
-
-#### orderBy
-
-The meta key by which to order posts. Can be 'date' or 'title'.
-
--   Type: `String`
--   Required: No
--   Platform: Web
-
-#### selectedCategories
-
-The selected categories for the `categorySuggestions`.
-
--   Type: `Array`
--   Required: No
--   Platform: Web
-
-#### selectedCategoryId
-
-The selected category for the `categoriesList`.
-
--   Type: `Number`
--   Required: No
--   Platform: Web

package/src/radio-group/README.md

@@ -49,10 +49,7 @@ Radio groups that cannot be selected can either be given a disabled state, or be
 #### Controlled
 
 ```jsx
-import {
-	__experimentalRadio as Radio,
-	__experimentalRadioGroup as RadioGroup,
-} from '@wordpress/components';
+import { Radio, RadioGroup } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const MyControlledRadioRadioGroup = () => {

package/src/range-control/stories/index.js

@@ -20,7 +20,7 @@ export default {
 	title: 'Components/RangeControl',
 	component: RangeControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/resizable-box/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/ResizableBox',
 	component: ResizableBox,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/scrollable/stories/index.js

@@ -15,7 +15,7 @@ export default {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/search-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/SearchControl',
 	component: SearchControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/select-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/SelectControl',
 	component: SelectControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 
@@ -60,7 +60,6 @@ export const _default = () => {
 			{
 				default: 'default',
 				small: 'small',
-				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),

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

@@ -27,7 +27,6 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
-		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ selectSize as Size ];
@@ -56,11 +55,6 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 			lineHeight: 1,
 			minHeight: 24,
 		},
-		'__unstable-large': {
-			height: 40,
-			lineHeight: 1,
-			minHeight: 40,
-		},
 	};
 
 	const style = sizes[ selectSize as Size ] || sizes.default;
@@ -68,24 +62,6 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 	return css( style );
 };
 
-const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
-	const sizes = {
-		default: {
-			paddingLeft: 8,
-			paddingRight: 24,
-		},
-		small: {
-			paddingLeft: 8,
-			paddingRight: 24,
-		},
-		'__unstable-large': {
-			paddingLeft: 16,
-			paddingRight: 32,
-		},
-	};
-	return rtl( sizes[ selectSize ] );
-};
-
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -104,7 +80,8 @@ export const Select = styled.select< SelectProps >`
 		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
-		${ sizePaddings };
+
+		${ rtl( { paddingLeft: 8, paddingRight: 24 } ) }
 	}
 `;
 

package/src/select-control/types.ts

@@ -1 +1 @@
-export type Size = 'default' | 'small' | '__unstable-large';
+export type Size = 'default' | 'small';

package/src/slot-fill/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/SlotFill',
 	component: Slot,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/snackbar/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/Snackbar',
 	component: Snackbar,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/spacer/stories/index.js

@@ -15,7 +15,7 @@ export default {
 	component: Spacer,
 	title: 'Components (Experimental)/Spacer',
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/style-provider/index.js

@@ -1,5 +1,3 @@
-//@ts-nocheck
-
 /**
  * External dependencies
  */

package/src/surface/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/tab-panel/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/text-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/TextControl',
 	component: TextControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/text-highlight/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/TextHighlight',
 	component: TextHighlight,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/textarea-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/TextareaControl',
 	component: TextareaControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };