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

@wordpress/components 22.0.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 (356) hide show

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

@@ -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,384 +381,82 @@ 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"
-      />
+        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>,
-  "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],
-}
+    <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"
+    />
+  </div>
+</div>
 `;
 exports[`Card Card component should show a box shadow when the elevation prop is greater than 0 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', () => {

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

@@ -36,6 +36,13 @@ for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
 The component accepts the following props.
+### `clearable`: `boolean`
+Whether the palette should have a clearing button.
+-   Required: No
+-   Default: `true`
 ### `colors`: `( PaletteObject | ColorObject )[]`
 Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
@@ -45,21 +52,23 @@ Array with the colors to be shown. When displaying multiple color palettes to ch
 ### `disableCustomColors`: `boolean`
-Whether to allow the user to pick a custom color on top of the predefined choices (defined via the `colors` prop).
+Whether to allow the user to pick a custom color on top of the predefined
+choices (defined via the `colors` prop).
 -   Required: No
 -   Default: `false`
 ### `enableAlpha`: `boolean`
-Whether the color picker should display the alpha channel both in the bottom inputs as well as in the color picker itself.
+This controls whether the alpha channel will be offered when selecting custom
+colors.
 -   Required: No
 -   Default: `false`
 ### `value`: `string`
-currently active value
+Currently active value.
 -   Required: No
@@ -68,16 +77,3 @@ currently active value
 Callback called when a color is selected.
 -   Required: Yes
-### `className`: `string`
-classes to be applied to the container.
--   Required: No
-### `clearable`: `boolean`
-Whether the palette should have a clearing button.
--   Required: No
--   Default: `true`

package/src/color-palette/index.tsx CHANGED Viewed

@@ -223,7 +223,7 @@ function UnforwardedColorPalette(
 		clearable = true,
 		colors = [],
 		disableCustomColors = false,
-		enableAlpha,
+		enableAlpha = false,
 		onChange,
 		value,
 		__experimentalHasMultipleOrigins = false,

package/src/color-palette/style.scss CHANGED Viewed

@@ -25,7 +25,7 @@
 	outline: 1px solid transparent;
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}

package/src/color-palette/types.ts CHANGED Viewed

@@ -3,7 +3,10 @@
  */
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-type OnColorChange = ( newColor?: string ) => void;
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
 export type ColorObject = {
 	name: string;
@@ -18,7 +21,10 @@ export type PaletteObject = {
 type PaletteProps = {
 	className?: string;
 	clearColor: () => void;
-	onChange: OnColorChange;
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: ( newColor?: string ) => void;
 	value?: string;
 	actions?: ReactNode;
 };
@@ -35,14 +41,14 @@ export type MultiplePalettesProps = PaletteProps & {
 export type CustomColorPickerDropdownProps = {
 	isRenderedInSidebar: boolean;
 	renderContent: () => ReactNode;
-	popoverProps?: string[];
+	popoverProps?: Omit< PopoverProps, 'children' >;
 	renderToggle: ( props: {
 		isOpen: boolean;
 		onToggle: MouseEventHandler< HTMLButtonElement >;
 	} ) => ReactNode;
 };
-export type ColorPaletteProps = {
+export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	/**
 	 * Whether the palette should have a clearing button.
 	 *
@@ -65,14 +71,12 @@ export type ColorPaletteProps = {
 	 */
 	disableCustomColors?: boolean;
 	/**
-	 * Whether the color picker should display the alpha channel
-	 * both in the bottom inputs as well as in the color picker itself.
+	 * This controls whether the alpha channel will be offered when selecting
+	 * custom colors.
+	 *
+	 * @default false
 	 */
 	enableAlpha?: boolean;
-	/**
-	 * Callback called when a color is selected.
-	 */
-	onChange: OnColorChange;
 	/**
 	 * Currently active value.
 	 */

package/src/color-picker/input-with-slider.tsx CHANGED Viewed

@@ -25,6 +25,18 @@ export const InputWithSlider = ( {
 	onChange,
 	value,
 }: InputWithSliderProps ) => {
+	const onNumberControlChange = ( newValue?: number | string ) => {
+		if ( ! newValue ) {
+			onChange( 0 );
+			return;
+		}
+		if ( typeof newValue === 'string' ) {
+			onChange( parseInt( newValue, 10 ) );
+			return;
+		}
+		onChange( newValue );
+	};
 	return (
 		<HStack spacing={ 4 }>
 			<NumberControlWrapper
@@ -33,8 +45,7 @@ export const InputWithSlider = ( {
 				label={ label }
 				hideLabelFromVision
 				value={ value }
-				// @ts-expect-error TODO: Resolve discrepancy in NumberControl
-				onChange={ onChange }
+				onChange={ onNumberControlChange }
 				prefix={
 					<Spacer
 						as={ Text }

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

@@ -79,6 +79,7 @@ export default function CustomSelectControl( props ) {
 		value: _selectedItem,
 		onMouseOver,
 		onMouseOut,
+		__experimentalShowSelectedHint = false,
 	} = props;
 	const {
@@ -194,6 +195,12 @@ export default function CustomSelectControl( props ) {
 					} ) }
 				>
 					{ itemToString( selectedItem ) }
+					{ __experimentalShowSelectedHint &&
+						selectedItem.__experimentalHint && (
+							<span className="components-custom-select-control__hint">
+								{ selectedItem.__experimentalHint }
+							</span>
+						) }
 				</SelectControlSelect>
 			</InputBaseWithBackCompatMinWidth>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }

package/src/custom-select-control/stories/index.js CHANGED Viewed

@@ -8,6 +8,7 @@ export default {
 	component: CustomSelectControl,
 	argTypes: {
 		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
 		size: {
 			control: {
 				type: 'radio',