@wordpress/components 19.15.0 → 19.16.0

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

@@ -373,7 +373,7 @@ Object {
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -629,7 +629,7 @@ Object {
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -786,15 +786,15 @@ Snapshot Diff:
     </div>
     <div
       aria-hidden="true"
--     class="components-elevation css-1b4rkmt-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName em57xhy0"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
     <div
       aria-hidden="true"
--     class="components-elevation css-o8otup-View-Elevation-sx-Base-elevationClassName em57xhy0"
-+     class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+-     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName em57xhy0"
++     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Elevation"
     />
@@ -829,7 +829,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 1px 2px 0 rgba(0 ,0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   opacity: 1;
   left: 0;
   right: 0;
@@ -854,7 +854,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 2px 4px 0 rgba(0 ,0, 0, 0.1);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   opacity: 1;
   left: 0;
   right: 0;

package/src/color-palette/index.js

@@ -162,6 +162,13 @@ export const extractColorNameFromCurrentValue = (
 	return __( 'Custom' );
 };
 
+export const showTransparentBackground = ( currentValue ) => {
+	if ( typeof currentValue === 'undefined' ) {
+		return true;
+	}
+	return colord( currentValue ).alpha() === 0;
+};
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -228,14 +235,18 @@ export default function ColorPalette( {
 							aria-haspopup="true"
 							onClick={ onToggle }
 							aria-label={ customColorAccessibleLabel }
-							style={ {
-								background: value,
-								color:
-									colordColor.contrast() >
-									colordColor.contrast( '#000' )
-										? '#fff'
-										: '#000',
-							} }
+							style={
+								showTransparentBackground( value )
+									? { color: '#000' }
+									: {
+											background: value,
+											color:
+												colordColor.contrast() >
+												colordColor.contrast( '#000' )
+													? '#fff'
+													: '#000',
+									  }
+							}
 						>
 							<FlexItem
 								isBlock

package/src/color-palette/style.scss

@@ -7,10 +7,15 @@
 	padding: $grid-unit-15;
 	font-family: inherit;
 	width: 100%;
+	// The background image creates a checkerboard pattern. Ignore rtlcss to
+	// make it work both in LTR and RTL.
+	// See https://github.com/WordPress/gutenberg/pull/42510
+	/*rtl:begin:ignore*/
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
 	background-position: 0 0, 25px 25px;
+	/*rtl:end:ignore*/
 	background-size: calc(2 * 25px) calc(2 * 25px);
 	box-sizing: border-box;
 	color: $white;

package/src/color-palette/test/utils.ts

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { extractColorNameFromCurrentValue } from '../';
+import {
+	extractColorNameFromCurrentValue,
+	showTransparentBackground,
+} from '../';
 
 describe( 'ColorPalette: Utils', () => {
 	describe( 'extractColorNameFromCurrentValue', () => {
@@ -21,4 +24,19 @@ describe( 'ColorPalette: Utils', () => {
 			expect( result ).toBe( 'Blue' );
 		} );
 	} );
+	describe( 'showTransparentBackground', () => {
+		test( 'should return true for undefined color values', () => {
+			expect( showTransparentBackground( undefined ) ).toBe( true );
+		} );
+		test( 'should return true for transparent colors', () => {
+			expect( showTransparentBackground( 'transparent' ) ).toBe( true );
+			expect( showTransparentBackground( '#75757500' ) ).toBe( true );
+		} );
+
+		test( 'should return false for non-transparent colors', () => {
+			expect( showTransparentBackground( '#FFF' ) ).toBe( false );
+			expect( showTransparentBackground( '#757575' ) ).toBe( false );
+			expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha.
+		} );
+	} );
 } );

package/src/color-picker/hex-input.tsx

@@ -53,7 +53,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			prefix={
 				<Spacer
 					as={ Text }
-					marginLeft={ space( 3.5 ) }
+					marginLeft={ space( 4 ) }
 					color={ COLORS.ui.theme }
 					lineHeight={ 1 }
 				>
@@ -65,6 +65,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			size="__unstable-large"
 			__unstableStateReducer={ stateReducer }
 			__unstableInputWidth="9em"
 		/>

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

@@ -37,7 +37,7 @@ export const InputWithSlider = ( {
 				prefix={
 					<Spacer
 						as={ Text }
-						paddingLeft={ space( 3.5 ) }
+						paddingLeft={ space( 4 ) }
 						color={ COLORS.ui.theme }
 						lineHeight={ 1 }
 					>
@@ -45,6 +45,7 @@ export const InputWithSlider = ( {
 					</Spacer>
 				}
 				hideHTMLArrows
+				size="__unstable-large"
 			/>
 			<RangeControl
 				label={ label }

package/src/color-picker/styles.ts

@@ -17,7 +17,6 @@ import { HStack } from '../h-stack';
 import {
 	BackdropUI,
 	Container as InputControlContainer,
-	Input,
 } from '../input-control/styles/input-control-styles';
 import CONFIG from '../utils/config-values';
 
@@ -44,14 +43,6 @@ export const RangeControl = styled( InnerRangeControl )`
 	}
 `;
 
-// All inputs should be the same height so this should be changed at the component level.
-// That involves changing heights of multiple input types probably buttons too etc.
-// So until that is done we are already using the new height on the color picker so it matches the mockups.
-const inputHeightStyle = `
-&&& ${ Input } {
-	height: 40px;
-}`;
-
 // Make the Hue circle picker not go out of the bar.
 const interactiveHueStyles = `
 .react-colorful__interactive {
@@ -125,8 +116,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const CopyButton = styled( Button )`

package/src/combobox-control/index.js

@@ -16,7 +16,6 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { ENTER, UP, DOWN, ESCAPE } from '@wordpress/keycodes';
 import { speak } from '@wordpress/a11y';
 import { closeSmall } from '@wordpress/icons';
 
@@ -119,22 +118,22 @@ function ComboboxControl( {
 			return;
 		}
 
-		switch ( event.keyCode ) {
-			case ENTER:
+		switch ( event.code ) {
+			case 'Enter':
 				if ( selectedSuggestion ) {
 					onSuggestionSelected( selectedSuggestion );
 					preventDefault = true;
 				}
 				break;
-			case UP:
+			case 'ArrowUp':
 				handleArrowNavigation( -1 );
 				preventDefault = true;
 				break;
-			case DOWN:
+			case 'ArrowDown':
 				handleArrowNavigation( 1 );
 				preventDefault = true;
 				break;
-			case ESCAPE:
+			case 'Escape':
 				setIsExpanded( false );
 				setSelectedSuggestion( null );
 				preventDefault = true;

package/src/confirm-dialog/README.md

@@ -17,7 +17,7 @@ The dialog is confirmed by clicking the _confirm_ button or by pressing the `Ent
 Allows the component to be used standalone, just by declaring it as part of another React's component render method:
 
 -   It will be automatically open (displayed) upon mounting;
--   It will be automatically closed when when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
+-   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
 -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
 
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:

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

@@ -9,12 +9,14 @@ import classnames from 'classnames';
  */
 import { Icon, check, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Button, VisuallyHidden } from '../';
+import { VisuallyHidden } from '../';
+import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
+import InputBase from '../input-control/input-base';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -58,12 +60,16 @@ const stateReducer = (
 export default function CustomSelectControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next36pxDefaultSize = false,
+	/** Start opting into the unconstrained width that will become the default in a future version. */
+	__nextUnconstrainedWidth = false,
 	className,
 	hideLabelFromVision,
 	label,
 	describedBy,
 	options: items,
 	onChange: onSelectedItemChange,
+	/** @type {import('../select-control/types').SelectControlProps.size} */
+	size = 'default',
 	value: _selectedItem,
 } ) {
 	const {
@@ -85,6 +91,8 @@ export default function CustomSelectControl( {
 		stateReducer,
 	} );
 
+	const [ isFocused, setIsFocused ] = useState( false );
+
 	function getDescribedBy() {
 		if ( describedBy ) {
 			return describedBy;
@@ -138,31 +146,41 @@ export default function CustomSelectControl( {
 					{ label }
 				</label>
 			) }
-			<Button
-				{ ...getToggleButtonProps( {
-					// This is needed because some speech recognition software don't support `aria-labelledby`.
-					'aria-label': label,
-					'aria-labelledby': undefined,
-					className: classnames(
-						'components-custom-select-control__button',
-						{ 'is-next-36px-default-size': __next36pxDefaultSize }
-					),
-					isSmall: ! __next36pxDefaultSize,
-					describedBy: getDescribedBy(),
-				} ) }
+			<InputBase
+				isFocused={ isOpen || isFocused }
+				__unstableInputWidth={
+					__nextUnconstrainedWidth ? undefined : 'auto'
+				}
+				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
 			>
-				{ itemToString( selectedItem ) }
-				<Icon
-					icon={ chevronDown }
-					className={ classnames(
-						'components-custom-select-control__button-icon',
-						{
-							'is-next-36px-default-size': __next36pxDefaultSize,
-						}
-					) }
-					size={ 18 }
-				/>
-			</Button>
+				<SelectControlSelect
+					as="button"
+					onFocus={ () => setIsFocused( true ) }
+					onBlur={ () => setIsFocused( false ) }
+					selectSize={ size }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					{ ...getToggleButtonProps( {
+						// This is needed because some speech recognition software don't support `aria-labelledby`.
+						'aria-label': label,
+						'aria-labelledby': undefined,
+						className: classnames(
+							'components-custom-select-control__button',
+							{
+								'is-next-unconstrained-width':
+									__nextUnconstrainedWidth,
+							}
+						),
+						describedBy: getDescribedBy(),
+					} ) }
+				>
+					{ itemToString( selectedItem ) }
+					<Icon
+						icon={ chevronDown }
+						className="components-custom-select-control__button-icon"
+						size={ 18 }
+					/>
+				</SelectControlSelect>
+			</InputBase>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&

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

@@ -7,8 +7,13 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: {
-			control: { type: 'boolean' },
+		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__nextUnconstrainedWidth: { control: { type: 'boolean' } },
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'small', 'default', '__unstable-large' ],
+			},
 		},
 	},
 };

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

@@ -8,45 +8,20 @@
 }
 
 .components-custom-select-control__button {
-	border: 1px solid $gray-700;
-	border-radius: $radius-block-ui;
-	min-width: 130px;
 	position: relative;
 	text-align: left;
+	outline: 0; // focus ring is handled elsewhere
 
-	&:not(.is-next-36px-default-size) {
-		min-height: 30px;
-	}
-
-	// For all button sizes allow sufficient space for the
-	// dropdown "arrow" icon to display.
-	&.components-custom-select-control__button {
-		// TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron
-		// (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431)
-		padding-left: $grid-unit-20;
-		padding-right: $icon-size + $grid-unit-10;
-
-		&:not(.is-next-36px-default-size) {
-			padding-left: $grid-unit-10;
-			padding-right: $icon-size;
-		}
-	}
-
-	&:focus:not(:disabled) {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
+	&:not(.is-next-unconstrained-width) {
+		min-width: 130px;
 	}
 
 	.components-custom-select-control__button-icon {
 		height: 100%;
 		padding: 0;
 		position: absolute;
-		right: $grid-unit-10;
+		right: $grid-unit-05;
 		top: 0;
-
-		&:not(.is-next-36px-default-size) {
-			right: $grid-unit-05;
-		}
 	}
 }
 

package/src/divider/README.md

@@ -32,19 +32,26 @@ function Example() {
 
 Adjusts all margins on the inline dimension.
 
-- Required: No
+-   Required: No
+
+### `marginEnd`: `number`
+
+Adjusts the inline-end margin.
+
+-   Required: No
 
 ### `marginStart`: `number`
 
 Adjusts the inline-start margin.
 
-- Required: No
+-   Required: No
 
-### `marginEnd`: `number`
+### `orientation`: `horizontal | vertical`
 
-Adjusts the inline-end margin.
+Divider's orientation. When using inside a flex container, you may need to make sure the divider is `stretch` aligned in order for it to be visible.
 
-- Required: No
+-   Required: No
+-   Default: `horizontal`
 
 ### Inherited props
 

package/src/divider/component.tsx

@@ -14,10 +14,10 @@ import {
 	WordPressComponentProps,
 } from '../ui/context';
 import { DividerView } from './styles';
-import type { Props } from './types';
+import type { DividerProps } from './types';
 
 function UnconnectedDivider(
-	props: WordPressComponentProps< Props, 'hr', false >,
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );
@@ -34,7 +34,6 @@ function UnconnectedDivider(
 /**
  * `Divider` is a layout component that separates groups of related content.
  *
- * @example
  * ```js
  * import {
  * 		__experimentalDivider as Divider,

package/src/divider/index.ts

@@ -1,2 +1,2 @@
 export { default as Divider } from './component';
-export type { Props as DividerProps } from './types';
+export type { DividerProps } from './types';

package/src/divider/stories/index.tsx

@@ -15,13 +15,13 @@ const meta: ComponentMeta< typeof Divider > = {
 	title: 'Components (Experimental)/Divider',
 	argTypes: {
 		margin: {
-			control: { type: 'number' },
+			control: { type: 'text' },
 		},
 		marginStart: {
-			control: { type: 'number' },
+			control: { type: 'text' },
 		},
 		marginEnd: {
-			control: { type: 'number' },
+			control: { type: 'text' },
 		},
 	},
 	parameters: {
@@ -41,7 +41,7 @@ const Template: ComponentStory< typeof Divider > = ( args ) => (
 
 export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
 Horizontal.args = {
-	margin: 2,
+	margin: '2',
 };
 
 export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );

package/src/divider/styles.ts

@@ -9,10 +9,10 @@ import { css } from '@emotion/react';
  */
 import { space } from '../ui/utils/space';
 import { rtl } from '../utils';
-import type { Props } from './types';
+import type { DividerProps } from './types';
 
 const MARGIN_DIRECTIONS: Record<
-	NonNullable< Props[ 'orientation' ] >,
+	NonNullable< DividerProps[ 'orientation' ] >,
 	Record< 'start' | 'end', string >
 > = {
 	vertical: {
@@ -33,7 +33,7 @@ const renderMargin = ( {
 	margin,
 	marginStart,
 	marginEnd,
-}: Props ) =>
+}: DividerProps ) =>
 	css(
 		rtl( {
 			[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
@@ -47,7 +47,7 @@ const renderMargin = ( {
 
 const renderDisplay = ( {
 	'aria-orientation': orientation = 'horizontal',
-}: Props ) => {
+}: DividerProps ) => {
 	return orientation === 'vertical'
 		? css( { display: 'inline' } )
 		: undefined;
@@ -55,7 +55,7 @@ const renderDisplay = ( {
 
 const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
-}: Props ) => {
+}: DividerProps ) => {
 	return css( {
 		[ orientation === 'vertical' ? 'borderRight' : 'borderBottom' ]:
 			'1px solid currentColor',
@@ -64,13 +64,13 @@ const renderBorder = ( {
 
 const renderSize = ( {
 	'aria-orientation': orientation = 'horizontal',
-}: Props ) =>
+}: DividerProps ) =>
 	css( {
 		height: orientation === 'vertical' ? 'auto' : 0,
 		width: orientation === 'vertical' ? 0 : 'auto',
 	} );
 
-export const DividerView = styled.hr< Props >`
+export const DividerView = styled.hr< DividerProps >`
 	border: 0;
 	margin: 0;
 

package/src/divider/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -23,14 +23,14 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,10 +2,8 @@
+@@ -2,8 +2,10 @@
     Object {
       "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
--     "margin-bottom": "calc(4px * 7)",
--     "margin-top": "calc(4px * 7)",
++     "margin-bottom": "calc(4px * 7)",
++     "margin-top": "calc(4px * 7)",
       "width": "auto",
     },
   ]
@@ -41,13 +41,13 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,9 +2,8 @@
+@@ -2,8 +2,9 @@
     Object {
       "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
--     "margin-bottom": "calc(4px * 5)",
++     "margin-bottom": "calc(4px * 5)",
       "width": "auto",
     },
   ]
@@ -58,13 +58,13 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,9 +2,8 @@
+@@ -2,8 +2,9 @@
     Object {
       "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
--     "margin-top": "calc(4px * 5)",
++     "margin-top": "calc(4px * 5)",
       "width": "auto",
     },
   ]

package/src/divider/test/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Divider } from '..';
+
+describe( 'props', () => {
+	beforeEach( () => {
+		render( <Divider /> );
+	} );
+
+	test( 'should render correctly', () => {
+		expect( screen.getByRole( 'separator' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render marginStart', () => {
+		render( <Divider marginStart={ 5 } /> );
+
+		const dividers = screen.getAllByRole( 'separator' );
+		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+	} );
+
+	test( 'should render marginEnd', () => {
+		render( <Divider marginEnd={ 5 } /> );
+
+		const dividers = screen.getAllByRole( 'separator' );
+		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+	} );
+
+	test( 'should render margin', () => {
+		render( <Divider margin={ 7 } /> );
+
+		const dividers = screen.getAllByRole( 'separator' );
+		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+	} );
+} );