@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/query-controls/index.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -60,6 +60,7 @@ function isMultipleCategorySelection(
  * ```
  */
 export function QueryControls( {
+	__next40pxDefaultSize = false,
 	authorList,
 	selectedAuthorId,
 	numberOfItems,
@@ -81,6 +82,7 @@ export function QueryControls( {
 				onOrderChange && onOrderByChange && (
 					<SelectControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-order-select"
 						label={ __( 'Order by' ) }
 						value={ `${ orderBy }/${ order }` }
@@ -94,12 +96,12 @@ export function QueryControls( {
 								value: 'date/asc',
 							},
 							{
-								/* translators: label for ordering posts by title in ascending order */
+								/* translators: Label for ordering posts by title in ascending order. */
 								label: __( 'A → Z' ),
 								value: 'title/asc',
 							},
 							{
-								/* translators: label for ordering posts by title in descending order */
+								/* translators: Label for ordering posts by title in descending order. */
 								label: __( 'Z → A' ),
 								value: 'title/desc',
 							},
@@ -131,10 +133,11 @@ export function QueryControls( {
 					props.categoriesList &&
 					props.onCategoryChange && (
 						<CategorySelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							key="query-controls-category-select"
 							categoriesList={ props.categoriesList }
 							label={ __( 'Category' ) }
-							noOptionLabel={ __( 'All' ) }
+							noOptionLabel={ _x( 'All', 'categories' ) }
 							selectedCategoryId={ props.selectedCategoryId }
 							onChange={ props.onCategoryChange }
 						/>
@@ -143,6 +146,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
@@ -166,10 +170,11 @@ export function QueryControls( {
 					),
 				onAuthorChange && (
 					<AuthorSelect
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-author-select"
 						authorList={ authorList }
 						label={ __( 'Author' ) }
-						noOptionLabel={ __( 'All' ) }
+						noOptionLabel={ _x( 'All', 'authors' ) }
 						selectedAuthorId={ selectedAuthorId }
 						onChange={ onAuthorChange }
 					/>
@@ -177,7 +182,7 @@ export function QueryControls( {
 				onNumberOfItemsChange && (
 					<RangeControl
 						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }

package/src/query-controls/types.ts

@@ -31,6 +31,7 @@ export type CategorySelectProps = Pick<
 	categoriesList: Category[];
 	onChange: ( newCategory: string ) => void;
 	selectedCategoryId?: Category[ 'id' ];
+	__next40pxDefaultSize: boolean;
 };
 
 export type AuthorSelectProps = Pick<
@@ -40,6 +41,7 @@ export type AuthorSelectProps = Pick<
 	authorList?: Author[];
 	onChange: ( newAuthor: string ) => void;
 	selectedAuthorId?: Author[ 'id' ];
+	__next40pxDefaultSize: boolean;
 };
 
 type Order = 'asc' | 'desc';
@@ -101,6 +103,13 @@ type BaseQueryControlsProps = {
 	 * The selected author ID.
 	 */
 	selectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type QueryControlsWithSingleCategorySelectionProps =

package/src/radio-control/README.md

@@ -5,12 +5,6 @@ Use radio buttons when you want users to select one option from a set, and you w
 ![](https://make.wordpress.org/design/files/2018/11/radio.png)
 Selected and unselected radio buttons
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -58,7 +52,7 @@ Render a user interface to select the user type using radio inputs.
 
 ```jsx
 import { RadioControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState } from 'react';
 
 const MyRadioControl = () => {
 	const [ option, setOption ] = useState( 'a' );
@@ -82,7 +76,7 @@ const MyRadioControl = () => {
 
 The component accepts the following props:
 
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
 
 If this property is added, a help text will be generated using help property as the content.
 

package/src/radio-control/index.tsx

@@ -13,7 +13,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { RadioControlProps } from './types';
 import { VStack } from '../v-stack';
 
@@ -92,7 +92,10 @@ export function RadioControl(
 							}
 							{ ...additionalProps }
 						/>
-						<label htmlFor={ `${ id }-${ index }` }>
+						<label
+							className="components-radio-control__label"
+							htmlFor={ `${ id }-${ index }` }
+						>
 							{ option.label }
 						</label>
 					</div>

package/src/radio-control/style.scss

@@ -1,5 +1,32 @@
+.components-radio-control__option {
+	display: flex;
+	align-items: center;
+}
+
 .components-radio-control__input[type="radio"] {
 	@include radio-control;
-	margin-top: 0;
-	margin-right: 6px;
+
+	display: inline-flex;
+	margin: 0 6px 0 0;
+	padding: 0;
+	appearance: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: 0 0 0 ($border-width * 2) $components-color-background, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) $components-color-accent;
+	}
+
+	&:checked {
+		background: $components-color-accent;
+		border-color: $components-color-accent;
+
+		&::before {
+			content: "";
+			border-radius: 50%;
+		}
+	}
+}
+
+.components-radio-control__label {
+	cursor: pointer;
 }

package/src/radio-group/README.md

@@ -12,12 +12,6 @@ Use a RadioGroup component when you want users to select one option from a small
 
 ![RadioGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -53,11 +47,11 @@ Radio groups that cannot be selected can either be given a disabled state, or be
 #### Controlled
 
 ```jsx
+import { useState } from 'react';
 import {
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyControlledRadioRadioGroup = () => {
 	const [ checked, setChecked ] = useState( '25' );
@@ -77,11 +71,11 @@ const MyControlledRadioRadioGroup = () => {
 When using the RadioGroup component as an uncontrolled component, the default value can be set with the `defaultChecked` prop.
 
 ```jsx
+import { useState } from 'react';
 import {
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyUncontrolledRadioRadioGroup = () => {
 	return (

package/src/radio-group/context.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const RadioGroupContext = createContext< {
+	store?: Ariakit.RadioStore;
+	disabled?: boolean;
+} >( {
+	store: undefined,
+	disabled: undefined,
+} );

package/src/radio-group/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '../button-group';
+import type { WordPressComponentProps } from '../context';
+import { RadioGroupContext } from './context';
+import type { RadioGroupProps } from './types';
+
+function UnforwardedRadioGroup(
+	{
+		label,
+		checked,
+		defaultChecked,
+		disabled,
+		onChange,
+		children,
+		...props
+	}: WordPressComponentProps< RadioGroupProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const radioStore = Ariakit.useRadioStore( {
+		value: checked,
+		defaultValue: defaultChecked,
+		setValue: ( newValue ) => {
+			onChange?.( newValue ?? undefined );
+		},
+	} );
+
+	const contextValue = useMemo(
+		() => ( {
+			store: radioStore,
+			disabled,
+		} ),
+		[ radioStore, disabled ]
+	);
+
+	return (
+		<RadioGroupContext.Provider value={ contextValue }>
+			<Ariakit.RadioGroup
+				store={ radioStore }
+				render={ <ButtonGroup>{ children }</ButtonGroup> }
+				aria-label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</RadioGroupContext.Provider>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const RadioGroup = forwardRef( UnforwardedRadioGroup );
+export default RadioGroup;

package/src/radio-group/radio.tsx

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { RadioGroupContext } from './context';
+import type { WordPressComponentProps } from '../context';
+import type { RadioProps } from './types';
+
+function UnforwardedRadio(
+	{
+		value,
+		children,
+		...props
+	}: WordPressComponentProps< RadioProps, 'button', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const { store, disabled } = useContext( RadioGroupContext );
+
+	const selectedValue = store?.useState( 'value' );
+	const isChecked = selectedValue !== undefined && selectedValue === value;
+
+	return (
+		<Ariakit.Radio
+			disabled={ disabled }
+			store={ store }
+			ref={ ref }
+			value={ value }
+			render={
+				<Button
+					variant={ isChecked ? 'primary' : 'secondary' }
+					{ ...props }
+				/>
+			}
+		>
+			{ children || value }
+		</Ariakit.Radio>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const Radio = forwardRef( UnforwardedRadio );
+export default Radio;

package/src/radio-group/stories/index.story.tsx

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { RadioGroup } from '..';
+import { Radio } from '../radio';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: Meta< typeof RadioGroup > = {
+	title: 'Components (Deprecated)/RadioGroup',
+	component: RadioGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Radio },
+	argTypes: {
+		onChange: { control: { type: null } },
+		children: { control: { type: null } },
+		checked: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof RadioGroup > = ( props ) => {
+	return <RadioGroup { ...props } />;
+};
+
+export const Default: StoryFn< typeof RadioGroup > = Template.bind( {} );
+Default.args = {
+	id: 'default-radiogroup',
+	label: 'options',
+	defaultChecked: 'option2',
+	children: (
+		<>
+			<Radio value="option1">Option 1</Radio>
+			<Radio value="option2">Option 2</Radio>
+			<Radio value="option3">Option 3</Radio>
+		</>
+	),
+};
+
+export const Disabled: StoryFn< typeof RadioGroup > = Template.bind( {} );
+Disabled.args = {
+	...Default.args,
+	id: 'disabled-radiogroup',
+	disabled: true,
+};
+
+const ControlledTemplate: StoryFn< typeof RadioGroup > = ( {
+	checked: checkedProp,
+	onChange: onChangeProp,
+	...props
+} ) => {
+	const [ checked, setChecked ] =
+		useState< React.ComponentProps< typeof RadioGroup >[ 'checked' ] >(
+			checkedProp
+		);
+
+	const onChange: typeof onChangeProp = ( value ) => {
+		setChecked( value );
+		onChangeProp?.( value );
+	};
+
+	return (
+		<RadioGroup { ...props } onChange={ onChange } checked={ checked } />
+	);
+};
+
+export const Controlled: StoryFn< typeof RadioGroup > = ControlledTemplate.bind(
+	{}
+);
+Controlled.args = {
+	...Default.args,
+	checked: 'option2',
+	id: 'controlled-radiogroup',
+};
+Controlled.argTypes = {
+	checked: { control: { type: null } },
+};

package/src/radio-group/types.ts

@@ -0,0 +1,39 @@
+export type RadioGroupProps = {
+	/**
+	 * Accessible label for the radio group
+	 */
+	label: string;
+	/**
+	 * The `value` of the `Radio` element which should be selected.
+	 * Indicates controlled usage of the component.
+	 */
+	checked?: string | number;
+	/**
+	 * The value of the radio element which is initially selected.
+	 */
+	defaultChecked?: string | number;
+	/**
+	 * Whether the `RadioGroup` should be disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * Called when a `Radio` element has been selected.
+	 * Receives the `value` of the selected element as an argument.
+	 */
+	onChange?: ( value: string | number | undefined ) => void;
+	/**
+	 * The children elements, which should be a series of `Radio` components.
+	 */
+	children: React.ReactNode;
+};
+
+export type RadioProps = {
+	/**
+	 * The actual value of the radio element.
+	 */
+	value: string | number;
+	/**
+	 * Content displayed on the Radio element. If there aren't any children, `value` is displayed.
+	 */
+	children?: React.ReactNode;
+};

package/src/range-control/README.md

@@ -2,15 +2,7 @@
 
 RangeControls are used to make selections from a range of incremental values.
 
-![](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
-
-A RangeControl for volume
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![A RangeControl for volume](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
 
 ## Design guidelines
 
@@ -90,8 +82,8 @@ RangeControls should provide the full range of choices available for the user to
 Render a RangeControl to make a selection from a range of incremental values.
 
 ```jsx
+import { useState } from 'react';
 import { RangeControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyRangeControl = () => {
 	const [ columns, setColumns ] = useState( 2 );
@@ -113,7 +105,7 @@ const MyRangeControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input elements.
 
-### `afterIcon`: `string|Function|WPComponent|null`
+### `afterIcon`: `string|Function|Component|null`
 
 If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered after the slider with the icon equal to `afterIcon`.
 
@@ -130,7 +122,7 @@ If this property is true, a button to reset the slider is rendered.
 -   Default: `false`
 -   Platform: Web | Mobile
 
-### `beforeIcon`: `string|Function|WPComponent|null`
+### `beforeIcon`: `string|Function|Component|null`
 
 If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered before the slider with the icon equal to `beforeIcon`.
 
@@ -161,7 +153,7 @@ Disables the `input`, preventing new values from being applied.
 -   Platform: Web
 
 
-### `help`: `string|WPElement`
+### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
 

package/src/range-control/index.tsx

@@ -36,8 +36,8 @@ import {
 } from './styles/range-control-styles';
 
 import type { RangeControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { space } from '../ui/utils/space';
+import type { WordPressComponentProps } from '../context';
+import { space } from '../utils/space';
 
 const noop = () => {};
 
@@ -328,7 +328,7 @@ function UnforwardedRangeControl(
 							className="components-range-control__reset"
 							disabled={ disabled || value === undefined }
 							variant="secondary"
-							isSmall
+							size="small"
 							onClick={ handleOnReset }
 						>
 							{ __( 'Reset' ) }

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

@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
 
 import type { InputRangeProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function InputRange(
 	props: WordPressComponentProps< InputRangeProps, 'input' >,

package/src/range-control/mark.tsx

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { Mark, MarkLabel } from './styles/range-control-styles';
 
 import type { RangeMarkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function RangeMark(
 	props: WordPressComponentProps< RangeMarkProps, 'span' >

package/src/range-control/rail.tsx

@@ -9,7 +9,7 @@ import { isRTL } from '@wordpress/i18n';
 import RangeMark from './mark';
 import { MarksWrapper, Rail } from './styles/range-control-styles';
 
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type {
 	MarksProps,
 	RangeMarkProps,

package/src/range-control/styles/range-control-styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 import type {
 	RangeMarkProps,
@@ -301,7 +301,7 @@ export const Tooltip = styled.span< TooltipProps >`
 `;
 
 // @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack.
+// @see: packages/components/src/h-stack
 export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;

package/src/range-control/tooltip.tsx

@@ -14,7 +14,7 @@ import { useCallback, useEffect, useState } from '@wordpress/element';
 import { Tooltip } from './styles/range-control-styles';
 
 import type { TooltipProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function SimpleTooltip(
 	props: WordPressComponentProps< TooltipProps, 'span' >

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts

@@ -30,12 +30,12 @@ export const TooltipWrapper = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
+	background: ${ COLORS.theme.foreground };
 	border-radius: 2px;
 	box-sizing: border-box;
 	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: 12px;
-	color: ${ COLORS.ui.textDark };
+	color: ${ COLORS.theme.foregroundInverted };
 	padding: 4px 8px;
 	position: relative;
 `;
@@ -45,7 +45,7 @@ export const Tooltip = styled.div`
 
 export const LabelText = styled( Text )`
 	&&& {
-		color: ${ COLORS.ui.textDark };
+		color: ${ COLORS.theme.foregroundInverted };
 		display: block;
 		font-size: 13px;
 		line-height: 1.4;

package/src/sandbox/README.md

@@ -53,4 +53,10 @@ The `<title>` of the iframe document.
 The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
 
 -   Required: No
--   Default: ""
+-   Default: ""
+
+### `tabIndex`: `HTMLElement[ 'tabIndex' ]`
+
+The `tabindex` the iframe should receive.
+
+-   Required: No