@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

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

@@ -85,7 +85,7 @@ export const _default = () => {
 	);
 };
 
-export const WithOptionalItemsPlusIcon = () => {
+export const WithNonToolsPanelItems = () => {
 	const [ height, setHeight ] = useState();
 	const [ width, setWidth ] = useState();
 
@@ -94,13 +94,78 @@ export const WithOptionalItemsPlusIcon = () => {
 		setWidth( undefined );
 	};
 
+	return (
+		<PanelWrapperView>
+			<Panel>
+				<ToolsPanel
+					label="ToolsPanel (with non-menu items)"
+					resetAll={ resetAll }
+				>
+					<IntroText>
+						This text illustrates not all items must be wrapped in a
+						ToolsPanelItem and represented in the panel menu.
+					</IntroText>
+					<SingleColumnItem
+						hasValue={ () => !! width }
+						label="Width"
+						onDeselect={ () => setWidth( undefined ) }
+						isShownByDefault={ true }
+					>
+						<UnitControl
+							label="Width"
+							value={ width }
+							onChange={ ( next ) => setWidth( next ) }
+						/>
+					</SingleColumnItem>
+					<SingleColumnItem
+						hasValue={ () => !! height }
+						label="Height"
+						onDeselect={ () => setHeight( undefined ) }
+						isShownByDefault={ true }
+					>
+						<UnitControl
+							label="Height"
+							value={ height }
+							onChange={ ( next ) => setHeight( next ) }
+						/>
+					</SingleColumnItem>
+				</ToolsPanel>
+			</Panel>
+		</PanelWrapperView>
+	);
+};
+
+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 (
 		<PanelWrapperView>
 			<Panel>
 				<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"
@@ -131,6 +196,10 @@ export const WithOptionalItemsPlusIcon = () => {
 	);
 };
 
+WithOptionalItemsPlusIcon.args = {
+	isShownByDefault: false,
+};
+
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 const panelId = 'unique-tools-panel-id';
 
@@ -399,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;
@@ -412,3 +482,7 @@ const PanelWrapperView = styled.div`
 const SingleColumnItem = styled( ToolsPanelItem )`
 	grid-column: span 1;
 `;
+
+const IntroText = styled.div`
+	grid-column: span 2;
+`;

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

@@ -8,8 +8,11 @@ import { css } from '@emotion/react';
  */
 import {
 	StyledField as BaseControlField,
+	StyledHelp as BaseControlHelp,
+	StyledLabel as BaseControlLabel,
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
+import { LabelWrapper } from '../input-control/styles/input-control-styles';
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 
@@ -28,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 ) };
 `;
@@ -69,6 +72,7 @@ export const ToolsPanelHeader = css`
 	 */
 	.components-dropdown-menu {
 		margin: ${ space( -1 ) } 0;
+		line-height: 0;
 	}
 	&&&& .components-dropdown-menu__toggle {
 		padding: 0;
@@ -103,10 +107,44 @@ export const ToolsPanelItem = css`
 	&& ${ BaseControlWrapper } {
 		margin-bottom: 0;
 
-		${ BaseControlField } {
+		/**
+		 * To maintain proper spacing within a base control, the field's bottom
+		 * margin should only be removed when there is no help text included and
+		 * it is therefore the last-child.
+		 */
+		${ BaseControlField }:last-child {
 			margin-bottom: 0;
 		}
 	}
+
+	${ BaseControlHelp } {
+		margin-bottom: 0;
+	}
+
+	/**
+	 * Standardize InputControl and BaseControl labels with other labels when
+	 * inside ToolsPanel.
+	 *
+	 * This is a temporary fix until the different control components have their
+	 * labels normalized.
+	 */
+	&& ${ LabelWrapper } {
+		label {
+			line-height: 1.4em;
+		}
+	}
+
+	/**
+	 * The targeting of .components-custom-select-control__label here is a
+	 * temporary measure only.
+	 *
+	 * It should be replaced once CustomSelectControl component has been
+	 * refactored and can be targeted via component interpolation.
+	 */
+	.components-custom-select-control__label,
+	${ BaseControlLabel } {
+		line-height: 1.4em;
+	}
 `;
 
 export const ToolsPanelItemPlaceholder = css`

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -0,0 +1,219 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolsPanel first and last panel items should apply first/last classes to appropriate items 1`] = `
+.emotion-0 {
+  display: grid;
+  gap: calc( 4px * 3 );
+  grid-template-columns: repeat( 2, 1fr );
+  -webkit-column-gap: calc(4px * 4);
+  column-gap: calc(4px * 4);
+  row-gap: calc(4px * 6);
+  border-top: 1px solid #ddd;
+  margin-top: -1px;
+  padding: calc(4px * 4);
+}
+
+.emotion-0>div:not( :first-of-type ) {
+  display: grid;
+  grid-template-columns: repeat( 2, 1fr );
+  -webkit-column-gap: calc(4px * 4);
+  column-gap: calc(4px * 4);
+  row-gap: calc(4px * 6);
+  grid-column: 1/-1;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+  grid-column: 1/-1;
+  gap: calc(4px * 2);
+}
+
+.emotion-2>*+*:not( marquee ) {
+  margin-left: calc(4px * 2);
+}
+
+.emotion-2>* {
+  min-width: 0;
+}
+
+.emotion-2 .components-dropdown-menu {
+  margin: calc(4px * -1) 0;
+  line-height: 0;
+}
+
+.emotion-2.emotion-2.emotion-2.emotion-2 .components-dropdown-menu__toggle {
+  padding: 0;
+  min-width: calc(4px * 6);
+}
+
+.emotion-4 {
+  color: #1e1e1e;
+  line-height: 1.2;
+  margin: 0;
+  color: #050505;
+  font-size: calc(1.95 * 13px);
+  font-weight: 600;
+  display: block;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.emotion-4.emotion-4 {
+  margin: 0;
+}
+
+.emotion-6 {
+  grid-column: 1/-1;
+  display: none;
+}
+
+.emotion-6>div,
+.emotion-6>fieldset {
+  padding-bottom: 0;
+  margin-bottom: 0;
+  max-width: 100%;
+}
+
+.emotion-6.emotion-6 .e1puf3u4 {
+  margin-bottom: 0;
+}
+
+.emotion-6.emotion-6 .e1puf3u4 .e1puf3u3:last-child {
+  margin-bottom: 0;
+}
+
+.emotion-6 .e1puf3u1 {
+  margin-bottom: 0;
+}
+
+.emotion-6.emotion-6 .em5sgkm3 label {
+  line-height: 1.4em;
+}
+
+.emotion-6 .components-custom-select-control__label,
+.emotion-6 .e1puf3u2 {
+  line-height: 1.4em;
+}
+
+.emotion-8 {
+  grid-column: 1/-1;
+}
+
+.emotion-8>div,
+.emotion-8>fieldset {
+  padding-bottom: 0;
+  margin-bottom: 0;
+  max-width: 100%;
+}
+
+.emotion-8.emotion-8 .e1puf3u4 {
+  margin-bottom: 0;
+}
+
+.emotion-8.emotion-8 .e1puf3u4 .e1puf3u3:last-child {
+  margin-bottom: 0;
+}
+
+.emotion-8 .e1puf3u1 {
+  margin-bottom: 0;
+}
+
+.emotion-8.emotion-8 .em5sgkm3 label {
+  line-height: 1.4em;
+}
+
+.emotion-8 .components-custom-select-control__label,
+.emotion-8 .e1puf3u2 {
+  line-height: 1.4em;
+}
+
+<div>
+  <div
+    class="components-grid components-tools-panel emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ToolsPanel"
+  >
+    <div
+      class="components-flex components-h-stack components-tools-panel-header emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelHeader"
+    >
+      <h2
+        class="components-truncate components-text components-heading emotion-4 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="Heading"
+      >
+        Panel header
+      </h2>
+      <div
+        class="components-dropdown components-dropdown-menu"
+        tabindex="-1"
+      >
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-label="View options"
+          class="components-button components-dropdown-menu__toggle is-small has-icon"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="components-tools-panel-item emotion-6 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    />
+    <div
+      class="components-tools-panel-item first emotion-8 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    >
+      <div>
+        Item 2
+      </div>
+    </div>
+    <div
+      class="components-tools-panel-item last emotion-8 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    >
+      <div>
+        Item 3
+      </div>
+    </div>
+    <div
+      class="components-tools-panel-item emotion-6 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ToolsPanelItem"
+    />
+  </div>
+</div>
+`;