@wordpress/components 19.1.2 → 19.2.1-next.33ec3857e2.0

package/src/base-control/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/button/index.native.js

@@ -93,15 +93,29 @@ export function Button( props ) {
 		label,
 		shortcut,
 		tooltipPosition,
+		isActiveStyle,
+		customContainerStyles,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
 	const isDisabled = ariaDisabled || disabled;
 
+	const containerStyle = [
+		styles.container,
+		customContainerStyles && { ...customContainerStyles },
+	];
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed &&
+			isActiveStyle?.borderRadius && {
+				borderRadius: isActiveStyle.borderRadius,
+			} ),
+		...( isActiveStyle?.backgroundColor && {
+			backgroundColor: isActiveStyle.backgroundColor,
+		} ),
 	};
 
 	const states = [];
@@ -159,7 +173,7 @@ export function Button( props ) {
 			accessibilityHint={ hint }
 			onPress={ onClick }
 			onLongPress={ onLongPress }
-			style={ styles.container }
+			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
 		>

package/src/button/stories/index.js

@@ -24,7 +24,7 @@ export default {
 	title: 'Components/Button',
 	component: Button,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/button/style.scss

@@ -201,6 +201,20 @@
 		}
 	}
 
+	&.is-destructive.is-tertiary {
+		box-shadow: none;
+
+		&:hover:not(:disabled) {
+			box-shadow: inset 0 0 0 $border-width $alert-red;
+			color: $alert-red;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
+			color: $alert-red;
+		}
+	}
+
 
 	/**
 	 * Link buttons.

package/src/card/card/README.md

@@ -6,14 +6,14 @@
 
 `Card` also provides a convenient set of [sub-components](#sub-components) such as `CardBody`, `CardHeader`, `CardFooter`, and more (see below).
 
-```jsx live
+```jsx
 import {
 	Card,
 	CardHeader,
 	CardBody,
 	CardFooter,
-	Text,
-	Heading,
+	__experimentalText as Text,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 
 function Example() {

package/src/card/stories/index.js

@@ -22,7 +22,7 @@ export default {
 	component: Card,
 	title: 'Components/Card',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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

@@ -269,10 +269,10 @@ Object {
 }
 
 .emotion-10 {
-  border-color: rgba(0, 0, 0, 0.1);
-  border-width: 0 0 1px 0;
-  height: 0;
+  border: 0;
   margin: 0;
+  border-bottom: 1px solid currentColor;
+  height: 0;
   width: auto;
   box-sizing: border-box;
   display: block;
@@ -525,10 +525,10 @@ Object {
 }
 
 .emotion-10 {
-  border-color: rgba(0, 0, 0, 0.1);
-  border-width: 0 0 1px 0;
-  height: 0;
+  border: 0;
   margin: 0;
+  border-bottom: 1px solid currentColor;
+  height: 0;
   width: auto;
   box-sizing: border-box;
   display: block;

package/src/checkbox-control/index.js

@@ -27,7 +27,7 @@ export default function CheckboxControl( {
 	if ( heading ) {
 		deprecated( '`heading` prop in `CheckboxControl`', {
 			alternative: 'a separate element to implement a heading',
-			plugin: 'Gutenberg',
+			since: '5.8',
 		} );
 	}
 

package/src/checkbox-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/CheckboxControl',
 	component: CheckboxControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/clipboard-button/index.js

@@ -26,8 +26,7 @@ export default function ClipboardButton( {
 	...buttonProps
 } ) {
 	deprecated( 'wp.components.ClipboardButton', {
-		since: '10.3',
-		plugin: 'Gutenberg',
+		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 

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

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/ColorIndicator',
 	component: ColorIndicator,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/color-indicator/style.scss

@@ -1,11 +1,8 @@
 .component-color-indicator {
-	width: 25px;
-	height: 16px;
-	margin-left: 0.8rem;
-	border: 1px solid #dadada;
+	width: $grid-unit-50 * 0.5;
+	height: $grid-unit-50 * 0.5;
+	border-radius: 50%;
+	border: $border-width solid $gray-300;
 	display: inline-block;
-
-	& + & {
-		margin-left: 0.5rem;
-	}
+	padding: 0;
 }

package/src/color-palette/index.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -35,6 +35,7 @@ function SinglePalette( {
 	const colorOptions = useMemo( () => {
 		return map( colors, ( { color, name } ) => {
 			const colordColor = colord( color );
+
 			return (
 				<CircularOptionPicker.Option
 					key={ color }
@@ -109,6 +110,20 @@ function MultiplePalettes( {
 	);
 }
 
+export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
+	return (
+		<Dropdown
+			contentClassName={ classnames(
+				'components-color-palette__custom-color-dropdown-content',
+				{
+					'is-rendered-in-sidebar': isRenderedInSidebar,
+				}
+			) }
+			{ ...props }
+		/>
+	);
+}
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -133,17 +148,23 @@ export default function ColorPalette( {
 		/>
 	);
 
+	let dropdownPosition;
+	let popoverProps;
+	if ( __experimentalIsRenderedInSidebar ) {
+		dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
+		popoverProps = { __unstableForcePosition: true };
+	}
+
+	const colordColor = colord( value );
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
-				<Dropdown
-					contentClassName={ classnames(
-						'components-color-palette__custom-color-dropdown-content',
-						{
-							'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,
-						}
-					) }
+				<CustomColorPickerDropdown
+					position={ dropdownPosition }
+					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
+					popoverProps={ popoverProps }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
 							className="components-color-palette__custom-color"
@@ -151,7 +172,14 @@ export default function ColorPalette( {
 							aria-haspopup="true"
 							onClick={ onToggle }
 							aria-label={ __( 'Custom color picker' ) }
-							style={ { background: value } }
+							style={ {
+								background: value,
+								color:
+									colordColor.contrast() >
+									colordColor.contrast( '#000' )
+										? '#fff'
+										: '#000',
+							} }
 						>
 							{ value }
 						</button>

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

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/color-palette/style.scss

@@ -1,7 +1,7 @@
 .components-color-palette__custom-color {
+	position: relative;
 	border: none;
 	background: none;
-	outline: 0;
 	display: block;
 	border-radius: $radius-block-ui;
 	height: $grid-unit-60;
@@ -15,6 +15,15 @@
 	box-sizing: border-box;
 	color: $white;
 	cursor: pointer;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode.
+	outline: 1px solid transparent;
+
+	&:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		// Show a outline in Windows high contrast mode.
+		outline-width: 2px;
+	}
 }
 
 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -17,6 +17,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   style={
     Object {
       "background": "#f00",
+      "color": "#000",
     }
   }
 >
@@ -27,7 +28,6 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
   contentClassName="components-color-palette__custom-color-dropdown-content"
-  key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
 >
@@ -44,6 +44,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
       style={
         Object {
           "background": "#f00",
+          "color": "#000",
         }
       }
     >
@@ -172,37 +173,45 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       data-wp-component="VStack"
       isColumn={true}
     >
+      <Noop />
       <div
         className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
         data-wp-c16t={true}
         data-wp-component="VStack"
       >
-        <Dropdown
-          contentClassName="components-color-palette__custom-color-dropdown-content"
+        <CustomColorPickerDropdown
+          isRenderedInSidebar={false}
           key=".0"
           renderContent={[Function]}
           renderToggle={[Function]}
         >
-          <div
-            className="components-dropdown"
-            tabIndex="-1"
+          <Dropdown
+            contentClassName="components-color-palette__custom-color-dropdown-content"
+            renderContent={[Function]}
+            renderToggle={[Function]}
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-color-palette__custom-color"
-              onClick={[Function]}
-              style={
-                Object {
-                  "background": "#f00",
-                }
-              }
+            <div
+              className="components-dropdown"
+              tabIndex="-1"
             >
-              #f00
-            </button>
-          </div>
-        </Dropdown>
+              <button
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker"
+                className="components-color-palette__custom-color"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "background": "#f00",
+                    "color": "#000",
+                  }
+                }
+              >
+                #f00
+              </button>
+            </div>
+          </Dropdown>
+        </CustomColorPickerDropdown>
         <SinglePalette
           actions={
             <ButtonAction

package/src/color-picker/color-display.tsx

@@ -18,6 +18,7 @@ import { Flex, FlexItem } from '../flex';
 import { Tooltip } from '../ui/tooltip';
 import type { ColorType } from './types';
 import { space } from '../ui/utils/space';
+import { COLORS } from '../utils/colors-values';
 
 interface ColorDisplayProps {
 	color: Colord;
@@ -41,7 +42,7 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
 		{ values.map( ( [ value, abbreviation ] ) => {
 			return (
 				<FlexItem key={ abbreviation } isBlock display="flex">
-					<Text color="blue">{ abbreviation }</Text>
+					<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>
 					<Text>{ value }</Text>
 				</FlexItem>
 			);
@@ -84,7 +85,7 @@ const HexDisplay = ( { color }: DisplayProps ) => {
 	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
 	return (
 		<FlexItem>
-			<Text color="blue">#</Text>
+			<Text color={ COLORS.ui.theme }>#</Text>
 			<Text>{ colorWithoutHash }</Text>
 		</FlexItem>
 	);

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

@@ -15,6 +15,7 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
+import { COLORS } from '../utils/colors-values';
 
 interface HexInputProps {
 	color: Colord;
@@ -35,7 +36,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				<Spacer
 					as={ Text }
 					marginLeft={ space( 3.5 ) }
-					color="blue"
+					color={ COLORS.ui.theme }
 					lineHeight={ 1 }
 				>
 					#

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

@@ -6,6 +6,7 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
+import { COLORS } from '../utils/colors-values';
 
 interface InputWithSliderProps {
 	min: number;
@@ -37,7 +38,7 @@ export const InputWithSlider = ( {
 					<Spacer
 						as={ Text }
 						paddingLeft={ space( 3.5 ) }
-						color="blue"
+						color={ COLORS.ui.theme }
 						lineHeight={ 1 }
 					>
 						{ abbreviation }

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

@@ -20,7 +20,7 @@ export default {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/combobox-control/README.md

@@ -21,7 +21,7 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
  * WordPress dependencies
  */
 import { ComboboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 const options = [
 	{
@@ -51,7 +51,7 @@ function MyComboboxControl() {
 			value={ fontSize }
 			onChange={ setFontSize }
 			options={ filteredOptions }
-			onInputChange={ ( inputValue ) =>
+			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
 					options.filter( ( option ) =>
 						option.label

package/src/confirm-dialog/README.md

@@ -0,0 +1,128 @@
+# `ConfirmDialog`
+
+<div class="callout callout-alert">
+This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md] and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+
+The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
+
+## Usage
+
+`ConfirmDialog` has two main implicit modes: controlled and uncontrolled.
+
+### Uncontrolled mode
+
+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);
+  * `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:
+
+```jsx
+import {
+  __experimentalConfirmDialog as ConfirmDialog
+} from '@wordpress/components';
+
+function Example() {
+  return (
+    <ConfirmDialog onConfirm={ () => console.debug(' Confirmed! ') }>
+      Are you sure? <strong>This action cannot be undone!</strong>
+    </ConfirmDialog>
+  );
+}
+```
+
+### Controlled mode
+
+Let the parent component control when the dialog is open/closed. It's activated when a boolean value is passed to `isOpen`:
+  * It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;
+  * Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;
+  * You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
+
+
+```jsx
+import {
+  __experimentalConfirmDialog as ConfirmDialog
+} from '@wordpress/components';
+
+function Example() {
+  const [ isOpen, setIsOpen ] = useState( true );
+
+  const handleConfirm = () => {
+    console.debug( 'Confirmed!' );
+    setIsOpen( false );
+  }
+
+  const handleCancel = () => {
+    console.debug( 'Cancelled!' );
+    setIsOpen( false );
+  }
+
+  return (
+    <ConfirmDialog
+      isOpen={ isOpen }
+      onConfirm={ handleConfirm }
+      onCancel={ handleCancel }
+    >
+      Are you sure? <strong>This action cannot be undone!</strong>
+    </ConfirmDialog>
+  );
+}
+```
+
+### Unsupported: Multiple instances
+
+Multiple `ConfirmDialog's is an edge case that's currently not officially supported by this component. At the moment, new instances will end up closing the last instance due to the way the `Modal` is implemented.
+
+## Custom Types
+
+```ts
+type DialogInputEvent =
+	| KeyboardEvent< HTMLDivElement >
+	| MouseEvent< HTMLButtonElement >
+```
+
+## Props
+
+### `title`: `string`
+
+- Required: No
+
+An optional `title` for the dialog. Setting a title will render it in a title bar at the top of the dialog, making it a bit taller. The bar will also include an `x` close button at the top-right corner.
+
+### `children`: `React.ReactNode`
+
+- Required: Yes
+
+The actual message for the dialog. It's passed as children and any valid `ReactNode` is accepted:
+
+```jsx
+<ConfirmDialog>
+ Are you sure? <strong>This action cannot be undone!</strong>
+</ConfirmDialog>
+```
+
+### `isOpen`: `boolean`
+
+- Required: No
+
+Defines if the dialog is open (displayed) or closed (not rendered/displayed). It also implicitly toggles the controlled mode if set or the uncontrolled mode if it's not set.
+
+### `onConfirm`: `( event: DialogInputEvent ) => void`
+
+- Required: Yes
+
+The callback that's called when the user confirms. A confirmation can happen when the `OK` button is clicked or when `Enter` is pressed.
+
+### `onCancel`: `( event: DialogInputEvent ) => void`
+
+- Required: Only if `isOpen` is not set
+
+The callback that's called when the user cancels. A cancellation can happen when the `Cancel` button is clicked, when the `ESC` key is pressed, or when a click outside of the dialog focus is detected (i.e. in the overlay).
+
+It's not required if `isOpen` is not set (uncontrolled mode), as the component will take care of closing itself, but you can still pass a callback if something must be done upon cancelling (the component will still close itself in this case).
+
+If `isOpen` is set (controlled mode), then it's required, and you need to set the state that defines `isOpen` to `false` as part of this callback if you want the dialog to close when the user cancels.