@wordpress/components 18.0.0 → 19.0.3

package/src/tools-panel/tools-panel-header/component.tsx

@@ -7,8 +7,8 @@ import type { Ref } from 'react';
 /**
  * WordPress dependencies
  */
-import { check, reset, moreVertical } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
+import { check, reset, moreVertical, plus } from '@wordpress/icons';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -16,6 +16,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import DropdownMenu from '../../dropdown-menu';
 import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
+import { HStack } from '../../h-stack';
+import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import type {
@@ -116,8 +118,10 @@ const ToolsPanelHeader = (
 	forwardedRef: Ref< any >
 ) => {
 	const {
+		areAllOptionalControlsHidden,
 		dropdownMenuClassName,
 		hasMenuItems,
+		headingClassName,
 		label: labelText,
 		menuItems,
 		resetAll,
@@ -131,15 +135,25 @@ const ToolsPanelHeader = (
 
 	const defaultItems = Object.entries( menuItems?.default || {} );
 	const optionalItems = Object.entries( menuItems?.optional || {} );
+	const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;
+	const dropDownMenuLabelText = areAllOptionalControlsHidden
+		? _x(
+				'View and add options',
+				'Button label to reveal tool panel options'
+		  )
+		: _x( 'View options', 'Button label to reveal tool panel options' );
 
 	return (
-		<h2 { ...headerProps } ref={ forwardedRef }>
-			{ labelText }
+		<HStack { ...headerProps } ref={ forwardedRef }>
+			<Heading level={ 2 } className={ headingClassName }>
+				{ labelText }
+			</Heading>
 			{ hasMenuItems && (
 				<DropdownMenu
-					icon={ moreVertical }
-					label={ labelText }
+					icon={ dropDownMenuIcon }
+					label={ dropDownMenuLabelText }
 					menuProps={ { className: dropdownMenuClassName } }
+					toggleProps={ { isSmall: true } }
 				>
 					{ ( { onClose = noop } ) => (
 						<>
@@ -168,7 +182,7 @@ const ToolsPanelHeader = (
 					) }
 				</DropdownMenu>
 			) }
-		</h2>
+		</HStack>
 	);
 };
 

package/src/tools-panel/tools-panel-header/hook.ts

@@ -29,12 +29,22 @@ export function useToolsPanelHeader(
 		return cx( styles.DropdownMenu );
 	}, [] );
 
-	const { menuItems, hasMenuItems } = useToolsPanelContext();
+	const headingClassName = useMemo( () => {
+		return cx( styles.ToolsPanelHeading );
+	}, [] );
+
+	const {
+		menuItems,
+		hasMenuItems,
+		areAllOptionalControlsHidden,
+	} = useToolsPanelContext();
 
 	return {
 		...otherProps,
+		areAllOptionalControlsHidden,
 		dropdownMenuClassName,
 		hasMenuItems,
+		headingClassName,
 		menuItems,
 		className: classes,
 	};

package/src/tools-panel/tools-panel-item/component.tsx

@@ -18,12 +18,17 @@ const ToolsPanelItem = (
 	props: WordPressComponentProps< ToolsPanelItemProps, 'div' >,
 	forwardedRef: Ref< any >
 ) => {
-	const { children, isShown, ...toolsPanelItemProps } = useToolsPanelItem(
-		props
-	);
+	const {
+		children,
+		isShown,
+		shouldRenderPlaceholder,
+		...toolsPanelItemProps
+	} = useToolsPanelItem( props );
 
 	if ( ! isShown ) {
-		return null;
+		return shouldRenderPlaceholder ? (
+			<View { ...toolsPanelItemProps } ref={ forwardedRef } />
+		) : null;
 	}
 
 	return (

package/src/tools-panel/tools-panel-item/hook.ts

@@ -28,11 +28,6 @@ export function useToolsPanelItem(
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanelItem' );
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.ToolsPanelItem, className );
-	}, [ className ] );
-
 	const {
 		panelId: currentPanelId,
 		menuItems,
@@ -40,6 +35,7 @@ export function useToolsPanelItem(
 		deregisterPanelItem,
 		flagItemCustomization,
 		isResetting,
+		shouldRenderPlaceholderItems: shouldRenderPlaceholder,
 	} = useToolsPanelContext();
 
 	const hasValueCallback = useCallback( hasValue, [ panelId ] );
@@ -115,9 +111,19 @@ export function useToolsPanelItem(
 		? menuItems?.[ menuGroup ]?.[ label ] !== undefined
 		: isMenuItemChecked;
 
+	const cx = useCx();
+	const classes = useMemo( () => {
+		const placeholderStyle =
+			shouldRenderPlaceholder &&
+			! isShown &&
+			styles.ToolsPanelItemPlaceholder;
+		return cx( styles.ToolsPanelItem, placeholderStyle, className );
+	}, [ isShown, shouldRenderPlaceholder, className ] );
+
 	return {
 		...otherProps,
 		isShown,
+		shouldRenderPlaceholder,
 		className: classes,
 	};
 }

package/src/tools-panel/types.ts

@@ -12,6 +12,11 @@ export type ToolsPanelProps = {
 	 * The child elements.
 	 */
 	children: ReactNode;
+	/**
+	 * Flags that the items in this ToolsPanel will be contained within an inner
+	 * wrapper element allowing the panel to lay them out accordingly.
+	 */
+	hasInnerWrapper: boolean;
 	/**
 	 * Text to be displayed within the panel's header and as the `aria-label`
 	 * for the panel's dropdown menu.
@@ -28,6 +33,11 @@ export type ToolsPanelProps = {
 	 * passed through to the panel's header component.
 	 */
 	resetAll: ResetAll;
+	/**
+	 * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
+	 * placeholder content instead of null when they are toggled off and hidden.
+	 */
+	shouldRenderPlaceholderItems: boolean;
 };
 
 export type ToolsPanelHeaderProps = {
@@ -116,6 +126,8 @@ export type ToolsPanelContext = {
 	deregisterPanelItem: ( label: string ) => void;
 	flagItemCustomization: ( label: string ) => void;
 	isResetting: boolean;
+	shouldRenderPlaceholderItems: boolean;
+	areAllOptionalControlsHidden: boolean;
 };
 
 export type ToolsPanelControlsGroupProps = {

package/src/tooltip/index.js

@@ -38,7 +38,6 @@ const getDisabledElement = ( { eventHandlers, child, childrenWithPopover } ) =>
 			{ cloneElement( child, {
 				children: childrenWithPopover,
 			} ) }
-			,
 		</span>,
 		eventHandlers
 	);
@@ -82,6 +81,12 @@ const emitToChild = ( children, eventName, event ) => {
 	}
 
 	const child = Children.only( children );
+
+	// If the underlying element is disabled, do not emit the event.
+	if ( child.props.disabled ) {
+		return;
+	}
+
 	if ( typeof child.props[ eventName ] === 'function' ) {
 		child.props[ eventName ]( event );
 	}

package/src/tooltip/stories/index.js

@@ -1,8 +1,14 @@
 /**
  * External dependencies
  */
+import styled from '@emotion/styled';
 import { text, select, number } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -11,6 +17,9 @@ import Tooltip from '../';
 export default {
 	title: 'Components/ToolTip',
 	component: Tooltip,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {
@@ -41,3 +50,31 @@ export const _default = () => {
 		</Tooltip>
 	);
 };
+
+const Button = styled.button`
+	margin: 0 10px;
+`;
+
+export const DisabledElement = () => {
+	const [ showMessage, toggleMessage ] = useState( false );
+
+	return (
+		<>
+			<Tooltip text="Hey, I am tooltip" position="bottom center">
+				<Button onClick={ () => toggleMessage( ! showMessage ) }>
+					Hover me!
+				</Button>
+			</Tooltip>
+			<Tooltip text="Hey, I am tooltip" position="bottom center">
+				<Button
+					disabled
+					onClick={ () => toggleMessage( ! showMessage ) }
+				>
+					Hover me, but I am disabled
+				</Button>
+			</Tooltip>
+			<br />
+			{ showMessage ? <p>Hello World!</p> : null }
+		</>
+	);
+};

package/src/tooltip/test/index.js

@@ -211,6 +211,26 @@ describe( 'Tooltip', () => {
 			}, TOOLTIP_DELAY );
 		} );
 
+		it( 'should not emit events back to children when they are disabled', () => {
+			const handleClick = jest.fn();
+
+			const wrapper = mount(
+				<Tooltip text="Show helpful text here">
+					<button disabled onClick={ handleClick }>
+						Click me
+					</button>
+				</Tooltip>
+			);
+
+			const eventCatcher = wrapper.find( '.event-catcher' );
+			eventCatcher.simulate( 'click', {
+				type: 'click',
+				currentTarget: {},
+			} );
+
+			expect( handleClick ).toHaveBeenCalledTimes( 0 );
+		} );
+
 		it( 'should cancel pending setIsOver on mouseleave', () => {
 			// Mount: Issues with using `setState` asynchronously with shallow-
 			// rendered components: https://github.com/airbnb/enzyme/issues/450

package/src/tree-grid/index.js

@@ -24,7 +24,9 @@ import RovingTabIndexContainer from './roving-tab-index';
  * @return {?Array} The array of focusables in the row.
  */
 function getRowFocusables( rowElement ) {
-	const focusablesInRow = focus.focusable.find( rowElement );
+	const focusablesInRow = focus.focusable.find( rowElement, {
+		sequential: true,
+	} );
 
 	if ( ! focusablesInRow || ! focusablesInRow.length ) {
 		return;

package/src/tree-select/stories/index.js

@@ -16,6 +16,9 @@ import TreeSelect from '../';
 export default {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const TreeSelectWithState = ( props ) => {

package/src/truncate/stories/index.js

@@ -11,6 +11,9 @@ import { Truncate } from '..';
 export default {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/ui/control-label/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`props should render correctly 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -56,7 +56,7 @@ exports[`props should render no truncate 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -102,7 +102,7 @@ exports[`props should render size 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/ui/form-group/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`props should render alignLabel 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -72,7 +72,7 @@ exports[`props should render vertically 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/ui/utils/colors.js

@@ -2,11 +2,14 @@
  * External dependencies
  */
 import memoize from 'memize';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /** @type {HTMLDivElement} */
 let colorComputationNode;
 
+extend( [ namesPlugin ] );
+
 /**
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
@@ -32,7 +35,7 @@ function getColorComputationNode() {
  */
 function isColor( value ) {
 	if ( typeof value !== 'string' ) return false;
-	const test = tinycolor( value );
+	const test = colord( value );
 
 	return test.isValid();
 }
@@ -77,12 +80,8 @@ const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
  */
 export function getOptimalTextColor( backgroundColor ) {
 	const background = getComputedBackgroundColor( backgroundColor );
-	const isReadableWithBlackText = tinycolor.isReadable(
-		background,
-		'#000000'
-	);
 
-	return isReadableWithBlackText ? '#000000' : '#ffffff';
+	return colord( background ).isLight() ? '#000000' : '#ffffff';
 }
 
 /**

package/src/unit-control/README.md

@@ -21,70 +21,69 @@ const Example = () => {
 
 ## Props
 
-### disabledUnits
+### `disableUnits`: `boolean`
 
 If true, the unit `<select>` is hidden.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `false`
 
-### isPressEnterToChange
+### `isPressEnterToChange`: `boolean`
 
-If true, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
+If `true`, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `false`
 
-### isUnitSelectTabbable
+### `isResetValueOnUnitChange`: `boolean`
+
+If `true`, and the selected unit provides a `default` value, this value is set when changing units.
+
+-   Required: No
+-   Default: `false`
+
+### `isUnitSelectTabbable`: `boolean`
 
 Determines if the unit `<select>` is tabbable.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `true`
 
-### label
+### `label`: `string`
 
 If this property is added, a label will be generated using label property as the content.
 
--   Type: `String`
 -   Required: No
 
-### labelPosition
+### `labelPosition`: `string`
 
 The position of the label (`top`, `side`, `bottom`, or `edge`).
 
--   Type: `String`
 -   Required: No
 
-### onChange
+### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
 
--   Type: `Function`
 -   Required: No
 -   Default: `noop`
 
-### onUnitChange
+### `onUnitChange`: `UnitControlOnChangeCallback`
 
 Callback when the `unit` changes.
 
--   Type: `Function`
 -   Required: No
 -   Default: `noop`
 
-### size
+### `size`: `string`
 
 Adjusts the size of the input.
 Sizes include: `default`, `small`
 
--   Type: `String`
 -   Required: No
 -   Default: `default`
 
-### unit
+### `unit`: `string`
 
 Deprecated: Current unit value.
 Instead, provide a unit with a value through the `value` prop.
@@ -95,14 +94,12 @@ Example:
 <UnitControl value="50%" />
 ```
 
--   Type: `String`
 -   Required: No
 
-### units
+### `units`: `WPUnitControlUnitList`
 
 Collection of available units.
 
--   Type: `Array<WPUnitControlUnit>`
 -   Required: No
 
 Example:
@@ -126,9 +123,10 @@ const Example = () => {
 
 A `default` value (in the example above, `10` for `%`), if defined, is set as the new `value` when a unit changes. This is helpful in scenarios where changing a unit may cause drastic results, such as changing from `px` to `vh`.
 
-### value
+### `value`: `number | string`
 
-Current value. To set a unit, provide a unit with a value through the `value` prop.
+Current value. If passed as a string, the current unit will be inferred from this value.
+For example, a `value` of `50%` will set the current unit to `%`.
 
 Example:
 
@@ -136,5 +134,4 @@ Example:
 <UnitControl value="50%" />
 ```
 
--   Type: `Number`|`String`
 -   Required: No