@wordpress/components 19.7.0 → 19.9.0

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/heading/hook.ts

@@ -70,7 +70,7 @@ export function useHeading(
 	}
 
 	const textProps = useText( {
-		color: COLORS.darkGray.heading,
+		color: COLORS.gray[ 900 ],
 		size: getHeadingFontSize( level ),
 		isBlock: true,
 		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],

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

@@ -5,7 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -27,7 +27,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
@@ -45,7 +45,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",

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/input-control/README.md

@@ -105,5 +105,5 @@ Type of the input element to render. Defaults to "text".
 
 The current value of the input.
 
--   Type: `String | Number`
--   Required: Yes
+-   Type: `String`
+-   Required: No

package/src/input-control/index.tsx

@@ -25,7 +25,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-export function InputControl(
+export function UnforwardedInputControl(
 	{
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
@@ -88,6 +88,25 @@ export function InputControl(
 	);
 }
 
-const ForwardedComponent = forwardRef( InputControl );
+/**
+ * InputControl components let users enter and edit text. This is an experimental component
+ * intended to (in time) merge with or replace `TextControl`.
+ *
+ * @example
+ * import { __experimentalInputControl as InputControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/compose';
+ *
+ * const Example = () => {
+ *   const [ value, setValue ] = useState( '' );
+ *
+ *   return (
+ *  	<InputControl
+ *  		value={ value }
+ *  		onChange={ ( nextValue ) => setValue( nextValue ) }
+ *  	/>
+ *   );
+ * };
+ */
+export const InputControl = forwardRef( UnforwardedInputControl );
 
-export default ForwardedComponent;
+export default InputControl;

package/src/input-control/stories/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import InputControl from '..';
+
+const meta: ComponentMeta< typeof InputControl > = {
+	title: 'Components (Experimental)/InputControl',
+	component: InputControl,
+	argTypes: {
+		__unstableInputWidth: { control: { type: 'text' } },
+		__unstableStateReducer: { control: { type: null } },
+		onChange: { control: { type: null } },
+		prefix: { control: { type: null } },
+		suffix: { control: { type: null } },
+		type: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof InputControl > = ( args ) => (
+	<InputControl { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Value',
+	placeholder: 'Placeholder',
+	value: '',
+};
+
+export const WithPrefix = Template.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+};
+
+export const WithSideLabel = Template.bind( {} );
+WithSideLabel.args = {
+	...Default.args,
+	labelPosition: 'side',
+};
+
+export const WithEdgeLabel = Template.bind( {} );
+WithEdgeLabel.args = {
+	...Default.args,
+	__unstableInputWidth: '20em',
+	labelPosition: 'edge',
+};

package/src/input-control/styles/input-control-styles.tsx

@@ -210,7 +210,7 @@ export const Input = styled.input< InputProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;
@@ -245,7 +245,6 @@ const labelMargin = ( {
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 	&&& {
 		box-sizing: border-box;
-		color: currentColor;
 		display: block;
 		padding-top: 0;
 		padding-bottom: 0;

package/src/input-control/types.ts

@@ -7,6 +7,7 @@ import type {
 	ChangeEvent,
 	SyntheticEvent,
 	PointerEvent,
+	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
 
@@ -14,8 +15,8 @@ import type { useDrag } from '@use-gesture/react';
  * Internal dependencies
  */
 import type { StateReducer } from './reducer/state';
-import type { FlexProps } from '../flex/types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { FlexProps } from '../flex/types';
 
 export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 
@@ -27,9 +28,31 @@ export type Size = 'default' | 'small' | '__unstable-large';
 
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
 	hideLabelFromVision?: boolean;
+	/**
+	 * Whether the component should be in a focused state.
+	 * Used to coordinate focus states when the actual focused element and the component handling
+	 * visual focus are separate.
+	 *
+	 * @default false
+	 */
 	isFocused: boolean;
+	/**
+	 * The position of the label.
+	 *
+	 * @default 'top'
+	 */
 	labelPosition?: LabelPosition;
+	/**
+	 * Adjusts the size of the input.
+	 *
+	 * @default 'default'
+	 */
 	size?: Size;
 }
 
@@ -39,10 +62,35 @@ export type InputChangeCallback<
 > = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
 
 export interface InputFieldProps extends BaseProps {
+	/**
+	 * Determines the drag axis.
+	 *
+	 * @default 'n'
+	 */
 	dragDirection?: DragDirection;
+	/**
+	 * If `isDragEnabled` is true, this controls the amount of `px` to have been dragged before
+	 * the drag gesture is actually triggered.
+	 *
+	 * @default 10
+	 */
 	dragThreshold?: number;
+	/**
+	 * If true, enables mouse drag gestures.
+	 *
+	 * @default false
+	 */
 	isDragEnabled?: boolean;
+	/**
+	 * If true, the `ENTER` key press is required in order to trigger an `onChange`.
+	 * If enabled, a change is also triggered when tabbing away (`onBlur`).
+	 *
+	 * @default false
+	 */
 	isPressEnterToChange?: boolean;
+	/**
+	 * A function that receives the value of the input.
+	 */
 	onChange?: InputChangeCallback;
 	onValidate?: (
 		nextValue: string,
@@ -50,24 +98,47 @@ export interface InputFieldProps extends BaseProps {
 	) => void;
 	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
+	/**
+	 * The current value of the input.
+	 */
 	value?: string;
 	onDragEnd?: ( dragProps: DragProps ) => void;
 	onDragStart?: ( dragProps: DragProps ) => void;
 	onDrag?: ( dragProps: DragProps ) => void;
+	/**
+	 * Type of the input element to render.
+	 *
+	 * @default 'text'
+	 */
+	type?: HTMLInputTypeAttribute;
 }
 
 export interface InputBaseProps extends BaseProps, FlexProps {
 	children: ReactNode;
+	/**
+	 * Renders an element on the left side of the input.
+	 */
 	prefix?: ReactNode;
+	/**
+	 * Renders an element on the right side of the input.
+	 */
 	suffix?: ReactNode;
+	/**
+	 * If true, the `input` will be disabled.
+	 *
+	 * @default false
+	 */
 	disabled?: boolean;
 	className?: string;
 	id?: string;
+	/**
+	 * If this property is added, a label will be generated using label property as the content.
+	 */
 	label?: ReactNode;
 }
 
 export interface InputControlProps
-	extends Omit< InputBaseProps, 'children' | 'isFocused' >,
+	extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
 		/**
 		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from

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/navigation/styles/navigation-styles.js

@@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { BASE, G2, UI } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
@@ -155,18 +155,18 @@ export const ItemBaseUI = styled.li`
 	}
 
 	&.is-active {
-		background-color: ${ UI.theme };
-		color: ${ BASE.white };
+		background-color: ${ COLORS.ui.theme };
+		color: ${ COLORS.white };
 
 		> button,
 		> a {
-			color: ${ BASE.white };
+			color: ${ COLORS.white };
 			opacity: 1;
 		}
 	}
 
 	> svg path {
-		color: ${ G2.lightGray.ui };
+		color: ${ COLORS.gray[ 600 ] };
 	}
 `;