@wordpress/components 21.2.0 → 21.3.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -21,23 +21,23 @@ const TestButton = forwardRef( ( { ...props }, ref ) => (
 describe( 'RovingTabIndexItem', () => {
 	it( 'requires RovingTabIndex to be declared as a parent component somewhere in the component hierarchy', () => {
 		expect( () =>
-			TestRenderer.create( <RovingTabIndexItem as={ TestButton } /> )
+			render( <RovingTabIndexItem as={ TestButton } /> )
 		).toThrow();
 		expect( console ).toHaveErrored();
 	} );
 
 	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<RovingTabIndexItem as={ TestButton } />
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'forwards props to the `as` component', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<RovingTabIndexItem as={ TestButton } className="my-button">
 					Click Me!
@@ -45,11 +45,11 @@ describe( 'RovingTabIndexItem', () => {
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'allows children to be declared using a child render function as an alternative to `as`', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<RovingTabIndexItem>
 					{ ( props ) => (
@@ -61,6 +61,6 @@ describe( 'RovingTabIndexItem', () => {
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,12 +10,12 @@ import RovingTabIndex from '../roving-tab-index';
 
 describe( 'RovingTabIndex', () => {
 	it( 'does not render any elements other than its children', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<div>child element</div>
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container.firstChild ).toMatchSnapshot();
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,31 +10,35 @@ import TreeGridRow from '../row';
 
 describe( 'TreeGridRow', () => {
 	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<table>
-				<TreeGridRow level="1" positionInSet="1" setSize="1">
-					<td>Test</td>
-				</TreeGridRow>
+				<tbody>
+					<TreeGridRow level="1" positionInSet="1" setSize="1">
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
 			</table>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container.firstChild ).toMatchSnapshot();
 	} );
 
 	it( 'forwards other props to the rendered tr element', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<table>
-				<TreeGridRow
-					className="my-row"
-					level="1"
-					positionInSet="1"
-					setSize="1"
-				>
-					<td>Test</td>
-				</TreeGridRow>
+				<tbody>
+					<TreeGridRow
+						className="my-row"
+						level="1"
+						positionInSet="1"
+						setSize="1"
+					>
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
 			</table>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container.firstChild ).toMatchSnapshot();
 	} );
 } );

package/src/truncate/test/index.tsx

@@ -11,7 +11,7 @@ import { Truncate } from '..';
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( container.firstChild?.textContent ).toEqual( 'Lorem ipsum.' );
+		expect( container.firstChild ).toHaveTextContent( 'Lorem ipsum.' );
 	} );
 
 	test( 'should render limit', () => {
@@ -20,7 +20,7 @@ describe( 'props', () => {
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild?.textContent ).toEqual( 'L…' );
+		expect( container.firstChild ).toHaveTextContent( 'L…' );
 	} );
 
 	test( 'should render custom ellipsis', () => {
@@ -29,7 +29,7 @@ describe( 'props', () => {
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild?.textContent ).toEqual( 'Lorem!!!' );
+		expect( container.firstChild ).toHaveTextContent( 'Lorem!!!' );
 	} );
 
 	test( 'should render custom ellipsizeMode', () => {
@@ -38,6 +38,6 @@ describe( 'props', () => {
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild?.textContent ).toEqual( 'Lo!!!m.' );
+		expect( container.firstChild ).toHaveTextContent( 'Lo!!!m.' );
 	} );
 } );

package/src/ui/shortcut/test/index.js

@@ -28,7 +28,8 @@ describe( 'Shortcut', () => {
 		};
 		render( <Shortcut shortcut={ shortcutObject } /> );
 		const shortcut = screen.getByText( shortcutObject.display );
-		expect( shortcut.getAttribute( 'aria-label' ) ).toBe(
+		expect( shortcut ).toHaveAttribute(
+			'aria-label',
 			shortcutObject.ariaLabel
 		);
 	} );

package/src/ui/spinner/test/index.js

@@ -9,27 +9,28 @@ import { render } from '@testing-library/react';
 import { Spinner } from '..';
 
 describe( 'props', () => {
-	let base;
-
-	beforeEach( () => {
-		base = render( <Spinner /> );
-	} );
-
 	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
+		const { container } = render( <Spinner /> );
+		expect( container.firstChild ).toMatchSnapshot();
 	} );
 
 	test( 'should render color', () => {
-		const { container } = render( <Spinner color="blue" /> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
+		const { container } = render( <Spinner /> );
+		const { container: secondRenderContainer } = render(
+			<Spinner color="blue" />
+		);
+		expect( secondRenderContainer.firstChild ).toMatchDiffSnapshot(
+			container.firstChild
 		);
 	} );
 
 	test( 'should render size', () => {
-		const { container } = render( <Spinner size={ 31 } /> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
+		const { container } = render( <Spinner /> );
+		const { container: secondRenderContainer } = render(
+			<Spinner size={ 31 } />
+		);
+		expect( secondRenderContainer.firstChild ).toMatchDiffSnapshot(
+			container.firstChild
 		);
 	} );
 } );

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

@@ -13,20 +13,20 @@ describe( 'props', () => {
 	const baseTooltipId = 'base-tooltip';
 	const baseTooltipTriggerContent = 'WordPress.org - Base trigger content';
 	const byId = ( id ) => ( t ) => t.id === id;
-	beforeEach( () => {
-		render(
-			<Tooltip baseId={ baseTooltipId } content="Code is Poetry" visible>
-				<Text>{ baseTooltipTriggerContent }</Text>
-			</Tooltip>
-		);
-	} );
+	const VisibleTooltip = () => (
+		<Tooltip baseId={ baseTooltipId } content="Code is Poetry" visible>
+			<Text>{ baseTooltipTriggerContent }</Text>
+		</Tooltip>
+	);
 
 	test( 'should render correctly', () => {
+		render( <VisibleTooltip /> );
 		const tooltip = screen.getByRole( /tooltip/i );
 		expect( tooltip ).toMatchSnapshot();
 	} );
 
 	test( 'should render invisible', () => {
+		render( <VisibleTooltip /> );
 		const invisibleTooltipTriggerContent = 'WordPress.org - Invisible';
 		render(
 			<Tooltip
@@ -37,19 +37,20 @@ describe( 'props', () => {
 				<Text>{ invisibleTooltipTriggerContent }</Text>
 			</Tooltip>
 		);
-		const tooltips = screen.getAllByRole( /tooltip/i );
+		const tooltip = screen.getByRole( /tooltip/i );
 		const invisibleTooltipTrigger = screen.getByText(
 			invisibleTooltipTriggerContent
 		);
-		// The invisible tooltip should not render.
-		expect( tooltips ).toHaveLength( 1 );
+		// The base tooltip should render only; invisible tooltip should not render.
+		expect( tooltip ).toBeInTheDocument();
 		// Assert that the rendered tooltip is indeed the base tooltip.
-		expect( tooltips[ 0 ].id ).toBe( baseTooltipId );
+		expect( tooltip.id ).toBe( baseTooltipId );
 		// But the invisible tooltip's trigger still should have rendered.
 		expect( invisibleTooltipTrigger ).not.toBeUndefined();
 	} );
 
 	test( 'should render without children', () => {
+		render( <VisibleTooltip /> );
 		const childlessTooltipId = 'tooltip-without-children';
 		render(
 			<Tooltip
@@ -64,15 +65,16 @@ describe( 'props', () => {
 	} );
 
 	test( 'should not render a tooltip without content', () => {
+		render( <VisibleTooltip /> );
 		const contentlessTooltipId = 'contentless-tooltip';
 		render(
 			<Tooltip baseId={ contentlessTooltipId } visible>
 				<Text>WordPress.org</Text>
 			</Tooltip>
 		);
-		const tooltips = screen.getAllByRole( /tooltip/ );
+		const tooltip = screen.getByRole( /tooltip/i );
 		// Assert only the base tooltip rendered.
-		expect( tooltips ).toHaveLength( 1 );
-		expect( tooltips[ 0 ].id ).toBe( baseTooltipId );
+		expect( tooltip ).toBeInTheDocument();
+		expect( tooltip.id ).toBe( baseTooltipId );
 	} );
 } );

package/src/utils/theme-variables.scss

@@ -0,0 +1,8 @@
+// Accent color
+//
+// If the `--wp-components-color-accent` variable is not defined, fallback to
+// `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
+// defined, fallback to the default theme color (WP blue).
+$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));

package/src/visually-hidden/README.md

@@ -15,3 +15,7 @@ function Example() {
 	);
 }
 ```
+
+## Best practices
+
+The element that `VisuallyHidden` renders has the style `position: absolute`. When using this component be careful of the [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). Even though `VisuallyHidden` isn't visible, it can still affect layout. An example of this is that `VisuallyHidden` may ignore `overflow` styles of ancestor elements because it instead adopts the `overflow` of its stacking context. One known side-effect can be an unexpected scrollbar appearing. To fix this kind of issue, introduce a stacking context on a more immediate parent of `VisuallyHidden`. Adding `position: relative` is often an easy way to do this.