@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/src/snackbar/list.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -67,6 +66,8 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) {
 			{ children }
 			<AnimatePresence>
 				{ notices.map( ( notice ) => {
+					const { content, ...restNotice } = notice;
+
 					return (
 						<motion.div
 							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
@@ -82,7 +83,7 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) {
 						>
 							<div className="components-snackbar-list__notice-container">
 								<Snackbar
-									{ ...omit( notice, [ 'content' ] ) }
+									{ ...restNotice }
 									onRemove={ removeNotice( notice ) }
 									listRef={ listRef }
 								>

package/src/spinner/index.tsx

@@ -23,6 +23,8 @@ export function UnforwardedSpinner(
 		<StyledSpinner
 			className={ classNames( 'components-spinner', className ) }
 			viewBox="0 0 100 100"
+			width="16"
+			height="16"
 			xmlns="http://www.w3.org/2000/svg"
 			role="presentation"
 			focusable="false"

package/src/style.scss

@@ -11,7 +11,6 @@
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
-@import "./date-time/style.scss";
 @import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
@@ -39,7 +38,6 @@
 @import "./search-control/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
-@import "./swatch/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";

package/src/text/styles.js

@@ -27,7 +27,7 @@ export const destructive = css`
 `;
 
 export const muted = css`
-	color: ${ COLORS.mediumGray.text };
+	color: ${ COLORS.gray[ 700 ] };
 `;
 
 export const highlighterText = css`

package/src/text/test/index.tsx

@@ -53,7 +53,7 @@ describe( 'Text', () => {
 			<Text variant="muted">Lorem ipsum.</Text>
 		);
 		expect( container.firstChild ).toHaveStyle( {
-			color: COLORS.mediumGray.text,
+			color: COLORS.gray[ 700 ],
 		} );
 	} );
 

package/src/text-highlight/index.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { escapeRegExp } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import { createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { escapeRegExp } from '../utils/strings';
 import type { TextHighlightProps } from './types';
 
 /**

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

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
+import type {
+	ToggleGroupControlOptionProps,
+	ToggleGroupControlOptionIconProps,
+	ToggleGroupControlProps,
+} from '../types';
+
+const meta: ComponentMeta< typeof ToggleGroupControl > = {
+	component: ToggleGroupControl,
+	title: 'Components (Experimental)/ToggleGroupControl',
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
+	argTypes: {
+		help: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ToggleGroupControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] =
+		useState< ToggleGroupControlProps[ 'value' ] >();
+
+	return (
+		<ToggleGroupControl
+			{ ...props }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+const mapPropsToOptionComponent = ( {
+	value,
+	...props
+}: ToggleGroupControlOptionProps ) => (
+	<ToggleGroupControlOption value={ value } key={ value } { ...props } />
+);
+
+const mapPropsToOptionIconComponent = ( {
+	value,
+	...props
+}: ToggleGroupControlOptionIconProps ) => (
+	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
+);
+
+export const Default: ComponentStory< typeof ToggleGroupControl > =
+	Template.bind( {} );
+Default.args = {
+	children: [
+		{ value: 'left', label: 'Left' },
+		{ value: 'center', label: 'Center' },
+		{ value: 'right', label: 'Right' },
+		{ value: 'justify', label: 'Justify' },
+	].map( mapPropsToOptionComponent ),
+	label: 'Label',
+};
+
+/**
+ * A tooltip can be shown for each option by enabling the `showTooltip` prop.
+ * The `aria-label` will be used in the tooltip if provided. Otherwise, the
+ * `label` will be used.
+ */
+export const WithTooltip: ComponentStory< typeof ToggleGroupControl > =
+	Template.bind( {} );
+WithTooltip.args = {
+	...Default.args,
+	children: [
+		{
+			value: 'asc',
+			label: 'A→Z',
+			'aria-label': 'Ascending',
+			showTooltip: true,
+		},
+		{
+			value: 'desc',
+			label: 'Z→A',
+			'aria-label': 'Descending',
+			showTooltip: true,
+		},
+	].map( mapPropsToOptionComponent ),
+};
+
+/**
+ * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
+ * on each option for accessibility, which will be shown in a tooltip.
+ *
+ * When using icon options within `ToggleGroupControl`, the `__experimentalIsIconGroup` style is preferred.
+ */
+export const WithIcons: ComponentStory< typeof ToggleGroupControl > =
+	Template.bind( {} );
+WithIcons.args = {
+	...Default.args,
+	__experimentalIsIconGroup: true,
+	children: [
+		{ value: 'uppercase', label: 'Uppercase', icon: formatUppercase },
+		{ value: 'lowercase', label: 'Lowercase', icon: formatLowercase },
+	].map( mapPropsToOptionIconComponent ),
+};

package/src/toggle-group-control/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -22,6 +22,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -31,10 +38,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-8 {
   background: #fff;
-  border: 1px solid;
-  border-color: #757575;
+  border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -46,26 +52,27 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-6 {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-6:hover {
-  border-color: #757575;
-}
-
-.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);
+.emotion-8:focus-within {
+  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-8 {
+.emotion-8:hover {
+  border-color: #757575;
+}
+
+.emotion-10 {
   background: #1e1e1e;
   border-radius: 2px;
   box-shadow: transparent;
@@ -79,12 +86,12 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
+  .emotion-10 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -97,7 +104,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -138,28 +145,34 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-12 {
+  .emotion-14 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12:active {
+.emotion-14:active {
   background: #fff;
 }
 
-.emotion-13 {
+.emotion-15 {
+  width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.emotion-16 {
   color: #fff;
 }
 
-.emotion-13:active {
+.emotion-16:active {
   background: transparent;
 }
 
-.emotion-14 {
+.emotion-17 {
   font-size: 13px;
   line-height: 1;
 }
@@ -170,16 +183,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   <div
     class="components-base-control__field emotion-2 emotion-3"
   >
-    <div>
+    <div
+      class="emotion-4 emotion-5"
+    >
       <span
-        class="components-base-control__label emotion-4 emotion-5"
+        class="components-base-control__label emotion-6 emotion-7"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-8 emotion-9"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-1"
@@ -190,18 +205,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         role="presentation"
         style="transform: translateX(0px); transition: none; width: 0px;"
       />
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
         data-active="true"
       >
         <button
           aria-checked="true"
           aria-label="Uppercase"
-          class="emotion-12 components-toggle-group-control-option-base emotion-13"
+          class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
           data-value="uppercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -210,7 +225,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-17 emotion-18"
           >
             <svg
               aria-hidden="true"
@@ -228,13 +243,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         </button>
       </div>
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="Lowercase"
-          class="emotion-12 components-toggle-group-control-option-base"
+          class="emotion-14 emotion-15 components-toggle-group-control-option-base"
           data-value="lowercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -243,7 +258,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-17 emotion-18"
           >
             <svg
               aria-hidden="true"
@@ -287,6 +302,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -296,10 +318,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-8 {
   background: #fff;
-  border: 1px solid;
-  border-color: #757575;
+  border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -311,26 +332,27 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-6 {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-6:hover {
-  border-color: #757575;
-}
-
-.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);
+.emotion-8:focus-within {
+  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-8 {
+.emotion-8:hover {
+  border-color: #757575;
+}
+
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -343,7 +365,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -384,20 +406,20 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-10 {
+  .emotion-12 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-12::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10:active {
+.emotion-12:active {
   background: #fff;
 }
 
-.emotion-11 {
+.emotion-13 {
   font-size: 13px;
   line-height: 1;
 }
@@ -408,16 +430,18 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   <div
     class="components-base-control__field emotion-2 emotion-3"
   >
-    <div>
+    <div
+      class="emotion-4 emotion-5"
+    >
       <span
-        class="components-base-control__label emotion-4 emotion-5"
+        class="components-base-control__label emotion-6 emotion-7"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-8 emotion-9"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-0"
@@ -428,13 +452,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-10 components-toggle-group-control-option-base"
+          class="emotion-12 components-toggle-group-control-option-base"
           data-value="rigas"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -443,20 +467,20 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             R
           </div>
         </button>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-10 components-toggle-group-control-option-base"
+          class="emotion-12 components-toggle-group-control-option-base"
           data-value="jack"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -465,7 +489,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             J
           </div>

package/src/toggle-group-control/test/{index.js → index.tsx}

@@ -59,14 +59,12 @@ describe( 'ToggleGroupControl', () => {
 					<ToggleGroupControlOptionIcon
 						value="uppercase"
 						icon={ formatUppercase }
-						showTooltip={ true }
-						aria-label="Uppercase"
+						label="Uppercase"
 					/>
 					<ToggleGroupControlOptionIcon
 						value="lowercase"
 						icon={ formatLowercase }
-						showTooltip={ true }
-						aria-label="Lowercase"
+						label="Lowercase"
 					/>
 				</ToggleGroupControl>
 			);

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

@@ -6,6 +6,8 @@ This feature is still experimental. “Experimental” means this is an early im
 
 `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.
 
+This component is intended for selecting a single persistent value from a set of options, similar to a how a radio button group would work. If you simply want a toggle to switch between views, use a [`TabPanel`](/packages/components/src/tab-panel/README.md) instead.
+
 Only use this control when you know for sure the labels of items inside won't wrap. For items with longer labels, you can consider a [`SelectControl`](/packages/components/src/select-control/README.md) or a [`CustomSelectControl`](/packages/components/src/custom-select-control/README.md) component instead.
 
 ## Usage