@wordpress/components 21.2.0 → 22.0.0

package/src/v-stack/test/index.tsx

@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/view/test/__snapshots__/index.js.snap

@@ -1,41 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render as another element 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
 
 exports[`props should render correctly 1`] = `
-<div
-  class="emotion-0 emotion-1"
->
-  <span />
+<div>
+  <div
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </div>
 </div>
 `;
 
 exports[`props should render with custom styles (Array) 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
 
 exports[`props should render with custom styles (object) 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
 
 exports[`props should render with custom styles (string) 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;

package/src/view/test/index.js

@@ -15,7 +15,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render as another element', () => {
@@ -24,7 +24,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render with custom styles (string)', () => {
@@ -38,7 +38,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render with custom styles (object)', () => {
@@ -52,7 +52,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render with custom styles (Array)', () => {
@@ -69,6 +69,6 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -63,8 +63,6 @@
 		"src/palette-edit",
 		"src/panel",
 		"src/query-controls",
-		"src/radio",
-		"src/radio-group",
 		"src/responsive-wrapper",
 		"src/sandbox",
 		"src/snackbar",