@wordpress/components 21.2.0 → 21.3.0

package/src/theme/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * Internal dependencies
+ */
+import type { ThemeProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+import { Wrapper } from './styles';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+/**
+ * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
+ *
+ * Multiple `Theme` components can be nested in order to override specific theme variables.
+ *
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalTheme as Theme } from '@wordpress/components';
+ *
+ * const Example = () => {
+ *   return (
+ *     <Theme accent="red">
+ *       <Button variant="primary">I'm red</Button>
+ *       <Theme accent="blue">
+ *         <Button variant="primary">I'm blue</Button>
+ *       </Theme>
+ *     </Theme>
+ *   );
+ * };
+ * ```
+ */
+function Theme( props: WordPressComponentProps< ThemeProps, 'div', true > ) {
+	const { accent } = props;
+	if ( accent && ! colord( accent ).isValid() ) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`wp.components.Theme: "${ accent }" is not a valid color value for the 'accent' prop.`
+		);
+	}
+
+	return <Wrapper { ...props } />;
+}
+
+export default Theme;

package/src/theme/stories/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Theme from '../index';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof Theme > = {
+	component: Theme,
+	title: 'Components (Experimental)/Theme',
+	argTypes: {
+		accent: { control: { type: 'color' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Theme > = ( args ) => (
+	<Theme { ...args }>
+		<Button variant="primary">Hello</Button>
+	</Theme>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const Nested: ComponentStory< typeof Theme > = ( args ) => (
+	<Theme accent="tomato">
+		<Button variant="primary">Outer theme (hardcoded)</Button>
+
+		<Theme { ...args }>
+			<Button variant="primary">
+				Inner theme (set via Storybook controls)
+			</Button>
+		</Theme>
+	</Theme>
+);
+Nested.args = {
+	accent: 'blue',
+};

package/src/theme/styles.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import type { ThemeProps } from './types';
+
+const accentColor = ( { accent }: ThemeProps ) =>
+	accent
+		? css`
+				--wp-components-color-accent: ${ accent };
+				--wp-components-color-accent-darker-10: ${ colord( accent )
+					.darken( 0.1 )
+					.toHex() };
+				--wp-components-color-accent-darker-20: ${ colord( accent )
+					.darken( 0.2 )
+					.toHex() };
+		  `
+		: undefined;
+
+export const Wrapper = styled.div< ThemeProps >`
+	${ accentColor }
+`;

package/src/theme/test/index.tsx

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Theme from '../';
+
+type MyThemableComponentProps = {
+	children: ReactNode;
+};
+
+const MyThemableComponent = ( props: MyThemableComponentProps ) => {
+	return (
+		<div
+			{ ...props }
+			style={ {
+				color: 'var(--wp-components-color-accent)',
+			} }
+		/>
+	);
+};
+
+describe( 'Theme', () => {
+	describe( 'accent color', () => {
+		it( 'it does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
+			render(
+				<Theme>
+					<MyThemableComponent>Inner</MyThemableComponent>
+				</Theme>
+			);
+
+			const inner = screen.getByText( 'Inner' );
+
+			if ( inner?.parentElement === null ) {
+				throw new Error(
+					'Somehow the `Theme` component does not render a DOM element?'
+				);
+			}
+
+			const innerElementStyles = window.getComputedStyle(
+				inner?.parentElement
+			);
+
+			expect(
+				innerElementStyles.getPropertyValue(
+					'--wp-components-color-accent'
+				)
+			).toBe( '' );
+
+			expect(
+				innerElementStyles.getPropertyValue(
+					'--wp-components-color-accent-darker-10'
+				)
+			).toBe( '' );
+
+			expect(
+				innerElementStyles.getPropertyValue(
+					'--wp-components-color-accent-darker-20'
+				)
+			).toBe( '' );
+		} );
+
+		it( 'it defines the accent color (and its variations) as a CSS variable', () => {
+			render(
+				<Theme accent="#123abc">
+					<MyThemableComponent>Inner</MyThemableComponent>
+				</Theme>
+			);
+
+			const inner = screen.getByText( 'Inner' );
+
+			expect( inner?.parentElement ).toHaveStyle( {
+				'--wp-components-color-accent': '#123abc',
+				'--wp-components-color-accent-darker-10': '#0e2c8d',
+				'--wp-components-color-accent-darker-20': '#091d5f',
+			} );
+		} );
+
+		describe( 'unsupported values', () => {
+			it.each( [
+				// Keywords
+				'currentcolor',
+				'initial',
+				'reset',
+				'inherit',
+				'revert',
+				'unset',
+				// CSS Custom properties
+				'var( --my-variable )',
+			] )( 'should warn when the value is "%s"', ( accentValue ) => {
+				render( <Theme accent={ accentValue } /> );
+
+				expect( console ).toHaveWarned();
+			} );
+		} );
+	} );
+} );

package/src/theme/types.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ThemeProps = {
+	/**
+	 * Used to set the accent color (used by components as the primary color).
+	 *
+	 * If an accent color is not defined, the default fallback value is the original
+	 * WP Admin main theme color. No all valid CSS color syntaxes are supported —
+	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
+	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
+	 * `var(--my-custom-property)`) are _not_ supported values for this property.
+	 */
+	accent?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+};

package/src/toolbar/test/index.js

@@ -21,10 +21,10 @@ describe( 'Toolbar', () => {
 
 			expect(
 				screen.getByLabelText( 'control1', { selector: 'button' } )
-			).toBeTruthy();
+			).toBeInTheDocument();
 			expect(
 				screen.getByLabelText( 'control2', { selector: 'button' } )
-			).toBeTruthy();
+			).toBeInTheDocument();
 		} );
 	} );
 } );

package/src/toolbar-group/test/index.js

@@ -13,13 +13,13 @@ describe( 'ToolbarGroup', () => {
 		it( 'should render an empty node, when controls are not passed', () => {
 			const { container } = render( <ToolbarGroup /> );
 
-			expect( container.innerHTML ).toBe( '' );
+			expect( container ).toBeEmptyDOMElement();
 		} );
 
 		it( 'should render an empty node, when controls are empty', () => {
 			const { container } = render( <ToolbarGroup controls={ [] } /> );
 
-			expect( container.innerHTML ).toBe( '' );
+			expect( container ).toBeEmptyDOMElement();
 		} );
 
 		it( 'should render a list of controls with buttons', () => {
@@ -36,10 +36,8 @@ describe( 'ToolbarGroup', () => {
 			render( <ToolbarGroup controls={ controls } /> );
 
 			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'false'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a list of controls with buttons and active control', () => {
@@ -56,10 +54,8 @@ describe( 'ToolbarGroup', () => {
 			render( <ToolbarGroup controls={ controls } /> );
 
 			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'true'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
 		} );
 
 		it( 'should render a nested list of controls with separator between', () => {

package/src/tools-panel/test/index.js

@@ -295,7 +295,7 @@ describe( 'ToolsPanel', () => {
 			expect( control ).toBeInTheDocument();
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText( 'Alt is now visible' );
+			const announcement = screen.getByText( 'Alt is now visible' );
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 		} );
 
@@ -308,7 +308,7 @@ describe( 'ToolsPanel', () => {
 			expect( control ).not.toBeInTheDocument();
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText(
+			const announcement = screen.getByText(
 				'Example hidden and reset to default'
 			);
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
@@ -337,9 +337,7 @@ describe( 'ToolsPanel', () => {
 			expect( resetControl ).toBeInTheDocument();
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText(
-				'Example reset to default'
-			);
+			const announcement = screen.getByText( 'Example reset to default' );
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 		} );
 
@@ -1057,7 +1055,7 @@ describe( 'ToolsPanel', () => {
 			await selectMenuItem( 'Reset all' );
 
 			// Test the aria live announcement.
-			const announcement = await screen.getByText( 'All options reset' );
+			const announcement = screen.getByText( 'All options reset' );
 			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
 
 			const disabledResetAllItem = await screen.findByRole( 'menuitem', {

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

@@ -139,7 +139,7 @@ export function useToolsPanel(
 			} );
 			return items;
 		} );
-	}, [ generateMenuItems, panelItems, setMenuItems ] );
+	}, [ panelItems, setMenuItems ] );
 
 	// Force a menu item to be checked.
 	// This is intended for use with default panel items. They are displayed
@@ -255,13 +255,7 @@ export function useToolsPanel(
 			shouldReset: true,
 		} );
 		setMenuItems( resetMenuItems );
-	}, [
-		generateMenuItems,
-		isResetting.current,
-		panelItems,
-		resetAll,
-		setMenuItems,
-	] );
+	}, [ panelItems, resetAll, setMenuItems ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.
@@ -300,7 +294,6 @@ export function useToolsPanel(
 			deregisterPanelItem,
 			firstDisplayedItem,
 			flagItemCustomization,
-			isResetting.current,
 			lastDisplayedItem,
 			menuItems,
 			panelId,

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

@@ -42,8 +42,11 @@ export function useToolsPanelItem(
 		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
-	const hasValueCallback = useCallback( hasValue, [ panelId ] );
-	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
+	const hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );
+	const resetAllFilterCallback = useCallback( resetAllFilter, [
+		panelId,
+		resetAllFilter,
+	] );
 	const previousPanelId = usePrevious( currentPanelId );
 
 	const hasMatchingPanel =
@@ -79,6 +82,8 @@ export function useToolsPanelItem(
 		panelId,
 		previousPanelId,
 		resetAllFilterCallback,
+		registerPanelItem,
+		deregisterPanelItem,
 	] );
 
 	const isValueSet = hasValue();
@@ -90,7 +95,13 @@ export function useToolsPanelItem(
 		if ( isShownByDefault && isValueSet && ! wasValueSet ) {
 			flagItemCustomization( label );
 		}
-	}, [ isValueSet, wasValueSet, isShownByDefault, label ] );
+	}, [
+		isValueSet,
+		wasValueSet,
+		isShownByDefault,
+		label,
+		flagItemCustomization,
+	] );
 
 	// Note: `label` is used as a key when building menu item state in
 	// `ToolsPanel`.
@@ -118,6 +129,8 @@ export function useToolsPanelItem(
 		isResetting,
 		isValueSet,
 		wasMenuItemChecked,
+		onSelect,
+		onDeselect,
 	] );
 
 	// The item is shown if it is a default control regardless of whether it
@@ -153,6 +166,7 @@ export function useToolsPanelItem(
 		lastDisplayedItem,
 		__experimentalFirstVisibleItemClass,
 		__experimentalLastVisibleItemClass,
+		label,
 	] );
 
 	return {

package/src/tooltip/index.js

@@ -228,6 +228,9 @@ function Tooltip( props ) {
 		document.removeEventListener( 'mouseup', cancelIsMouseDown );
 	};
 
+	// Ignore reason: updating the deps array here could cause unexpected changes in behavior.
+	// Deferring until a more detailed investigation/refactor can be performed.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => clearOnUnmount, [] );
 
 	if ( Children.count( children ) !== 1 ) {

package/src/tooltip/index.native.js

@@ -62,6 +62,9 @@ const useKeyboardVisibility = () => {
 			showListener.remove();
 			hideListener.remove();
 		};
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	return keyboardVisible;
@@ -102,6 +105,9 @@ const Tooltip = ( {
 			} );
 		}
 		return () => onHandleScreenTouch( null );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ visible ] );
 
 	// Manage visibility animation.
@@ -115,6 +121,9 @@ const Tooltip = ( {
 			setAnimating( true );
 			startAnimation();
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ visible ] );
 
 	// Manage tooltip visibility and position in relation to keyboard.
@@ -133,6 +142,9 @@ const Tooltip = ( {
 			setAnimating( true );
 			setVisible( false );
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ visible, keyboardVisible ] );
 
 	// Manage tooltip position during keyboard frame changes.
@@ -261,6 +273,9 @@ const TooltipSlot = ( { children, ...rest } ) => {
 		setHandleScreenTouch( null );
 	};
 	// Memoize context value to avoid unnecessary rerenders of the Provider's children
+	// Disable reason: deferring this refactor to the native team.
+	// see https://github.com/WordPress/gutenberg/pull/41166
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const value = useMemo( () => ( { onHandleScreenTouch } ) );
 
 	return (

package/src/tooltip/test/index.native.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { act } from 'react-test-renderer';
-import { fireEvent, render } from 'test/helpers';
+import { fireEvent, render, act } from 'test/helpers';
 import { Keyboard, Text } from 'react-native';
 
 /**

package/src/tree-grid/test/__snapshots__/cell.js.snap

@@ -5,7 +5,6 @@ exports[`TreeGridCell uses a child render function to render children 1`] = `
   role="application"
 >
   <table
-    onKeyDown={[Function]}
     role="treegrid"
   >
     <tbody>
@@ -14,8 +13,7 @@ exports[`TreeGridCell uses a child render function to render children 1`] = `
           role="gridcell"
         >
           <button
-            className="my-button"
-            onFocus={[Function]}
+            class="my-button"
           >
             Click Me!
           </button>

package/src/tree-grid/test/__snapshots__/roving-tab-index-item.js.snap

@@ -1,25 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RovingTabIndexItem allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
-<button
-  onFocus={[Function]}
-/>
+<div>
+  <button />
+</div>
 `;
 
 exports[`RovingTabIndexItem allows children to be declared using a child render function as an alternative to \`as\` 1`] = `
-<button
-  className="my-button"
-  onFocus={[Function]}
->
-  Click Me!
-</button>
+<div>
+  <button
+    class="my-button"
+  >
+    Click Me!
+  </button>
+</div>
 `;
 
 exports[`RovingTabIndexItem forwards props to the \`as\` component 1`] = `
-<button
-  className="my-button"
-  onFocus={[Function]}
->
-  Click Me!
-</button>
+<div>
+  <button
+    class="my-button"
+  >
+    Click Me!
+  </button>
+</div>
 `;

package/src/tree-grid/test/__snapshots__/row.js.snap

@@ -2,31 +2,35 @@
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
 <table>
-  <tr
-    aria-level="1"
-    aria-posinset="1"
-    aria-setsize="1"
-    className="my-row"
-    role="row"
-  >
-    <td>
-      Test
-    </td>
-  </tr>
+  <tbody>
+    <tr
+      aria-level="1"
+      aria-posinset="1"
+      aria-setsize="1"
+      class="my-row"
+      role="row"
+    >
+      <td>
+        Test
+      </td>
+    </tr>
+  </tbody>
 </table>
 `;
 
 exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = `
 <table>
-  <tr
-    aria-level="1"
-    aria-posinset="1"
-    aria-setsize="1"
-    role="row"
-  >
-    <td>
-      Test
-    </td>
-  </tr>
+  <tbody>
+    <tr
+      aria-level="1"
+      aria-posinset="1"
+      aria-setsize="1"
+      role="row"
+    >
+      <td>
+        Test
+      </td>
+    </tr>
+  </tbody>
 </table>
 `;

package/src/tree-grid/test/cell.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,7 @@ const TestButton = forwardRef( ( { ...props }, ref ) => (
 describe( 'TreeGridCell', () => {
 	it( 'requires TreeGrid to be declared as a parent component somewhere in the component hierarchy', () => {
 		expect( () =>
-			TestRenderer.create(
+			render(
 				<TreeGridCell>
 					{ ( props ) => (
 						<TestButton className="my-button" { ...props }>
@@ -35,7 +35,7 @@ describe( 'TreeGridCell', () => {
 	} );
 
 	it( 'uses a child render function to render children', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<TreeGrid>
 				<tr>
 					<TreeGridCell>
@@ -49,6 +49,6 @@ describe( 'TreeGridCell', () => {
 			</TreeGrid>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container.firstChild ).toMatchSnapshot();
 	} );
 } );