@wordpress/components 19.0.0 → 19.0.4

package/src/modal/index.js

@@ -25,6 +25,7 @@ import { closeSmall } from '@wordpress/icons';
  */
 import * as ariaHelper from './aria-helper';
 import Button from '../button';
+import StyleProvider from '../style-provider';
 
 // Used to count the number of open modals.
 let openModalCount = 0;
@@ -52,6 +53,7 @@ export default function Modal( {
 	className,
 	contentLabel,
 	onKeyDown,
+	isFullScreen = false,
 } ) {
 	const ref = useRef();
 	const instanceId = useInstanceId( Modal );
@@ -111,55 +113,68 @@ export default function Modal( {
 			) }
 			onKeyDown={ handleEscapeKeyDown }
 		>
-			<div
-				className={ classnames( 'components-modal__frame', className ) }
-				style={ style }
-				ref={ useMergeRefs( [
-					constrainedTabbingRef,
-					focusReturnRef,
-					focusOnMountRef,
-				] ) }
-				role={ role }
-				aria-label={ contentLabel }
-				aria-labelledby={ contentLabel ? null : headingId }
-				aria-describedby={ aria.describedby }
-				tabIndex="-1"
-				{ ...( shouldCloseOnClickOutside ? focusOutsideProps : {} ) }
-				onKeyDown={ onKeyDown }
-			>
-				<div className={ 'components-modal__content' } 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>
+			<StyleProvider document={ document }>
+				<div
+					className={ classnames(
+						'components-modal__frame',
+						className,
+						{
+							'is-full-screen': isFullScreen,
+						}
+					) }
+					style={ style }
+					ref={ useMergeRefs( [
+						constrainedTabbingRef,
+						focusReturnRef,
+						focusOnMountRef,
+					] ) }
+					role={ role }
+					aria-label={ contentLabel }
+					aria-labelledby={ contentLabel ? null : headingId }
+					aria-describedby={ aria.describedby }
+					tabIndex="-1"
+					{ ...( shouldCloseOnClickOutside
+						? focusOutsideProps
+						: {} ) }
+					onKeyDown={ onKeyDown }
+				>
+					<div
+						className={ 'components-modal__content' }
+						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>
+								) }
+							</div>
+							{ isDismissible && (
+								<Button
+									onClick={ onRequestClose }
+									icon={ closeSmall }
+									label={
+										closeButtonLabel || __( 'Close dialog' )
+									}
+								/>
 							) }
 						</div>
-						{ isDismissible && (
-							<Button
-								onClick={ onRequestClose }
-								icon={ closeSmall }
-								label={
-									closeButtonLabel || __( 'Close dialog' )
-								}
-							/>
-						) }
+						{ children }
 					</div>
-					{ children }
 				</div>
-			</div>
+			</StyleProvider>
 		</div>,
 		document.body
 	);

package/src/modal/style.scss

@@ -37,6 +37,11 @@
 		animation: components-modal__appear-animation 0.1s ease-out;
 		animation-fill-mode: forwards;
 		@include reduce-motion("animation");
+
+		&.is-full-screen {
+			width: 90vw;
+			min-height: 90vh;
+		}
 	}
 
 	@include break-large() {

package/src/navigation/group/index.js

@@ -41,10 +41,9 @@ export default function NavigationGroup( { children, className, title } ) {
 			<li className={ classes }>
 				{ title && (
 					<GroupTitleUI
-						as="h3"
 						className="components-navigation__group-title"
 						id={ groupTitleId }
-						variant="caption"
+						level={ 3 }
 					>
 						{ title }
 					</GroupTitleUI>

package/src/navigation/menu/menu-title-search.js

@@ -7,15 +7,12 @@ import { filter } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { Icon, closeSmall, search as searchIcon } from '@wordpress/icons';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import Button from '../../button';
-import { VisuallyHidden } from '../../visually-hidden';
 import withSpokenMessages from '../../higher-order/with-spoken-messages';
 import { useNavigationMenuContext } from './context';
 import { useNavigationContext } from '../context';
@@ -73,40 +70,28 @@ function MenuTitleSearch( {
 		}
 	}
 
-	const menuTitleId = `components-navigation__menu-title-${ menu }`;
 	const inputId = `components-navigation__menu-title-search-${ menu }`;
-	/* translators: placeholder for menu search box. %s: menu title */
-	const placeholder = sprintf( __( 'Search in %s' ), title );
+	const placeholder = sprintf(
+		/* translators: placeholder for menu search box. %s: menu title */
+		__( 'Search %s' ),
+		title?.toLowerCase()
+	).trim();
 
 	return (
-		<MenuTitleSearchUI className="components-navigation__menu-title-search">
-			<Icon icon={ searchIcon } />
-
-			<VisuallyHidden as="label" htmlFor={ inputId } id={ menuTitleId }>
-				{ placeholder }
-			</VisuallyHidden>
-
-			<input
+		<div className="components-navigation__menu-title-search">
+			<MenuTitleSearchUI
 				autoComplete="off"
-				className="components-text-control__input"
+				className="components-navigation__menu-search-input"
 				id={ inputId }
-				onChange={ ( event ) => onSearch( event.target.value ) }
+				onChange={ ( value ) => onSearch( value ) }
 				onKeyDown={ onKeyDown }
 				placeholder={ placeholder }
+				onClose={ onClose }
 				ref={ inputRef }
 				type="search"
 				value={ search }
 			/>
-
-			<Button
-				isSmall
-				variant="tertiary"
-				label={ __( 'Close search' ) }
-				onClick={ onClose }
-			>
-				<Icon icon={ closeSmall } />
-			</Button>
-		</MenuTitleSearchUI>
+		</div>
 	);
 }
 

package/src/navigation/menu/menu-title.js

@@ -12,8 +12,8 @@ import { getAnimateClassName } from '../../animate';
 import Button from '../../button';
 import MenuTitleSearch from './menu-title-search';
 import {
+	GroupTitleUI,
 	MenuTitleActionsUI,
-	MenuTitleHeadingUI,
 	MenuTitleUI,
 } from '../styles/navigation-styles';
 import { useNavigationMenuContext } from './context';
@@ -51,10 +51,10 @@ export default function NavigationMenuTitle( {
 	return (
 		<MenuTitleUI className="components-navigation__menu-title">
 			{ ! isSearching && (
-				<MenuTitleHeadingUI
+				<GroupTitleUI
 					as="h2"
 					className="components-navigation__menu-title-heading"
-					variant="title.small"
+					level={ 3 }
 				>
 					<span id={ menuTitleId }>{ title }</span>
 
@@ -75,7 +75,7 @@ export default function NavigationMenuTitle( {
 							) }
 						</MenuTitleActionsUI>
 					) }
-				</MenuTitleHeadingUI>
+				</GroupTitleUI>
 			) }
 
 			{ isSearching && (

package/src/navigation/styles/navigation-styles.js

@@ -14,8 +14,10 @@ import { isRTL } from '@wordpress/i18n';
 import { BASE, G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
+import { Heading } from '../../heading';
 import { reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
+import SearchControl from '../../search-control';
 
 export const NavigationUI = styled.div`
 	width: 100%;
@@ -67,20 +69,6 @@ export const MenuTitleUI = styled.div`
 	width: 100%;
 `;
 
-export const MenuTitleHeadingUI = styled( Text )`
-	align-items: center;
-	color: inherit;
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: ${ space( 2 ) };
-	padding: ${ () =>
-		isRTL()
-			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 3 ) }`
-			: `${ space( 1 ) } ${ space( 3 ) } ${ space( 1 ) } ${ space(
-					4
-			  ) }` };
-`;
-
 export const MenuTitleActionsUI = styled.span`
 	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
 
@@ -103,56 +91,45 @@ export const MenuTitleActionsUI = styled.span`
 	}
 `;
 
-export const MenuTitleSearchUI = styled.div`
-	padding: 0;
-	position: relative;
-
-	input {
-		height: ${ space( 9 ) }; // 36px, same height as MenuTitle
-		margin-bottom: ${ space( 2 ) };
-		padding-left: ${ space( 8 ) }; // Leave room for the search icon
-		padding-right: ${ space(
-			8
-		) }; // Leave room for the close search button
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
+export const MenuTitleSearchUI = styled( SearchControl )`
+	input[type='search'].components-search-control__input {
+		margin: 0;
+		background: #303030;
+		color: #fff;
+
+		&:focus {
+			background: #434343;
+			color: #fff;
+		}
+
+		&::placeholder {
+			color: rgba( 255, 255, 255, 0.6 );
 		}
 	}
 
-	> svg {
-		left: ${ space( 1 ) };
-		position: absolute;
-		top: 6px;
+	svg {
+		fill: white;
 	}
 
-	.components-button.is-small {
-		height: 30px;
+	.components-button.has-icon {
 		padding: 0;
-		position: absolute;
-		right: ${ space( 2 ) };
-		top: 3px;
-
-		&:active:not( :disabled ) {
-			background: none;
-		}
-		&:hover:not( :disabled ) {
-			box-shadow: none;
-		}
+		min-width: auto;
 	}
 `;
 
-export const GroupTitleUI = styled( Text )`
+export const GroupTitleUI = styled( Heading )`
+	min-height: ${ space( 12 ) };
+	align-items: center;
 	color: inherit;
-	margin-top: ${ space( 2 ) };
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: ${ space( 2 ) };
 	padding: ${ () =>
 		isRTL()
-			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0`
-			: `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` };
-	text-transform: uppercase;
+			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`
+			: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(
+					4
+			  ) }` };
 `;
 
 export const ItemBaseUI = styled.li`

package/src/popover/index.js

@@ -456,11 +456,11 @@ const Popover = (
 			defaultView.cancelAnimationFrame( rafId );
 
 			if ( anchorDocument && anchorDocument !== ownerDocument ) {
-				anchorDocument.defaultView.removeEventListener(
+				anchorDocument.defaultView?.removeEventListener(
 					'resize',
 					refresh
 				);
-				anchorDocument.defaultView.removeEventListener(
+				anchorDocument.defaultView?.removeEventListener(
 					'scroll',
 					refresh,
 					true

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

@@ -189,10 +189,13 @@ export const ThumbWrapper = styled.span`
 	user-select: none;
 	width: ${ thumbSize }px;
 	border-radius: 50%;
-	transform: translateX( 4.5px );
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };
+	${ rtl(
+		{ transform: 'translateX( 4.5px )' },
+		{ transform: 'translateX( -4.5px )' }
+	) };
 `;
 
 const thumbFocus = ( { isFocused } ) => {

package/src/resizable-box/style.scss

@@ -17,6 +17,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	}
 }
 
+// Make the image inside the resize to get the full width
+.components-resizable-box__container > img {
+	width: inherit;
+}
+
 // This is the "visible" resize handle - the circle part
 .components-resizable-box__handle::after {
 	display: block;

package/src/search-control/index.js

@@ -9,27 +9,60 @@ import classnames from 'classnames';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { Button } from '../';
 import BaseControl from '../base-control';
+import { useCombinedRef } from '../utils';
 
-function SearchControl( {
-	className,
-	onChange,
-	value,
-	label,
-	placeholder = __( 'Search' ),
-	hideLabelFromVision = true,
-	help,
-} ) {
+function SearchControl(
+	{
+		className,
+		onChange,
+		onKeyDown,
+		value,
+		label,
+		placeholder = __( 'Search' ),
+		hideLabelFromVision = true,
+		help,
+		onClose,
+	},
+	ref
+) {
 	const instanceId = useInstanceId( SearchControl );
-	const searchInput = useRef();
+	const searchInput = useCombinedRef( ref );
 	const id = `components-search-control-${ instanceId }`;
 
+	const renderRightButton = () => {
+		if ( onClose ) {
+			return (
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Close search' ) }
+					onClick={ onClose }
+				/>
+			);
+		}
+
+		if ( !! value ) {
+			return (
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Reset search' ) }
+					onClick={ () => {
+						onChange( '' );
+						searchInput.current.focus();
+					} }
+				/>
+			);
+		}
+
+		return <Icon icon={ search } />;
+	};
+
 	return (
 		<BaseControl
 			label={ label }
@@ -46,25 +79,16 @@ function SearchControl( {
 					type="search"
 					placeholder={ placeholder }
 					onChange={ ( event ) => onChange( event.target.value ) }
+					onKeyDown={ onKeyDown }
 					autoComplete="off"
 					value={ value || '' }
 				/>
 				<div className="components-search-control__icon">
-					{ !! value && (
-						<Button
-							icon={ closeSmall }
-							label={ __( 'Reset search' ) }
-							onClick={ () => {
-								onChange( '' );
-								searchInput.current.focus();
-							} }
-						/>
-					) }
-					{ ! value && <Icon icon={ search } /> }
+					{ renderRightButton() }
 				</div>
 			</div>
 		</BaseControl>
 	);
 }
 
-export default SearchControl;
+export default forwardRef( SearchControl );

package/src/style.scss

@@ -8,6 +8,7 @@
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
 @import "./color-list-picker/style.scss";
+@import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
 @import "./date-time/style.scss";

package/src/text/styles.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.black };
+	color: ${ COLORS.darkGray.primary };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

package/src/text/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -30,7 +30,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 
 exports[`Text snapshot tests should render correctly 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

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

@@ -39,8 +39,7 @@ export const _default = () => {
 					label="Tools Panel (default example)"
 					resetAll={ resetAll }
 				>
-					<ToolsPanelItem
-						className="single-column"
+					<SingleColumnItem
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
@@ -51,9 +50,8 @@ export const _default = () => {
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
 						/>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						className="single-column"
+					</SingleColumnItem>
+					<SingleColumnItem
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
@@ -64,7 +62,7 @@ export const _default = () => {
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
 						/>
-					</ToolsPanelItem>
+					</SingleColumnItem>
 					<ToolsPanelItem
 						hasValue={ () => !! minHeight }
 						label="Minimum height"
@@ -99,8 +97,7 @@ export const WithOptionalItemsPlusIcon = () => {
 					label="Tools Panel (optional items only)"
 					resetAll={ resetAll }
 				>
-					<ToolsPanelItem
-						className="single-column"
+					<SingleColumnItem
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
@@ -111,9 +108,8 @@ export const WithOptionalItemsPlusIcon = () => {
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
 						/>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						className="single-column"
+					</SingleColumnItem>
+					<SingleColumnItem
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
@@ -124,7 +120,7 @@ export const WithOptionalItemsPlusIcon = () => {
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
 						/>
-					</ToolsPanelItem>
+					</SingleColumnItem>
 				</ToolsPanel>
 			</Panel>
 		</PanelWrapperView>
@@ -161,8 +157,7 @@ export const WithSlotFillItems = () => {
 	return (
 		<SlotFillProvider>
 			<ToolsPanelItems>
-				<ToolsPanelItem
-					className="single-column"
+				<SingleColumnItem
 					hasValue={ () => !! width }
 					label="Injected Width"
 					onDeselect={ () => updateAttribute( 'width', undefined ) }
@@ -176,9 +171,8 @@ export const WithSlotFillItems = () => {
 							updateAttribute( 'width', next )
 						}
 					/>
-				</ToolsPanelItem>
-				<ToolsPanelItem
-					className="single-column"
+				</SingleColumnItem>
+				<SingleColumnItem
 					hasValue={ () => !! height }
 					label="Injected Height"
 					onDeselect={ () => updateAttribute( 'height', undefined ) }
@@ -192,7 +186,7 @@ export const WithSlotFillItems = () => {
 							updateAttribute( 'height', next )
 						}
 					/>
-				</ToolsPanelItem>
+				</SingleColumnItem>
 				<ToolsPanelItem
 					hasValue={ () => true }
 					label="Item for alternate panel"
@@ -224,6 +218,14 @@ export const WithSlotFillItems = () => {
 export { TypographyPanel } from './typography-panel';
 
 const PanelWrapperView = styled.div`
-	max-width: 270px;
+	max-width: 280px;
 	font-size: 13px;
+
+	.components-dropdown-menu__menu {
+		max-width: 220px;
+	}
+`;
+
+const SingleColumnItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
 `;