@wordpress/components 19.8.4 → 19.11.0

package/src/box-control/index.js

@@ -21,7 +21,6 @@ import AxialInputControls from './axial-input-controls';
 import BoxControlIcon from './icon';
 import { Text } from '../text';
 import LinkedButton from './linked-button';
-import Visualizer from './visualizer';
 import {
 	Root,
 	Header,
@@ -30,7 +29,6 @@ import {
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
-	DEFAULT_VISUALIZER_VALUES,
 	getInitialSide,
 	isValuesMixed,
 	isValuesDefined,
@@ -50,7 +48,6 @@ export default function BoxControl( {
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
-	onChangeShowVisualizer = noop,
 	label = __( 'Box Control' ),
 	values: valuesProp,
 	units,
@@ -103,14 +100,6 @@ export default function BoxControl( {
 		setIsDirty( true );
 	};
 
-	const handleOnHoverOn = ( next = {} ) => {
-		onChangeShowVisualizer( { ...DEFAULT_VISUALIZER_VALUES, ...next } );
-	};
-
-	const handleOnHoverOff = ( next = {} ) => {
-		onChangeShowVisualizer( { ...DEFAULT_VISUALIZER_VALUES, ...next } );
-	};
-
 	const handleOnReset = () => {
 		onChange( resetValues );
 		setValues( resetValues );
@@ -122,8 +111,6 @@ export default function BoxControl( {
 		...inputProps,
 		onChange: handleOnChange,
 		onFocus: handleOnFocus,
-		onHoverOn: handleOnHoverOn,
-		onHoverOff: handleOnHoverOff,
 		isLinked,
 		units,
 		selectedUnits,
@@ -189,5 +176,3 @@ export default function BoxControl( {
 		</Root>
 	);
 }
-
-BoxControl.__Visualizer = Visualizer;

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

@@ -11,7 +11,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import BoxControl from '../';
-import BoxControlVisualizer from '../visualizer';
 import { Flex, FlexBlock } from '../../flex';
 
 export default {
@@ -36,7 +35,6 @@ function DemoExample( {
 	splitOnAxis = false,
 } ) {
 	const [ values, setValues ] = useState( defaultValues );
-	const [ showVisualizer, setShowVisualizer ] = useState( {} );
 
 	return (
 		<Container align="top" gap={ 8 }>
@@ -47,31 +45,14 @@ function DemoExample( {
 						values={ values }
 						sides={ sides }
 						onChange={ setValues }
-						onChangeShowVisualizer={ setShowVisualizer }
 						splitOnAxis={ splitOnAxis }
 					/>
 				</Content>
 			</FlexBlock>
-			<FlexBlock>
-				<Content>
-					<BoxContainer>
-						<BoxControlVisualizer
-							showValues={ showVisualizer }
-							values={ values }
-						>
-							<Box />
-						</BoxControlVisualizer>
-					</BoxContainer>
-				</Content>
-			</FlexBlock>
 		</Container>
 	);
 }
 
-export const visualizer = () => {
-	return <DemoExample />;
-};
-
 export const arbitrarySides = () => {
 	return (
 		<DemoExample
@@ -108,16 +89,6 @@ const Container = styled( Flex )`
 	max-width: 780px;
 `;
 
-const BoxContainer = styled.div`
-	width: 300px;
-	height: 300px;
-`;
-
-const Box = styled.div`
-	background: #ddd;
-	height: 300px;
-`;
-
 const Content = styled.div`
 	padding: 20px;
 `;

package/src/box-control/utils.js

@@ -31,13 +31,6 @@ export const DEFAULT_VALUES = {
 	left: undefined,
 };
 
-export const DEFAULT_VISUALIZER_VALUES = {
-	top: false,
-	right: false,
-	bottom: false,
-	left: false,
-};
-
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 
 /**

package/src/button/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -140,8 +139,7 @@ export function Button( props, ref ) {
 			// There's a label and...
 			( !! label &&
 				// The children are empty and...
-				( ! children ||
-					( isArray( children ) && ! children.length ) ) &&
+				! children?.length &&
 				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
@@ -186,7 +184,7 @@ export function Button( props, ref ) {
 	return (
 		<>
 			<Tooltip
-				text={ describedBy ? describedBy : label }
+				text={ children?.length && describedBy ? describedBy : label }
 				shortcut={ shortcut }
 				position={ tooltipPosition }
 			>

package/src/button/index.native.js

@@ -9,11 +9,12 @@ import {
 	Platform,
 } from 'react-native';
 import { isArray } from 'lodash';
+import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement } from '@wordpress/element';
+import { Children, cloneElement, useCallback } from '@wordpress/element';
 import {
 	usePreferredColorScheme,
 	usePreferredColorSchemeStyle,
@@ -163,6 +164,15 @@ export function Button( props ) {
 		  } )
 		: null;
 
+	const longPressHandler = useCallback(
+		( { nativeEvent } ) => {
+			if ( nativeEvent.state === State.ACTIVE && onLongPress ) {
+				onLongPress();
+			}
+		},
+		[ onLongPress ]
+	);
+
 	const element = (
 		<TouchableOpacity
 			activeOpacity={ 0.7 }
@@ -172,28 +182,33 @@ export function Button( props ) {
 			accessibilityRole={ 'button' }
 			accessibilityHint={ hint }
 			onPress={ onClick }
-			onLongPress={ onLongPress }
 			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
 		>
-			<View style={ buttonViewStyle }>
-				<View style={ { flexDirection: 'row' } }>
-					{ newIcon }
-					{ newChildren }
-					{ subscript && (
-						<Text
-							style={
-								isPressed
-									? styles.subscriptActive
-									: subscriptInactive
-							}
-						>
-							{ subscript }
-						</Text>
-					) }
+			<LongPressGestureHandler
+				minDurationMs={ 500 }
+				maxDist={ 150 }
+				onHandlerStateChange={ longPressHandler }
+			>
+				<View style={ buttonViewStyle }>
+					<View style={ { flexDirection: 'row' } }>
+						{ newIcon }
+						{ newChildren }
+						{ subscript && (
+							<Text
+								style={
+									isPressed
+										? styles.subscriptActive
+										: subscriptInactive
+								}
+							>
+								{ subscript }
+							</Text>
+						) }
+					</View>
 				</View>
-			</View>
+			</LongPressGestureHandler>
 		</TouchableOpacity>
 	);
 

package/src/button/test/index.js

@@ -164,7 +164,7 @@ describe( 'Button', () => {
 			expect( buttonDescription ).toBe( 'Description text' );
 		} );
 
-		it( 'should populate tooltip with describedBy content', () => {
+		it( 'should populate tooltip with label content for buttons without visible labels (no children)', () => {
 			const buttonTooltip = shallow(
 				<Button
 					describedBy="Description text"
@@ -173,6 +173,21 @@ describe( 'Button', () => {
 				/>
 			).find( 'Tooltip' );
 
+			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Label' );
+		} );
+
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
+			const buttonTooltip = shallow(
+				<Button
+					label="Label"
+					describedBy="Description text"
+					icon={ plusCircle }
+					showTooltip
+				>
+					Children
+				</Button>
+			).find( 'Tooltip' );
+
 			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Description text' );
 		} );
 

package/src/button-group/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ButtonGroupProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+function UnforwardedButtonGroup(
+	props: WordPressComponentProps< ButtonGroupProps, 'div', false >,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	const { className, ...restProps } = props;
+	const classes = classnames( 'components-button-group', className );
+
+	return (
+		<div ref={ ref } role="group" className={ classes } { ...restProps } />
+	);
+}
+
+/**
+ * ButtonGroup can be used to group any related buttons together. To emphasize
+ * related buttons, a group should share a common container.
+ *
+ * ```jsx
+ * import { Button, ButtonGroup } from '@wordpress/components';
+ *
+ * const MyButtonGroup = () => (
+ *   <ButtonGroup>
+ *     <Button variant="primary">Button 1</Button>
+ *     <Button variant="primary">Button 2</Button>
+ *   </ButtonGroup>
+ * );
+ * ```
+ */
+export const ButtonGroup = forwardRef( UnforwardedButtonGroup );
+
+export default ButtonGroup;

package/src/button-group/stories/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '..';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof ButtonGroup > = {
+	title: 'Components/ButtonGroup',
+	component: ButtonGroup,
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
+	const style = { margin: '0 4px' };
+	return (
+		<ButtonGroup { ...args }>
+			<Button variant="primary" style={ style }>
+				Button 1
+			</Button>
+			<Button variant="primary" style={ style }>
+				Button 2
+			</Button>
+		</ButtonGroup>
+	);
+};
+
+export const Default: ComponentStory< typeof ButtonGroup > = Template.bind(
+	{}
+);

package/src/button-group/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ButtonGroupProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+};

package/src/checkbox-control/README.md

@@ -77,37 +77,39 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### label
+#### `label`: `string`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
 
--   Type: `String`
 -   Required: No
 
-#### help
+#### `help`: `string|WPElement`
 
 If this property is added, a help text will be generated using help property as the content.
 
--   Type: `String|WPElement`
 -   Required: No
 
-#### checked
+#### `checked`: `boolean`
 
 If checked is true the checkbox will be checked. If checked is false the checkbox will be unchecked.
 If no value is passed the checkbox will be unchecked.
 
--   Type: `Boolean`
 -   Required: No
 
-#### onChange
+#### `onChange`: `function`
 
 A function that receives the checked state (boolean) as input.
 
--   Type: `function`
 -   Required: Yes
 
+#### `indeterminate`: `boolean`
+
+If indeterminate is true the state of the checkbox will be indeterminate.
+
+-   Required: No
+
 ## Related components
 
 -   To select one option from a set, and you want to show all the available options at once, use the `RadioControl` component.

package/src/checkbox-control/{index.js → index.tsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ChangeEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -15,17 +16,48 @@ import { Icon, check, reset } from '@wordpress/icons';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import type { CheckboxControlProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+/**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
+ * ```jsx
+ * import { CheckboxControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCheckboxControl = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *   return (
+ *     <CheckboxControl
+ *       label="Is author"
+ *       help="Is the user a author or not?"
+ *       checked={ isChecked }
+ *       onChange={ setChecked }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function CheckboxControl(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to CheckboxControl.
+	props: Omit<
+		WordPressComponentProps< CheckboxControlProps, 'input', false >,
+		'ref'
+	>
+) {
+	const {
+		label,
+		className,
+		heading,
+		checked,
+		indeterminate,
+		help,
+		onChange,
+		...additionalProps
+	} = props;
 
-export default function CheckboxControl( {
-	label,
-	className,
-	heading,
-	checked,
-	indeterminate,
-	help,
-	onChange,
-	...props
-} ) {
 	if ( heading ) {
 		deprecated( '`heading` prop in `CheckboxControl`', {
 			alternative: 'a separate element to implement a heading',
@@ -38,9 +70,9 @@ export default function CheckboxControl( {
 		false
 	);
 
-	// Run the following callback everytime the `ref` (and the additional
+	// Run the following callback every time the `ref` (and the additional
 	// dependencies) change.
-	const ref = useRefEffect(
+	const ref = useRefEffect< HTMLInputElement >(
 		( node ) => {
 			if ( ! node ) {
 				return;
@@ -56,7 +88,8 @@ export default function CheckboxControl( {
 	);
 	const instanceId = useInstanceId( CheckboxControl );
 	const id = `inspector-checkbox-control-${ instanceId }`;
-	const onChangeValue = ( event ) => onChange( event.target.checked );
+	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
+		onChange( event.target.checked );
 
 	return (
 		<BaseControl
@@ -75,7 +108,7 @@ export default function CheckboxControl( {
 					onChange={ onChangeValue }
 					checked={ checked }
 					aria-describedby={ !! help ? id + '__help' : undefined }
-					{ ...props }
+					{ ...additionalProps }
 				/>
 				{ showIndeterminateIcon ? (
 					<Icon
@@ -101,3 +134,5 @@ export default function CheckboxControl( {
 		</BaseControl>
 	);
 }
+
+export default CheckboxControl;

package/src/checkbox-control/stories/{index.js → index.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { text } from '@storybook/addon-knobs';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -11,42 +11,60 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CheckboxControl from '../';
+import CheckboxControl from '..';
 
-export default {
-	title: 'Components/CheckboxControl',
+const meta: ComponentMeta< typeof CheckboxControl > = {
 	component: CheckboxControl,
+	title: 'Components/CheckboxControl',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		checked: {
+			control: { type: null },
+		},
+		help: { control: { type: 'text' } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: {
+			expanded: true,
+			exclude: [ 'heading' ],
+		},
+		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const CheckboxControlWithState = ( { checked, ...props } ) => {
-	const [ isChecked, setChecked ] = useState( checked );
+const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
 
 	return (
 		<CheckboxControl
-			{ ...props }
+			{ ...args }
 			checked={ isChecked }
-			onChange={ setChecked }
+			onChange={ ( v ) => {
+				setChecked( v );
+				onChange( v );
+			} }
 		/>
 	);
 };
 
-export const _default = () => {
-	const label = text( 'Label', 'Is author' );
-
-	return <CheckboxControlWithState label={ label } checked />;
+export const Default: ComponentStory<
+	typeof CheckboxControl
+> = DefaultTemplate.bind( {} );
+Default.args = {
+	label: 'Is author',
+	help: 'Is the user an author or not?',
 };
 
-export const all = () => {
-	const label = text( 'Label', 'Is author' );
-	const help = text( 'Help', 'Is the user an author or not?' );
-
-	return <CheckboxControlWithState label={ label } help={ help } checked />;
-};
-
-export const Indeterminate = () => {
+export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
 	const [ fruits, setFruits ] = useState( { apple: false, orange: false } );
 
 	const isAllChecked = Object.values( fruits ).every( Boolean );
@@ -56,15 +74,16 @@ export const Indeterminate = () => {
 	return (
 		<>
 			<CheckboxControl
-				label="Select All"
+				{ ...args }
 				checked={ isAllChecked }
 				indeterminate={ isIndeterminate }
-				onChange={ ( newValue ) =>
+				onChange={ ( v ) => {
 					setFruits( {
-						apple: newValue,
-						orange: newValue,
-					} )
-				}
+						apple: v,
+						orange: v,
+					} );
+					onChange( v );
+				} }
 			/>
 			<CheckboxControl
 				label="Apple"
@@ -89,3 +108,6 @@ export const Indeterminate = () => {
 		</>
 	);
 };
+Indeterminate.args = {
+	label: 'Select all',
+};

package/src/checkbox-control/types.ts

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type CheckboxControlProps = Pick< BaseControlProps, 'help' > & {
+	/**
+	 * A function that receives the checked state (boolean) as input.
+	 */
+	onChange: ( value: boolean ) => void;
+	/**
+	 * A label for the input field, that appears at the side of the checkbox.
+	 * The prop will be rendered as content a label element. If no prop is
+	 * passed an empty label is rendered.
+	 */
+	label?: string;
+	/**
+	 * If checked is true the checkbox will be checked. If checked is false the
+	 * checkbox will be unchecked. If no value is passed the checkbox will be
+	 * unchecked.
+	 */
+	checked?: boolean;
+	/**
+	 * If indeterminate is true the state of the checkbox will be indeterminate.
+	 */
+	indeterminate?: boolean;
+	/**
+	 * @deprecated
+	 */
+	heading?: ReactNode;
+};

package/src/circular-option-picker/index.js

@@ -87,8 +87,7 @@ function ButtonAction( { className, children, ...additionalProps } ) {
 				'components-circular-option-picker__clear',
 				className
 			) }
-			isSmall
-			variant="secondary"
+			variant="tertiary"
 			{ ...additionalProps }
 		>
 			{ children }