@wordpress/components 21.3.0 → 22.1.0

package/src/item-group/test/__snapshots__/index.js.snap

@@ -5,32 +5,32 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,11 +7,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+@@ -8,11 +8,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code
-      </div>
-@@ -19,11 +19,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code
+        </div>
+@@ -20,11 +20,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Is
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Is
+        </div>
 `;
 
 exports[`ItemGroup Item should use different amounts of padding depending on the value of the size prop 1`] = `
@@ -38,19 +38,19 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,11 +1,11 @@
-  <div
-    class="css-dcjs67-itemWrapper"
-    role="listitem"
-  >
+@@ -2,11 +2,11 @@
     <div
--     class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+     class="components-item css-1ohjtsa-View-large-item e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="css-dcjs67-itemWrapper"
+      role="listitem"
     >
-      Code is poetry
-    </div>
+      <div
+-       class="components-item css-bsdqin-View-medium-item e19lxcc00"
++       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
 `;
 
 exports[`ItemGroup ItemGroup component should render correctly 1`] = `
@@ -82,22 +82,24 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   border-radius: 2px;
 }
 
-<div
-  class="components-item-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ItemGroup"
-  role="list"
->
+<div>
   <div
-    class="emotion-2"
-    role="listitem"
+    class="components-item-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ItemGroup"
+    role="list"
   >
     <div
-      class="components-item emotion-3 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="emotion-2"
+      role="listitem"
     >
-      Code is poetry
+      <div
+        class="components-item emotion-3 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
     </div>
   </div>
 </div>
@@ -108,26 +110,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show borders when the isBordered prop is true 1`] = `
@@ -135,26 +138,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show rounded corners when the isRounded prop is true 1`] = `
@@ -162,13 +166,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,7 +1,7 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-1mm2cvy-View e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,8 +1,8 @@
+  <div>
     <div
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-1mm2cvy-View e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
+    >
+      <div
 `;

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

@@ -16,7 +16,7 @@ describe( 'ItemGroup', () => {
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should show borders when the isBordered prop is true', () => {
@@ -33,9 +33,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( noBorders.firstChild ).toMatchDiffSnapshot(
-				withBorders.firstChild
-			);
+			expect( noBorders ).toMatchDiffSnapshot( withBorders );
 		} );
 
 		it( 'should show rounded corners when the isRounded prop is true', () => {
@@ -52,9 +50,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( roundCorners.firstChild ).toMatchDiffSnapshot(
-				squaredCorners.firstChild
-			);
+			expect( roundCorners ).toMatchDiffSnapshot( squaredCorners );
 		} );
 
 		it( 'should render items individually when the isSeparated prop is true', () => {
@@ -65,15 +61,13 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			const { container: seperatedItems } = render(
+			const { container: separatedItems } = render(
 				<ItemGroup isSeparated={ true }>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
 
-			expect( groupedItems.firstChild ).toMatchDiffSnapshot(
-				seperatedItems.firstChild
-			);
+			expect( groupedItems ).toMatchDiffSnapshot( separatedItems );
 		} );
 	} );
 
@@ -120,9 +114,7 @@ describe( 'ItemGroup', () => {
 				<Item size="large">Code is poetry</Item>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 
 		it( 'should read the value of the size prop from context when the prop is not defined', () => {
@@ -145,9 +137,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 	} );
 } );

package/src/menu-group/{index.js → index.tsx}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -10,7 +9,27 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
-export function MenuGroup( props ) {
+/**
+ * Internal dependencies
+ */
+import type { MenuGroupProps } from './types';
+
+/**
+ * `MenuGroup` wraps a series of related `MenuItem` components into a common
+ * section.
+ *
+ * ```jsx
+ * import { MenuGroup, MenuItem } from '@wordpress/components';
+ *
+ * const MyMenuGroup = () => (
+ *   <MenuGroup label="Settings">
+ *     <MenuItem>Setting 1</MenuItem>
+ *     <MenuItem>Setting 2</MenuItem>
+ *   </MenuGroup>
+ * );
+ * ```
+ */
+export function MenuGroup( props: MenuGroupProps ) {
 	const { children, className = '', label, hideSeparator } = props;
 	const instanceId = useInstanceId( MenuGroup );
 
@@ -34,7 +53,7 @@ export function MenuGroup( props ) {
 					{ label }
 				</div>
 			) }
-			<div role="group" aria-labelledby={ label ? labelId : null }>
+			<div role="group" aria-labelledby={ label ? labelId : undefined }>
 				{ children }
 			</div>
 		</div>

package/src/menu-group/types.ts

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type MenuGroupProps = {
+	/**
+	 * A CSS `class` to give to the container element.
+	 */
+	className?: string;
+	/**
+	 * Hide the top border on the container.
+	 */
+	hideSeparator?: boolean;
+	/**
+	 * Text to be displayed as the menu group header.
+	 */
+	label?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+};

package/src/menu-item/style.scss

@@ -45,7 +45,7 @@
 		// Override the button component's tertiary background and color.
 		&.is-tertiary {
 			background: none;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			opacity: 0.3;
 		}
 	}

package/src/mobile/bottom-sheet/test/range-cell.native.js

@@ -33,7 +33,7 @@ afterAll( () => {
 
 it( 'allows modifying units via a11y actions', async () => {
 	const mockOpenUnitPicker = jest.fn();
-	const { getByA11yLabel } = render(
+	const { getByLabelText } = render(
 		<RangeCell
 			label="Opacity"
 			minimumValue={ 0 }
@@ -44,7 +44,7 @@ it( 'allows modifying units via a11y actions', async () => {
 		/>
 	);
 
-	const opacityControl = getByA11yLabel( /Opacity/ );
+	const opacityControl = getByLabelText( /Opacity/ );
 	fireEvent( opacityControl, 'accessibilityAction', {
 		nativeEvent: { actionName: 'activate' },
 	} );
@@ -54,7 +54,7 @@ it( 'allows modifying units via a11y actions', async () => {
 
 describe( 'when range lacks an adjustable unit', () => {
 	it( 'disallows modifying units via a11y actions', async () => {
-		const { getByA11yLabel } = render(
+		const { getByLabelText } = render(
 			<RangeCell
 				label="Opacity"
 				minimumValue={ 0 }
@@ -64,7 +64,7 @@ describe( 'when range lacks an adjustable unit', () => {
 			/>
 		);
 
-		const opacityControl = getByA11yLabel( /Opacity/ );
+		const opacityControl = getByLabelText( /Opacity/ );
 		const { onAccessibilityAction } = opacityControl.props;
 		expect( () =>
 			onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } )

package/src/mobile/html-text-input/test/index.native.js

@@ -10,12 +10,12 @@ import { HTMLTextInput } from '..';
 
 // Finds the Content TextInput in our HTMLInputView.
 const findContentTextInput = ( screen ) => {
-	return screen.getByA11yLabel( 'html-view-content' );
+	return screen.getByLabelText( 'html-view-content' );
 };
 
 // Finds the Title TextInput in our HTMLInputView.
 const findTitleTextInput = ( screen ) => {
-	return screen.getByA11yLabel( 'html-view-title' );
+	return screen.getByLabelText( 'html-view-title' );
 };
 
 const getStylesFromColorScheme = () => {

package/src/mobile/link-settings/test/edit.native.js

@@ -77,19 +77,19 @@ describe.each( [
 
 		// Act.
 		const block = await waitFor( () =>
-			subject.getByA11yLabel(
+			subject.getByLabelText(
 				type === 'core/image' ? /Image Block/ : /Button Block/
 			)
 		);
 		fireEvent.press( block );
 		fireEvent.press( block );
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) )
+			await waitFor( () => subject.getByLabelText( 'Open Settings' ) )
 		);
 
 		// Assert.
 		const linkToField = await waitFor( () =>
-			subject.getByA11yLabel(
+			subject.getByLabelText(
 				`Link to, ${
 					type === 'core/image' ? 'None' : 'Search or type URL'
 				}`
@@ -114,7 +114,7 @@ describe.each( [
 
 				// Act.
 				const block = await waitFor( () =>
-					subject.getByA11yLabel(
+					subject.getByLabelText(
 						type === 'core/image' ? /Image Block/ : /Button Block/
 					)
 				);
@@ -122,12 +122,12 @@ describe.each( [
 				fireEvent.press( block );
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel( 'Open Settings' )
+						subject.getByLabelText( 'Open Settings' )
 					)
 				);
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image'
 									? 'None'
@@ -139,15 +139,15 @@ describe.each( [
 				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( /Custom URL/ )
+							subject.getByLabelText( /Custom URL/ )
 						)
 					);
 				}
-				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+				await waitFor( () => subject.getByLabelText( 'Apply' ) );
 
 				// Assert.
 				expect(
-					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
 			} );
 		} );
@@ -167,7 +167,7 @@ describe.each( [
 
 				// Act.
 				const block = await waitFor( () =>
-					subject.getByA11yLabel(
+					subject.getByLabelText(
 						type === 'core/image' ? /Image Block/ : /Button Block/
 					)
 				);
@@ -175,12 +175,12 @@ describe.each( [
 				fireEvent.press( block );
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel( 'Open Settings' )
+						subject.getByLabelText( 'Open Settings' )
 					)
 				);
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image'
 									? 'None'
@@ -192,20 +192,20 @@ describe.each( [
 				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Custom URL. Empty' )
+							subject.getByLabelText( 'Custom URL. Empty' )
 						)
 					);
 				}
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Copy URL from the clipboard, ${ url }`
 						)
 					)
 				);
 				fireEvent.press(
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image' ? 'Custom URL' : url
 							}`
@@ -215,15 +215,15 @@ describe.each( [
 				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( `Custom URL, ${ url }` )
+							subject.getByLabelText( `Custom URL, ${ url }` )
 						)
 					);
 				}
-				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+				await waitFor( () => subject.getByLabelText( 'Apply' ) );
 
 				// Assert.
 				expect(
-					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
 			} );
 		} );
@@ -246,7 +246,7 @@ describe.each( [
 
 					// Act.
 					const block = await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							type === 'core/image'
 								? /Image Block/
 								: /Button Block/
@@ -256,12 +256,12 @@ describe.each( [
 					fireEvent.press( block );
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Open Settings' )
+							subject.getByLabelText( 'Open Settings' )
 						)
 					);
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
+							subject.getByLabelText(
 								`Link to, ${
 									type === 'core/image'
 										? 'None'
@@ -273,12 +273,12 @@ describe.each( [
 					if ( type === 'core/image' ) {
 						fireEvent.press(
 							await waitFor( () =>
-								subject.getByA11yLabel( /Custom URL/ )
+								subject.getByLabelText( /Custom URL/ )
 							)
 						);
 					}
 					await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Copy URL from the clipboard, ${ url }`
 						)
 					);
@@ -313,7 +313,7 @@ describe.each( [
 
 					// Act.
 					const block = await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							type === 'core/image'
 								? /Image Block/
 								: /Button Block/
@@ -323,12 +323,12 @@ describe.each( [
 					fireEvent.press( block );
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Open Settings' )
+							subject.getByLabelText( 'Open Settings' )
 						)
 					);
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
+							subject.getByLabelText(
 								`Link to, ${
 									type === 'core/image'
 										? 'None'
@@ -340,13 +340,13 @@ describe.each( [
 					if ( type === 'core/image' ) {
 						fireEvent.press(
 							await waitFor( () =>
-								subject.getByA11yLabel( /Custom URL/ )
+								subject.getByLabelText( /Custom URL/ )
 							)
 						);
 					}
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
+							subject.getByLabelText(
 								`Copy URL from the clipboard, ${ url }`
 							)
 						)
@@ -354,7 +354,7 @@ describe.each( [
 
 					// Assert.
 					const linkToField = await waitFor( () =>
-						subject.getByA11yLabel(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image' ? 'Custom URL' : url
 							}`