@wordpress/components 38.0.0 → 39.0.0

package/src/text-highlight/index.tsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createInterpolateElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { escapeRegExp } from '../utils/strings';
 import type { TextHighlightProps } from './types';
 

package/src/text-highlight/stories/index.story.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import TextHighlight from '..';
 
 const meta: Meta< typeof TextHighlight > = {

package/src/text-highlight/test/index.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import TextHighlight from '..';
 
 const getMarks = ( container: Element ) =>

package/src/textarea-control/index.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import BaseControl from '../base-control';
 import { StyledTextarea } from './styles/textarea-control-styles';
 import type { TextareaControlProps } from './types';

package/src/textarea-control/stories/index.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import TextareaControl from '..';
 
 const meta: Meta< typeof TextareaControl > = {

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

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
 import { font } from '../../utils/font';
 import { COLORS } from '../../utils/colors-values';
 import { CONFIG } from '../../utils';

package/src/textarea-control/types.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { TextareaHTMLAttributes } from 'react';
-
-/**
- * Internal dependencies
- */
 import type { BaseControlProps } from '../base-control/types';
 
 export type TextareaControlProps = Pick<

package/src/tip/index.tsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { Icon, tip } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import type { TipProps } from './types';
 
 export function Tip( props: TipProps ) {

package/src/tip/stories/index.story.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import Tip from '..';
 
 const meta: Meta< typeof Tip > = {

package/src/tip/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type { ReactNode } from 'react';
 
 export type TipProps = {

package/src/toggle-control/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import type { ChangeEvent, ForwardedRef } from 'react';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import { FlexBlock } from '../flex';
 import FormToggle from '../form-toggle';
 import BaseControl from '../base-control';

package/src/toggle-control/stories/index.story.tsx

@@ -1,16 +1,7 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import { wordpress } from '@wordpress/icons';
+import { Icon, Stack } from '@wordpress/ui';
 import ToggleControl from '..';
 
 const meta: Meta< typeof ToggleControl > = {
@@ -36,10 +27,12 @@ const meta: Meta< typeof ToggleControl > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof ToggleControl > = ( {
+type Story = StoryObj< typeof ToggleControl >;
+
+function ControlledToggleControl( {
 	onChange,
 	...props
-} ) => {
+}: React.ComponentProps< typeof ToggleControl > ) {
 	const [ checked, setChecked ] = useState( true );
 	return (
 		<ToggleControl
@@ -51,15 +44,53 @@ const Template: StoryFn< typeof ToggleControl > = ( {
 			} }
 		/>
 	);
+}
+ControlledToggleControl.displayName = 'ToggleControl';
+
+export const Default: Story = {
+	render: ( args ) => <ControlledToggleControl { ...args } />,
+	args: {
+		label: 'Enable something',
+	},
 };
 
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Enable something',
+export const WithHelpText: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		help: 'This is some help text.',
+	},
 };
 
-export const WithHelpText = Template.bind( {} );
-WithHelpText.args = {
-	...Default.args,
-	help: 'This is some help text.',
+/**
+ * When adding a visual aid, prefer placing it at the trailing end of the row,
+ * rather than placing it directly before the label, or moving the toggle to the trailing end.
+ */
+export const WithVisual: Story = {
+	...Default,
+	render: ( args ) => (
+		<Stack gap="md" align="flex-start" justify="space-between">
+			<Stack>
+				<ControlledToggleControl { ...args } />
+			</Stack>
+			<Stack
+				align="center"
+				justify="center"
+				style={ {
+					backgroundColor:
+						'var(--wpds-color-background-surface-neutral-weak)',
+					borderRadius: 'var(--wpds-border-radius-md)',
+					flexShrink: 0,
+					height: 'var(--wpds-dimension-size-lg)',
+					width: 'var(--wpds-dimension-size-lg)',
+				} }
+			>
+				<Icon icon={ wordpress } />
+			</Stack>
+		</Stack>
+	),
+	args: {
+		...Default.args,
+		help: 'Additional context that helps users understand what this setting does and when they might want to turn it on or off.',
+	},
 };

package/src/toggle-control/test/index.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import ToggleControl from '..';
 
 describe( 'ToggleControl', () => {

package/src/toggle-control/types.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
 import type { BaseControlProps } from '../base-control/types';
 import type { FormToggleProps } from '../form-toggle/types';
 

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

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { ToggleGroupControlContextProps } from './types';
 
 const ToggleGroupControlContext = createContext(

package/src/toggle-group-control/stories/index.story.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { formatLowercase, formatUppercase } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import {
 	ToggleGroupControl,
 	ToggleGroupControlOption,

package/src/toggle-group-control/test/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen, waitFor } from '@testing-library/react';
 import { press, click, hover, sleep } from '@ariakit/test';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { formatLowercase, formatUppercase } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import Button from '../../button';
 import {
 	ToggleGroupControl,

package/src/toggle-group-control/toggle-group-control/README.md

@@ -1,8 +1,6 @@
 # `ToggleGroupControl`
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<p class="callout callout-alert">This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.</p>
 
 `ToggleGroupControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use [`ToggleGroupControlOption`](/packages/components/src/toggle-group-control/toggle-group-control-option/README.md) component.
 

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { View } from '../../view';
 import { useControlledValue } from '../../utils';
 import type { WordPressComponentProps } from '../../context';

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
-
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useEffect, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { View } from '../../view';
 import type { WordPressComponentProps } from '../../context';
 import ToggleGroupControlContext from '../context';

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect, useContextSystem } from '../../context';
 import BaseControl, { useBaseControlProps } from '../../base-control';

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { usePrevious } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { ToggleGroupControlProps } from '../types';
 
 type ValueProp = ToggleGroupControlProps[ 'value' ];

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -1,8 +1,6 @@
 # `ToggleGroupControlOption`
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<p class="callout callout-alert">This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.</p>
 
 `ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';

package/src/toggle-group-control/toggle-group-control-option-base/README.md

@@ -1,8 +1,6 @@
 # `ToggleGroupControlOptionBase`
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<p class="callout callout-alert">This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.</p>
 
 `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
-
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { useLayoutEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect, useContextSystem } from '../../context';
 import type {

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -1,8 +1,6 @@
 # `ToggleGroupControlOptionIcon`
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<p class="callout callout-alert">This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.</p>
 
 `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md) and displays an icon.
 

package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
 import type { BaseControlProps } from '../base-control/types';
 import type { TooltipProps } from '../tooltip/types';
 
@@ -116,6 +109,10 @@ export type ToggleGroupControlProps = Pick<
 	 * `ToggleGroupControlOptionIcon` components.
 	 */
 	children: ReactNode;
+	/**
+	 * Whether the control is disabled.
+	 */
+	disabled?: boolean;
 	/**
 	 * The size variant of the control.
 	 *

package/src/toolbar/stories/index.story.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import {
 	alignCenter,
 	alignLeft,
@@ -22,12 +15,8 @@ import {
 	arrowLeft,
 	arrowRight,
 	chevronDown,
+	inlineImage,
 } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
 import {
 	Toolbar,
 	ToolbarButton,
@@ -65,14 +54,6 @@ const meta: Meta< typeof Toolbar > = {
 
 export default meta;
 
-function InlineImageIcon() {
-	return (
-		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-			<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
-		</SVG>
-	);
-}
-
 const Template: StoryFn< typeof Toolbar > = ( props ) => (
 	<div style={ { height: 280 } }>
 		<Toolbar { ...props } />
@@ -125,7 +106,7 @@ Default.args = {
 					title="More rich text controls"
 					controls={ [
 						{ icon: code, title: 'Inline code' },
-						{ icon: <InlineImageIcon />, title: 'Inline image' },
+						{ icon: inlineImage, title: 'Inline image' },
 						{
 							icon: formatStrikethrough,
 							title: 'Strikethrough',

package/src/toolbar/test/index.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import { Toolbar, ToolbarButton } from '..';
 
 describe( 'Toolbar', () => {

package/src/toolbar/test/toolbar-group.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ToolbarGroup } from '..';
-
-/**
- * WordPress dependencies
- */
 import { wordpress } from '@wordpress/icons';
+import { ToolbarGroup } from '..';
 
 describe( 'ToolbarGroup', () => {
 	describe( 'basic rendering', () => {

package/src/toolbar/toolbar/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef, useMemo } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import ToolbarGroup from '../toolbar-group';
 import ToolbarContainer from './toolbar-container';
 import type { ToolbarProps } from './types';

package/src/toolbar/toolbar/toolbar-container.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarProps } from './types';
 import type { WordPressComponentProps } from '../../context';

package/src/toolbar/toolbar/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type { ReactNode } from 'react';
 
 export type ToolbarProps = {

package/src/toolbar/toolbar-button/index.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { useContext, forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';