@wordpress/components 18.0.0 → 19.0.3

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

@@ -14,7 +14,13 @@ import { wordpress } from '@wordpress/icons';
 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.' );

package/src/tools-panel/context.ts

@@ -14,9 +14,11 @@ 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 = () =>

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

@@ -35,9 +35,11 @@ export const _default = () => {
 	return (
 		<PanelWrapperView>
 			<Panel>
-				<ToolsPanel label="Tools Panel" resetAll={ resetAll }>
-					<ToolsPanelItem
-						className="single-column"
+				<ToolsPanel
+					label="Tools Panel (default example)"
+					resetAll={ resetAll }
+				>
+					<SingleColumnItem
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
@@ -48,9 +50,8 @@ export const _default = () => {
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
 						/>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						className="single-column"
+					</SingleColumnItem>
+					<SingleColumnItem
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
@@ -61,11 +62,12 @@ export const _default = () => {
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
 						/>
-					</ToolsPanelItem>
+					</SingleColumnItem>
 					<ToolsPanelItem
 						hasValue={ () => !! minHeight }
 						label="Minimum height"
 						onDeselect={ () => setMinHeight( undefined ) }
+						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Minimum height"
@@ -79,6 +81,52 @@ 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';
 
@@ -109,8 +157,7 @@ export const WithSlotFillItems = () => {
 	return (
 		<SlotFillProvider>
 			<ToolsPanelItems>
-				<ToolsPanelItem
-					className="single-column"
+				<SingleColumnItem
 					hasValue={ () => !! width }
 					label="Injected Width"
 					onDeselect={ () => updateAttribute( 'width', undefined ) }
@@ -124,9 +171,8 @@ export const WithSlotFillItems = () => {
 							updateAttribute( 'width', next )
 						}
 					/>
-				</ToolsPanelItem>
-				<ToolsPanelItem
-					className="single-column"
+				</SingleColumnItem>
+				<SingleColumnItem
 					hasValue={ () => !! height }
 					label="Injected Height"
 					onDeselect={ () => updateAttribute( 'height', undefined ) }
@@ -140,7 +186,7 @@ export const WithSlotFillItems = () => {
 							updateAttribute( 'height', next )
 						}
 					/>
-				</ToolsPanelItem>
+				</SingleColumnItem>
 				<ToolsPanelItem
 					hasValue={ () => true }
 					label="Item for alternate panel"
@@ -169,7 +215,17 @@ export const WithSlotFillItems = () => {
 	);
 };
 
+export { TypographyPanel } from './typography-panel';
+
 const PanelWrapperView = styled.div`
-	max-width: 260px;
+	max-width: 280px;
 	font-size: 13px;
+
+	.components-dropdown-menu__menu {
+		max-width: 220px;
+	}
+`;
+
+const SingleColumnItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
 `;

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

@@ -0,0 +1,215 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalFontAppearanceControl as FontAppearanceControl,
+	__experimentalFontFamilyControl as FontFamilyControl,
+	__experimentalLetterSpacingControl as LetterSpacingControl,
+	LineHeightControl,
+} from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '../../font-size-picker';
+import Panel from '../../panel';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../../toggle-group-control';
+import { ToolsPanel, ToolsPanelItem } from '..';
+
+// These options match the theme.json typography schema
+const fontFamilies = [
+	{
+		fontFamily:
+			'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+		slug: 'system-fonts',
+		name: 'System Fonts',
+	},
+	{
+		fontFamily:
+			'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace',
+		name: 'Monospace',
+		slug: 'monospace',
+	},
+	{
+		fontFamily:
+			'Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif',
+		name: 'Serif',
+		slug: 'hoefler-times-new-roman',
+	},
+];
+const fontSizes = [
+	{
+		slug: 'small',
+		size: '1rem',
+		name: 'Small',
+	},
+	{
+		slug: 'normal',
+		size: '1.25rem',
+		name: 'Normal',
+	},
+	{
+		slug: 'medium',
+		size: '1.5rem',
+		name: 'medium',
+	},
+	{
+		slug: 'large',
+		size: '2rem',
+		name: 'Large',
+	},
+	{
+		slug: 'extra-large',
+		size: '3rem',
+		name: 'Extra large',
+	},
+];
+
+const LetterCaseControl = ( props ) => {
+	return (
+		<ToggleGroupControl label="Letter Case" isBlock={ true } { ...props }>
+			{ [
+				{ value: 'uppercase', ariaLabel: 'Uppercase', label: 'AB' },
+				{ value: 'lowercase', ariaLabel: 'Lowercase', label: 'ab' },
+				{ value: 'capitalize', ariaLabel: 'Capitalize', label: 'Ab' },
+			].map( ( { value, ariaLabel, label } ) => (
+				<ToggleGroupControlOption
+					key={ value }
+					label={ label }
+					aria-label={ ariaLabel }
+					value={ value }
+				/>
+			) ) }
+		</ToggleGroupControl>
+	);
+};
+
+export const TypographyPanel = () => {
+	const [ fontFamily, setFontFamily ] = useState();
+	const [ fontSize, setFontSize ] = useState();
+	const [ fontWeight, setFontWeight ] = useState();
+	const [ fontStyle, setFontStyle ] = useState();
+	const [ lineHeight, setLineHeight ] = useState();
+	const [ letterSpacing, setLetterSpacing ] = useState();
+	const [ textTransform, setTextTransform ] = useState();
+
+	return (
+		<>
+			<div style={ { maxWidth: '280px' } }>
+				<Panel>
+					<ToolsPanel label="Typography">
+						<ToolsPanelItem
+							hasValue={ () => !! fontFamily }
+							label="Font"
+							onDeselect={ () => setFontFamily( undefined ) }
+							isShownByDefault={ true }
+						>
+							<FontFamilyControl
+								value={ fontFamily }
+								onChange={ setFontFamily }
+								fontFamilies={ fontFamilies }
+							/>
+						</ToolsPanelItem>
+
+						<ToolsPanelItem
+							hasValue={ () => !! fontSize }
+							label="Size"
+							onDeselect={ () => setFontSize( undefined ) }
+							isShownByDefault={ true }
+						>
+							<FontSizePicker
+								value={ fontSize }
+								onChange={ setFontSize }
+								fontSizes={ fontSizes }
+							/>
+						</ToolsPanelItem>
+
+						<ToolsPanelItem
+							hasValue={ () => !! fontStyle || !! fontWeight }
+							label="Appearance"
+							onDeselect={ () => {
+								setFontStyle( undefined );
+								setFontWeight( undefined );
+							} }
+							isShownByDefault={ true }
+						>
+							<FontAppearanceControl
+								value={ {
+									fontStyle,
+									fontWeight,
+								} }
+								onChange={ ( {
+									fontStyle: style,
+									fontWeight: weight,
+								} ) => {
+									setFontStyle( style );
+									setFontWeight( weight );
+								} }
+							/>
+						</ToolsPanelItem>
+
+						<ToolsPanelItem
+							hasValue={ () => !! lineHeight }
+							label="Line Height"
+							onDeselect={ () => setLineHeight( undefined ) }
+							isShownByDefault={ true }
+						>
+							<LineHeightControl
+								value={ lineHeight }
+								onChange={ setLineHeight }
+							/>
+						</ToolsPanelItem>
+
+						<ToolsPanelItem
+							hasValue={ () => !! letterSpacing }
+							label="Letter Spacing"
+							onDeselect={ () => setLetterSpacing( undefined ) }
+							isShownByDefault={ true }
+						>
+							<LetterSpacingControl
+								value={ letterSpacing }
+								onChange={ setLetterSpacing }
+							/>
+						</ToolsPanelItem>
+
+						<ToolsPanelItem
+							hasValue={ () => !! textTransform }
+							label="Letter Case"
+							onDeselect={ () => setTextTransform( undefined ) }
+							isShownByDefault={ true }
+						>
+							<LetterCaseControl
+								onChange={ setTextTransform }
+								value={ textTransform }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				</Panel>
+			</div>
+			<div
+				style={ {
+					marginTop: '1rem',
+					fontFamily,
+					fontSize,
+					fontStyle,
+					fontWeight,
+					lineHeight,
+					letterSpacing,
+					textTransform,
+				} }
+			>
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+				enim ad minim veniam, quis nostrud exercitation ullamco laboris
+				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+				in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+				nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+				sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</div>
+		</>
+	);
+};