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

package/src/guide/stories/index.js

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

package/src/higher-order/with-focus-outside/index.js

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

package/src/icon/stories/index.js

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

package/src/index.js

@@ -47,6 +47,7 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
+export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';

package/src/input-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/InputControl',
 	component: InputControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -44,6 +44,7 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),

package/src/input-control/styles/input-control-styles.tsx

@@ -13,7 +13,7 @@ import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
-import type { LabelPosition } from '../types';
+import type { LabelPosition, Size } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -105,8 +105,6 @@ export const Container = styled.div< ContainerProps >`
 	${ containerWidthStyles }
 `;
 
-type Size = 'default' | 'small';
-
 type InputProps = {
 	disabled?: boolean;
 	inputSize?: Size;
@@ -126,6 +124,7 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
@@ -148,11 +147,22 @@ const sizeStyles = ( { inputSize: size }: InputProps ) => {
 			height: 30,
 			lineHeight: 1,
 			minHeight: 30,
+			paddingLeft: 8,
+			paddingRight: 8,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
+			paddingLeft: 8,
+			paddingRight: 8,
+		},
+		'__unstable-large': {
+			height: 40,
+			lineHeight: 1,
+			minHeight: 40,
+			paddingLeft: 16,
+			paddingRight: 16,
 		},
 	};
 
@@ -205,8 +215,6 @@ export const Input = styled.input< InputProps >`
 		display: block;
 		margin: 0;
 		outline: none;
-		padding-left: 8px;
-		padding-right: 8px;
 		width: 100%;
 
 		${ dragStyles }
@@ -315,6 +323,8 @@ export const Prefix = styled.span`
 `;
 
 export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
 	box-sizing: border-box;
-	display: block;
+	display: flex;
 `;

package/src/input-control/types.ts

@@ -23,12 +23,14 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
+export type Size = 'default' | 'small' | '__unstable-large';
+
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	hideLabelFromVision?: boolean;
 	isFocused: boolean;
 	labelPosition?: LabelPosition;
-	size?: 'default' | 'small';
+	size?: Size;
 }
 
 export type InputChangeCallback<

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

@@ -4,15 +4,20 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 /**
  * WordPress dependencies
  */
-import { typography } from '@wordpress/icons';
+import { typography, chevronRight } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
@@ -27,7 +32,7 @@ export default {
 	component: ItemGroup,
 	title: 'Components (Experimental)/ItemGroup',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -117,6 +122,58 @@ 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 = [
 		{
@@ -177,6 +234,31 @@ 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`
+-   Type: `string` or `object`
 -   Required: No
 
-Refer to documentation for [Shortcut's `shortcut` prop](/packages/components/src/shortcut/README.md#shortcut).
+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).
 
 ### `role`
 

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

@@ -16,16 +16,19 @@ 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 } from '../gridicons';
+import { posts, pages, empty, clipboard } 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':
@@ -36,7 +39,7 @@ const getSummaryForType = ( type ) => {
 };
 
 // we use some Cell styles here with a column flex-direction
-function LinkSuggestionItemCell( { suggestion, onLinkPicked } ) {
+function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 	const { title: contentTitle, url, type, isDirectEntry } = suggestion;
 	const title = isDirectEntry ? url : contentTitle;
 	const summary = isDirectEntry ? getSummaryForType( type ) : url;
@@ -58,6 +61,7 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked } ) {
 
 	return (
 		<Cell
+			{ ...props }
 			icon={ icons[ type ] || empty }
 			onPress={ pickLink }
 			separatorType={ 'none' }

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

@@ -28,6 +28,7 @@ const ColorSettingsMemo = memo(
 		gradientValue,
 		onGradientChange,
 		label,
+		hideNavigation,
 	} ) => {
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
@@ -44,6 +45,7 @@ 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: 22, bottom: 22, left: 22, right: 22 };
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -38,6 +38,7 @@ const PaletteScreen = () => {
 		onGradientChange,
 		colorValue,
 		defaultSettings,
+		hideNavigation = false,
 	} = route.params || {};
 	const { segments, isGradient } = colorsUtils;
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
@@ -164,10 +165,12 @@ const PaletteScreen = () => {
 	}
 	return (
 		<View>
-			<NavBar>
-				<NavBar.BackButton onPress={ navigation.goBack } />
-				<NavBar.Heading>{ label } </NavBar.Heading>
-			</NavBar>
+			{ ! hideNavigation && (
+				<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-items: flex-end;
+	align-self: flex-end;
 }
 
 .clearButton {

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

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

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

@@ -9,6 +9,9 @@ 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'
 );
@@ -21,15 +24,12 @@ 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,6 +42,7 @@
 	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 { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { Clipboard, SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet, Icon } from '@wordpress/components';
-import { getProtocol, prependHTTP } from '@wordpress/url';
+import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -47,12 +47,20 @@ 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, setValue ] = useState( initialValue );
+	const [ { value, clipboardUrl }, setValue ] = useState( {
+		value: initialValue,
+		clipboardUrl: '',
+	} );
 	const directEntry = createDirectEntry( value );
 
 	// the title of a direct entry is displayed as the raw input value, but if we
@@ -66,7 +74,7 @@ export const LinkPicker = ( {
 	};
 
 	const clear = () => {
-		setValue( '' );
+		setValue( { value: '', clipboardUrl } );
 	};
 
 	const omniCellStyle = usePreferredColorSchemeStyle(
@@ -79,6 +87,14 @@ 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>
@@ -96,7 +112,9 @@ export const LinkPicker = ( {
 					autoCapitalize="none"
 					autoCorrect={ false }
 					keyboardType="url"
-					onChangeValue={ setValue }
+					onChangeValue={ ( newValue ) => {
+						setValue( { value: newValue, clipboardUrl } );
+					} }
 					onSubmit={ onSubmit }
 					/* eslint-disable-next-line jsx-a11y/no-autofocus */
 					autoFocus
@@ -115,6 +133,22 @@ 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,6 +93,7 @@ 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 );
@@ -123,6 +124,10 @@ function LinkSettings( {
 
 	useEffect( () => {
 		const isSettingSheetOpen = isVisible || editorSidebarOpened;
+		if ( isSettingSheetOpen ) {
+			onCloseSettingsSheetConsumed.current = false;
+		}
+
 		if ( options.url.autoFill && isSettingSheetOpen && ! url ) {
 			getURLFromClipboard();
 		}
@@ -174,6 +179,12 @@ function LinkSettings( {
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
+		if ( onCloseSettingsSheetConsumed.current ) {
+			return;
+		}
+
+		onCloseSettingsSheetConsumed.current = true;
+
 		onSetAttributes();
 
 		if ( onClose ) {