TextTransformControl/TextDecorationControl: Migrate to ToggleGroupControl

packages/block-editor/src/components/text-decoration-control/index.js

@@ -1,7 +1,10 @@
 /**
  * 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';
 
@@ -27,32 +30,26 @@ const TEXT_DECORATIONS = [
  *
  * @return {WPElement} Text decoration control.
  */
-export default function TextDecorationControl( { value, onChange } ) {
+export default function TextDecorationControl( { value, onChange, ...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="block-editor-text-decoration-control"
+			__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>
 	);
 }

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( {} );

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>
 	);
 }

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( {} );

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";