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

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

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

package/src/palette-edit/index.js

@@ -127,6 +127,7 @@ function Option( {
 					) }
 					{ isGradient && (
 						<CustomGradientPicker
+							__experimentalIsRenderedInSidebar
 							value={ value }
 							onChange={ ( newGradient ) =>
 								onChange( {
@@ -291,22 +292,8 @@ export default function PaletteEdit( {
 							} }
 						/>
 					) }
-					{ ! isEditing && (
-						<Button
-							disabled={ ! hasElements }
-							isSmall
-							icon={ moreVertical }
-							label={
-								isGradient
-									? __( 'Edit gradients' )
-									: __( 'Edit colors' )
-							}
-							onClick={ () => {
-								setIsEditing( true );
-							} }
-						/>
-					) }
-					{ isEditing && ( canReset || ! canOnlyChangeValues ) && (
+
+					{ hasElements && ( canReset || ! canOnlyChangeValues ) && (
 						<DropdownMenu
 							icon={ moreVertical }
 							label={
@@ -321,6 +308,17 @@ export default function PaletteEdit( {
 							{ ( { 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"
@@ -330,6 +328,7 @@ export default function PaletteEdit( {
 													onChange();
 													onClose();
 												} }
+												className="components-palette-edit__menu-button"
 											>
 												{ isGradient
 													? __(

package/src/palette-edit/style.scss

@@ -17,3 +17,8 @@
 		padding: 8px;
 	}
 }
+.components-dropdown-menu__menu {
+	.components-palette-edit__menu-button {
+		width: 100%;
+	}
+}

package/src/panel/stories/index.js

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

package/src/placeholder/stories/index.js

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

package/src/popover/stories/index.js

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

package/src/query-controls/README.md

@@ -1,14 +1,14 @@
 # QueryControls
 
-## Usage
+## Development Guidelines
+
+### Usage
 
 ```jsx
 import { QueryControls } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const QUERY_DEFAULTS = {
-	orderBy: 'title',
-	order: 'asc',
 	category: 1,
 	categories: [
 		{
@@ -27,12 +27,16 @@ const QUERY_DEFAULTS = {
 			parent: 0,
 		},
 	],
+	maxItems: 20,
+	minItems: 1,	
 	numberOfItems: 10,
+	order: 'asc',
+	orderBy: 'title',	
 };
 
 const MyQueryControls = () => {
 	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
-	const { orderBy, order, category, categories, numberOfItems } = query;
+	const { category, categories, maxItems, minItems, numberOfItems, order, orderBy  } = query;
 
 	const updateQuery = ( newQuery ) => {
 		setQuery( { ...query, ...newQuery } );
@@ -40,7 +44,7 @@ const MyQueryControls = () => {
 
 	return (
 		<QueryControls
-			{ ...{ orderBy, order, numberOfItems } }
+			{ ...{ maxItems, minItems, numberOfItems, order, orderBy } }
 			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
 			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
 			categoriesList={ categories }
@@ -54,7 +58,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:
 
@@ -108,3 +112,131 @@ 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,7 +49,10 @@ Radio groups that cannot be selected can either be given a disabled state, or be
 #### Controlled
 
 ```jsx
-import { Radio, RadioGroup } from '@wordpress/components';
+import {
+	__experimentalRadio as Radio,
+	__experimentalRadioGroup as 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: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

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

package/src/scrollable/stories/index.js

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

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

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

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

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

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

@@ -27,6 +27,7 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ selectSize as Size ];
@@ -55,6 +56,11 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 			lineHeight: 1,
 			minHeight: 24,
 		},
+		'__unstable-large': {
+			height: 40,
+			lineHeight: 1,
+			minHeight: 40,
+		},
 	};
 
 	const style = sizes[ selectSize as Size ] || sizes.default;
@@ -62,6 +68,24 @@ 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
 
@@ -80,8 +104,7 @@ export const Select = styled.select< SelectProps >`
 		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
-
-		${ rtl( { paddingLeft: 8, paddingRight: 24 } ) }
+		${ sizePaddings };
 	}
 `;
 

package/src/select-control/types.ts

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

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

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

package/src/snackbar/stories/index.js

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

package/src/spacer/stories/index.js

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

package/src/style-provider/index.js

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

package/src/surface/stories/index.js

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

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

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

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

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

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

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

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

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

package/src/tip/stories/index.js

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

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

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

package/src/toggle-group-control/stories/index.js

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

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -12,7 +12,7 @@ import useResizeAware from 'react-resize-aware';
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -59,10 +59,15 @@ function ToggleGroupControl(
 		baseId,
 		state: value,
 	} );
+	const previousValue = usePrevious( value );
 
 	// Propagate radio.state change
 	useUpdateEffect( () => {
-		onChange( radio.state );
+		// Avoid calling onChange if radio state changed
+		// from incoming value.
+		if ( previousValue !== radio.state ) {
+			onChange( radio.state );
+		}
 	}, [ radio.state ] );
 
 	// Sync incoming value with radio.state

package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx

@@ -35,21 +35,36 @@ function ToggleGroupControlBackdrop( {
 			return;
 		}
 
-		const { x: parentX } = containerNode.getBoundingClientRect();
-		const { width: offsetWidth, x } = targetNode.getBoundingClientRect();
-		const borderWidth = 1;
-		const offsetLeft = x - parentX - borderWidth;
+		const computeDimensions = () => {
+			const {
+				width: offsetWidth,
+				x,
+			} = targetNode.getBoundingClientRect();
 
-		setLeft( offsetLeft );
-		setWidth( offsetWidth );
+			const { x: parentX } = containerNode.getBoundingClientRect();
 
-		let requestId: number;
+			const borderWidth = 1;
+			const offsetLeft = x - parentX - borderWidth;
+
+			setLeft( offsetLeft );
+			setWidth( offsetWidth );
+		};
+		// Fix to make the component appear as expected inside popovers.
+		// If the targetNode width is 0 it means the element was not yet rendered we should allow
+		// some time for the render to happen.
+		// requestAnimationFrame instead of setTimeout with a small time does not seems to work.
+		const dimensionsRequestId = window.setTimeout( computeDimensions, 100 );
+
+		let animationRequestId: number;
 		if ( ! canAnimate ) {
-			requestId = window.requestAnimationFrame( () => {
+			animationRequestId = window.requestAnimationFrame( () => {
 				setCanAnimate( true );
 			} );
 		}
-		return () => window.cancelAnimationFrame( requestId );
+		return () => {
+			window.clearTimeout( dimensionsRequestId );
+			window.cancelAnimationFrame( animationRequestId );
+		};
 	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
 
 	if ( ! renderBackdrop ) {

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

@@ -54,6 +54,9 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
+	&:active {
+		background: transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`

package/src/toolbar-button/stories/index.js

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