@wordpress/components 18.0.0 → 19.0.3

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

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { blockSettingsScreens } from '@wordpress/block-editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import PanelBody from '../../panel/body';
+import BottomSheet from '../bottom-sheet';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const { inputValue = url, imageUrl, attachmentPageUrl, linkDestination } =
+		route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;

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

@@ -86,9 +86,9 @@ function LinkSettings( {
 	urlValue,
 	// Attributes properties
 	url,
-	label,
+	label = '',
 	linkTarget,
-	rel,
+	rel = '',
 } ) {
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
 	const [ labelInputValue, setLabelInputValue ] = useState( '' );
@@ -226,6 +226,7 @@ function LinkSettings( {
 						<BottomSheet.LinkCell
 							showIcon={ showIcon }
 							value={ url }
+							valueMask={ options.url.valueMask }
 							onPress={ onLinkCellPressed }
 						/>
 					) : (

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

@@ -16,7 +16,13 @@ import Modal from '../';
 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 );

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/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/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`