@wordpress/components 17.0.0 → 19.0.2

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

@@ -0,0 +1,104 @@
+/**
+ * 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';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../../ui/context';
+import type { ToggleGroupControlOptionProps } from '../types';
+import { useToggleGroupControlContext } from '../context';
+import * as styles from './styles';
+import { useCx } from '../../utils/hooks';
+
+const { ButtonContentView, LabelPlaceholderView, LabelView } = styles;
+
+function ToggleGroupControlOption(
+	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >,
+	forwardedRef: Ref< any >
+) {
+	const toggleGroupControlContext = useToggleGroupControlContext();
+	const id = useInstanceId(
+		ToggleGroupControlOption,
+		toggleGroupControlContext.baseId || 'toggle-group-control-option'
+	) as string;
+	const buttonProps = useContextSystem(
+		{ ...props, id },
+		'ToggleGroupControlOption'
+	);
+
+	const { className, isBlock = false, label, value, ...radioProps } = {
+		...toggleGroupControlContext,
+		...buttonProps,
+	};
+
+	const isActive = radioProps.state === value;
+	const cx = useCx();
+	const labelViewClasses = cx( isBlock && styles.labelBlock );
+	const classes = cx(
+		styles.buttonView,
+		className,
+		isActive && styles.buttonActive
+	);
+
+	return (
+		<LabelView className={ labelViewClasses } data-active={ isActive }>
+			<Radio
+				{ ...radioProps }
+				as="button"
+				aria-label={ radioProps[ 'aria-label' ] ?? label }
+				className={ classes }
+				data-value={ value }
+				ref={ forwardedRef }
+				value={ value }
+			>
+				<ButtonContentView>{ label }</ButtonContentView>
+				<LabelPlaceholderView aria-hidden>
+					{ label }
+				</LabelPlaceholderView>
+			</Radio>
+		</LabelView>
+	);
+}
+
+/**
+ * `ToggleGroupControlOption` is a form component and is meant to be used as a
+ * child of `ToggleGroupControl`.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalToggleGroupControl as ToggleGroupControl,
+ *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
+ *       <ToggleGroupControlOption value="vertical" label="Vertical" />
+ *     </ToggleGroupControl>
+ *   );
+ * }
+ * ```
+ */
+const ConnectedToggleGroupControlOption = contextConnect(
+	ToggleGroupControlOption,
+	'ToggleGroupControlOption'
+);
+
+export default ConnectedToggleGroupControlOption;

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

@@ -0,0 +1 @@
+export { default as ToggleGroupControlOption } from './component';

package/src/toggle-group-control/{styles.ts → toggle-group-control-option/styles.ts}

@@ -7,49 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../utils';
-
-export const ToggleGroupControl = css`
-	background: ${ COLORS.ui.background };
-	border: 1px solid;
-	border-color: ${ COLORS.ui.border };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	display: inline-flex;
-	min-height: ${ CONFIG.controlHeight };
-	min-width: 0;
-	padding: 2px;
-	position: relative;
-	transition: transform ${ CONFIG.transitionDurationFastest } linear;
-	${ reduceMotion( 'transition' ) }
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
-
-	&:focus-within {
-		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-		outline: none;
-		z-index: 1;
-	}
-`;
-
-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;
-`;
+import { CONFIG, COLORS, reduceMotion } from '../../utils';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -107,17 +65,6 @@ export const ButtonContentView = styled.div`
 	transform: translate( -50%, -50% );
 `;
 
-export const SeparatorView = styled.div`
-	background: ${ CONFIG.colorDivider };
-	height: calc( 100% - 4px - 4px );
-	position: absolute;
-	right: 0;
-	top: 4px;
-	transition: background ${ CONFIG.transitionDuration } linear;
-	${ reduceMotion( 'transition' ) }
-	width: 1px;
-`;
-
 export const separatorActive = css`
 	background: transparent;
 `;

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { MutableRefObject, Ref, ReactNode, ReactText } from 'react';
+import type { MutableRefObject, ReactNode, ReactText } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type { RadioStateReturn } from 'reakit';
 
@@ -13,6 +13,10 @@ import type { FormElementProps } from '../utils/types';
 
 export type ToggleGroupControlOptionProps = {
 	value: ReactText;
+	/**
+	 * Label for the option. If needed, the `aria-label` prop can be used in addition
+	 * to specify a different label for assistive technologies.
+	 */
 	label: string;
 };
 
@@ -70,21 +74,6 @@ export type ToggleGroupControlContextProps = RadioStateReturn & {
 	isBlock?: boolean;
 };
 
-export type ToggleGroupControlButtonProps = {
-	className?: string;
-	forwardedRef?: Ref< any >;
-	/**
-	 * Renders `ToggleGroupControl` is a (CSS) block element.
-	 *
-	 * @default false
-	 */
-	isBlock?: boolean;
-	label: string;
-	showSeparator?: boolean;
-	value?: ReactText;
-	state?: any;
-};
-
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;
 	containerWidth?: number | null;

package/src/toolbar-button/stories/index.js

@@ -3,21 +3,31 @@
  */
 import { text } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import { Toolbar } from '../../';
 import ToolbarButton from '../';
 
-export default { title: 'Components/ToolbarButton', component: ToolbarButton };
+export default {
+	title: 'Components/ToolbarButton',
+	component: ToolbarButton,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const label = text( 'Label', 'This is an example label.' );
-	const icon = text( 'Icon', 'wordpress' );
 
 	return (
 		<Toolbar label="Example Toolbar">
-			<ToolbarButton icon={ icon } label={ label } />
+			<ToolbarButton icon={ wordpress } label={ label } />
 		</Toolbar>
 	);
 };

package/src/tools-panel/context.ts

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ToolsPanelContext as ToolsPanelContextType } from './types';
+
+const noop = () => undefined;
+
+export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
+	menuItems: { default: {}, optional: {} },
+	hasMenuItems: false,
+	isResetting: false,
+	shouldRenderPlaceholderItems: false,
+	registerPanelItem: noop,
+	deregisterPanelItem: noop,
+	flagItemCustomization: noop,
+	areAllOptionalControlsHidden: true,
+} );
+
+export const useToolsPanelContext = () =>
+	useContext< ToolsPanelContextType >( ToolsPanelContext );

package/src/tools-panel/{index.js → index.ts}

@@ -1,2 +1,3 @@
 export { default as ToolsPanel } from './tools-panel';
 export { default as ToolsPanelItem } from './tools-panel-item';
+export { ToolsPanelContext } from './context';

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import { ToolsPanel, ToolsPanelItem } from '../';
 import Panel from '../../panel';
 import UnitControl from '../../unit-control';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
 export default {
 	title: 'Components (Experimental)/ToolsPanel',
@@ -28,44 +29,45 @@ export const _default = () => {
 	const resetAll = () => {
 		setHeight( undefined );
 		setWidth( undefined );
+		setMinHeight( undefined );
 	};
 
 	return (
 		<PanelWrapperView>
 			<Panel>
 				<ToolsPanel
-					header="Tools Panel"
-					label="Display options"
+					label="Tools Panel (default example)"
 					resetAll={ resetAll }
 				>
-					<ToolsPanelItem
-						className="single-column"
+					<SingleColumnItem
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
+						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
 						/>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						className="single-column"
+					</SingleColumnItem>
+					<SingleColumnItem
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
+						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
 						/>
-					</ToolsPanelItem>
+					</SingleColumnItem>
 					<ToolsPanelItem
 						hasValue={ () => !! minHeight }
 						label="Minimum height"
 						onDeselect={ () => setMinHeight( undefined ) }
+						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Minimum height"
@@ -79,7 +81,151 @@ export const _default = () => {
 	);
 };
 
+export const WithOptionalItemsPlusIcon = () => {
+	const [ height, setHeight ] = useState();
+	const [ width, setWidth ] = useState();
+
+	const resetAll = () => {
+		setHeight( undefined );
+		setWidth( undefined );
+	};
+
+	return (
+		<PanelWrapperView>
+			<Panel>
+				<ToolsPanel
+					label="Tools Panel (optional items only)"
+					resetAll={ resetAll }
+				>
+					<SingleColumnItem
+						hasValue={ () => !! width }
+						label="Width"
+						onDeselect={ () => setWidth( undefined ) }
+						isShownByDefault={ false }
+					>
+						<UnitControl
+							label="Width"
+							value={ width }
+							onChange={ ( next ) => setWidth( next ) }
+						/>
+					</SingleColumnItem>
+					<SingleColumnItem
+						hasValue={ () => !! height }
+						label="Height"
+						onDeselect={ () => setHeight( undefined ) }
+						isShownByDefault={ false }
+					>
+						<UnitControl
+							label="Height"
+							value={ height }
+							onChange={ ( next ) => setHeight( next ) }
+						/>
+					</SingleColumnItem>
+				</ToolsPanel>
+			</Panel>
+		</PanelWrapperView>
+	);
+};
+
+const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
+const panelId = 'unique-tools-panel-id';
+
+export const WithSlotFillItems = () => {
+	const [ attributes, setAttributes ] = useState( {} );
+	const { width, height } = attributes;
+
+	const resetAll = ( resetFilters = [] ) => {
+		let newAttributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
+	};
+
+	const updateAttribute = ( name, value ) => {
+		setAttributes( {
+			...attributes,
+			[ name ]: value,
+		} );
+	};
+
+	return (
+		<SlotFillProvider>
+			<ToolsPanelItems>
+				<SingleColumnItem
+					hasValue={ () => !! width }
+					label="Injected Width"
+					onDeselect={ () => updateAttribute( 'width', undefined ) }
+					resetAllFilter={ () => ( { width: undefined } ) }
+					panelId={ panelId }
+				>
+					<UnitControl
+						label="Injected Width"
+						value={ width }
+						onChange={ ( next ) =>
+							updateAttribute( 'width', next )
+						}
+					/>
+				</SingleColumnItem>
+				<SingleColumnItem
+					hasValue={ () => !! height }
+					label="Injected Height"
+					onDeselect={ () => updateAttribute( 'height', undefined ) }
+					resetAllFilter={ () => ( { height: undefined } ) }
+					panelId={ panelId }
+				>
+					<UnitControl
+						label="Injected Height"
+						value={ height }
+						onChange={ ( next ) =>
+							updateAttribute( 'height', next )
+						}
+					/>
+				</SingleColumnItem>
+				<ToolsPanelItem
+					hasValue={ () => true }
+					label="Item for alternate panel"
+					onDeselect={ () => undefined }
+					resetAllFilter={ () => undefined }
+					panelId={ 'intended-for-another-panel-via-shared-slot' }
+				>
+					<p>
+						This panel item will not be displayed in the demo as its
+						panelId does not match the panel being rendered.
+					</p>
+				</ToolsPanelItem>
+			</ToolsPanelItems>
+			<PanelWrapperView>
+				<Panel>
+					<ToolsPanel
+						label="Tools Panel With SlotFill Items"
+						resetAll={ resetAll }
+						panelId={ panelId }
+					>
+						<Slot />
+					</ToolsPanel>
+				</Panel>
+			</PanelWrapperView>
+		</SlotFillProvider>
+	);
+};
+
+export { TypographyPanel } from './typography-panel';
+
 const PanelWrapperView = styled.div`
-	max-width: 250px;
+	max-width: 280px;
 	font-size: 13px;
+
+	.components-dropdown-menu__menu {
+		max-width: 220px;
+	}
+`;
+
+const SingleColumnItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
 `;