@wordpress/components 27.5.0 → 28.0.0

package/src/progress-bar/README.md

@@ -1,13 +1,47 @@
 # ProgressBar
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 A simple horizontal progress bar component.
 
 Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified.
 
+## Usage
+
+Basic usage:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar />;
+};
+```
+
+You can also make it determinate by passing a `value` (from 0 to 100) representing the progress:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = ( { progress } ) => {
+	return <ProgressBar value={ progress } />;
+};
+```
+
+You can customize its appearance by passing a custom CSS class name to `className`.
+
+```css
+.my-custom-progress-bar {
+	width: 100%;
+}
+```
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar className="my-custom-progress-bar" />;
+};
+```
+
 ### Props
 
 The component accepts the following props:
@@ -23,7 +57,7 @@ If a `value` is not specified, the progress bar will be considered indeterminate
 
 A CSS class to apply to the underlying `div` element, serving as a progress bar track.
 
-- Required: No
+-   Required: No
 
 #### Inherited props
 

package/src/progress-bar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -26,13 +26,11 @@ function UnforwardedProgressBar(
 	return (
 		<ProgressBarStyled.Track className={ className }>
 			<ProgressBarStyled.Indicator
-				style={
-					{
-						'--indicator-width': ! isIndeterminate
-							? `${ value }%`
-							: undefined,
-					} as CSSProperties
-				}
+				style={ {
+					'--indicator-width': ! isIndeterminate
+						? `${ value }%`
+						: undefined,
+				} }
 				isIndeterminate={ isIndeterminate }
 			/>
 			<ProgressBarStyled.ProgressElement
@@ -46,6 +44,21 @@ function UnforwardedProgressBar(
 	);
 }
 
+/**
+ * A simple horizontal progress bar component.
+ *
+ * Supports two modes: determinate and indeterminate. A progress bar is determinate
+ * when a specific progress value has been specified (from 0 to 100), and indeterminate
+ * when a value hasn't been specified.
+ *
+ * ```jsx
+ * import { ProgressBar } from '@wordpress/components';
+ *
+ * const MyLoadingComponent = () => {
+ * 	return <ProgressBar />;
+ * };
+ * ```
+ */
 export const ProgressBar = forwardRef( UnforwardedProgressBar );
 
 export default ProgressBar;

package/src/progress-bar/stories/index.story.tsx

@@ -10,13 +10,11 @@ import { ProgressBar } from '..';
 
 const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
-	title: 'Components (Experimental)/ProgressBar',
+	title: 'Components/ProgressBar',
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
-	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: {
 			expanded: true,
 		},
@@ -31,3 +29,38 @@ const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 
 export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
+
+const withCustomWidthCustomCSS = `
+	.custom-progress-bar {
+		width: 100%;
+	}
+`;
+
+/**
+ * A progress bar with a custom width.
+ *
+ * You can override the default `width` by passing a custom CSS class via the
+ * `className` prop.
+ *
+ * This example shows a progress bar with an overriden `width` of `100%` which
+ * makes it fit all available horizontal space of the parent element. The CSS
+ * class looks like this:
+ *
+ * ```css
+ * .custom-progress-bar {
+ *   width: 100%;
+ * }
+ * ```
+ */
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
+		<>
+			<style>{ withCustomWidthCustomCSS }</style>
+			<Story />
+		</>
+	),
+];

package/src/progress-bar/styles.ts

@@ -24,8 +24,6 @@ export const INDETERMINATE_TRACK_WIDTH = 50;
 export const Track = styled.div`
 	position: relative;
 	overflow: hidden;
-	width: 100%;
-	max-width: 160px;
 	height: ${ CONFIG.borderWidthFocus };
 	/* Text color at 10% opacity */
 	background-color: color-mix(
@@ -38,6 +36,10 @@ export const Track = styled.div`
 	// Windows high contrast mode.
 	outline: 2px solid transparent;
 	outline-offset: 2px;
+
+	:where( & ) {
+		width: 160px;
+	}
 `;
 
 export const Indicator = styled.div< {

package/src/query-controls/index.native.js

@@ -7,7 +7,8 @@ import { useCallback, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { RangeControl, SelectControl } from '../';
+import RangeControl from '../range-control';
+import SelectControl from '../select-control';
 import CategorySelect from './category-select';
 
 const DEFAULT_MIN_ITEMS = 1;

package/src/radio-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -71,7 +71,7 @@ export function RadioControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-radio-control' ) }
+			className={ clsx( className, 'components-radio-control' ) }
 		>
 			<VStack spacing={ 1 }>
 				{ options.map( ( option, index ) => (

package/src/range-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
@@ -116,9 +116,9 @@ function UnforwardedRangeControl(
 		: ( ( value - min ) / ( max - min ) ) * 100;
 	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
-	const classes = classnames( 'components-range-control', className );
+	const classes = clsx( 'components-range-control', className );
 
-	const wrapperClasses = classnames(
+	const wrapperClasses = clsx(
 		'components-range-control__wrapper',
 		!! marks && 'is-marked'
 	);

package/src/range-control/mark.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,12 +22,12 @@ export default function RangeMark(
 		...otherProps
 	} = props;
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-range-control__mark',
 		isFilled && 'is-filled',
 		className
 	);
-	const labelClasses = classnames(
+	const labelClasses = clsx(
 		'components-range-control__mark-label',
 		isFilled && 'is-filled'
 	);

package/src/range-control/tooltip.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ export default function SimpleTooltip(
 		...restProps
 	} = props;
 	const position = useTooltipPosition( { inputRef, tooltipPosition } );
-	const classes = classnames( 'components-simple-tooltip', className );
+	const classes = clsx( 'components-simple-tooltip', className );
 	const styles = {
 		...style,
 		zIndex,

package/src/resizable-box/index.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
 import type { ReactNode, ForwardedRef } from 'react';
@@ -21,45 +21,45 @@ const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
 const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
 
 const HANDLE_CLASSES = {
-	top: classnames(
+	top: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top'
 	),
-	right: classnames(
+	right: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-right'
 	),
-	bottom: classnames(
+	bottom: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom'
 	),
-	left: classnames(
+	left: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-left'
 	),
-	topLeft: classnames(
+	topLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-left'
 	),
-	topRight: classnames(
+	topRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-right'
 	),
-	bottomRight: classnames(
+	bottomRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
 		'components-resizable-box__handle-right'
 	),
-	bottomLeft: classnames(
+	bottomLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
@@ -107,7 +107,7 @@ function UnforwardedResizableBox(
 ): JSX.Element {
 	return (
 		<Resizable
-			className={ classnames(
+			className={ clsx(
 				'components-resizable-box__container',
 				showHandle && 'has-show-handle',
 				className

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { Ref, ForwardedRef } from 'react';
 
 /**
@@ -59,7 +59,7 @@ function ResizeTooltip(
 		return null;
 	}
 
-	const classes = classnames( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', className );
 
 	return (
 		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>

package/src/responsive-wrapper/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ function ResponsiveWrapper( {
 		<TagName className="components-responsive-wrapper">
 			<div>
 				{ cloneElement( children, {
-					className: classnames(
+					className: clsx(
 						'components-responsive-wrapper__content',
 						children.props.className
 					),

package/src/search-control/index.native.js

@@ -22,7 +22,6 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button, Gridicons } from '@wordpress/components';
 import {
 	Icon,
 	cancelCircleFilled as cancelCircleFilledIcon,
@@ -35,6 +34,8 @@ import {
  */
 import allStyles from './style.scss';
 import platformStyles from './platform-style.scss';
+import Button from '../button';
+import Gridicons from '../mobile/gridicons';
 
 // Merge platform specific styles with the default styles.
 const baseStyles = { ...allStyles };
@@ -236,7 +237,7 @@ function SearchControl( {
 					onPress={ onCancel }
 					style={ cancelButtonTextStyle }
 					accessible
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ __( 'Cancel search' ) }
 					accessibilityHint={ __( 'Cancel search' ) }
 				>

package/src/search-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -97,10 +97,7 @@ function UnforwardedSearchControl(
 				ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
 				type="search"
 				size={ size }
-				className={ classnames(
-					'components-search-control',
-					className
-				) }
+				className={ clsx( 'components-search-control', className ) }
 				onChange={ ( nextValue?: string ) =>
 					onChange( nextValue ?? '' )
 				}

package/src/select-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -74,7 +74,7 @@ function UnforwardedSelectControl(
 		props.onChange?.( event.target.value, { event } );
 	};
 
-	const classes = classNames( 'components-select-control', className );
+	const classes = clsx( 'components-select-control', className );
 
 	return (
 		<BaseControl

package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { observableMap } from '@wordpress/compose';
 
@@ -98,7 +98,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 export default function SlotFillProvider( {
 	children,
 }: SlotFillProviderProps ) {
-	const registry = useMemo( createSlotRegistry, [] );
+	const [ registry ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ registry }>
 			{ children }

package/src/slot-fill/provider.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import type { Component } from '@wordpress/element';
-import { useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -118,7 +118,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 }
 
 export function SlotFillProvider( { children }: SlotFillProviderProps ) {
-	const contextValue = useMemo( createSlotRegistry, [] );
+	const [ contextValue ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ contextValue }>
 			{ children }

package/src/snackbar/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -113,7 +113,7 @@ function UnforwardedSnackbar(
 		return () => clearTimeout( timeoutHandle );
 	}, [ explicitDismiss ] );
 
-	const classes = classnames( className, 'components-snackbar', {
+	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
 	} );
 	if ( actions && actions.length > 1 ) {
@@ -125,12 +125,9 @@ function UnforwardedSnackbar(
 		actions = [ actions[ 0 ] ];
 	}
 
-	const snackbarContentClassnames = classnames(
-		'components-snackbar__content',
-		{
-			'components-snackbar__content-with-icon': !! icon,
-		}
-	);
+	const snackbarContentClassnames = clsx( 'components-snackbar__content', {
+		'components-snackbar__content-with-icon': !! icon,
+	} );
 
 	return (
 		<div

package/src/snackbar/list.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,7 +68,7 @@ export function SnackbarList( {
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
 	const listRef = useRef< HTMLDivElement | null >( null );
 	const isReducedMotion = useReducedMotion();
-	className = classnames( 'components-snackbar-list', className );
+	className = clsx( 'components-snackbar-list', className );
 	const removeNotice =
 		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
 			onRemove?.( notice.id );
@@ -87,9 +87,9 @@ export function SnackbarList( {
 					return (
 						<motion.div
 							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-							initial={ 'init' }
-							animate={ 'open' }
-							exit={ 'exit' }
+							initial="init"
+							animate="open"
+							exit="exit"
 							key={ notice.id }
 							variants={
 								isReducedMotion ? undefined : SNACKBAR_VARIANTS

package/src/spinner/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -21,7 +21,7 @@ export function UnforwardedSpinner(
 ) {
 	return (
 		<StyledSpinner
-			className={ classNames( 'components-spinner', className ) }
+			className={ clsx( 'components-spinner', className ) }
 			viewBox="0 0 100 100"
 			width="16"
 			height="16"

package/src/tab-panel/index.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -202,7 +202,7 @@ const UnforwardedTabPanel = (
 						<Ariakit.Tab
 							key={ tab.name }
 							id={ prependInstanceId( tab.name ) }
-							className={ classnames(
+							className={ clsx(
 								'components-tab-panel__tabs-item',
 								tab.className,
 								{
@@ -232,7 +232,7 @@ const UnforwardedTabPanel = (
 					id={ `${ prependInstanceId( selectedTab.name ) }-view` }
 					store={ tabStore }
 					tabId={ prependInstanceId( selectedTab.name ) }
-					className={ 'components-tab-panel__tab-content' }
+					className="components-tab-panel__tab-content"
 				>
 					{ children( selectedTab ) }
 				</Ariakit.TabPanel>

package/src/tab-panel/style.scss

@@ -81,3 +81,19 @@
 		outline: 2px solid transparent;
 	}
 }
+
+.components-tab-panel__tab-content {
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+}