@wordpress/components 28.5.0 → 28.7.0

package/src/tabs/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -48,15 +49,15 @@ function Tabs( {
 
 	const isControlled = selectedTabId !== undefined;
 
-	const { items, selectedId, activeId } = store.useState();
+	const { items, selectedId, activeId } = useStoreState( store );
 	const { setSelectedId, setActiveId } = store;
 
 	// Keep track of whether tabs have been populated. This is used to prevent
 	// certain effects from firing too early while tab data and relevant
 	// variables are undefined during the initial render.
-	const tabsHavePopulated = useRef( false );
+	const tabsHavePopulatedRef = useRef( false );
 	if ( items.length > 0 ) {
-		tabsHavePopulated.current = true;
+		tabsHavePopulatedRef.current = true;
 	}
 
 	const selectedTab = items.find( ( item ) => item.id === selectedId );
@@ -93,7 +94,7 @@ function Tabs( {
 
 			if ( firstEnabledTab ) {
 				setSelectedId( firstEnabledTab.id );
-			} else if ( tabsHavePopulated.current ) {
+			} else if ( tabsHavePopulatedRef.current ) {
 				setSelectedId( null );
 			}
 		}
@@ -147,7 +148,11 @@ function Tabs( {
 
 		// Once the tabs have populated, if the `selectedTabId` still can't be
 		// found, clear the selection.
-		if ( tabsHavePopulated.current && !! selectedTabId && ! selectedTab ) {
+		if (
+			tabsHavePopulatedRef.current &&
+			!! selectedTabId &&
+			! selectedTab
+		) {
 			setSelectedId( null );
 		}
 	}, [ isControlled, selectedTab, selectedTabId, setSelectedId ] );

package/src/tabs/styles.ts

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-import { COLORS } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 
 export const TabListWrapper = styled.div`
@@ -107,7 +107,7 @@ export const Tab = styled( Ariakit.Tab )`
 			// Outline works for Windows high contrast mode as well.
 			outline: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
-			border-radius: 2px;
+			border-radius: ${ CONFIG.radiusSmall };
 
 			// Animation
 			opacity: 0;
@@ -136,7 +136,6 @@ export const TabPanel = styled( Ariakit.TabPanel )`
 	}
 
 	&:focus-visible {
-		border-radius: 2px;
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			${ COLORS.theme.accent };
 		// Windows high contrast mode.

package/src/tabs/tablist.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -26,7 +27,8 @@ export const TabList = forwardRef<
 >( function TabList( { children, ...otherProps }, ref ) {
 	const context = useTabsContext();
 
-	const selectedId = context?.store.useState( 'selectedId' );
+	const tabStoreState = useStoreState( context?.store );
+	const selectedId = tabStoreState?.selectedId;
 	const indicatorPosition = useTrackElementOffsetRect(
 		context?.store.item( selectedId )?.element
 	);
@@ -37,13 +39,13 @@ export const TabList = forwardRef<
 		( { previousValue } ) => previousValue && setAnimationEnabled( true )
 	);
 
-	if ( ! context ) {
+	if ( ! context || ! tabStoreState ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
-	const { store } = context;
 
-	const { activeId, selectOnMove } = store.useState();
+	const { store } = context;
+	const { activeId, selectOnMove } = tabStoreState;
 	const { setActiveId } = store;
 
 	const onBlur = () => {

package/src/tabs/tabpanel.tsx

@@ -1,7 +1,11 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
+import { useStoreState } from '@ariakit/react';
 
+/**
+ * WordPress dependencies
+ */
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -22,13 +26,13 @@ export const TabPanel = forwardRef<
 	ref
 ) {
 	const context = useTabsContext();
+	const selectedId = useStoreState( context?.store, 'selectedId' );
 	if ( ! context ) {
 		warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
 	const { store, instanceId } = context;
 	const instancedTabId = `${ instanceId }-${ tabId }`;
-	const selectedId = store.useState( ( state ) => state.selectedId );
 
 	return (
 		<StyledTabPanel

package/src/text/styles.ts

@@ -35,7 +35,7 @@ export const muted = css`
 export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusSmall };
 		box-shadow:
 			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;

package/src/text-control/README.md

@@ -127,6 +127,14 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.

package/src/text-control/index.tsx

@@ -41,6 +41,7 @@ function UnforwardedTextControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }

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

@@ -52,7 +52,9 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 	{}
 );
-Default.args = {};
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
 
 export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
 	DefaultTemplate.bind( {} );

package/src/text-control/style.scss

@@ -23,7 +23,8 @@
 
 		// Subtract 1px to account for the border, which isn't included on the element
 		// on newer components like InputControl, SelectControl, etc.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
+		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
 	}
 }

package/src/text-control/test/text-control.tsx

@@ -6,7 +6,11 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import TextControl from '..';
+import _TextControl from '..';
+
+const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
+	return <_TextControl { ...props } __nextHasNoMarginBottom />;
+};
 
 const noop = () => {};
 

package/src/textarea-control/index.tsx

@@ -35,6 +35,7 @@ function UnforwardedTextareaControl(
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextareaControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }

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

@@ -51,6 +51,8 @@ const Template: StoryFn< typeof TextareaControl > = ( {
 
 export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Text',
 	help: 'Enter some text',
+	placeholder: 'Placeholder',
 };

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

@@ -2,13 +2,86 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { inputControl } from '../../utils/input';
+import { font } from '../../utils/font';
+import { COLORS } from '../../utils/colors-values';
+import { CONFIG } from '../../utils';
+import { breakpoint } from '../../utils/breakpoint';
+
+const inputStyleNeutral = css`
+	box-shadow: 0 0 0 transparent;
+	border-radius: ${ CONFIG.radiusSmall };
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
+
+	@media not ( prefers-reduced-motion ) {
+		transition: box-shadow 0.1s linear;
+	}
+`;
+
+const inputStyleFocus = css`
+	border-color: ${ COLORS.theme.accent };
+	box-shadow: 0 0 0
+		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
+		${ COLORS.theme.accent };
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+`;
 
 export const StyledTextarea = styled.textarea`
 	width: 100%;
-	${ inputControl }
+	display: block;
+	font-family: ${ font( 'default.fontFamily' ) };
+	line-height: 20px;
+
+	// Vertical padding is to match the standard 40px control height when rows=1,
+	// in conjunction with the 20px line-height.
+	// "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width.
+	padding: 9px 11px;
+
+	${ inputStyleNeutral };
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: ${ font( 'mobileTextMinFontSize' ) };
+
+	${ breakpoint( 'small' ) } {
+		font-size: ${ font( 'default.fontSize' ) };
+	}
+
+	&:focus {
+		${ inputStyleFocus }
+	}
+
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	&:-ms-input-placeholder {
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	.is-dark-theme & {
+		&::-webkit-input-placeholder {
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+	}
 `;

package/src/toggle-control/index.tsx

@@ -10,6 +10,7 @@ import clsx from 'clsx';
  */
 import { forwardRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -48,6 +49,14 @@ function UnforwardedToggleControl(
 		! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )
 	);
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.ToggleControl', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	let describedBy, helpLabel;
 	if ( help ) {
 		if ( typeof help === 'function' ) {

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

@@ -48,6 +48,7 @@ const Template: StoryFn< typeof ToggleControl > = ( {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	label: 'Enable something',
 };
 

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

@@ -6,7 +6,13 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToggleControl from '..';
+import _ToggleControl from '..';
+
+const ToggleControl = (
+	props: React.ComponentProps< typeof _ToggleControl >
+) => {
+	return <_ToggleControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'ToggleControl', () => {
 	it( 'should label the toggle', () => {

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

@@ -13,10 +13,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -88,7 +84,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -156,7 +152,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 
 .emotion-15 {
   background: #1e1e1e;
-  border-radius: 2px;
+  border-radius: 1px;
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -175,7 +171,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -349,10 +345,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -424,7 +416,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -573,10 +565,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -648,7 +636,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -716,7 +704,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 
 .emotion-15 {
   background: #1e1e1e;
-  border-radius: 2px;
+  border-radius: 1px;
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -735,7 +723,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -903,10 +891,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -978,7 +962,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;

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

@@ -15,7 +15,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
  */
 import Button from '../../button';
 import {
-	ToggleGroupControl,
+	ToggleGroupControl as _ToggleGroupControl,
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
@@ -27,6 +27,10 @@ const hoverOutside = async () => {
 	await hover( document.body, { clientX: 10, clientY: 10 } );
 };
 
+const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
+	return <_ToggleGroupControl { ...props } __nextHasNoMarginBottom />;
+};
+
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
 	onChange,

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

@@ -88,6 +88,13 @@ The value of the `ToggleGroupControl`.
 
 -   Required: No
 
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ### `__nextHasNoMarginBottom`: `boolean`
 
 Start opting into the new margin-free styles that will become the default in a future version.

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

@@ -3,6 +3,7 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -66,7 +67,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		setValue: wrappedOnChangeProp,
 	} );
 
-	const selectedValue = radio.useState( 'value' );
+	const selectedValue = useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
 	const groupContextValue = useMemo(

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

@@ -72,6 +72,7 @@ function UnconnectedToggleGroupControl(
 		<BaseControl
 			help={ help }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="ToggleGroupControl"
 		>
 			{ ! hideLabelFromVision && (
 				<VisualLabelWrapper>

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

@@ -19,7 +19,7 @@ export const toggleGroupControl = ( {
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusSmall };
 	display: inline-flex;
 	min-width: 0;
 	position: relative;

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

@@ -21,23 +21,23 @@ type ValueProp = ToggleGroupControlProps[ 'value' ];
 export function useComputeControlledOrUncontrolledValue(
 	valueProp: ValueProp
 ): { value: ValueProp; defaultValue: ValueProp } {
-	const isInitialRender = useRef( true );
+	const isInitialRenderRef = useRef( true );
 	const prevValueProp = usePrevious( valueProp );
-	const prevIsControlled = useRef( false );
+	const prevIsControlledRef = useRef( false );
 
 	useEffect( () => {
-		if ( isInitialRender.current ) {
-			isInitialRender.current = false;
+		if ( isInitialRenderRef.current ) {
+			isInitialRenderRef.current = false;
 		}
 	}, [] );
 
 	// Assume the component is being used in controlled mode on the first re-render
 	// that has a different `valueProp` from the previous render.
 	const isControlled =
-		prevIsControlled.current ||
-		( ! isInitialRender.current && prevValueProp !== valueProp );
+		prevIsControlledRef.current ||
+		( ! isInitialRenderRef.current && prevValueProp !== valueProp );
 	useEffect( () => {
-		prevIsControlled.current = isControlled;
+		prevIsControlledRef.current = isControlled;
 	}, [ isControlled ] );
 
 	if ( isControlled ) {

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -37,7 +37,7 @@ export const buttonView = ( {
 	appearance: none;
 	background: transparent;
 	border: none;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusXSmall };
 	color: ${ COLORS.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
@@ -122,7 +122,7 @@ const isIconStyles = ( {
 
 export const backdropView = css`
 	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusXSmall };
 	position: absolute;
 	inset: 0;
 	z-index: 1;

package/src/toolbar/toolbar/style.scss

@@ -1,7 +1,7 @@
 .components-accessible-toolbar {
 	display: inline-flex;
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	flex-shrink: 0;
 
 	& > .components-toolbar-group:last-child {
@@ -47,7 +47,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.

package/src/tools-panel/styles.ts

@@ -21,7 +21,7 @@ const toolsPanelGrid = {
 		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
 	`,
 	spacing: css`
-		column-gap: ${ space( 2 ) };
+		column-gap: ${ space( 4 ) };
 		row-gap: ${ space( 4 ) };
 	`,
 	item: {

package/src/tools-panel/tools-panel/hook.ts

@@ -94,16 +94,16 @@ export function useToolsPanel(
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanel' );
 
-	const isResetting = useRef( false );
-	const wasResetting = isResetting.current;
+	const isResettingRef = useRef( false );
+	const wasResetting = isResettingRef.current;
 
-	// `isResetting` is cleared via this hook to effectively batch together
+	// `isResettingRef` is cleared via this hook to effectively batch together
 	// the resetAll task. Without this, the flag is cleared after the first
 	// control updates and forces a rerender with subsequent controls then
 	// believing they need to reset, unfortunately using stale data.
 	useEffect( () => {
 		if ( wasResetting ) {
-			isResetting.current = false;
+			isResettingRef.current = false;
 		}
 	}, [ wasResetting ] );
 
@@ -303,7 +303,7 @@ export function useToolsPanel(
 	// Resets display of children and executes resetAll callback if available.
 	const resetAllItems = useCallback( () => {
 		if ( typeof resetAll === 'function' ) {
-			isResetting.current = true;
+			isResettingRef.current = true;
 			resetAll( resetAllFilters );
 		}
 
@@ -340,7 +340,7 @@ export function useToolsPanel(
 			firstDisplayedItem,
 			flagItemCustomization,
 			hasMenuItems: !! panelItems.length,
-			isResetting: isResetting.current,
+			isResetting: isResettingRef.current,
 			lastDisplayedItem,
 			menuItems,
 			panelId,