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

package/src/modal/index.js

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * External dependencies
  */
@@ -6,7 +8,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createPortal, useEffect, useRef } from '@wordpress/element';
+import {
+	createPortal,
+	useEffect,
+	useRef,
+	forwardRef,
+} from '@wordpress/element';
 import {
 	useInstanceId,
 	useFocusReturn,
@@ -30,31 +37,34 @@ import StyleProvider from '../style-provider';
 // Used to count the number of open modals.
 let openModalCount = 0;
 
-export default function Modal( {
-	bodyOpenClassName = 'modal-open',
-	role = 'dialog',
-	title = null,
-	focusOnMount = true,
-	shouldCloseOnEsc = true,
-	shouldCloseOnClickOutside = true,
-	isDismissable, // Deprecated
-	isDismissible = isDismissable || true,
-	/* accessibility */
-	aria = {
-		labelledby: null,
-		describedby: null,
-	},
-	onRequestClose,
-	icon,
-	closeButtonLabel,
-	children,
-	style,
-	overlayClassName,
-	className,
-	contentLabel,
-	onKeyDown,
-	isFullScreen = false,
-} ) {
+function Modal( props, forwardedRef ) {
+	const {
+		bodyOpenClassName = 'modal-open',
+		role = 'dialog',
+		title = null,
+		focusOnMount = true,
+		shouldCloseOnEsc = true,
+		shouldCloseOnClickOutside = true,
+		isDismissable, // Deprecated
+		isDismissible = isDismissable || true,
+		/* accessibility */
+		aria = {
+			labelledby: null,
+			describedby: null,
+		},
+		onRequestClose,
+		icon,
+		closeButtonLabel,
+		children,
+		style,
+		overlayClassName,
+		className,
+		contentLabel,
+		onKeyDown,
+		isFullScreen = false,
+		__experimentalHideHeader = false,
+	} = props;
+
 	const ref = useRef();
 	const instanceId = useInstanceId( Modal );
 	const headingId = title
@@ -106,7 +116,7 @@ export default function Modal( {
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			ref={ ref }
+			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ classnames(
 				'components-modal__screen-overlay',
 				overlayClassName
@@ -139,38 +149,43 @@ export default function Modal( {
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ 'components-modal__content' }
+						className={ classnames( 'components-modal__content', {
+							'hide-header': __experimentalHideHeader,
+						} ) }
 						role="document"
 					>
-						<div className="components-modal__header">
-							<div className="components-modal__header-heading-container">
-								{ icon && (
-									<span
-										className="components-modal__icon-container"
-										aria-hidden
-									>
-										{ icon }
-									</span>
-								) }
-								{ title && (
-									<h1
-										id={ headingId }
-										className="components-modal__header-heading"
-									>
-										{ title }
-									</h1>
+						{ ! __experimentalHideHeader && (
+							<div className="components-modal__header">
+								<div className="components-modal__header-heading-container">
+									{ icon && (
+										<span
+											className="components-modal__icon-container"
+											aria-hidden
+										>
+											{ icon }
+										</span>
+									) }
+									{ title && (
+										<h1
+											id={ headingId }
+											className="components-modal__header-heading"
+										>
+											{ title }
+										</h1>
+									) }
+								</div>
+								{ isDismissible && (
+									<Button
+										onClick={ onRequestClose }
+										icon={ closeSmall }
+										label={
+											closeButtonLabel ||
+											__( 'Close dialog' )
+										}
+									/>
 								) }
 							</div>
-							{ isDismissible && (
-								<Button
-									onClick={ onRequestClose }
-									icon={ closeSmall }
-									label={
-										closeButtonLabel || __( 'Close dialog' )
-									}
-								/>
-							) }
-						</div>
+						) }
 						{ children }
 					</div>
 				</div>
@@ -179,3 +194,5 @@ export default function Modal( {
 		document.body
 	);
 }
+
+export default forwardRef( Modal );

package/src/modal/stories/index.js

@@ -20,7 +20,7 @@ export default {
 	title: 'Components/Modal',
 	component: Modal,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -55,6 +55,10 @@ export const _default = () => {
 		'shouldCloseOnClickOutside',
 		true
 	);
+	const __experimentalHideHeader = boolean(
+		'__experimentalHideHeader',
+		false
+	);
 
 	const iconComponent = showIcon ? <Icon icon={ wordpress } /> : null;
 
@@ -65,6 +69,7 @@ export const _default = () => {
 		shouldCloseOnEsc,
 		shouldCloseOnClickOutside,
 		title,
+		__experimentalHideHeader,
 	};
 
 	return <ModalExample { ...modalProps } />;

package/src/modal/style.scss

@@ -126,4 +126,13 @@
 		display: block;
 		margin-bottom: $grid-unit-30;
 	}
+
+	&.hide-header {
+		margin-top: 0;
+		padding-top: $grid-unit-30;
+
+		&::before {
+			content: none;
+		}
+	}
 }

package/src/modal/test/index.js

@@ -46,4 +46,15 @@ describe( 'Modal', () => {
 		const titleId = within( dialog ).getByText( 'Test Title' ).id;
 		expect( dialog ).toHaveAttribute( 'aria-labelledby', titleId );
 	} );
+
+	it( 'hides the header when the `__experimentalHideHeader` prop is used', () => {
+		render(
+			<Modal title="Test Title" __experimentalHideHeader>
+				<p>Modal content</p>
+			</Modal>
+		);
+		const dialog = screen.getByRole( 'dialog' );
+		const title = within( dialog ).queryByText( 'Test Title' );
+		expect( title ).not.toBeInTheDocument();
+	} );
 } );

package/src/navigation/README.md

@@ -44,15 +44,6 @@ const MyNavigation = () => (
 	</Navigation>
 );
 ```
-## CSS Classes leveraged
-
-The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:
-
-- `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
-- `.wp-block-navigation-item` is applied to every menu item.
-- `.wp-block-navigation-item__content` is applied to the link inside a menu item.
-- `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
-- `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).
 
 ## Navigation Props
 

package/src/notice/stories/index.js

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

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/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 },
 	},
 };