@wordpress/components 19.5.0 → 19.6.0

package/src/divider/stories/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../../text';
+import { Divider } from '..';
+
+const meta: ComponentMeta< typeof Divider > = {
+	component: Divider,
+	title: 'Components (Experimental)/Divider',
+	argTypes: {
+		margin: {
+			control: { type: 'number' },
+		},
+		marginStart: {
+			control: { type: 'number' },
+		},
+		marginEnd: {
+			control: { type: 'number' },
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const HorizontalTemplate: ComponentStory< typeof Divider > = ( args ) => (
+	<div>
+		<Text>Some text before the divider</Text>
+		<Divider { ...args } />
+		<Text>Some text after the divider</Text>
+	</div>
+);
+
+const VerticalTemplate: ComponentStory< typeof Divider > = ( args ) => {
+	const styles = {
+		display: 'flex',
+		alignItems: 'stretch',
+		justifyContent: 'start',
+	};
+
+	return (
+		<div style={ styles }>
+			<Text>Some text before the divider</Text>
+			<Divider { ...args } />
+			<Text>Some text after the divider</Text>
+		</div>
+	);
+};
+
+export const Horizontal: ComponentStory<
+	typeof Divider
+> = HorizontalTemplate.bind( {} );
+Horizontal.args = {
+	margin: 2,
+};
+
+export const Vertical: ComponentStory< typeof Divider > = VerticalTemplate.bind(
+	{}
+);
+Vertical.args = {
+	...Horizontal.args,
+	orientation: 'vertical',
+};

package/src/divider/types.ts

@@ -24,4 +24,6 @@ export interface OwnProps {
 	marginEnd?: SpaceInput;
 }
 
-export interface Props extends Omit< SeparatorProps, 'children' >, OwnProps {}
+export interface Props
+	extends Omit< SeparatorProps, 'children' | 'unstable_system' >,
+		OwnProps {}

package/src/draggable/index.js

@@ -143,7 +143,7 @@ export default function Draggable( {
 			y = elementTopOffset - clonePadding;
 			cloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;
 
-			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze
+			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
 			Array.from(
 				clone.querySelectorAll( 'iframe' )
 			).forEach( ( child ) => child.parentNode.removeChild( child ) );
@@ -162,7 +162,7 @@ export default function Draggable( {
 		 * @param {import('react').DragEvent<Element>} e
 		 */
 		function over( e ) {
-			//Skip doing any work if mouse has not moved.
+			// Skip doing any work if mouse has not moved.
 			if ( cursorLeft === e.clientX && cursorTop === e.clientY ) {
 				return;
 			}
@@ -199,7 +199,7 @@ export default function Draggable( {
 		}
 
 		cleanup.current = () => {
-			// Remove drag clone
+			// Remove drag clone.
 			if ( cloneWrapper && cloneWrapper.parentNode ) {
 				cloneWrapper.parentNode.removeChild( cloneWrapper );
 			}

package/src/draggable/stories/index.js

@@ -30,7 +30,7 @@ const Box = ( props ) => {
 const DraggalbeExample = () => {
 	const [ isDragging, setDragging ] = useState( false );
 
-	// Allow for the use of ID in the example
+	// Allow for the use of ID in the example.
 	/* eslint-disable no-restricted-syntax */
 	return (
 		<div>

package/src/flyout/flyout/README.md

@@ -9,7 +9,7 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components';
+import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';
 
 function Example() {
 	return (

package/src/flyout/test/index.js

@@ -44,7 +44,7 @@ describe( 'props', () => {
 
 		const flyouts = screen.getAllByRole( 'dialog' );
 		const trigger = screen.getByText( invisibleFlyoutTriggerContent );
-		// assert only the base flyout rendered
+		// Assert only the base flyout rendered.
 		expect( flyouts ).toHaveLength( 1 );
 		expect( flyouts[ 0 ].id ).toBe( baseFlyoutId );
 		expect( trigger ).not.toBeUndefined();

package/src/focal-point-picker/index.native.js

@@ -27,7 +27,7 @@ import { isVideoType } from './utils';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
-const FOCAL_POINT_UNITS = [ { default: '50', label: '%', value: '%' } ];
+const FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];
 
 function FocalPointPicker( props ) {
 	const { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;
@@ -53,7 +53,7 @@ function FocalPointPicker( props ) {
 		} );
 	}, [] );
 
-	// Animated coordinates for drag handle
+	// Animated coordinates for drag handle.
 	const pan = useRef( new Animated.ValueXY() ).current;
 
 	/**
@@ -69,7 +69,7 @@ function FocalPointPicker( props ) {
 		}
 	}, [ focalPoint, containerSize ] );
 
-	// Pan responder to manage drag handle interactivity
+	// Pan responder to manage drag handle interactivity.
 	const panResponder = useMemo(
 		() =>
 			PanResponder.create( {
@@ -88,17 +88,17 @@ function FocalPointPicker( props ) {
 					} = event.nativeEvent;
 					locationPageOffsetX = pageX - x;
 					locationPageOffsetY = pageY - y;
-					pan.setValue( { x, y } ); // Set cursor to tap location
-					pan.extractOffset(); // Set offset to current value
+					pan.setValue( { x, y } ); // Set cursor to tap location.
+					pan.extractOffset(); // Set offset to current value.
 				},
-				// Move cursor to match delta drag
+				// Move cursor to match delta drag.
 				onPanResponderMove: Animated.event(
 					[ null, { dx: pan.x, dy: pan.y } ],
 					{ useNativeDriver: false }
 				),
 				onPanResponderRelease: ( event ) => {
 					shouldEnableBottomSheetScroll( true );
-					pan.flattenOffset(); // Flatten offset into value
+					pan.flattenOffset(); // Flatten offset into value.
 					const { pageX, pageY } = event.nativeEvent;
 					// Ideally, x and y below are merely locationX and locationY from the
 					// nativeEvent. However, we are required to compute these relative

package/src/focal-point-picker/tooltip/index.native.js

@@ -79,7 +79,7 @@ function Label( { align, text, xOffset, yOffset } ) {
 		} ).start();
 	};
 
-	// Transforms rely upon onLayout to enable custom offsets additions
+	// Transforms rely upon onLayout to enable custom offsets additions.
 	let tooltipTransforms;
 	if ( dimensions ) {
 		tooltipTransforms = [

package/src/font-size-picker/README.md

@@ -100,8 +100,7 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 
 ### withReset
 
-If `true`, a reset button will be displayed alongside the predefined and custom
-font size fields.
+If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
 
 -   Type: `Boolean`
 -   Required: no

package/src/font-size-picker/index.js

@@ -231,7 +231,7 @@ function FontSizePicker(
 											);
 										}
 									} }
-									units={ hasUnits ? units : false }
+									units={ hasUnits ? units : [] }
 								/>
 							</FlexItem>
 							{ withReset && (

package/src/font-size-picker/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { number, object, boolean } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,14 +11,30 @@ import FontSizePicker from '../';
 export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
+	argTypes: {
+		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
+		fallbackFontSize: {
+			description:
+				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
+		},
+		withReset: {
+			description:
+				'If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.',
+			control: { type: 'boolean' },
+			table: {
+				type: 'boolean',
+				defaultValue: { summary: true },
+			},
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
 const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue || 16 );
-
+	const [ fontSize, setFontSize ] = useState( initialValue );
 	return (
 		<FontSizePicker
 			{ ...props }
@@ -33,57 +44,25 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
 	);
 };
 
-export const _default = () => {
-	const fontSizes = object( 'Font Sizes', [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	] );
-	return <FontSizePickerWithState fontSizes={ fontSizes } />;
-};
-
-export const withSlider = () => {
-	const fontSizes = object( 'Font Sizes', [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	] );
-	const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 );
+const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
 	return (
-		<FontSizePickerWithState
-			fontSizes={ fontSizes }
-			fallbackFontSize={ fallbackFontSize }
-			withSlider
-		/>
+		<>
+			<h2>Fewer font sizes</h2>
+			<FontSizePickerWithState
+				{ ...props }
+				fontSizes={ fontSizes.slice( 0, 4 ) }
+			/>
+
+			<h2>More font sizes</h2>
+			<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
+		</>
 	);
 };
 
-export const withoutCustomSizes = () => {
-	const fontSizes = object( 'Font Sizes', [
+export const Default = FontSizePickerWithState.bind( {} );
+Default.args = {
+	disableCustomFontSizes: false,
+	fontSizes: [
 		{
 			name: 'Small',
 			slug: 'small',
@@ -99,17 +78,36 @@ export const withoutCustomSizes = () => {
 			slug: 'big',
 			size: 26,
 		},
-	] );
-	return (
-		<FontSizePickerWithState
-			fontSizes={ fontSizes }
-			disableCustomFontSizes
-		/>
-	);
+	],
+	initialValue: 16,
+	withSlider: false,
+};
+
+export const WithSlider = FontSizePickerWithState.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	fallbackFontSize: 16,
+	initialValue: undefined,
+	withSlider: true,
 };
 
-export const differentControlBySize = () => {
-	const options = [
+/**
+ * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
+ * only be able to pick one of the predefined sizes passed in `fontSizes`.
+ */
+export const WithCustomSizesDisabled = FontSizePickerWithState.bind( {} );
+WithCustomSizesDisabled.args = {
+	...Default.args,
+	disableCustomFontSizes: true,
+};
+
+/**
+ * When there are more than 5 font size options, the UI is no longer a toggle group.
+ */
+export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
+WithMoreFontSizes.args = {
+	...Default.args,
+	fontSizes: [
 		{
 			name: 'Tiny',
 			slug: 'tiny',
@@ -140,29 +138,36 @@ export const differentControlBySize = () => {
 			slug: 'huge',
 			size: 36,
 		},
-	];
-	const optionsWithUnits = options.map( ( option ) => ( {
+	],
+	initialValue: 8,
+};
+
+/**
+ * When units like `px` are specified explicitly, it will be shown as a label hint.
+ */
+export const WithUnits = TwoFontSizePickersWithState.bind( {} );
+WithUnits.args = {
+	...WithMoreFontSizes.args,
+	fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
 		...option,
 		size: `${ option.size }px`,
-	} ) );
-	const showMoreFontSizes = boolean( 'Add more font sizes', false );
-	const addUnitsToSizes = boolean( 'Add units to font sizes', false );
-	const _options = addUnitsToSizes ? optionsWithUnits : options;
-	const fontSizes = _options.slice(
-		0,
-		showMoreFontSizes ? _options.length : 4
-	);
-	return (
-		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
-	);
+	} ) ),
+	initialValue: '8px',
 };
 
-export const withComplexCSSValues = () => {
-	const options = [
+/**
+ * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
+ * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
+ */
+export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
+WithComplexCSSValues.args = {
+	...Default.args,
+	fontSizes: [
 		{
 			name: 'Small',
 			slug: 'small',
-			size: '0.65rem',
+			// Adding just one complex css value is enough
+			size: 'clamp(1.75rem, 3vw, 2.25rem)',
 		},
 		{
 			name: 'Medium',
@@ -189,32 +194,6 @@ export const withComplexCSSValues = () => {
 			slug: 'huge',
 			size: '2.8rem',
 		},
-	];
-	const showMoreFontSizes = boolean( 'Add more font sizes', false );
-	const addComplexCssValues = boolean(
-		'Add some complex css values(calc, var, etc..)',
-		true
-	);
-
-	const _options = options.map( ( option, index ) => {
-		const _option = { ...option };
-		// Adding just one complex css value is enough (first element);
-		if ( addComplexCssValues && ! index ) {
-			_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
-		}
-		return _option;
-	} );
-
-	const fontSizes = _options.slice(
-		0,
-		showMoreFontSizes ? _options.length : 5
-	);
-	return (
-		<div style={ { maxWidth: '248px' } }>
-			<FontSizePickerWithState
-				fontSizes={ fontSizes }
-				initialValue={ '1.125rem' }
-			/>
-		</div>
-	);
+	],
+	initialValue: '1.125rem',
 };

package/src/font-size-picker/test/index.js

@@ -203,7 +203,6 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children ).toHaveLength( 2 );
 				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
 			} );
 			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
@@ -223,7 +222,6 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children ).toHaveLength( 2 );
 				expect( element.children[ 0 ].textContent ).toBe( '3' );
 			} );
 		} );

package/src/form-token-field/index.js

@@ -191,7 +191,7 @@ class FormTokenField extends Component {
 	onKeyPress( event ) {
 		let preventDefault = false;
 		switch ( event.charCode ) {
-			case 44: // comma
+			case 44: // Comma.
 				preventDefault = this.handleCommaKey();
 				break;
 			default:
@@ -294,7 +294,7 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: true,
 		} ) );
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleDownArrowKey() {
@@ -311,7 +311,7 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: true,
 		} ) );
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleEscapeKey( event ) {
@@ -321,7 +321,7 @@ class FormTokenField extends Component {
 			selectedSuggestionIndex: -1,
 			selectedSuggestionScroll: false,
 		} );
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	handleCommaKey() {
@@ -329,7 +329,7 @@ class FormTokenField extends Component {
 			this.addNewToken( this.state.incompleteTokenValue );
 		}
 
-		return true; // preventDefault
+		return true; // PreventDefault.
 	}
 
 	moveInputToIndex( index ) {
@@ -366,7 +366,7 @@ class FormTokenField extends Component {
 
 		if ( index < this.props.value.length ) {
 			this.deleteToken( this.props.value[ index ] );
-			// update input offset since it's the offset from the last token
+			// Update input offset since it's the offset from the last token.
 			this.moveInputToIndex( index );
 		}
 	}

package/src/form-token-field/style.scss

@@ -22,6 +22,7 @@
 	input[type="text"].components-form-token-field__input {
 		display: inline-block;
 		flex: 1;
+		font-family: inherit;
 		font-size: 16px;
 		width: 100%;
 		max-width: 100%;

package/src/form-token-field/suggestions-list.js

@@ -14,7 +14,7 @@ import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
 const emptyList = Object.freeze( [] );
 
 const handleMouseDown = ( e ) => {
-	// By preventing default here, we will not lose focus of <input> when clicking a suggestion
+	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
 };
 
@@ -34,7 +34,7 @@ function SuggestionsList( {
 	const listRef = useRefEffect(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
-			// when already expanded
+			// when already expanded.
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&

package/src/form-token-field/test/index.js

@@ -75,7 +75,7 @@ describe( 'FormTokenField', () => {
 
 		// This suggestion is part of a partial match; return up to three
 		// sections of the suggestion (before match, match, and after
-		// match)
+		// match).
 		const div = document.createElement( 'div' );
 		div.innerHTML = node.querySelector( 'span' ).outerHTML;
 		return map(
@@ -247,21 +247,21 @@ describe( 'FormTokenField', () => {
 				fixtures.matchingSuggestions.th
 			);
 			expect( getSelectedSuggestion() ).toBe( null );
-			sendKeyDown( keyCodes.downArrow ); // 'the'
+			sendKeyDown( keyCodes.downArrow ); // 'the'.
 			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'e' ] );
-			sendKeyDown( keyCodes.downArrow ); // 'that'
+			sendKeyDown( keyCodes.downArrow ); // 'that'.
 			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'at' ] );
 
 			const hoverSuggestion = wrapperElement().querySelectorAll(
 				'.components-form-token-field__suggestion'
-			)[ 3 ]; // 'with'
+			)[ 3 ]; // 'with'.
 			expect( getSuggestionNodeText( hoverSuggestion ) ).toEqual( [
 				'wi',
 				'th',
 			] );
 
-			// before sending a hover event, we need to wait for
-			// SuggestionList#_scrollingIntoView to become false
+			// Before sending a hover event, we need to wait for
+			// SuggestionList#_scrollingIntoView to become false.
 			act( () => {
 				jest.advanceTimersByTime( 100 );
 			} );

package/src/heading/component.tsx

@@ -10,7 +10,7 @@ import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
 import { useHeading, HeadingProps } from './hook';
 
-function Heading(
+function UnconnectedHeading(
 	props: WordPressComponentProps< HeadingProps, 'h1' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -24,13 +24,13 @@ function Heading(
  *
  * @example
  * ```jsx
- * import { Heading } from `@wordpress/components`
+ * import { __experimentalHeading as Heading } from "@wordpress/components";
  *
  * function Example() {
  *   return <Heading>Code is Poetry</Heading>;
  * }
  * ```
  */
-const ConnectedHeading = contextConnect( Heading, 'Heading' );
+export const Heading = contextConnect( UnconnectedHeading, 'Heading' );
 
-export default ConnectedHeading;
+export default Heading;

package/src/heading/hook.ts

@@ -63,7 +63,7 @@ export function useHeading(
 		'aria-level'?: number;
 	} = {};
 	if ( typeof as === 'string' && as[ 0 ] !== 'h' ) {
-		// if not a semantic `h` element, add a11y props:
+		// If not a semantic `h` element, add a11y props:
 		a11yProps.role = 'heading';
 		a11yProps[ 'aria-level' ] =
 			typeof level === 'string' ? parseInt( level ) : level;

package/src/heading/stories/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '..';
+
+const meta: ComponentMeta< typeof Heading > = {
+	component: Heading,
+	title: 'Components (Experimental)/Heading',
+	argTypes: {
+		adjustLineHeightForInnerControls: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+		color: { control: { type: 'color' } },
+		display: { control: { type: 'text' } },
+		letterSpacing: { control: { type: 'text' } },
+		lineHeight: { control: { type: 'text' } },
+		optimizeReadabilityFor: { control: { type: 'color' } },
+		variant: { control: { type: 'radio' }, options: [ 'muted' ] },
+		weight: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+export const Default: ComponentStory< typeof Heading > = ( props ) => (
+	<Heading { ...props } />
+);
+Default.args = {
+	children: 'Heading',
+};