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

package/src/item-group/stories/index.js

@@ -4,20 +4,15 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 
 /**
  * WordPress dependencies
  */
-import { typography, chevronRight } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
+import { typography } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
@@ -32,7 +27,7 @@ export default {
 	component: ItemGroup,
 	title: 'Components (Experimental)/ItemGroup',
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 
@@ -122,58 +117,6 @@ const SimpleColorSwatch = ( { color, style } ) => (
 	/>
 );
 
-const ChevronWrapper = styled( FlexItem )`
-	display: block;
-	fill: currentColor;
-	transition: transform 0.15s ease-out;
-`;
-
-const ItemWithChevron = ( {
-	children,
-	className,
-	alwaysVisible,
-	...otherProps
-} ) => {
-	const isRtlLayout = isRTL();
-	const cx = useCx();
-
-	const appearingChevron = css`
-		&:not( :hover ):not( :focus ) ${ ChevronWrapper } {
-			display: none;
-		}
-	`;
-
-	const itemClassName = useMemo(
-		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className ]
-	);
-
-	const chevronIconClassName = useMemo(
-		() =>
-			cx( css`
-				display: block;
-				fill: currentColor;
-				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
-			` ),
-		[ isRtlLayout ]
-	);
-
-	return (
-		<Item { ...otherProps } className={ itemClassName }>
-			<HStack justify="flex-start">
-				<FlexBlock>{ children }</FlexBlock>
-				<ChevronWrapper>
-					<Icon
-						className={ chevronIconClassName }
-						icon={ chevronRight }
-						size={ 24 }
-					/>
-				</ChevronWrapper>
-			</HStack>
-		</Item>
-	);
-};
-
 export const complexLayouts = () => {
 	const colors = [
 		{
@@ -234,31 +177,6 @@ export const complexLayouts = () => {
 					</FlexItem>
 				</HStack>
 			</Item>
-
-			<ItemWithChevron onClick={ () => alert( 'Single color setting' ) }>
-				<HStack justify="flex-start">
-					<SimpleColorSwatch
-						color="#2FB63F"
-						style={ { flexShrink: 0 } }
-					/>
-
-					<Truncate>Chevron on hover and focus</Truncate>
-				</HStack>
-			</ItemWithChevron>
-
-			<ItemWithChevron
-				alwaysVisible
-				onClick={ () => alert( 'Single color setting' ) }
-			>
-				<HStack justify="flex-start">
-					<SimpleColorSwatch
-						color="#D175D0"
-						style={ { flexShrink: 0 } }
-					/>
-
-					<Truncate>Chevron always visible</Truncate>
-				</HStack>
-			</ItemWithChevron>
 		</ItemGroup>
 	);
 };

package/src/menu-item/README.md

@@ -67,10 +67,10 @@ Whether or not the menu item is currently selected.
 
 ### `shortcut`
 
--   Type: `string` or `object`
+-   Type: `string`
 -   Required: No
 
-If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display` (string) and `ariaLabel` (string).
+Refer to documentation for [Shortcut's `shortcut` prop](/packages/components/src/shortcut/README.md#shortcut).
 
 ### `role`
 

package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js

@@ -16,19 +16,16 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import cellStyles from './styles.scss';
 import suggestionStyles from './link-suggestion-styles.scss';
-import { posts, pages, empty, clipboard } from '../gridicons';
+import { posts, pages, empty } from '../gridicons';
 
 const icons = {
 	URL: globe,
-	clipboard,
 	post: posts,
 	page: pages,
 };
 
 const getSummaryForType = ( type ) => {
 	switch ( type ) {
-		case 'clipboard':
-			return __( 'From clipboard' );
 		case 'mailto':
 			return __( 'Add this email link' );
 		case 'tel':
@@ -39,7 +36,7 @@ const getSummaryForType = ( type ) => {
 };
 
 // we use some Cell styles here with a column flex-direction
-function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
+function LinkSuggestionItemCell( { suggestion, onLinkPicked } ) {
 	const { title: contentTitle, url, type, isDirectEntry } = suggestion;
 	const title = isDirectEntry ? url : contentTitle;
 	const summary = isDirectEntry ? getSummaryForType( type ) : url;
@@ -61,7 +58,6 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 
 	return (
 		<Cell
-			{ ...props }
 			icon={ icons[ type ] || empty }
 			onPress={ pickLink }
 			separatorType={ 'none' }

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

@@ -28,7 +28,6 @@ const ColorSettingsMemo = memo(
 		gradientValue,
 		onGradientChange,
 		label,
-		hideNavigation,
 	} ) => {
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
@@ -45,7 +44,6 @@ const ColorSettingsMemo = memo(
 						gradientValue,
 						onGradientChange,
 						label,
-						hideNavigation,
 					} }
 				>
 					<PaletteScreen />

package/src/mobile/color-settings/palette.screen.native.js

@@ -26,7 +26,7 @@ import { colorsUtils } from './utils';
 
 import styles from './style.scss';
 
-const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+const HIT_SLOP = { top: 22, bottom: 22, left: 22, right: 22 };
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -38,7 +38,6 @@ const PaletteScreen = () => {
 		onGradientChange,
 		colorValue,
 		defaultSettings,
-		hideNavigation = false,
 	} = route.params || {};
 	const { segments, isGradient } = colorsUtils;
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
@@ -165,12 +164,10 @@ const PaletteScreen = () => {
 	}
 	return (
 		<View>
-			{ ! hideNavigation && (
-				<NavBar>
-					<NavBar.BackButton onPress={ navigation.goBack } />
-					<NavBar.Heading>{ label } </NavBar.Heading>
-				</NavBar>
-			) }
+			<NavBar>
+				<NavBar.BackButton onPress={ navigation.goBack } />
+				<NavBar.Heading>{ label } </NavBar.Heading>
+			</NavBar>
 			<ColorPalette
 				setColor={ setColor }
 				activeColor={ currentValue }

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

@@ -45,7 +45,7 @@
 }
 
 .clearButtonContainer {
-	align-self: flex-end;
+	align-items: flex-end;
 }
 
 .clearButton {

package/src/mobile/global-styles-context/utils.native.js

@@ -162,7 +162,7 @@ export function getBlockTypography(
 		}
 	}
 
-	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
+	if ( blockStyleAttributes?.fontSize ) {
 		const mappedFontSize = find( fontSizes, {
 			slug: blockStyleAttributes?.fontSize,
 		} );

package/src/mobile/gridicons/index.native.js

@@ -9,9 +9,6 @@ const fromPathData24x24 = ( pathData ) => (
 	</SVG>
 );
 
-export const clipboard = fromPathData24x24(
-	'M16 18H8v-2h8v2zm0-6H8v2h8v-2zm2-9h-2v2h2v15H6V5h2V3H6a2 2 0 00-2 2v15a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zm-4 2V4a2 2 0 10-4 0v1a2 2 0 00-2 2v1h8V7a2 2 0 00-2-2z'
-);
 export const posts = fromPathData24x24(
 	'M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z'
 );
@@ -24,12 +21,15 @@ export const refresh = fromPathData24x24(
 export const noticeOutline = fromPathData24x24(
 	'M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z'
 );
+
 export const empty = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
 );
+
 export const search = fromPathData24x24(
 	'M21,19l-5.154-5.154C16.574,12.742,17,11.421,17,10c0-3.866-3.134-7-7-7s-7,3.134-7,7c0,3.866,3.134,7,7,7 c1.421,0,2.742-0.426,3.846-1.154L19,21L21,19z M5,10c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S5,12.757,5,10z'
 );
+
 export default {
 	empty,
 	posts,

package/src/mobile/inserter-button/style.native.scss

@@ -42,7 +42,6 @@
 	padding-top: 4;
 	padding-bottom: 0;
 	justify-content: center;
-	text-align: center;
 	font-size: 12;
 	color: $gray-dark;
 }

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

@@ -1,16 +1,16 @@
 /**
  * External dependencies
  */
-import { Clipboard, SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { BottomSheet, Icon } from '@wordpress/components';
-import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
+import { getProtocol, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -47,20 +47,12 @@ export const createDirectEntry = ( value ) => {
 	};
 };
 
-const getURLFromClipboard = async () => {
-	const text = await Clipboard.getString();
-	return !! text && isURL( text ) ? text : '';
-};
-
 export const LinkPicker = ( {
 	value: initialValue,
 	onLinkPicked,
 	onCancel: cancel,
 } ) => {
-	const [ { value, clipboardUrl }, setValue ] = useState( {
-		value: initialValue,
-		clipboardUrl: '',
-	} );
+	const [ value, setValue ] = useState( initialValue );
 	const directEntry = createDirectEntry( value );
 
 	// the title of a direct entry is displayed as the raw input value, but if we
@@ -74,7 +66,7 @@ export const LinkPicker = ( {
 	};
 
 	const clear = () => {
-		setValue( { value: '', clipboardUrl } );
+		setValue( '' );
 	};
 
 	const omniCellStyle = usePreferredColorSchemeStyle(
@@ -87,14 +79,6 @@ export const LinkPicker = ( {
 		styles.iconDark
 	);
 
-	useEffect( () => {
-		getURLFromClipboard()
-			.then( ( url ) => setValue( { value, clipboardUrl: url } ) )
-			.catch( () => setValue( { value, clipboardUrl: '' } ) );
-	}, [] );
-
-	// TODO: Localize the accessibility label.
-	// TODO: Decide on if `LinkSuggestionItemCell` with `isDirectEntry` makes sense.
 	return (
 		<SafeAreaView style={ styles.safeArea }>
 			<NavBar>
@@ -112,9 +96,7 @@ export const LinkPicker = ( {
 					autoCapitalize="none"
 					autoCorrect={ false }
 					keyboardType="url"
-					onChangeValue={ ( newValue ) => {
-						setValue( { value: newValue, clipboardUrl } );
-					} }
+					onChangeValue={ setValue }
 					onSubmit={ onSubmit }
 					/* eslint-disable-next-line jsx-a11y/no-autofocus */
 					autoFocus
@@ -133,22 +115,6 @@ export const LinkPicker = ( {
 						</TouchableOpacity>
 					) }
 				</BottomSheet.Cell>
-				{ !! clipboardUrl && clipboardUrl !== value && (
-					<BottomSheet.LinkSuggestionItemCell
-						accessible
-						accessibilityLabel={ sprintf(
-							/* translators: Copy URL from the clipboard, https://sample.url */
-							__( 'Copy URL from the clipboard, %s' ),
-							clipboardUrl
-						) }
-						suggestion={ {
-							type: 'clipboard',
-							url: clipboardUrl,
-							isDirectEntry: true,
-						} }
-						onLinkPicked={ pickLink }
-					/>
-				) }
 				{ !! value && (
 					<LinkPickerResults
 						query={ value }

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

@@ -93,7 +93,6 @@ function LinkSettings( {
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
 	const [ labelInputValue, setLabelInputValue ] = useState( '' );
 	const [ linkRelInputValue, setLinkRelInputValue ] = useState( '' );
-	const onCloseSettingsSheetConsumed = useRef( false );
 	const prevEditorSidebarOpenedRef = useRef();
 
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
@@ -124,10 +123,6 @@ function LinkSettings( {
 
 	useEffect( () => {
 		const isSettingSheetOpen = isVisible || editorSidebarOpened;
-		if ( isSettingSheetOpen ) {
-			onCloseSettingsSheetConsumed.current = false;
-		}
-
 		if ( options.url.autoFill && isSettingSheetOpen && ! url ) {
 			getURLFromClipboard();
 		}
@@ -179,12 +174,6 @@ function LinkSettings( {
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
-		if ( onCloseSettingsSheetConsumed.current ) {
-			return;
-		}
-
-		onCloseSettingsSheetConsumed.current = true;
-
 		onSetAttributes();
 
 		if ( onClose ) {

package/src/modal/README.md

@@ -255,16 +255,6 @@ This property when set to `true` will render a full screen modal.
 -   Required: No
 -   Default: `false`
 
-#### __experimentalHideHeader
-
-When set to `true`, the Modal's header (including the icon, title and close button) will not be rendered.
-
-*Warning*: This property is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-
--   Type: `boolean`
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To notify a user with a message of medium importance, use `Notice`.

package/src/modal/aria-helper.js

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

package/src/modal/index.js

@@ -1,5 +1,3 @@
-//@ts-nocheck
-
 /**
  * External dependencies
  */
@@ -8,12 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	createPortal,
-	useEffect,
-	useRef,
-	forwardRef,
-} from '@wordpress/element';
+import { createPortal, useEffect, useRef } from '@wordpress/element';
 import {
 	useInstanceId,
 	useFocusReturn,
@@ -37,34 +30,31 @@ import StyleProvider from '../style-provider';
 // Used to count the number of open modals.
 let openModalCount = 0;
 
-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;
-
+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,
+} ) {
 	const ref = useRef();
 	const instanceId = useInstanceId( Modal );
 	const headingId = title
@@ -116,7 +106,7 @@ function Modal( props, forwardedRef ) {
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
+			ref={ ref }
 			className={ classnames(
 				'components-modal__screen-overlay',
 				overlayClassName
@@ -149,43 +139,38 @@ function Modal( props, forwardedRef ) {
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ classnames( 'components-modal__content', {
-							'hide-header': __experimentalHideHeader,
-						} ) }
+						className={ 'components-modal__content' }
 						role="document"
 					>
-						{ ! __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 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>
 						{ children }
 					</div>
 				</div>
@@ -194,5 +179,3 @@ function Modal( props, forwardedRef ) {
 		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: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 
@@ -55,10 +55,6 @@ export const _default = () => {
 		'shouldCloseOnClickOutside',
 		true
 	);
-	const __experimentalHideHeader = boolean(
-		'__experimentalHideHeader',
-		false
-	);
 
 	const iconComponent = showIcon ? <Icon icon={ wordpress } /> : null;
 
@@ -69,7 +65,6 @@ export const _default = () => {
 		shouldCloseOnEsc,
 		shouldCloseOnClickOutside,
 		title,
-		__experimentalHideHeader,
 	};
 
 	return <ModalExample { ...modalProps } />;

package/src/modal/style.scss

@@ -126,13 +126,4 @@
 		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,15 +46,4 @@ 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,6 +44,15 @@ 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