npm - @wordpress/components - Versions diffs - 21.3.0 → 22.1.0 - Mend

@wordpress/components 21.3.0 → 22.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (811) hide show

package/src/card/test/__snapshots__/index.tsx.snap CHANGED Viewed

@@ -90,27 +90,27 @@ Snapshot Diff:
 - First value
 + Second value
-@@ -5,18 +5,18 @@
-  >
-    <div
-      class="css-mgwsf4-View-Content e19lxcc00"
+@@ -6,18 +6,18 @@
     >
       <div
--       class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+       class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardHeader"
-      >
-        Header
-      </div>
-      <div
--       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardBody"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
-        Code is Poetry
-      </div>
+        <div
+-         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardHeader"
+        >
+          Header
+        </div>
+        <div
+-         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardBody"
+        >
+          Code is Poetry
+        </div>
 `;
 exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = `
@@ -209,9 +209,7 @@ Snapshot Diff:
 `;
 exports[`Card Card component should render correctly 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .emotion-0 {
+.emotion-0 {
   background-color: #fff;
   color: #1e1e1e;
   position: relative;
@@ -383,410 +381,109 @@ Object {
   }
 }
-<body>
-    <div>
+<div>
+  <div
+    class="components-surface components-card emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Card"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    >
       <div
-        class="components-surface components-card emotion-0 emotion-1"
+        class="components-flex components-card__header components-card-header emotion-4 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Card"
+        data-wp-component="CardHeader"
       >
-        <div
-          class="emotion-2 emotion-1"
-        >
-          <div
-            class="components-flex components-card__header components-card-header emotion-4 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardHeader"
-          >
-            Card Header
-          </div>
-          <div
-            class="components-card__body components-card-body emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardBody"
-          >
-            Card Body 1
-          </div>
-          <div
-            class="components-card__body components-card-body emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardBody"
-          >
-            Card Body 2
-          </div>
-          <hr
-            aria-orientation="horizontal"
-            class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
-            data-wp-c16t="true"
-            data-wp-component="CardDivider"
-            role="separator"
-          />
-          <div
-            class="components-card__body components-card-body emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardBody"
-          >
-            Card Body 3
-          </div>
-          <div
-            class="components-card__media components-card-media emotion-14 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardMedia"
-          >
-            <img
-              alt="Card Media"
-              src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-            />
-          </div>
-          <div
-            class="components-flex components-card__footer components-card-footer emotion-16 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="CardFooter"
-          >
-            Card Footer
-          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="components-elevation emotion-18 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="Elevation"
-        />
-        <div
-          aria-hidden="true"
-          class="components-elevation emotion-18 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="Elevation"
-        />
+        Card Header
       </div>
-    </div>
-  </body>,
-  "container": .emotion-0 {
-  background-color: #fff;
-  color: #1e1e1e;
-  position: relative;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  outline: none;
-  border-radius: calc(2px - 1px);
-}
-.emotion-2 {
-  height: 100%;
-}
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  border-bottom: 1px solid;
-  box-sizing: border-box;
-  border-color: rgba(0, 0, 0, 0.1);
-  padding: calc(4px * 4) calc(4px * 6);
-}
-.emotion-4>* {
-  min-width: 0;
-}
-.emotion-4:last-child {
-  border-bottom: none;
-}
-.emotion-4:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-.emotion-4:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-.emotion-6 {
-  box-sizing: border-box;
-  height: auto;
-  max-height: 100%;
-  padding: calc(4px * 4) calc(4px * 6);
-}
-.emotion-6:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-.emotion-6:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-.emotion-10 {
-  border: 0;
-  margin: 0;
-  border-bottom: 1px solid currentColor;
-  height: 0;
-  width: auto;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border-color: rgba(0, 0, 0, 0.1);
-}
-.emotion-14 {
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.emotion-14>img,
-.emotion-14>iframe {
-  display: block;
-  height: auto;
-  max-width: 100%;
-  width: 100%;
-}
-.emotion-14:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-.emotion-14:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-.emotion-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  border-top: 1px solid;
-  box-sizing: border-box;
-  border-color: rgba(0, 0, 0, 0.1);
-  padding: calc(4px * 4) calc(4px * 6);
-}
-.emotion-16>* {
-  min-width: 0;
-}
-.emotion-16:first-of-type {
-  border-top: none;
-}
-.emotion-16:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-.emotion-16:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-.emotion-18 {
-  background: transparent;
-  display: block;
-  margin: 0!important;
-  pointer-events: none;
-  position: absolute;
-  will-change: box-shadow;
-  border-radius: inherit;
-  bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
-  opacity: 1;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
-}
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-18 {
-    transition-duration: 0ms;
-  }
-}
-<div>
-    <div
-      class="components-surface components-card emotion-0 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="Card"
-    >
       <div
-        class="emotion-2 emotion-1"
+        class="components-card__body components-card-body emotion-6 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="CardBody"
       >
-        <div
-          class="components-flex components-card__header components-card-header emotion-4 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardHeader"
-        >
-          Card Header
-        </div>
-        <div
-          class="components-card__body components-card-body emotion-6 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardBody"
-        >
-          Card Body 1
-        </div>
-        <div
-          class="components-card__body components-card-body emotion-6 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardBody"
-        >
-          Card Body 2
-        </div>
-        <hr
-          aria-orientation="horizontal"
-          class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
-          data-wp-c16t="true"
-          data-wp-component="CardDivider"
-          role="separator"
-        />
-        <div
-          class="components-card__body components-card-body emotion-6 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardBody"
-        >
-          Card Body 3
-        </div>
-        <div
-          class="components-card__media components-card-media emotion-14 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardMedia"
-        >
-          <img
-            alt="Card Media"
-            src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-          />
-        </div>
-        <div
-          class="components-flex components-card__footer components-card-footer emotion-16 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="CardFooter"
-        >
-          Card Footer
-        </div>
+        Card Body 1
       </div>
       <div
-        aria-hidden="true"
-        class="components-elevation emotion-18 emotion-1"
+        class="components-card__body components-card-body emotion-6 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Elevation"
+        data-wp-component="CardBody"
+      >
+        Card Body 2
+      </div>
+      <hr
+        aria-orientation="horizontal"
+        class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
+        data-wp-c16t="true"
+        data-wp-component="CardDivider"
+        role="separator"
       />
       <div
-        aria-hidden="true"
-        class="components-elevation emotion-18 emotion-1"
+        class="components-card__body components-card-body emotion-6 emotion-1"
         data-wp-c16t="true"
-        data-wp-component="Elevation"
-      />
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-exports[`Card Card component should show a box shadow when the elevation prop is greater than 0 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-@@ -8,16 +8,16 @@
-    >
-      Code is Poetry
+        data-wp-component="CardBody"
+      >
+        Card Body 3
+      </div>
+      <div
+        class="components-card__media components-card-media emotion-14 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="CardMedia"
+      >
+        <img
+          alt="Card Media"
+          src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+        />
+      </div>
+      <div
+        class="components-flex components-card__footer components-card-footer emotion-16 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="CardFooter"
+      >
+        Card Footer
+      </div>
     </div>
     <div
       aria-hidden="true"
--     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+      class="components-elevation emotion-18 emotion-1"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
     <div
       aria-hidden="true"
--     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+      class="components-elevation emotion-18 emotion-1"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
   </div>
+</div>
+`;
+exports[`Card Card component should show a box shadow when the elevation prop is greater than 0 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+@@ -9,17 +9,17 @@
+      >
+        Code is Poetry
+      </div>
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+    </div>
+  </div>
 `;
 exports[`Card Card component should support the legacy extraSmall value for the size prop as an alias for the xSmall value 1`] = `

package/src/card/test/index.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ import {
 describe( 'Card', () => {
 	describe( 'Card component', () => {
 		it( 'should render correctly', () => {
-			const wrapper = render(
+			const { container } = render(
 				<Card>
 					<CardHeader>Card Header</CardHeader>
 					<CardBody>Card Body 1</CardBody>
@@ -34,7 +34,7 @@ describe( 'Card', () => {
 					<CardFooter>Card Footer</CardFooter>
 				</Card>
 			);
-			expect( wrapper ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 		it( 'should remove borders when the isBorderless prop is true', () => {
@@ -70,9 +70,7 @@ describe( 'Card', () => {
 				<Card>Code is Poetry</Card>
 			);
-			expect( withElevation.firstChild ).toMatchDiffSnapshot(
-				withoutElevation.firstChild
-			);
+			expect( withElevation ).toMatchDiffSnapshot( withoutElevation );
 		} );
 		it( 'should add different amounts of white space when using the size prop', () => {
@@ -90,9 +88,7 @@ describe( 'Card', () => {
 				</Card>
 			);
-			expect( withSizeDefault.firstChild ).toMatchDiffSnapshot(
-				withSizeLarge.firstChild
-			);
+			expect( withSizeDefault ).toMatchDiffSnapshot( withSizeLarge );
 		} );
 		it( 'should warn when the isElevated prop is passed', () => {

package/src/checkbox-control/style.scss CHANGED Viewed

@@ -27,7 +27,7 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	@include reduce-motion("transition");
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -35,8 +35,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	&:checked,
 	&:indeterminate {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
+		background: $components-color-accent;
+		border-color: $components-color-accent;
 		// Hide default checkbox styles in IE.
 		&::-ms-check {

package/src/circular-option-picker/index.js CHANGED Viewed

@@ -16,13 +16,14 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
-function Option( {
-	className,
-	isSelected,
-	selectedIconProps,
-	tooltipText,
-	...additionalProps
-} ) {
+function Option( props ) {
+	const {
+		className,
+		isSelected,
+		selectedIconProps,
+		tooltipText,
+		...additionalProps
+	} = props;
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -52,12 +53,8 @@ function Option( {
 	);
 }
-function DropdownLinkAction( {
-	buttonProps,
-	className,
-	dropdownProps,
-	linkText,
-} ) {
+function DropdownLinkAction( props ) {
+	const { buttonProps, className, dropdownProps, linkText } = props;
 	return (
 		<Dropdown
 			className={ classnames(
@@ -80,7 +77,8 @@ function DropdownLinkAction( {
 	);
 }
-function ButtonAction( { className, children, ...additionalProps } ) {
+function ButtonAction( props ) {
+	const { className, children, ...additionalProps } = props;
 	return (
 		<Button
 			className={ classnames(
@@ -95,12 +93,8 @@ function ButtonAction( { className, children, ...additionalProps } ) {
 	);
 }
-export default function CircularOptionPicker( {
-	actions,
-	className,
-	options,
-	children,
-} ) {
+export default function CircularOptionPicker( props ) {
+	const { actions, className, options, children } = props;
 	return (
 		<div
 			className={ classnames(