@wordpress/components 19.7.0 → 19.8.2

package/src/disabled/README.md

@@ -33,19 +33,16 @@ const MyDisabled = () => {
 };
 ```
 
-A component can detect if it has been wrapped in a `<Disabled>` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Consumer`.
+A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Context`.
 
 ```jsx
-function CustomButton() {
+function CustomButton( props ) {
+	const isDisabled = useContext( Disabled.Context );
 	return (
-		<Disabled.Consumer>
-			{ ( isDisabled ) => (
-				<button
-					{ ...this.props }
-					style={ { opacity: isDisabled ? 0.5 : 1 } }
-				/>
-			) }
-		</Disabled.Consumer>
+		<button
+			{ ...props }
+			style={ { opacity: isDisabled ? 0.5 : 1 } }
+		/>
 	);
 }
 ```

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

@@ -3,11 +3,11 @@
 exports[`props should render correctly 1`] = `
 .emotion-1 {
   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-1 .components-card-body {
@@ -26,13 +26,13 @@ exports[`props should render correctly 1`] = `
 }
 
 .emotion-5: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-5: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-7 {
@@ -172,7 +172,7 @@ Snapshot Diff:
           tabindex="-1"
         />
 +       <div
-+         class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
++         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
 +         data-wp-c16t="true"
 +         data-wp-component="CardBody"
 +       >

package/src/form-toggle/README.md

@@ -61,7 +61,7 @@ const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );
 
 	<FormToggle
-		checked={ checked }
+		checked={ isChecked }
 		onChange={ () => setChecked( ( state ) => ! state ) }
 	/>
 };

package/src/guide/index.js

@@ -6,10 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, Children } from '@wordpress/element';
+import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
 import Modal from '../modal';
 import Button from '../button';
 import PageControl from './page-control';
-import FinishButton from './finish-button';
 
 export default function Guide( {
 	children,
@@ -27,6 +27,7 @@ export default function Guide( {
 	onFinish,
 	pages = [],
 } ) {
+	const guideContainer = useRef();
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
 	useEffect( () => {
@@ -38,6 +39,12 @@ export default function Guide( {
 		}
 	}, [ children ] );
 
+	useEffect( () => {
+		// Each time we change the current page, start from the first element of the page.
+		// This also solves any focus loss that can happen.
+		focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+	}, [ currentPage ] );
+
 	if ( Children.count( children ) ) {
 		pages = Children.map( children, ( child ) => ( { content: child } ) );
 	}
@@ -73,6 +80,7 @@ export default function Guide( {
 					goForward();
 				}
 			} }
+			ref={ guideContainer }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">
@@ -87,15 +95,6 @@ export default function Guide( {
 					) }
 
 					{ pages[ currentPage ].content }
-
-					{ ! canGoForward && (
-						<FinishButton
-							className="components-guide__inline-finish-button"
-							onClick={ onFinish }
-						>
-							{ finishButtonText || __( 'Finish' ) }
-						</FinishButton>
-					) }
 				</div>
 
 				<div className="components-guide__footer">
@@ -116,12 +115,12 @@ export default function Guide( {
 						</Button>
 					) }
 					{ ! canGoForward && (
-						<FinishButton
+						<Button
 							className="components-guide__finish-button"
 							onClick={ onFinish }
 						>
 							{ finishButtonText || __( 'Finish' ) }
-						</FinishButton>
+						</Button>
 					) }
 				</div>
 			</div>

package/src/guide/style.scss

@@ -128,8 +128,4 @@
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}
-
-	&.components-guide__inline-finish-button {
-		display: none;
-	}
 }

package/src/index.js

@@ -23,6 +23,13 @@ export {
 	useAutocompleteProps as __unstableUseAutocompleteProps,
 } from './autocomplete';
 export { default as BaseControl } from './base-control';
+export {
+	BorderBoxControl as __experimentalBorderBoxControl,
+	hasSplitBorders as __experimentalHasSplitBorders,
+	isDefinedBorder as __experimentalIsDefinedBorder,
+	isEmptyBorder as __experimentalIsEmptyBorder,
+} from './border-box-control';
+export { BorderControl as __experimentalBorderControl } from './border-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
@@ -139,6 +146,7 @@ export { default as ToggleControl } from './toggle-control';
 export {
 	ToggleGroupControl as __experimentalToggleGroupControl,
 	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
+	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
 } from './toggle-group-control';
 export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';

package/src/item-group/styles.ts

@@ -36,6 +36,7 @@ export const item = css`
 	width: 100%;
 	display: block;
 	margin: 0;
+	color: inherit;
 `;
 
 export const bordered = css`

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-4qcpca-View-medium-item em57xhy0"
-+     class="components-item css-132y1d5-View-large-item em57xhy0"
+-     class="components-item css-bsdqin-View-medium-item em57xhy0"
++     class="components-item css-1ohjtsa-View-large-item em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -78,6 +78,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   width: 100%;
   display: block;
   margin: 0;
+  color: inherit;
   border-radius: 2px;
 }
 
@@ -120,8 +121,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-4qcpca-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-bsdqin-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -147,8 +148,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-4qcpca-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-bsdqin-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

package/src/mobile/picker/index.android.js

@@ -78,7 +78,6 @@ export default class Picker extends Component {
 			<BottomSheet
 				isVisible={ isVisible }
 				onClose={ this.onClose }
-				style={ { paddingBottom: 20 } }
 				hideHeader
 				testID={ testID }
 			>

package/src/palette-edit/index.js

@@ -9,7 +9,10 @@ import { kebabCase } from 'lodash';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
-import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';
+import {
+	__experimentalUseFocusOutside as useFocusOutside,
+	useDebounce,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -197,6 +200,9 @@ function PaletteEditListView( {
 			}
 		};
 	}, [] );
+
+	const debounceOnChange = useDebounce( onChange, 100 );
+
 	return (
 		<VStack spacing={ 3 }>
 			<ItemGroup isRounded>
@@ -212,7 +218,7 @@ function PaletteEditListView( {
 							}
 						} }
 						onChange={ ( newElement ) => {
-							onChange(
+							debounceOnChange(
 								elements.map(
 									( currentElement, currentIndex ) => {
 										if ( currentIndex === index ) {

package/src/surface/styles.js

@@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.black };
+	color: ${ COLORS.darkGray.primary };
 	position: relative;
 `;
 

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

@@ -6,8 +6,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-k1ws5-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-pt58n0-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -21,8 +21,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-gi9sau-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1vckp4o-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -36,8 +36,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1lwskr8-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-sw9dzi-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -51,8 +51,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-sdy6q1-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-123k66h-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -63,7 +63,7 @@ Snapshot Diff:
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
 }
 
@@ -82,8 +82,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-jkj9zl-View-Surface-getBorders-secondary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >

package/src/toggle-group-control/index.ts

@@ -1,2 +1,3 @@
 export { ToggleGroupControl } from './toggle-group-control';
 export { ToggleGroupControlOption } from './toggle-group-control-option';
+export { ToggleGroupControlOptionIcon } from './toggle-group-control-option-icon';

package/src/toggle-group-control/stories/index.js

@@ -7,11 +7,16 @@ import { boolean, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
 import { View } from '../../view';
 import Button from '../../button';
 
@@ -57,23 +62,23 @@ const _default = ( { options } ) => {
 		KNOBS_GROUPS.ToggleGroupControl
 	);
 
-	const controlOptions = options.map( ( opt, index ) => (
+	const controlOptions = options.map( ( option, index ) => (
 		<ToggleGroupControlOption
-			key={ opt.value }
-			value={ opt.value }
+			key={ option.value }
+			value={ option.value }
 			label={ text(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				opt.label,
+				option.label,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 			aria-label={ text(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: aria-label`,
-				opt[ 'aria-label' ],
+				option[ 'aria-label' ],
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 			showTooltip={ boolean(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
-				opt.showTooltip,
+				option.showTooltip,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 		/>
@@ -125,6 +130,31 @@ WithAriaLabel.args = {
 	],
 };
 
+export const WithIcons = () => {
+	const [ state, setState ] = useState();
+	return (
+		<ToggleGroupControl
+			onChange={ setState }
+			value={ state }
+			label={ 'With icons' }
+			hideLabelFromVision
+		>
+			<ToggleGroupControlOptionIcon
+				value="uppercase"
+				icon={ formatUppercase }
+				showTooltip={ true }
+				aria-label="Uppercase"
+			/>
+			<ToggleGroupControlOptionIcon
+				value="lowercase"
+				icon={ formatLowercase }
+				showTooltip={ true }
+				aria-label="Lowercase"
+			/>
+		</ToggleGroupControl>
+	);
+};
+
 export const WithReset = () => {
 	const [ alignState, setAlignState ] = useState();
 	const aligns = [ 'Left', 'Center', 'Right' ];