@wordpress/components 19.7.0 → 19.9.0

package/src/border-control/types.ts

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type Border = {
+	color?: CSSProperties[ 'borderColor' ];
+	style?: CSSProperties[ 'borderStyle' ];
+	width?: CSSProperties[ 'borderWidth' ];
+};
+
+export type Color = {
+	name: string;
+	color: CSSProperties[ 'color' ];
+};
+
+export type ColorOrigin = {
+	name: string;
+	colors: Color[];
+};
+
+export type Colors = ColorOrigin[] | Color[];
+
+export type ColorProps = {
+	/**
+	 * An array of color definitions. This may also be a multi-dimensional array
+	 * where colors are organized by multiple origins.
+	 */
+	colors?: Colors;
+	/**
+	 * This toggles the ability to choose custom colors.
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * This controls whether the alpha channel will be offered when selecting
+	 * custom colors.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * This is passed on to the color related sub-components which need to be
+	 * made aware of whether the colors prop contains multiple origins.
+	 */
+	__experimentalHasMultipleOrigins?: boolean;
+	/**
+	 * This is passed on to the color related sub-components so they may render
+	 * more effectively when used within a sidebar.
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type LabelProps = {
+	/**
+	 * Provides control over whether the label will only be visible to
+	 * screen readers.
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * If provided, a label will be generated using this as the content.
+	 */
+	label?: string;
+};
+
+export type BorderControlProps = ColorProps &
+	LabelProps & {
+		/**
+		 * This controls whether to include border style options within the
+		 * `BorderDropdown` sub-component.
+		 *
+		 * @default true
+		 */
+		enableStyle?: boolean;
+		/**
+		 * This flags the `BorderControl` to render with a more compact
+		 * appearance. It restricts the width of the control and prevents it
+		 * from expanding to take up additional space.
+		 */
+		isCompact?: boolean;
+		/**
+		 * A callback function invoked when the border value is changed via an
+		 * interaction that selects or clears, border color, style, or width.
+		 */
+		onChange: ( value?: Border ) => void;
+		/**
+		 * A custom CSS class name to be assigned to the border control's
+		 * dropdown popover content.
+		 */
+		popoverContentClassName?: string;
+		/**
+		 * If opted into, sanitizing the border means that if no width or color
+		 * have been selected, the border style is also cleared and `undefined`
+		 * is returned as the new border value.
+		 *
+		 * @default true
+		 */
+		shouldSanitizeBorder?: boolean;
+		/**
+		 * Whether or not to show the header for the border color and style
+		 * picker dropdown. The header includes a label for the color picker
+		 * and a close button.
+		 */
+		showDropdownHeader?: boolean;
+		/**
+		 * An object representing a border or `undefined`. Used to set the
+		 * current border configuration for this component.
+		 */
+		value?: Border;
+		/**
+		 * Controls the visual width of the `BorderControl`. It has no effect if
+		 * the `isCompact` prop is set to `true`.
+		 */
+		width?: CSSProperties[ 'width' ];
+		/**
+		 * Flags whether this `BorderControl` should also render a
+		 * `RangeControl` for additional control over a border's width.
+		 */
+		withSlider?: boolean;
+	};
+
+export type DropdownProps = ColorProps & {
+	/**
+	 * An object representing a border or `undefined`. This component will
+	 * extract the border color and style selections from this object to use as
+	 * values for its popover controls.
+	 */
+	border?: Border;
+	/**
+	 * A custom CSS class name to be assigned to the border control's
+	 * dropdown popover content.
+	 */
+	contentClassName?: string;
+	/**
+	 * This controls whether to render border style options.
+	 *
+	 * @default true
+	 */
+	enableStyle?: boolean;
+	/**
+	 * A callback invoked when the border color or style selections change.
+	 */
+	onChange: ( newBorder?: Border ) => void;
+	/**
+	 * Any previous style selection made by the user. This can be used to
+	 * reapply that previous selection when, for example, a zero border width is
+	 * to a non-zero value.
+	 */
+	previousStyleSelection?: string;
+	/**
+	 * Whether or not to render a header for the border color and style picker
+	 * dropdown. The header includes a label for the color picker and a
+	 * close button.
+	 */
+	showDropdownHeader?: boolean;
+};
+
+export type StylePickerProps = LabelProps & {
+	/**
+	 * A callback function invoked when a border style is selected or cleared.
+	 */
+	onChange: ( style?: string ) => void;
+	/**
+	 * The currently selected border style if there is one. Styles available via
+	 * this control are `solid`, `dashed` & `dotted`, however the possibility
+	 * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.
+	 */
+	value?: string;
+};
+
+export type PopoverProps = {
+	/**
+	 * Callback function to invoke when closing the border dropdown's popover.
+	 */
+	onClose: () => void;
+};

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/color-palette/README.md

@@ -74,3 +74,9 @@ const MyColorPalette = () => {
 	);
 } );
 ```
+
+If you're using this component outside the editor, you can
+[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
+for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
+`Popover.Slot` further up the element tree and within a
+`SlotFillProvider` overall.

package/src/color-palette/stories/index.js

@@ -7,6 +7,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorPalette from '../';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta = {
 	title: 'Components/ColorPalette',
@@ -42,7 +44,12 @@ export default meta;
 
 const Template = ( args ) => {
 	const [ color, setColor ] = useState( '#f00' );
-	return <ColorPalette { ...args } value={ color } onChange={ setColor } />;
+	return (
+		<SlotFillProvider>
+			<ColorPalette { ...args } value={ color } onChange={ setColor } />
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
 };
 
 export const Default = Template.bind( {} );

package/src/custom-select-control/index.js

@@ -154,7 +154,13 @@ export default function CustomSelectControl( {
 				{ itemToString( selectedItem ) }
 				<Icon
 					icon={ chevronDown }
-					className="components-custom-select-control__button-icon"
+					className={ classnames(
+						'components-custom-select-control__button-icon',
+						{
+							'is-next-36px-default-size': __next36pxDefaultSize,
+						}
+					) }
+					size={ 18 }
 				/>
 			</Button>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }

package/src/custom-select-control/style.scss

@@ -41,8 +41,12 @@
 		height: 100%;
 		padding: 0;
 		position: absolute;
-		right: 0;
+		right: $grid-unit-10;
 		top: 0;
+
+		&:not(.is-next-36px-default-size) {
+			right: $grid-unit-05;
+		}
 	}
 }