@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/palette-edit/styles.js

@@ -13,7 +13,6 @@ import { space } from '../ui/utils/space';
 import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
-import Item from '../item-group/item';
 import {
 	Container as InputControlContainer,
 	Input,
@@ -30,7 +29,7 @@ export const IndicatorStyled = styled( CircularOptionPicker.Option )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: 2px;
+		border-radius: ${ CONFIG.controlBorderRadius }};
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -41,9 +40,26 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
-export const PaletteItem = styled( Item )`
+export const PaletteItem = styled( View )`
 	padding: 3px 0 3px ${ space( 3 ) };
 	height: calc( 40px - ${ CONFIG.borderWidth } );
+	border: 1px solid ${ CONFIG.surfaceBorderColor };
+	border-bottom-color: transparent;
+	&:first-of-type {
+		border-top-left-radius: ${ CONFIG.controlBorderRadius };
+		border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	}
+	&:last-of-type {
+		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-color: ${ CONFIG.surfaceBorderColor };
+	}
+	&.is-selected + & {
+		border-top-color: transparent;
+	}
+	&.is-selected {
+		border-color: ${ COLORS.blue.wordpress[ 700 ] };
+	}
 `;
 
 export const NameContainer = styled.div`
@@ -52,6 +68,9 @@ export const NameContainer = styled.div`
 	margin-right: ${ space( 2 ) };
 	white-space: nowrap;
 	overflow: hidden;
+	${ PaletteItem }:hover & {
+		color: var( --wp-admin-theme-color, ${ COLORS.blue.wordpress[ 700 ] } );
+	}
 `;
 
 export const PaletteHeading = styled( Heading )`

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/index.js

@@ -73,12 +73,14 @@ function Placeholder( {
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			{ !! instructions && (
-				<div className="components-placeholder__instructions">
-					{ instructions }
-				</div>
-			) }
-			<div className={ fieldsetClasses }>{ children }</div>
+			<fieldset className={ fieldsetClasses }>
+				{ !! instructions && (
+					<legend className="components-placeholder__instructions">
+						{ instructions }
+					</legend>
+				) }
+				{ children }
+			</fieldset>
 		</div>
 	);
 }

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/placeholder/style.scss

@@ -77,6 +77,18 @@
 	}
 }
 
+// Overrides for browser and editor fieldset styles.
+.components-placeholder__fieldset.components-placeholder__fieldset {
+	border: none;
+	padding: 0;
+
+	.components-placeholder__instructions {
+		padding: 0;
+		font-weight: normal;
+		font-size: 1em;
+	}
+}
+
 .components-placeholder__fieldset.is-column-layout,
 .components-placeholder__fieldset.is-column-layout form {
 	flex-direction: column;

package/src/placeholder/test/index.js

@@ -88,7 +88,7 @@ describe( 'Placeholder', () => {
 			const element = <div>Fieldset</div>;
 			const placeholder = shallow( <Placeholder children={ element } /> );
 			const placeholderFieldset = placeholder.find(
-				'.components-placeholder__fieldset'
+				'fieldset.components-placeholder__fieldset'
 			);
 			const child = placeholderFieldset.childAt( 0 );
 
@@ -96,6 +96,23 @@ describe( 'Placeholder', () => {
 			expect( child.matchesElement( element ) ).toBe( true );
 		} );
 
+		it( 'should display a legend if instructions are passed', () => {
+			const element = <div>Fieldset</div>;
+			const instructions = 'Choose an option.';
+			const placeholder = shallow(
+				<Placeholder
+					children={ element }
+					instructions={ instructions }
+				/>
+			);
+			const placeholderLegend = placeholder.find(
+				'legend.components-placeholder__instructions'
+			);
+
+			expect( placeholderLegend.exists() ).toBe( true );
+			expect( placeholderLegend.text() ).toEqual( instructions );
+		} );
+
 		it( 'should add an additional className to the top container', () => {
 			const placeholder = shallow(
 				<Placeholder className="wp-placeholder" />

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/range-control/styles/range-control-styles.js

@@ -58,7 +58,7 @@ export const BeforeIconWrapper = styled.span`
 export const AfterIconWrapper = styled.span`
 	margin-top: ${ railHeight }px;
 
-	${ rtl( { marginLeft: 16 } ) }
+	${ rtl( { marginLeft: 6 } ) }
 `;
 
 const railBackgroundColor = ( { disabled, railColor } ) => {

package/src/resizable-box/index.tsx

@@ -9,7 +9,6 @@ import { forwardRef } from '@wordpress/element';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-// eslint-disable-next-line no-restricted-imports
 import type { ReactNode, Ref } from 'react';
 
 /**

package/src/resizable-box/resize-tooltip/index.tsx

@@ -3,13 +3,12 @@
  */
 import { noop } from 'lodash';
 import classnames from 'classnames';
+import type { Ref } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-// eslint-disable-next-line no-restricted-imports
-import type { Ref } from 'react';
 
 /**
  * Internal dependencies

package/src/resizable-box/resize-tooltip/label.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

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/sandbox/index.native.js

@@ -32,8 +32,8 @@ const observeAndResizeJS = `
 		function sendResize() {
 			var clientBoundingRect = document.body.getBoundingClientRect();
 
-			// The function postMessage is exposed by the react-native-webview library 
-			// to communicate between React Native and the WebView, in this case, 
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
 			// we use it for notifying resize changes.
             window.ReactNativeWebView.postMessage(JSON.stringify( {
                 action: 'resize',
@@ -109,7 +109,7 @@ const style = `
 
 	/**
 	 * Add responsiveness to embeds with aspect ratios.
-	 * 
+	 *
 	 * These styles have been copied from the web version (https://git.io/JEFcX) and
 	 * adapted for the native version.
 	 */
@@ -270,9 +270,12 @@ function Sandbox( {
 	}
 
 	useEffect( () => {
-		Dimensions.addEventListener( 'change', onChangeDimensions );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onChangeDimensions
+		);
 		return () => {
-			Dimensions.removeEventListener( 'change', onChangeDimensions );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );
 

package/src/scrollable/hook.js

@@ -36,7 +36,7 @@ export function useScrollable( props ) {
 				scrollDirection === 'auto' && styles.scrollAuto,
 				className
 			),
-		[ className, scrollDirection, smoothScroll ]
+		[ className, cx, scrollDirection, smoothScroll ]
 	);
 
 	return { ...otherProps, className: classes };

package/src/scrollable/stories/index.js

@@ -2,8 +2,11 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
-/* eslint-disable-next-line no-restricted-imports */
-import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,12 +18,12 @@ export default {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
 export const _default = () => {
-	const targetRef = React.useRef( null );
+	const targetRef = useRef( null );
 
 	const onButtonClick = () => {
 		targetRef.current?.focus();

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/bubbles-virtually/fill.js

@@ -8,6 +8,7 @@ import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
  * Internal dependencies
  */
 import useSlot from './use-slot';
+import StyleProvider from '../../style-provider';
 
 function useForceUpdate() {
 	const [ , setState ] = useState( {} );
@@ -48,5 +49,15 @@ export default function Fill( { name, children } ) {
 		children = children( slot.fillProps );
 	}
 
-	return createPortal( children, slot.ref.current );
+	// When using a `Fill`, the `children` will be rendered in the document of the
+	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
+	// to make sure we're referencing the right document/iframe (instead of the
+	// context of the `Fill`'s parent).
+	const wrappedChildren = (
+		<StyleProvider document={ slot.ref.current.ownerDocument }>
+			{ children }
+		</StyleProvider>
+	);
+
+	return createPortal( wrappedChildren, slot.ref.current );
 }

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/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

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/spacer/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { ReactNode } from 'react';
 
 /**