@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

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.

package/tsconfig.json

@@ -47,10 +47,8 @@
 		"src/color-list-picker",
 		"src/combobox-control",
 		"src/custom-gradient-picker",
-		"src/custom-select-control",
 		"src/dimension-control",
 		"src/duotone-picker",
-		"src/font-size-picker",
 		"src/gradient-picker",
 		"src/guide",
 		"src/higher-order/navigate-regions",