@wordpress/components 21.3.0 → 22.1.0

package/src/snackbar/index.js

@@ -93,7 +93,7 @@ function Snackbar(
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ onDismiss, onRemove ] );
+	}, [ onDismiss, onRemove, explicitDismiss ] );
 
 	const classes = classnames( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,

package/src/snackbar/style.scss

@@ -22,7 +22,7 @@
 	&:focus {
 		box-shadow:
 			0 0 0 1px $white,
-			0 0 0 3px var(--wp-admin-theme-color);
+			0 0 0 3px $components-color-accent;
 	}
 
 	&.components-snackbar-explicit-dismiss {
@@ -64,7 +64,7 @@
 		}
 
 		&:hover {
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 	}
 }

package/src/spacer/test/index.tsx

@@ -9,64 +9,77 @@ import { render, screen } from '@testing-library/react';
 import { Spacer } from '../index';
 
 describe( 'props', () => {
-	beforeEach( () => {
+	test( 'should render correctly', () => {
 		render( <Spacer data-testid="spacer" /> );
-	} );
 
-	test( 'should render correctly', () => {
 		expect( screen.getByTestId( 'spacer' ) ).toMatchSnapshot();
 	} );
 
 	test( 'should render margin', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer margin={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginX', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginX={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginY', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginY={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginTop', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginTop={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginBottom', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginBottom={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginLeft', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginLeft={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render marginRight', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer marginRight={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should override margin props from less to more specific', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				margin={ 10 }
@@ -76,63 +89,79 @@ describe( 'props', () => {
 				data-testid="customized-spacer"
 			/>
 		);
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render padding', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer padding={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingX', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingX={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingY', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingY={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingTop', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingTop={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingBottom', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer paddingBottom={ 5 } data-testid="customized-spacer" />
 		);
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingLeft', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingLeft={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should render paddingRight', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render( <Spacer paddingRight={ 5 } data-testid="customized-spacer" /> );
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
 	} );
 
 	test( 'should override padding props from less to more specific', () => {
+		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				padding={ 10 }
@@ -142,6 +171,7 @@ describe( 'props', () => {
 				data-testid="customized-spacer"
 			/>
 		);
+
 		expect(
 			screen.getByTestId( 'customized-spacer' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );

package/src/spinner/styles.ts

@@ -24,7 +24,7 @@ export const StyledSpinner = styled.svg`
 	display: inline-block;
 	margin: 5px 11px 0;
 	position: relative;
-	color: var( --wp-admin-theme-color );
+	color: ${ COLORS.ui.theme };
 	overflow: visible;
 `;
 

package/src/surface/test/__snapshots__/index.tsx.snap

@@ -5,14 +5,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderLeft 1`] = `
@@ -20,14 +22,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderRight 1`] = `
@@ -35,14 +39,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderTop 1`] = `
@@ -50,14 +56,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render correctly 1`] = `
@@ -67,12 +75,14 @@ exports[`props should render correctly 1`] = `
   position: relative;
 }
 
-<div
-  class="components-surface emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Surface"
->
-  Surface
+<div>
+  <div
+    class="components-surface emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Surface"
+  >
+    Surface
+  </div>
 </div>
 `;
 
@@ -81,12 +91,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;

package/src/surface/test/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
-import type { RenderResult } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,49 +9,40 @@ import type { RenderResult } from '@testing-library/react';
 import { Surface } from '../index';
 
 describe( 'props', () => {
-	let base: RenderResult;
-	beforeEach( () => {
-		base = render( <Surface>Surface</Surface> );
-	} );
-
 	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
+		const { container } = render( <Surface>Surface</Surface> );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render variants', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render(
 			<Surface variant="secondary">Surface</Surface>
 		);
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderLeft', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderLeft>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderRight', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderRight>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderTop', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderTop>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 
 	test( 'should render borderBottom', () => {
+		const view = render( <Surface>Surface</Surface> );
 		const { container } = render( <Surface borderBottom>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( view.container );
 	} );
 } );

package/src/tab-panel/index.tsx

@@ -7,7 +7,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -85,10 +85,13 @@ export function TabPanel( {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
-	const handleTabSelection = ( tabKey: string ) => {
-		setSelected( tabKey );
-		onSelect?.( tabKey );
-	};
+	const handleTabSelection = useCallback(
+		( tabKey: string ) => {
+			setSelected( tabKey );
+			onSelect?.( tabKey );
+		},
+		[ onSelect ]
+	);
 
 	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
 		child.click();
@@ -97,11 +100,10 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		const newSelectedTab = find( tabs, { name: selected } );
-		if ( ! newSelectedTab && tabs.length > 0 ) {
+		if ( ! selectedTab?.name && tabs.length > 0 ) {
 			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
-	}, [ tabs ] );
+	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
 
 	return (
 		<div className={ className }>

package/src/tab-panel/style.scss

@@ -33,13 +33,12 @@
 	}
 
 	&:focus:not(:disabled) {
-		box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
-
 	&.is-active {
 		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 $components-color-accent;
 		position: relative;
 
 		// This border appears in Windows High Contrast mode instead of the box-shadow.
@@ -55,10 +54,10 @@
 	}
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 -#{$border-width-tab * 2} 0 0 $components-color-accent;
 	}
 }

package/src/tab-panel/test/index.tsx

@@ -38,14 +38,22 @@ describe( 'TabPanel', () => {
 	it( 'should render a tabpanel, and clicking should change tabs', async () => {
 		const user = setupUser();
 		const panelRenderFunction = jest.fn();
+		const mockOnSelect = jest.fn();
 
-		render( <TabPanel tabs={ TABS } children={ panelRenderFunction } /> );
+		render(
+			<TabPanel
+				tabs={ TABS }
+				children={ panelRenderFunction }
+				onSelect={ mockOnSelect }
+			/>
+		);
 
 		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
 		expect(
 			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 		await user.click( screen.getByRole( 'tab', { name: 'Beta' } ) );
 
@@ -54,6 +62,7 @@ describe( 'TabPanel', () => {
 			screen.getByRole( 'tabpanel', { name: 'Beta' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 1 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
 		await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 
@@ -62,6 +71,7 @@ describe( 'TabPanel', () => {
 			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 	} );
 
 	it( 'should render with a tab initially selected by prop initialTabIndex', () => {
@@ -117,4 +127,71 @@ describe( 'TabPanel', () => {
 			'gamma-class'
 		);
 	} );
+
+	it( 'should select `initialTabname` if defined', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ TABS }
+				initialTabName="beta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+	} );
+
+	describe( 'fallbacks when new tab list invalidates current selection', () => {
+		it( 'should select `initialTabName` if defined', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<TabPanel
+					tabs={ TABS }
+					initialTabName="gamma"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			rerender(
+				<TabPanel
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					initialTabName="gamma"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+		} );
+
+		it( 'should select first tab if `initialTabName` not defined', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<TabPanel
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			rerender(
+				<TabPanel
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+		} );
+	} );
 } );

package/src/text/test/__snapshots__/index.tsx.snap

@@ -31,17 +31,19 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 }
 
-<span
-  class="components-truncate components-text emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Text"
->
+<div>
   <span
-    class=""
+    class="components-truncate components-text emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Text"
   >
-    Lorem ipsum.
+    <span
+      class=""
+    >
+      Lorem ipsum.
+    </span>
   </span>
-</span>
+</div>
 `;
 
 exports[`Text snapshot tests should render correctly 1`] = `
@@ -53,11 +55,13 @@ exports[`Text snapshot tests should render correctly 1`] = `
   font-weight: normal;
 }
 
-<span
-  class="components-truncate components-text emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Text"
->
-  Lorem ipsum.
-</span>
+<div>
+  <span
+    class="components-truncate components-text emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Text"
+  >
+    Lorem ipsum.
+  </span>
+</div>
 `;