@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

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

@@ -15,6 +15,11 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 }
 
 .emotion-4 {
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+}
+
+.emotion-6 {
   background: #fff;
   border: 1px solid;
   border-color: #757575;
@@ -32,23 +37,23 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-4 {
+  .emotion-6 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-4:hover {
+.emotion-6:hover {
   border-color: #757575;
 }
 
-.emotion-4:focus-within {
+.emotion-6:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #007cba);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
   outline: none;
   z-index: 1;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -61,7 +66,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   flex: 1;
 }
 
-.emotion-8 {
+.emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -100,20 +105,20 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
+  .emotion-10 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-8:active {
+.emotion-10:active {
   background: #fff;
 }
 
-.emotion-9 {
+.emotion-11 {
   font-size: 13px;
   line-height: 1;
   position: absolute;
@@ -125,7 +130,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   transform: translate( -50%, -50% );
 }
 
-.emotion-11 {
+.emotion-13 {
   font-size: 13px;
   font-weight: bold;
   height: 0;
@@ -141,34 +146,27 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   >
     <div>
       <span
-        class="components-base-control__label"
+        class="components-base-control__label emotion-4 emotion-5"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="medium components-toggle-group-control emotion-4 emotion-5"
+      class="medium components-toggle-group-control emotion-6 emotion-7"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
-        aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
-      />
       <div
-        class="emotion-6 emotion-7"
+        class="emotion-8 emotion-9"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-8 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option"
           data-value="rigas"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOption"
@@ -177,26 +175,26 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-9 emotion-10"
+            class="emotion-11 emotion-12"
           >
             R
           </div>
           <div
             aria-hidden="true"
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             R
           </div>
         </button>
       </div>
       <div
-        class="emotion-6 emotion-7"
+        class="emotion-8 emotion-9"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-8 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option"
           data-value="jack"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOption"
@@ -205,13 +203,13 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-9 emotion-10"
+            class="emotion-11 emotion-12"
           >
             J
           </div>
           <div
             aria-hidden="true"
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             J
           </div>

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

@@ -1,11 +1,9 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
@@ -25,7 +23,6 @@ import {
 import { useUpdateEffect, useCx } from '../../utils/hooks';
 import { View } from '../../view';
 import BaseControl from '../../base-control';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import type { ToggleGroupControlProps } from '../types';
 import ToggleGroupControlContext from '../context';
 import * as styles from './styles';
@@ -50,7 +47,6 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeAware();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'
@@ -85,7 +81,7 @@ function ToggleGroupControl(
 				'medium',
 				className
 			),
-		[ className, isBlock ]
+		[ className, cx, isBlock ]
 	);
 	return (
 		<BaseControl help={ help }>
@@ -107,13 +103,6 @@ function ToggleGroupControl(
 					{ ...otherProps }
 					ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
 				>
-					{ resizeListener }
-					<ToggleGroupControlBackdrop
-						{ ...radio }
-						containerRef={ containerRef }
-						containerWidth={ sizes.width }
-						isAdaptiveWidth={ isAdaptiveWidth }
-					/>
 					{ children }
 				</RadioGroup>
 			</ToggleGroupControlContext.Provider>

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
@@ -37,16 +36,3 @@ export const block = css`
 	display: flex;
 	width: 100%;
 `;
-
-export const BackdropView = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	box-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };
-	left: 0;
-	position: absolute;
-	top: 2px;
-	bottom: 2px;
-	transition: transform ${ CONFIG.transitionDurationFast } ease;
-	${ reduceMotion( 'transition' ) }
-	z-index: 1;
-`;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Radio } from 'reakit';

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

@@ -54,9 +54,7 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
-	&:active {
-		background: transparent;
-	}
+	background-color: ${ COLORS.gray[ 900 ] };
 `;
 
 export const ButtonContentView = styled.div`

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

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import type { MutableRefObject, ReactNode, ReactText } from 'react';
+import type { ReactNode, ReactText } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type { RadioStateReturn } from 'reakit';
 
@@ -97,10 +96,3 @@ export type ToggleGroupControlContextProps = RadioStateReturn & {
 	 */
 	isBlock?: boolean;
 };
-
-export type ToggleGroupControlBackdropProps = {
-	containerRef: MutableRefObject< HTMLElement | undefined >;
-	containerWidth?: number | null;
-	isAdaptiveWidth?: boolean;
-	state?: any;
-};

package/src/tools-panel/stories/index.js

@@ -135,13 +135,15 @@ export const WithNonToolsPanelItems = () => {
 	);
 };
 
-export const WithOptionalItemsPlusIcon = () => {
+export const WithOptionalItemsPlusIcon = ( { isShownByDefault } ) => {
 	const [ height, setHeight ] = useState();
 	const [ width, setWidth ] = useState();
+	const [ minWidth, setMinWidth ] = useState();
 
 	const resetAll = () => {
 		setHeight( undefined );
 		setWidth( undefined );
+		setMinWidth( undefined );
 	};
 
 	return (
@@ -150,7 +152,20 @@ export const WithOptionalItemsPlusIcon = () => {
 				<ToolsPanel
 					label="Tools Panel (optional items only)"
 					resetAll={ resetAll }
+					key={ isShownByDefault }
 				>
+					<SingleColumnItem
+						hasValue={ () => !! minWidth }
+						label="Minimum width"
+						onDeselect={ () => setMinWidth( undefined ) }
+						isShownByDefault={ isShownByDefault }
+					>
+						<UnitControl
+							label="Minimum width"
+							value={ minWidth }
+							onChange={ ( next ) => setMinWidth( next ) }
+						/>
+					</SingleColumnItem>
 					<SingleColumnItem
 						hasValue={ () => !! width }
 						label="Width"
@@ -181,6 +196,10 @@ export const WithOptionalItemsPlusIcon = () => {
 	);
 };
 
+WithOptionalItemsPlusIcon.args = {
+	isShownByDefault: false,
+};
+
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 const panelId = 'unique-tools-panel-id';
 
@@ -449,6 +468,7 @@ export const WithConditionallyRenderedControl = () => {
 };
 
 export { TypographyPanel } from './typography-panel';
+export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
 	max-width: 280px;

package/src/tools-panel/stories/tools-panel-with-item-group-slot.js

@@ -0,0 +1,244 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import ColorIndicator from '../../color-indicator';
+import ColorPalette from '../../color-palette';
+import Dropdown from '../../dropdown';
+import Panel from '../../panel';
+import { FlexItem } from '../../flex';
+import { HStack } from '../../h-stack';
+import { Item, ItemGroup } from '../../item-group';
+import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '..';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
+import { useCx } from '../../utils';
+
+// Available border colors.
+const colors = [
+	{ name: 'Gray 0', color: '#f6f7f7' },
+	{ name: 'Gray 5', color: '#dcdcde' },
+	{ name: 'Gray 20', color: '#a7aaad' },
+	{ name: 'Gray 70', color: '#3c434a' },
+	{ name: 'Gray 100', color: '#101517' },
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Blue 70', color: '#0a4b78' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Green 10', color: '#68de7c' },
+	{ name: 'Green 40', color: '#00a32a' },
+	{ name: 'Green 60', color: '#007017' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
+];
+const panelId = 'unique-tools-panel-id';
+
+const { Fill, Slot } = createSlotFill( 'ToolsPanelSlot' );
+
+// This storybook example aims to replicate a virtual bubbling SlotFill use case
+// for the `ToolsPanel` when the Slot itself is an `ItemGroup`.
+
+// In this scenario the `ToolsPanel` has to render item placeholders so fills
+// maintain their order in the DOM. These placeholders in the DOM prevent the
+// normal styling of the `ItemGroup` in particular the border radii on the first
+// and last items. In case consumers of the ItemGroup and ToolsPanel are
+// applying their own styles to these components, the ToolsPanel needs to assist
+// consumers in identifying which of its visible items are first and last.
+
+// This custom fill is required to re-establish the ToolsPanelContext for
+// injected ToolsPanelItem components as they will not have access to the React
+// Context as the Provider is part of the ToolsPanelItems.Slot tree.
+const ToolsPanelItems = ( { children } ) => {
+	return (
+		<Fill>
+			{ ( fillProps ) => (
+				<ToolsPanelContext.Provider value={ fillProps }>
+					{ children }
+				</ToolsPanelContext.Provider>
+			) }
+		</Fill>
+	);
+};
+
+// This fetches the ToolsPanelContext and passes it through `fillProps` so that
+// rendered fills can re-establish the `ToolsPanelContext.Provider`.
+const SlotContainer = ( { Slot: ToolsPanelSlot, ...props } ) => {
+	const toolsPanelContext = useContext( ToolsPanelContext );
+
+	return (
+		<ToolsPanelSlot
+			{ ...props }
+			fillProps={ toolsPanelContext }
+			bubblesVirtually
+		/>
+	);
+};
+
+// This wraps the slot with a `ToolsPanel` mimicking a real-world use case from
+// the block editor.
+ToolsPanelItems.Slot = ( { resetAll, ...props } ) => (
+	<ToolsPanel
+		label="Tools Panel with Item Group"
+		resetAll={ resetAll }
+		panelId={ panelId }
+		hasInnerWrapper={ true }
+		shouldRenderPlaceholderItems={ true }
+		__experimentalFirstVisibleItemClass="first"
+		__experimentalLastVisibleItemClass="last"
+	>
+		<SlotContainer { ...props } Slot={ Slot } />
+	</ToolsPanel>
+);
+
+export const ToolsPanelWithItemGroupSlot = () => {
+	const [ attributes, setAttributes ] = useState( {} );
+	const { text, background, link } = attributes;
+
+	const cx = useCx();
+	const slotWrapperClassName = cx( SlotWrapper );
+	const itemClassName = cx( ToolsPanelItemClass );
+
+	const resetAll = ( resetFilters = [] ) => {
+		let newAttributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
+	};
+
+	const updateAttribute = ( name, value ) => {
+		setAttributes( {
+			...attributes,
+			[ name ]: value,
+		} );
+	};
+
+	const ToolsPanelColorDropdown = ( { attribute, label, value } ) => {
+		return (
+			<ToolsPanelItem
+				className={ itemClassName }
+				hasValue={ () => !! value }
+				label={ label }
+				onDeselect={ () => updateAttribute( attribute, undefined ) }
+				resetAllFilter={ () => ( { [ attribute ]: undefined } ) }
+				panelId={ panelId }
+				as={ Item }
+			>
+				<Dropdown
+					renderToggle={ ( { onToggle } ) => (
+						<Button onClick={ onToggle }>
+							<HStack justify="flex-start">
+								<ColorIndicator colorValue={ value } />
+								<FlexItem>{ label }</FlexItem>
+							</HStack>
+						</Button>
+					) }
+					renderContent={ () => (
+						<ColorPalette
+							value={ value }
+							colors={ colors }
+							onChange={ ( newColor ) =>
+								updateAttribute( attribute, newColor )
+							}
+						/>
+					) }
+				/>
+			</ToolsPanelItem>
+		);
+	};
+
+	// ToolsPanelItems are rendered via two different fills to simulate
+	// injection from multiple locations.
+	return (
+		<SlotFillProvider>
+			<PanelWrapperView>
+				<Panel>
+					<ToolsPanelItems.Slot
+						as={ ItemGroup }
+						isBordered
+						isSeparated
+						isRounded={ false }
+						className={ slotWrapperClassName }
+						resetAll={ resetAll }
+					/>
+				</Panel>
+			</PanelWrapperView>
+			<ToolsPanelItems>
+				<ToolsPanelColorDropdown
+					attribute="text"
+					label="Text"
+					value={ text }
+				/>
+				<ToolsPanelColorDropdown
+					attribute="background"
+					label="Background"
+					value={ background }
+				/>
+			</ToolsPanelItems>
+			<ToolsPanelItems>
+				<ToolsPanelColorDropdown
+					attribute="link"
+					label="Link"
+					value={ link }
+				/>
+			</ToolsPanelItems>
+		</SlotFillProvider>
+	);
+};
+
+const PanelWrapperView = styled.div`
+	max-width: 280px;
+	font-size: 13px;
+
+	.components-dropdown-menu__menu {
+		max-width: 220px;
+	}
+`;
+
+const SlotWrapper = css`
+	&&& {
+		row-gap: 0;
+		border-radius: 20px;
+	}
+
+	> div {
+		grid-column: span 2;
+		border-radius: inherit;
+	}
+`;
+
+const ToolsPanelItemClass = css`
+	padding: 0;
+
+	&&.first {
+		border-top-left-radius: inherit;
+		border-top-right-radius: inherit;
+	}
+
+	&.last {
+		border-bottom-left-radius: inherit;
+		border-bottom-right-radius: inherit;
+		border-bottom-color: transparent;
+	}
+	&& > div,
+	&& > div > button {
+		width: 100%;
+		border-radius: inherit;
+	}
+`;

package/src/tools-panel/styles.ts

@@ -31,7 +31,7 @@ const toolsPanelGrid = {
 export const ToolsPanel = css`
 	${ toolsPanelGrid.spacing };
 
-	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
 	margin-top: -1px;
 	padding: ${ space( 4 ) };
 `;
@@ -130,8 +130,6 @@ export const ToolsPanelItem = css`
 	 */
 	&& ${ LabelWrapper } {
 		label {
-			margin-bottom: ${ space( 2 ) };
-			padding-bottom: 0;
 			line-height: 1.4em;
 		}
 	}