TextTransformControl/TextDecorationControl: Migrate to ToggleGroupCon…

…trol (#43328) * Add stories * Replace with ToggleGroupControl * Pass through additional className
WordPress · Aug 26, 2022 · bd59e8b · bd59e8b
1 parent 75add8d
commit bd59e8b
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 95 deletions.
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -1,7 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -21,38 +29,41 @@ const TEXT_DECORATIONS = [
 /**
  * Control to facilitate text decoration selections.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected text decoration.
- * @param {Function} props.onChange Handles change in text decoration selection.
+ * @param {Object}   props             Component props.
+ * @param {string}   props.value       Currently selected text decoration.
+ * @param {Function} props.onChange    Handles change in text decoration selection.
+ * @param {string}   [props.className] Additional class name to apply.
  *
  * @return {WPElement} Text decoration control.
  */
-export default function TextDecorationControl( { value, onChange } ) {
+export default function TextDecorationControl( {
+	value,
+	onChange,
+	className,
+	...props
+} ) {
 	return (
-		<fieldset className="block-editor-text-decoration-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Decoration' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-decoration-control__buttons">
-				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-					return (
-						<Button
-							key={ textDecoration.value }
-							icon={ textDecoration.icon }
-							isSmall
-							isPressed={ textDecoration.value === value }
-							onClick={ () =>
-								onChange(
-									textDecoration.value === value
-										? undefined
-										: textDecoration.value
-								)
-							}
-							aria-label={ textDecoration.name }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			{ ...props }
+			className={ classnames(
+				'block-editor-text-decoration-control',
+				className
+			) }
+			__experimentalIsIconGroup
+			label={ __( 'Decoration' ) }
+			value={ value }
+			onChange={ onChange }
+		>
+			{ TEXT_DECORATIONS.map( ( textDecoration ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ textDecoration.value }
+						value={ textDecoration.value }
+						icon={ textDecoration.icon }
+						label={ textDecoration.name }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.js b/packages/block-editor/src/components/text-decoration-control/stories/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextDecorationControl from '../';
+
+export default {
+	title: 'BlockEditor/TextDecorationControl',
+	component: TextDecorationControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextDecorationControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-decoration-control/style.scss b/packages/block-editor/src/components/text-decoration-control/style.scss
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	formatCapitalize,
@@ -36,32 +42,26 @@ const TEXT_TRANSFORMS = [
  *
  * @return {WPElement} Text transform control.
  */
-export default function TextTransformControl( { value, onChange } ) {
+export default function TextTransformControl( { value, onChange, ...props } ) {
 	return (
-		<fieldset className="block-editor-text-transform-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							isSmall
-							isPressed={ value === textTransform.value }
-							aria-label={ textTransform.name }
-							onClick={ () =>
-								onChange(
-									value === textTransform.value
-										? undefined
-										: textTransform.value
-								)
-							}
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			{ ...props }
+			className="block-editor-text-transform-control"
+			__experimentalIsIconGroup
+			label={ __( 'Letter case' ) }
+			value={ value }
+			onChange={ onChange }
+		>
+			{ TEXT_TRANSFORMS.map( ( textTransform ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ textTransform.value }
+						value={ textTransform.value }
+						icon={ textTransform.icon }
+						label={ textTransform.name }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.js b/packages/block-editor/src/components/text-transform-control/stories/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextTransformControl from '../';
+
+export default {
+	title: 'BlockEditor/TextTransformControl',
+	component: TextTransformControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			options: [ 'default', '__unstable-large' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextTransformControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-transform-control/style.scss b/packages/block-editor/src/components/text-transform-control/style.scss
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -46,8 +46,6 @@
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-transform-control/style.scss";
-@import "./components/text-decoration-control/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";