@wordpress/components 19.8.4 → 19.11.0

package/src/select-control/types.ts

@@ -1 +1,66 @@
-export type Size = 'default' | 'small' | '__unstable-large';
+/**
+ * External dependencies
+ */
+import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { InputBaseProps } from '../input-control/types';
+import type { BaseControlProps } from '../base-control/types';
+
+export interface SelectControlProps
+	extends Pick<
+			InputBaseProps,
+			| 'disabled'
+			| 'hideLabelFromVision'
+			| 'label'
+			| 'labelPosition'
+			| 'prefix'
+			| 'size'
+			| 'suffix'
+		>,
+		Pick< BaseControlProps, 'help' > {
+	/**
+	 * If this property is added, multiple values can be selected. The value passed should be an array.
+	 *
+	 * @default false
+	 */
+	multiple?: boolean;
+	onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+	onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+	/**
+	 * A function that receives the value of the new option that is being selected as input.
+	 *
+	 * If `multiple` is `true`, the value received is an array of the selected value.
+	 * Otherwise, the value received is a single value with the new selected value.
+	 */
+	onChange?: (
+		value: string | string[],
+		extra?: { event?: ChangeEvent< HTMLSelectElement > }
+	) => void;
+	options?: {
+		/**
+		 * The label to be shown to the user.
+		 */
+		label: string;
+		/**
+		 * The internal value used to choose the selected value.
+		 * This is also the value passed to `onChange` when the option is selected.
+		 */
+		value: string;
+		id?: string;
+		/**
+		 * Whether or not the option should have the disabled attribute.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+	}[];
+	value?: string | string[];
+	/**
+	 * As an alternative to the `options` prop, `optgroup`s and `options` can be
+	 * passed in as `children` for more customizability.
+	 */
+	children?: ReactNode;
+}

package/src/surface/styles.js

@@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	position: relative;
 `;
 

package/src/tab-panel/style.scss

@@ -59,6 +59,6 @@
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
 	}
 }

package/src/text/hook.js

@@ -105,7 +105,7 @@ export default function useText( props ) {
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.black } )
+				? css( { color: COLORS.gray[ 900 ] } )
 				: css( { color: COLORS.white } );
 		}
 

package/src/text/styles/text-mixins.native.js

@@ -3,7 +3,7 @@
  */
 import { fontFamily } from './font-family';
 import css from './emotion-css';
-import { G2 } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 
 const fontWeightNormal = `font-weight: 400;`;
 const fontWeightMedium = `font-weight: 500;`;
@@ -81,7 +81,7 @@ const sectionHeading = `
 	font-size: 11px;
 	line-height: 1.4;
 	text-transform: uppercase;
-	color: ${ G2.gray[ 700 ] }
+	color: ${ COLORS.gray[ 700 ] }
 `;
 
 /**

package/src/text/styles.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text should render align 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -3,7 +3,8 @@
+      "color": "#1e1e1e",
+      "font-size": "calc((13 / 13) * 13px)",
+      "font-weight": "normal",
+      "line-height": "1.2",
+      "margin": "0",
++     "text-align": "center",
+    },
+  ]
+`;
+
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
   color: #1e1e1e;

package/src/text/test/{index.js → index.tsx}

@@ -59,14 +59,20 @@ describe( 'Text', () => {
 
 	test( 'should render as another element', () => {
 		const { container } = render( <Text as="div">Lorem ipsum.</Text> );
-		expect( container.firstChild.nodeName ).toBe( 'DIV' );
+		expect( container.firstChild?.nodeName ).toBe( 'DIV' );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
+		const { container: centerAlignedContainer } = render(
 			<Text align="center">Lorem ipsum.</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { textAlign: 'center' } );
+		const { container: defaultAlignedContainer } = render(
+			<Text>Lorem ipsum.</Text>
+		);
+
+		expect(
+			defaultAlignedContainer.children[ 0 ]
+		).toMatchStyleDiffSnapshot( centerAlignedContainer.children[ 0 ] );
 	} );
 
 	test( 'should render color', () => {
@@ -89,7 +95,7 @@ describe( 'Text', () => {
 		const wrapper = render(
 			<Text highlightWords={ [ 'm' ] }>Lorem ipsum.</Text>
 		);
-		expect( wrapper.container.firstChild.childNodes ).toHaveLength( 5 );
+		expect( wrapper.container.firstChild?.childNodes ).toHaveLength( 5 );
 		const words = await wrapper.findAllByText( 'm' );
 		expect( words ).toHaveLength( 2 );
 		words.forEach( ( word ) => expect( word.tagName ).toEqual( 'MARK' ) );
@@ -100,7 +106,7 @@ describe( 'Text', () => {
 			<Text highlightWords={ undefined }>Lorem ipsum.</Text>
 		);
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild.childNodes ).toHaveLength( 1 );
+		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render highlighted words with highlightCaseSensitive', () => {
@@ -112,7 +118,7 @@ describe( 'Text', () => {
 
 		expect( container.firstChild ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild.childNodes ).toHaveLength( 1 );
+		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render isBlock', () => {

package/src/text-control/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent, ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import type { WordPressComponentProps } from '../ui/context';
+import type { TextControlProps } from './types';
+
+function UnforwardedTextControl(
+	props: WordPressComponentProps< TextControlProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
+) {
+	const {
+		label,
+		hideLabelFromVision,
+		value,
+		help,
+		className,
+		onChange,
+		type = 'text',
+		...additionalProps
+	} = props;
+	const instanceId = useInstanceId( TextControl );
+	const id = `inspector-text-control-${ instanceId }`;
+	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
+		onChange( event.target.value );
+
+	return (
+		<BaseControl
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			id={ id }
+			help={ help }
+			className={ className }
+		>
+			<input
+				className="components-text-control__input"
+				type={ type }
+				id={ id }
+				value={ value }
+				onChange={ onChangeValue }
+				aria-describedby={ !! help ? id + '__help' : undefined }
+				ref={ ref }
+				{ ...additionalProps }
+			/>
+		</BaseControl>
+	);
+}
+
+/**
+ * TextControl components let users enter and edit text.
+ *
+ *
+ * @example
+ * ```jsx
+ * import { TextControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTextControl = () => {
+ *   const [ className, setClassName ] = useState( '' );
+ *
+ *   return (
+ *     <TextControl
+ *       label="Additional CSS Class"
+ *       value={ className }
+ *       onChange={ ( value ) => setClassName( value ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const TextControl = forwardRef( UnforwardedTextControl );
+
+export default TextControl;

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

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextControl from '..';
+
+const meta: ComponentMeta< typeof TextControl > = {
+	component: TextControl,
+	title: 'Components/TextControl',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		value: {
+			control: { type: null },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<TextControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory<
+	typeof TextControl
+> = DefaultTemplate.bind( {} );
+Default.args = {};
+
+export const WithLabelAndHelpText: ComponentStory<
+	typeof TextControl
+> = DefaultTemplate.bind( {} );
+WithLabelAndHelpText.args = {
+	...Default.args,
+	label: 'Label Text',
+	help: 'Help text to explain the input.',
+};

package/src/text-control/types.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { HTMLInputTypeAttribute } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type TextControlProps = Pick<
+	BaseControlProps,
+	'className' | 'hideLabelFromVision' | 'help' | 'label'
+> & {
+	/**
+	 * A function that receives the value of the input.
+	 */
+	onChange: ( value: string ) => void;
+	/**
+	 * The current value of the input.
+	 */
+	value: string | number;
+	/**
+	 * Type of the input element to render. Defaults to "text".
+	 *
+	 * @default 'text'
+	 */
+	type?: HTMLInputTypeAttribute;
+};

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

@@ -173,12 +173,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
-      <iframe
+      <div
         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"
+        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"
@@ -402,12 +399,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
+      <div
         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"
+        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"

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

@@ -4,14 +4,18 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -49,7 +53,7 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'

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

@@ -1,14 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../../ui/context';
 import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+import Icon from '../../icon';
 
 export default function ToggleGroupControlOptionIcon(
 	props: WordPressComponentProps<

package/src/toolbar-group/style.scss

@@ -5,6 +5,8 @@
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
+	padding-left: $grid-unit-15 * 0.5; // 6px.
+	padding-right: $grid-unit-15 * 0.5;
 
 	// Unset for nested toolbar groups. Increase specificity.
 	& .components-toolbar-group.components-toolbar-group {
@@ -13,6 +15,24 @@
 	}
 
 	line-height: 0;
+
+	// Size multiple sequential buttons to be optically balanced.
+	// Icons are 36px, as set by a 24px icon and 12px padding.
+	.components-button.components-button, // This needs specificity to override padding values inherited from the button component.
+	.components-button.has-icon.has-icon {
+		min-width: $block-toolbar-height - $grid-unit-15;
+		padding-left: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-15 * 0.5;
+
+		svg {
+			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
 }
 
 // Legacy toolbar group

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

@@ -64,7 +64,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -167,7 +167,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
         <button
           aria-expanded="false"
           aria-haspopup="true"
-          aria-label="View options"
+          aria-label="Panel header options"
           class="components-button components-dropdown-menu__toggle is-small has-icon"
           type="button"
         >