@wordpress/components 17.0.0 → 19.0.2

package/src/mobile/link-settings/link-settings-navigation.native.js

@@ -23,6 +23,7 @@ function LinkSettingsNavigation( props ) {
 			isVisible={ props.isVisible }
 			onClose={ props.onClose }
 			onDismiss={ props.onDismiss }
+			testID={ props.testID }
 			hideHeader
 			hasNavigation
 		>

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -20,17 +20,21 @@ const LinkSettingsScreen = ( props ) => {
 	const { inputValue = url } = route.params || {};
 
 	const onLinkCellPressed = () => {
-		navigation.navigate( 'linkPicker', { inputValue } );
+		if ( props.onLinkCellPressed ) {
+			props.onLinkCellPressed( { navigation } );
+		} else {
+			navigation.navigate( 'linkPicker', { inputValue } );
+		}
 	};
 
 	return useMemo( () => {
 		return (
 			<LinkSettings
+				{ ...props }
 				onLinkCellPressed={
 					props.hasPicker ? onLinkCellPressed : undefined
 				}
 				urlValue={ inputValue }
-				{ ...props }
 			/>
 		);
 	}, [ props, inputValue, navigation, route ] );

package/src/mobile/link-settings/style.native.scss

@@ -2,3 +2,20 @@
 	padding-left: 0;
 	padding-right: 0;
 }
+
+// used in both light and dark modes
+.placeholderTextColor {
+	color: #87a6bc;
+}
+
+.optionIcon {
+	color: $blue-50;
+}
+
+.optionIconDark {
+	color: $blue-30;
+}
+
+.unselectedOptionIcon {
+	opacity: 0;
+}

package/src/mobile/picker/index.android.js

@@ -71,7 +71,7 @@ export default class Picker extends Component {
 	}
 
 	render() {
-		const { hideCancelButton, title } = this.props;
+		const { hideCancelButton, title, testID } = this.props;
 		const { isVisible } = this.state;
 
 		return (
@@ -80,6 +80,7 @@ export default class Picker extends Component {
 				onClose={ this.onClose }
 				style={ { paddingBottom: 20 } }
 				hideHeader
+				testID={ testID }
 			>
 				<PanelBody title={ title } style={ styles.panelBody }>
 					{ this.getOptions() }

package/src/modal/README.md

@@ -247,6 +247,14 @@ If this property is added, it will an additional class name to the modal overlay
 -   Type: `String`
 -   Required: No
 
+#### isFullScreen
+
+This property when set to `true` will render a full screen modal.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To notify a user with a message of medium importance, use `Notice`.

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

@@ -7,15 +7,22 @@ import { boolean, text } from '@storybook/addon-knobs';
  * Internal dependencies
  */
 import Button from '../../button';
-import Dashicon from '../../dashicon';
+import Icon from '../../icon';
 import Modal from '../';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { wordpress } from '@wordpress/icons';
 
-export default { title: 'Components/Modal', component: Modal };
+export default {
+	title: 'Components/Modal',
+	component: Modal,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const ModalExample = ( props ) => {
 	const [ isOpen, setOpen ] = useState( false );
@@ -40,7 +47,7 @@ const ModalExample = ( props ) => {
 
 export const _default = () => {
 	const title = text( 'title', 'Title' );
-	const icon = text( 'icon', '' );
+	const showIcon = boolean( 'icon', false );
 	const isDismissible = boolean( 'isDismissible', true );
 	const focusOnMount = boolean( 'focusOnMount', true );
 	const shouldCloseOnEsc = boolean( 'shouldCloseOnEsc', true );
@@ -49,7 +56,7 @@ export const _default = () => {
 		true
 	);
 
-	const iconComponent = icon ? <Dashicon icon={ icon } /> : null;
+	const iconComponent = showIcon ? <Icon icon={ wordpress } /> : null;
 
 	const modalProps = {
 		icon: iconComponent,

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/navigable-container/container.js

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

package/src/navigable-container/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * Internal Dependencies
  */

package/src/navigable-container/menu.js

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

package/src/navigable-container/tabbable.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */

package/src/navigation/README.md

@@ -51,7 +51,7 @@ The structural CSS for the navigation block targets generic classnames across me
 - `.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-link__label` is applied to the innermost container around the menu item text label.
+- `.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/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/index.js

@@ -74,13 +74,15 @@ export default function NavigationMenu( props ) {
 					/>
 				) }
 
-				<NavigationMenuTitle
-					hasSearch={ hasSearch }
-					onSearch={ onSearch }
-					search={ search }
-					title={ title }
-					titleAction={ titleAction }
-				/>
+				{ title && (
+					<NavigationMenuTitle
+						hasSearch={ hasSearch }
+						onSearch={ onSearch }
+						search={ search }
+						title={ title }
+						titleAction={ titleAction }
+					/>
+				) }
 
 				<NavigableMenu>
 					<ul aria-labelledby={ menuTitleId }>

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

@@ -11,17 +11,17 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { G2, UI } from '../../utils/colors-values';
+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%;
-	background-color: ${ G2.darkGray.primary };
 	box-sizing: border-box;
-	color: #f0f0f0;
 	padding: 0 ${ space( 4 ) };
 	overflow: hidden;
 `;
@@ -47,16 +47,19 @@ export const MenuUI = styled.div`
 
 export const MenuBackButtonUI = styled( Button )`
 	&.is-tertiary {
-		color: ${ G2.lightGray.ui };
+		color: inherit;
+		opacity: 0.7;
 
 		&:hover:not( :disabled ) {
-			color: #ddd;
+			opacity: 1;
 			box-shadow: none;
+			color: inherit;
 		}
 
 		&:active:not( :disabled ) {
 			background: transparent;
-			color: #ddd;
+			opacity: 1;
+			color: inherit;
 		}
 	}
 `;
@@ -66,122 +69,103 @@ export const MenuTitleUI = styled.div`
 	width: 100%;
 `;
 
-export const MenuTitleHeadingUI = styled( Text )`
-	align-items: center;
-	color: ${ G2.gray[ 100 ] };
-	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
 
 	.components-button.is-small {
-		color: ${ G2.lightGray.ui };
+		color: inherit;
+		opacity: 0.7;
 		margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
 		padding: 0;
 
 		&:active:not( :disabled ) {
 			background: none;
-			color: ${ G2.gray[ 200 ] };
+			opacity: 1;
+			color: inherit;
 		}
 		&:hover:not( :disabled ) {
 			box-shadow: none;
-			color: ${ G2.gray[ 200 ] };
+			opacity: 1;
+			color: inherit;
 		}
 	}
 `;
 
-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 )`
-	margin-top: ${ space( 2 ) };
+export const GroupTitleUI = styled( Heading )`
+	min-height: ${ space( 12 ) };
+	align-items: center;
+	color: inherit;
+	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;
-	color: ${ G2.gray[ 100 ] };
+			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`
+			: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(
+					4
+			  ) }` };
 `;
 
 export const ItemBaseUI = styled.li`
 	border-radius: 2px;
-	color: ${ G2.lightGray.ui };
+	color: inherit;
 	margin-bottom: 0;
 
-	button,
-	a.components-button,
-	a {
+	> button,
+	> a.components-button,
+	> a {
 		width: 100%;
-		color: ${ G2.lightGray.ui };
+		color: inherit;
+		opacity: 0.7;
 		padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
 		${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }
 
 		&:hover,
 		&:focus:not( [aria-disabled='true'] ):active,
 		&:active:not( [aria-disabled='true'] ):active {
-			color: #ddd;
+			color: inherit;
+			opacity: 1;
 		}
 	}
 
 	&.is-active {
 		background-color: ${ UI.theme };
-		color: ${ UI.textDark };
+		color: ${ BASE.white };
 
-		button,
-		a {
-			color: ${ UI.textDark };
+		> button,
+		> a {
+			color: ${ BASE.white };
+			opacity: 1;
 		}
 	}
 
-	svg path {
+	> svg path {
 		color: ${ G2.lightGray.ui };
 	}
 `;
@@ -196,7 +180,8 @@ export const ItemUI = styled.div`
 	font-weight: 400;
 	line-height: 20px;
 	width: 100%;
-	color: ${ G2.lightGray.ui };
+	color: inherit;
+	opacity: 0.7;
 `;
 
 export const ItemBadgeUI = styled.span`