@wordpress/components 19.6.1 → 19.8.0

package/src/box-control/input-controls.js

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
@@ -91,25 +92,35 @@ export default function BoxInputControls( {
 				align="top"
 				className="component-box-control__input-controls"
 			>
-				{ filteredSides.map( ( side ) => (
-					<UnitControl
-						{ ...props }
-						isFirst={ first === side }
-						isLast={ last === side }
-						isOnly={ only === side }
-						value={ values[ side ] }
-						unit={
-							values[ side ] ? undefined : selectedUnits[ side ]
-						}
-						onChange={ createHandleOnChange( side ) }
-						onUnitChange={ createHandleOnUnitChange( side ) }
-						onFocus={ createHandleOnFocus( side ) }
-						onHoverOn={ createHandleOnHoverOn( side ) }
-						onHoverOff={ createHandleOnHoverOff( side ) }
-						label={ LABELS[ side ] }
-						key={ `box-control-${ side }` }
-					/>
-				) ) }
+				{ filteredSides.map( ( side ) => {
+					const [
+						parsedQuantity,
+						parsedUnit,
+					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+
+					const computedUnit = values[ side ]
+						? parsedUnit
+						: selectedUnits[ side ];
+
+					return (
+						<UnitControl
+							{ ...props }
+							isFirst={ first === side }
+							isLast={ last === side }
+							isOnly={ only === side }
+							value={ [ parsedQuantity, computedUnit ].join(
+								''
+							) }
+							onChange={ createHandleOnChange( side ) }
+							onUnitChange={ createHandleOnUnitChange( side ) }
+							onFocus={ createHandleOnFocus( side ) }
+							onHoverOn={ createHandleOnHoverOn( side ) }
+							onHoverOff={ createHandleOnHoverOff( side ) }
+							label={ LABELS[ side ] }
+							key={ `box-control-${ side }` }
+						/>
+					);
+				} ) }
 			</Layout>
 		</LayoutContainer>
 	);

package/src/box-control/utils.js

@@ -61,24 +61,32 @@ function mode( arr ) {
  * Gets the 'all' input value and unit from values data.
  *
  * @param {Object} values         Box values.
+ * @param {Object} selectedUnits  Box units.
  * @param {Array}  availableSides Available box sides to evaluate.
  *
  * @return {string} A value + unit for the 'all' input.
  */
-export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
+export function getAllValue(
+	values = {},
+	selectedUnits,
+	availableSides = ALL_SIDES
+) {
 	const sides = normalizeSides( availableSides );
 	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
 		parseQuantityAndUnitFromRawValue( values[ side ] )
 	);
-	const allValues = parsedQuantitiesAndUnits.map(
+	const allParsedQuantities = parsedQuantitiesAndUnits.map(
 		( value ) => value[ 0 ] ?? ''
 	);
-	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
+	const allParsedUnits = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 1 ]
+	);
 
-	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
-		? allValues[ 0 ]
+	const commonQuantity = allParsedQuantities.every(
+		( v ) => v === allParsedQuantities[ 0 ]
+	)
+		? allParsedQuantities[ 0 ]
 		: '';
-	const unit = mode( allUnits );
 
 	/**
 	 * The isNumber check is important. On reset actions, the incoming value
@@ -89,9 +97,17 @@ export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	 * isNumber() is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
-	const allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;
+	let commonUnit;
+	if ( isNumber( commonQuantity ) ) {
+		commonUnit = mode( allParsedUnits );
+	} else {
+		// Set meaningful unit selection if no commonQuantity and user has previously
+		// selected units without assigning values while controls were unlinked.
+		commonUnit =
+			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	}
 
-	return allValue;
+	return [ commonQuantity, commonUnit ].join( '' );
 }
 
 /**
@@ -113,13 +129,14 @@ export function getAllUnitFallback( selectedUnits ) {
 /**
  * Checks to determine if values are mixed.
  *
- * @param {Object} values Box values.
- * @param {Array}  sides  Available box sides to evaluate.
+ * @param {Object} values        Box values.
+ * @param {Object} selectedUnits Box units.
+ * @param {Array}  sides         Available box sides to evaluate.
  *
  * @return {boolean} Whether values are mixed.
  */
-export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
-	const allValue = getAllValue( values, sides );
+export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const isMixed = isNaN( parseFloat( allValue ) );
 
 	return isMixed;

package/src/card/styles.js

@@ -8,6 +8,12 @@ import { css } from '@emotion/react';
  */
 import { COLORS, CONFIG } from '../utils';
 
+// Since the border for `Card` is rendered via the `box-shadow` property
+// (as opposed to the `border` property), the value of the border radius needs
+// to be adjusted by removing 1px (this is because the `box-shadow` renders
+// as an "outer radius").
+const adjustedBorderRadius = `calc(${ CONFIG.cardBorderRadius } - 1px)`;
+
 export const Card = css`
 	box-shadow: 0 0 0 1px ${ CONFIG.surfaceBorderColor };
 	outline: none;
@@ -62,13 +68,13 @@ export const Divider = css`
 
 export const borderRadius = css`
 	&:first-of-type {
-		border-top-left-radius: ${ CONFIG.cardBorderRadius };
-		border-top-right-radius: ${ CONFIG.cardBorderRadius };
+		border-top-left-radius: ${ adjustedBorderRadius };
+		border-top-right-radius: ${ adjustedBorderRadius };
 	}
 
 	&:last-of-type {
-		border-bottom-left-radius: ${ CONFIG.cardBorderRadius };
-		border-bottom-right-radius: ${ CONFIG.cardBorderRadius };
+		border-bottom-left-radius: ${ adjustedBorderRadius };
+		border-bottom-right-radius: ${ adjustedBorderRadius };
 	}
 `;
 
@@ -85,7 +91,7 @@ export const borderless = css`
 `;
 
 export const rounded = css`
-	border-radius: ${ CONFIG.cardBorderRadius };
+	border-radius: ${ adjustedBorderRadius };
 `;
 
 const xSmallCardPadding = css`

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

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
-+     class="components-scrollable components-card__body components-card-body css-qqu4qj-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
++     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
-+     class="components-card__body components-card-body css-19nlika-View-Body-borderRadius-medium-shady em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
++     class="components-card__body components-card-body css-kqnlb3-View-Body-borderRadius-medium-shady em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-otmewz-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-f5ly6j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
++     class="components-flex components-card__footer components-card-footer css-1xx98hc-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-otmewz-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-sonr8h-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
++     class="components-flex components-card__footer components-card-footer css-gg08fg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-cw4qrt-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__header components-card-header css-d00z5k-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
++     class="components-flex components-card__header components-card-header css-121pfkj-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -96,16 +96,16 @@ Snapshot Diff:
       class="css-mgwsf4-View-Content em57xhy0"
     >
       <div
--       class="components-flex components-card__header components-card-header css-cw4qrt-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+       class="components-flex components-card__header components-card-header css-1dtpden-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
+-       class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
++       class="components-flex components-card__header components-card-header css-1e8ifbz-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardHeader"
       >
         Header
       </div>
       <div
--       class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
-+       class="components-card__body components-card-body css-bwr6fa-View-Body-borderRadius-large em57xhy0"
+-       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
++       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardBody"
       >
@@ -113,6 +113,23 @@ Snapshot Diff:
       </div>
 `;
 
+exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -1,9 +1,8 @@
+  Array [
+    Object {
+      "background-color": "#fff",
+-     "border-radius": "calc(2px - 1px)",
+      "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)",
+      "color": "#1e1e1e",
+      "outline": "none",
+      "position": "relative",
+    },
+`;
+
 exports[`Card Card component should get the isBorderless and isSize props (passed from its context) overriddenwhen the same props is specified directly on the component 1`] = `
 Snapshot Diff:
 - First value
@@ -124,24 +141,24 @@ Snapshot Diff:
         class="css-mgwsf4-View-Content em57xhy0"
       >
         <div
--         class="components-flex components-card__header components-card-header css-t8b09c-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-1e0mt81-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-bwr6fa-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
++         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-1t7s584-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__footer components-card-footer css-cwhos2-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -157,8 +174,8 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-ssx2ib-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
-+     class="components-surface components-card css-1vyvcpq-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+-     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
++     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -166,24 +183,24 @@ Snapshot Diff:
         class="css-mgwsf4-View-Content em57xhy0"
       >
         <div
--         class="components-flex components-card__header components-card-header css-t8b09c-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-1e0mt81-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-bwr6fa-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-1cnf18v-View-Body-borderRadius-small em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
++         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-1trggei-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__footer components-card-footer css-oc4v7j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -196,11 +213,11 @@ Object {
   "asFragment": [Function],
   "baseElement": .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-2 {
@@ -242,13 +259,13 @@ Object {
 }
 
 .emotion-4:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-4:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-6 {
@@ -259,13 +276,13 @@ Object {
 }
 
 .emotion-6:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-6:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-10 {
@@ -294,13 +311,13 @@ Object {
 }
 
 .emotion-14:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-14:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-16 {
@@ -338,13 +355,13 @@ Object {
 }
 
 .emotion-16:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-16:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-18 {
@@ -452,11 +469,11 @@ Object {
   </body>,
   "container": .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-2 {
@@ -498,13 +515,13 @@ Object {
 }
 
 .emotion-4:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-4:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-6 {
@@ -515,13 +532,13 @@ Object {
 }
 
 .emotion-6:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-6:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-10 {
@@ -550,13 +567,13 @@ Object {
 }
 
 .emotion-14:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-14:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-16 {
@@ -594,13 +611,13 @@ Object {
 }
 
 .emotion-16:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-16:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-18 {
@@ -792,11 +809,11 @@ Compared values have no visual difference.
 exports[`Card Card component should warn when the isElevated prop is passed 1`] = `
 .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-2 {

package/src/card/test/index.js

@@ -14,7 +14,6 @@ import {
 	CardHeader,
 	CardMedia,
 } from '../';
-import { CONFIG } from '../../utils';
 
 describe( 'Card', () => {
 	describe( 'Card component', () => {
@@ -51,12 +50,15 @@ describe( 'Card', () => {
 		} );
 
 		it( 'should add rounded border when the isRounded prop is true', () => {
-			const { container } = render(
+			const { container: containerRounded } = render(
 				<Card isRounded={ true }>Code is Poetry</Card>
 			);
-			expect( container.firstChild ).toHaveStyle( {
-				borderRadius: CONFIG.cardBorderRadius,
-			} );
+			const { container: containerSquared } = render(
+				<Card isRounded={ false }>Code is Poetry</Card>
+			);
+			expect( containerRounded.firstChild ).toMatchStyleDiffSnapshot(
+				containerSquared.firstChild
+			);
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {

package/src/checkbox-control/index.js

@@ -6,9 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+import { useInstanceId, useRefEffect } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
-import { Icon, check } from '@wordpress/icons';
+import { Icon, check, reset } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ export default function CheckboxControl( {
 	className,
 	heading,
 	checked,
+	indeterminate,
 	help,
 	onChange,
 	...props
@@ -31,6 +33,27 @@ export default function CheckboxControl( {
 		} );
 	}
 
+	const [ showCheckedIcon, setShowCheckedIcon ] = useState( false );
+	const [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(
+		false
+	);
+
+	// Run the following callback everytime the `ref` (and the additional
+	// dependencies) change.
+	const ref = useRefEffect(
+		( node ) => {
+			if ( ! node ) {
+				return;
+			}
+
+			// It cannot be set using an HTML attribute.
+			node.indeterminate = !! indeterminate;
+
+			setShowCheckedIcon( node.matches( ':checked' ) );
+			setShowIndeterminateIcon( node.matches( ':indeterminate' ) );
+		},
+		[ checked, indeterminate ]
+	);
 	const instanceId = useInstanceId( CheckboxControl );
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
@@ -44,6 +67,7 @@ export default function CheckboxControl( {
 		>
 			<span className="components-checkbox-control__input-container">
 				<input
+					ref={ ref }
 					id={ id }
 					className="components-checkbox-control__input"
 					type="checkbox"
@@ -53,7 +77,14 @@ export default function CheckboxControl( {
 					aria-describedby={ !! help ? id + '__help' : undefined }
 					{ ...props }
 				/>
-				{ checked ? (
+				{ showIndeterminateIcon ? (
+					<Icon
+						icon={ reset }
+						className="components-checkbox-control__indeterminate"
+						role="presentation"
+					/>
+				) : null }
+				{ showCheckedIcon ? (
 					<Icon
 						icon={ check }
 						className="components-checkbox-control__checked"