@wordpress/components 19.4.1-next.f435e9e01b.0 → 19.6.0

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

@@ -1,38 +1,81 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
 import BaseControl from '../';
+import Button from '../../button';
+import { Spacer } from '../../spacer';
 import TextareaControl from '../../textarea-control';
 
 export default {
 	title: 'Components/BaseControl',
 	component: BaseControl,
-	parameters: {
-		knobs: { disable: false },
-	},
+	subcomponents: { BaseControl: BaseControl.VisualLabel },
 };
 
-export const _default = () => {
-	const id = text( 'Id', 'textarea-1' );
-	const label = text( 'Label', 'Label text' );
-	const hideLabelFromVision = boolean( 'Hide label from vision', false );
-	const help = text( 'Help', 'Help text' );
-	const className = text( 'ClassName', '' );
-
+const BaseControlWithTextarea = ( { id, ...props } ) => {
 	return (
-		<BaseControl
-			id={ id }
-			label={ label }
-			help={ help }
-			hideLabelFromVision={ hideLabelFromVision }
-			className={ className }
-		>
+		<BaseControl id={ id } { ...props }>
 			<TextareaControl id={ id } />
 		</BaseControl>
 	);
 };
+
+export const Default = BaseControlWithTextarea.bind( {} );
+Default.args = {
+	id: 'textarea-1',
+	label: '',
+	hideLabelFromVision: false,
+	help: '',
+};
+
+export const WithLabel = BaseControlWithTextarea.bind( {} );
+WithLabel.args = {
+	...Default.args,
+	label: 'Label text',
+};
+
+export const WithHelpText = BaseControlWithTextarea.bind( {} );
+WithHelpText.args = {
+	...WithLabel.args,
+	help: 'Help text adds more explanation.',
+};
+
+export const WithVisualLabel = ( { visualLabelChildren, ...props } ) => {
+	return (
+		<>
+			<BaseControl { ...props }>
+				<div>
+					<BaseControl.VisualLabel>
+						{ visualLabelChildren }
+					</BaseControl.VisualLabel>
+				</div>
+				<Button variant="secondary">Select an author</Button>
+			</BaseControl>
+			<Spacer marginTop={ 12 }>
+				<p>
+					<code>BaseControl.VisualLabel</code> is used to render a
+					purely visual label inside a <code>BaseControl</code>{ ' ' }
+					component.
+				</p>
+				<p>
+					It should <strong>only</strong> be used in cases where the
+					children being rendered inside BaseControl are already
+					accessibly labeled, e.g., a button, but we want an
+					additional visual label for that section equivalent to the
+					labels BaseControl would otherwise use if the{ ' ' }
+					<code>label</code> prop was passed.
+				</p>
+			</Spacer>
+		</>
+	);
+};
+WithVisualLabel.args = {
+	...Default.args,
+	help: 'This button is already accessibly labeled.',
+	visualLabelChildren: 'Author',
+};
+WithVisualLabel.argTypes = {
+	visualLabelChildren: {
+		name: 'VisualLabel children',
+	},
+};

package/src/base-field/hook.js

@@ -31,7 +31,7 @@ export function useBaseField( props ) {
 		hasError = false,
 		isInline = false,
 		isSubtle = false,
-		// extract these because useFlex doesn't accept it
+		// Extract these because useFlex doesn't accept it.
 		defaultValue,
 		disabled,
 		...flexProps

package/src/box-control/icon.js

@@ -34,7 +34,7 @@ export default function BoxControlIcon( {
 	const bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );
 	const left = hasSide( 'left' ) || hasSide( 'horizontal' );
 
-	// Simulates SVG Icon scaling
+	// Simulates SVG Icon scaling.
 	const scale = size / BASE_ICON_SIZE;
 
 	return (

package/src/box-control/index.js

@@ -27,7 +27,7 @@ import {
 	Header,
 	HeaderControlWrapper,
 } from './styles/box-control-styles';
-import { parseUnit } from '../unit-control/utils';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
 	DEFAULT_VISUALIZER_VALUES,
@@ -79,10 +79,10 @@ export default function BoxControl( {
 	// only values from being saved while maintaining preexisting unit selection
 	// behaviour. Filtering CSS only values prevents invalid style values.
 	const [ selectedUnits, setSelectedUnits ] = useState( {
-		top: parseUnit( valuesProp?.top )[ 1 ],
-		right: parseUnit( valuesProp?.right )[ 1 ],
-		bottom: parseUnit( valuesProp?.bottom )[ 1 ],
-		left: parseUnit( valuesProp?.left )[ 1 ],
+		top: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],
+		right: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],
+		bottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],
+		left: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],
 	} );
 
 	const id = useUniqueId( idProp );

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

@@ -14,7 +14,10 @@ import BoxControl from '../';
 import BoxControlVisualizer from '../visualizer';
 import { Flex, FlexBlock } from '../../flex';
 
-export default { title: 'Components/BoxControl', component: BoxControl };
+export default {
+	title: 'Components (Experimental)/BoxControl',
+	component: BoxControl,
+};
 
 export const _default = () => {
 	return <BoxControl />;

package/src/box-control/test/index.js

@@ -99,7 +99,7 @@ describe( 'BoxControl', () => {
 							if ( next.top ) {
 								setState( next );
 							} else {
-								// This reverts it to being uncontrolled
+								// This reverts it to being uncontrolled.
 								setState( undefined );
 							}
 						} }
@@ -124,6 +124,26 @@ describe( 'BoxControl', () => {
 			expect( input.value ).toBe( '' );
 			expect( unitSelect.value ).toBe( 'px' );
 		} );
+
+		it( 'should persist cleared value when focus changes', () => {
+			render( <BoxControl /> );
+			const input = screen.getByLabelText( 'Box Control', {
+				selector: 'input',
+			} );
+			const unitSelect = screen.getByLabelText( 'Select unit' );
+
+			input.focus();
+			fireEvent.change( input, { target: { value: '100%' } } );
+			fireEvent.keyDown( input, { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '100' );
+			expect( unitSelect.value ).toBe( '%' );
+
+			fireEvent.change( input, { target: { value: '' } } );
+			fireEvent.blur( input );
+
+			expect( input.value ).toBe( '' );
+		} );
 	} );
 
 	describe( 'Unlinked Sides', () => {
@@ -195,15 +215,15 @@ describe( 'BoxControl', () => {
 
 	describe( 'Unit selections', () => {
 		it( 'should update unlinked controls unit selection based on all input control', () => {
-			// Render control
+			// Render control.
 			render( <BoxControl /> );
 
-			// Make unit selection on all input control
+			// Make unit selection on all input control.
 			const allUnitSelect = screen.getByLabelText( 'Select unit' );
 			allUnitSelect.focus();
 			fireEvent.change( allUnitSelect, { target: { value: 'em' } } );
 
-			// Unlink the controls
+			// Unlink the controls.
 			const unlink = screen.getByLabelText( /Unlink Sides/ );
 			fireEvent.click( unlink );
 
@@ -213,15 +233,15 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should use individual side attribute unit when available', () => {
-			// Render control
+			// Render control.
 			const { rerender } = render( <BoxControl /> );
 
-			// Make unit selection on all input control
+			// Make unit selection on all input control.
 			const allUnitSelect = screen.getByLabelText( 'Select unit' );
 			allUnitSelect.focus();
 			fireEvent.change( allUnitSelect, { target: { value: 'vw' } } );
 
-			// Unlink the controls
+			// Unlink the controls.
 			const unlink = screen.getByLabelText( /Unlink Sides/ );
 			fireEvent.click( unlink );
 

package/src/box-control/unit-control.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useHover } from 'react-use-gesture';
+import { useHover } from '@use-gesture/react';
 
 /**
  * Internal dependencies

package/src/box-control/utils.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { parseUnit } from '../unit-control/utils';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 
 export const LABELS = {
 	all: __( 'All' ),
@@ -25,10 +25,10 @@ export const LABELS = {
 };
 
 export const DEFAULT_VALUES = {
-	top: null,
-	right: null,
-	bottom: null,
-	left: null,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
 };
 
 export const DEFAULT_VISUALIZER_VALUES = {
@@ -67,9 +67,13 @@ function mode( arr ) {
  */
 export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	const sides = normalizeSides( availableSides );
-	const parsedValues = sides.map( ( side ) => parseUnit( values[ side ] ) );
-	const allValues = parsedValues.map( ( value ) => value[ 0 ] );
-	const allUnits = parsedValues.map( ( value ) => value[ 1 ] );
+	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
+		parseQuantityAndUnitFromRawValue( values[ side ] )
+	);
+	const allValues = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 0 ] ?? ''
+	);
+	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
 
 	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
 		? allValues[ 0 ]
@@ -85,7 +89,7 @@ export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	 * isNumber() is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
-	const allValue = isNumber( value ) ? `${ value }${ unit }` : null;
+	const allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;
 
 	return allValue;
 }

package/src/button/index.js

@@ -133,16 +133,16 @@ export function Button( props, ref ) {
 	// Should show the tooltip if...
 	const shouldShowTooltip =
 		! trulyDisabled &&
-		// an explicit tooltip is passed or...
+		// An explicit tooltip is passed or...
 		( ( showTooltip && label ) ||
-			// there's a shortcut or...
+			// There's a shortcut or...
 			shortcut ||
-			// there's a label and...
+			// There's a label and...
 			( !! label &&
-				// the children are empty and...
+				// The children are empty and...
 				( ! children ||
 					( isArray( children ) && ! children.length ) ) &&
-				// the tooltip is not explicitly disabled.
+				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
 	const descriptionId = describedBy ? instanceId : null;

package/src/button/index.native.js

@@ -55,7 +55,7 @@ const styles = StyleSheet.create( {
 		backgroundColor: '#2e4453',
 	},
 	subscriptInactive: {
-		color: '#7b9ab1', // $toolbar-button
+		color: '#7b9ab1', // $toolbar-button.
 		fontWeight: 'bold',
 		fontSize: 13,
 		alignSelf: 'flex-end',
@@ -63,7 +63,7 @@ const styles = StyleSheet.create( {
 		marginBottom,
 	},
 	subscriptInactiveDark: {
-		color: '#a7aaad', // $gray_20
+		color: '#a7aaad', // $gray_20.
 	},
 	subscriptActive: {
 		color: 'white',
@@ -144,16 +144,16 @@ export function Button( props ) {
 	// Should show the tooltip if...
 	const shouldShowTooltip =
 		! isDisabled &&
-		// an explicit tooltip is passed or...
+		// An explicit tooltip is passed or...
 		( ( showTooltip && label ) ||
-			// there's a shortcut or...
+			// There's a shortcut or...
 			shortcut ||
-			// there's a label and...
+			// There's a label and...
 			( !! label &&
-				// the children are empty and...
+				// The children are empty and...
 				( ! children ||
 					( isArray( children ) && ! children.length ) ) &&
-				// the tooltip is not explicitly disabled.
+				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
 	const newIcon = icon

package/src/button/style.scss

@@ -1,6 +1,7 @@
 .components-button {
 	display: inline-flex;
 	text-decoration: none;
+	font-family: inherit;
 	font-weight: normal;
 	font-size: $default-font-size;
 	margin: 0;

package/src/card/card/component.js

@@ -21,7 +21,7 @@ import { useCx } from '../../utils/hooks/use-cx';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                            forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
  */
 function Card( props, forwardedRef ) {
 	const {

package/src/card/card-body/component.js

@@ -8,7 +8,7 @@ import { useCardBody } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function CardBody( props, forwardedRef ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );

package/src/card/card-divider/component.js

@@ -7,7 +7,7 @@ import { useCardDivider } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').Ref<any>}                                                                              forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
  */
 function CardDivider( props, forwardedRef ) {
 	const dividerProps = useCardDivider( props );

package/src/card/card-footer/component.js

@@ -7,7 +7,7 @@ import { useCardFooter } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardFooter( props, forwardedRef ) {
 	const footerProps = useCardFooter( props );

package/src/card/card-header/component.js

@@ -7,7 +7,7 @@ import { useCardHeader } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardHeader( props, forwardedRef ) {
 	const headerProps = useCardHeader( props );

package/src/card/card-media/component.js

@@ -7,7 +7,7 @@ import { useCardMedia } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref<any>}                                                                           forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
  */
 function CardMedia( props, forwardedRef ) {
 	const cardMediaProps = useCardMedia( props );

package/src/color-palette/index.native.js

@@ -34,6 +34,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
+	enableCustomColor = true,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -46,6 +47,7 @@ function ColorPalette( {
 	shouldShowCustomVerticalSeparator = true,
 	customColorIndicatorStyles,
 	customIndicatorWrapperStyles,
+	label,
 } ) {
 	const customSwatchGradients = [
 		'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',
@@ -62,6 +64,7 @@ function ColorPalette( {
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
 	const defaultColors = uniq( map( defaultSettings.colors, 'color' ) );
+	const mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );
 	const defaultGradientColors = uniq(
 		map( defaultSettings.gradients, 'gradient' )
 	);
@@ -72,6 +75,7 @@ function ColorPalette( {
 		: customSwatchGradients;
 	const isCustomGradientColor = isGradientColor && isSelectedCustom();
 	const shouldShowCustomIndicator =
+		enableCustomColor &&
 		shouldShowCustomIndicatorOption &&
 		( ! isGradientSegment || isCustomGradientColor );
 
@@ -92,8 +96,8 @@ function ColorPalette( {
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && colors && colors.includes( activeColor );
-		if ( activeColor ) {
+			activeColor && mergedColors && mergedColors.includes( activeColor );
+		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;
 			}
@@ -206,93 +210,106 @@ function ColorPalette( {
 	];
 
 	return (
-		<ScrollView
-			contentContainerStyle={ styles.contentContainer }
-			style={ styles.container }
-			horizontal
-			showsHorizontalScrollIndicator={ false }
-			keyboardShouldPersistTaps="always"
-			disableScrollViewPanResponder
-			scrollEventThrottle={ 16 }
-			onScroll={ onScroll }
-			onContentSizeChange={ onContentSizeChange }
-			onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
-			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
-			ref={ scrollViewRef }
-			testID="color-palette"
-		>
-			{ shouldShowCustomIndicator && (
-				<View
-					style={ customIndicatorWrapperStyle }
-					onLayout={ onCustomIndicatorLayout }
-				>
-					{ shouldShowCustomVerticalSeparator && (
-						<View style={ verticalSeparatorStyle } />
-					) }
-					<TouchableWithoutFeedback
-						onPress={ onCustomPress }
-						accessibilityRole={ 'button' }
-						accessibilityState={ { selected: isSelectedCustom() } }
-						accessibilityHint={ accessibilityHint }
-					>
-						<View style={ customIndicatorWrapperStyle }>
-							<ColorIndicator
-								withCustomPicker={ ! isGradientSegment }
-								color={ customIndicatorColor }
-								isSelected={ isSelectedCustom() }
-								style={ [
-									styles.colorIndicator,
-									customColorIndicatorStyles,
-								] }
-							/>
-							{ shouldShowCustomLabel && (
-								<Text style={ customTextStyle }>
-									{ isIOS
-										? customText
-										: customText.toUpperCase() }
-								</Text>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-				</View>
+		<>
+			{ label && (
+				<Text accessibilityRole="header" style={ styles.headerText }>
+					{ label }
+				</Text>
 			) }
-			{ colors.map( ( color ) => {
-				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
-				return (
-					<View key={ `${ color }-${ isSelected( color ) }` }>
+
+			<ScrollView
+				contentContainerStyle={ styles.contentContainer }
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				keyboardShouldPersistTaps="always"
+				disableScrollViewPanResponder
+				scrollEventThrottle={ 16 }
+				onScroll={ onScroll }
+				onContentSizeChange={ onContentSizeChange }
+				onScrollBeginDrag={ () =>
+					shouldEnableBottomSheetScroll( false )
+				}
+				onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
+				ref={ scrollViewRef }
+				testID={ `color-palette${ label ? '-' + label : '' }` }
+			>
+				{ colors.map( ( color ) => {
+					const scaleValue = isSelected( color )
+						? scaleInterpolation
+						: 1;
+					return (
+						<View key={ `${ color }-${ isSelected( color ) }` }>
+							<TouchableWithoutFeedback
+								onPress={ () => onColorPress( color ) }
+								accessibilityRole={ 'button' }
+								accessibilityState={ {
+									selected: isSelected( color ),
+								} }
+								accessibilityHint={ color }
+								testID={ color }
+							>
+								<Animated.View
+									style={ {
+										transform: [
+											{
+												scale: scaleValue,
+											},
+										],
+									} }
+								>
+									<ColorIndicator
+										color={ color }
+										isSelected={ isSelected( color ) }
+										opacity={ opacity }
+										style={ [
+											styles.colorIndicator,
+											customColorIndicatorStyles,
+										] }
+									/>
+								</Animated.View>
+							</TouchableWithoutFeedback>
+						</View>
+					);
+				} ) }
+				{ shouldShowCustomIndicator && (
+					<View
+						style={ customIndicatorWrapperStyle }
+						onLayout={ onCustomIndicatorLayout }
+					>
+						{ shouldShowCustomVerticalSeparator && (
+							<View style={ verticalSeparatorStyle } />
+						) }
 						<TouchableWithoutFeedback
-							onPress={ () => onColorPress( color ) }
+							onPress={ onCustomPress }
 							accessibilityRole={ 'button' }
 							accessibilityState={ {
-								selected: isSelected( color ),
+								selected: isSelectedCustom(),
 							} }
-							accessibilityHint={ color }
-							testID={ color }
+							accessibilityHint={ accessibilityHint }
 						>
-							<Animated.View
-								style={ {
-									transform: [
-										{
-											scale: scaleValue,
-										},
-									],
-								} }
-							>
+							<View style={ customIndicatorWrapperStyle }>
 								<ColorIndicator
-									color={ color }
-									isSelected={ isSelected( color ) }
-									opacity={ opacity }
+									withCustomPicker={ ! isGradientSegment }
+									color={ customIndicatorColor }
+									isSelected={ isSelectedCustom() }
 									style={ [
 										styles.colorIndicator,
 										customColorIndicatorStyles,
 									] }
 								/>
-							</Animated.View>
+								{ shouldShowCustomLabel && (
+									<Text style={ customTextStyle }>
+										{ isIOS
+											? customText
+											: customText.toUpperCase() }
+									</Text>
+								) }
+							</View>
 						</TouchableWithoutFeedback>
 					</View>
-				);
-			} ) }
-		</ScrollView>
+				) }
+			</ScrollView>
+		</>
 	);
 }
 

package/src/color-palette/style.native.scss

@@ -1,12 +1,8 @@
 .contentContainer {
-	flex-direction: row-reverse;
+	flex-direction: row;
 	padding: 0 $grid-unit-20;
 }
 
-.container {
-	padding-bottom: $grid-unit-20;
-}
-
 .verticalSeparator {
 	border-width: $border-width * 0.5;
 	border-color: $light-gray-400;
@@ -42,3 +38,12 @@
 	letter-spacing: 1.25;
 	font-weight: 500;
 }
+
+.headerText {
+	color: $gray;
+	padding-top: 8;
+	font-size: 14;
+	font-weight: 500;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}