Use ToggleGroupControl instead of ButtonGroup (#214)

* Use ToggleGroupControl instead of ButtonGroup * Fix e2e test * Remove unnecessary ts-ignore * Refactoring
t-hamano · Oct 19, 2024 · 2c5ca81 · 2c5ca81
1 parent 92bce27
commit 2c5ca81
Show file tree

Hide file tree

Showing 11 changed files with 562 additions and 595 deletions.
diff --git a/src/BlockAttributes.ts b/src/BlockAttributes.ts
@@ -5,12 +5,9 @@ import type {
 	CAPTION_SIDE_CONTROLS,
 	CELL_TAG_CONTROLS,
 	CELL_SCOPE_CONTROLS,
-	TEXT_ALIGNMENT_CONTROLS,
-	VERTICAL_ALIGNMENT_CONTROLS,
 	CORNER_CONTROLS,
 	DIRECTION_CONTROLS,
 	SIDE_CONTROLS,
-	BORDER_STYLE_CONTROLS,
 	CONTENT_JUSTIFY_CONTROLS,
 	BORDER_COLLAPSE_CONTROLS,
 } from './constants';
@@ -23,12 +20,9 @@ type NestedObject = {
 export type CaptionSideValue = ( typeof CAPTION_SIDE_CONTROLS )[ number ][ 'value' ];
 export type CellTagValue = ( typeof CELL_TAG_CONTROLS )[ number ][ 'value' ];
 export type CellScopeValue = ( typeof CELL_SCOPE_CONTROLS )[ number ][ 'value' ];
-export type TextAlignValue = ( typeof TEXT_ALIGNMENT_CONTROLS )[ number ][ 'value' ];
-export type VerticalAlignValue = ( typeof VERTICAL_ALIGNMENT_CONTROLS )[ number ][ 'value' ];
 export type CornerValue = ( typeof CORNER_CONTROLS )[ number ][ 'value' ];
 export type DirectionValue = ( typeof DIRECTION_CONTROLS )[ number ][ 'value' ];
 export type SideValue = ( typeof SIDE_CONTROLS )[ number ][ 'value' ];
-export type BorderStyleValue = ( typeof BORDER_STYLE_CONTROLS )[ number ][ 'value' ];
 export type ContentJustifyValue = ( typeof CONTENT_JUSTIFY_CONTROLS )[ number ][ 'value' ];
 export type BorderCollapseValue = ( typeof BORDER_COLLAPSE_CONTROLS )[ number ][ 'value' ];
 

diff --git a/src/controls/border-style-control.tsx b/src/controls/border-style-control.tsx
@@ -12,9 +12,10 @@ import { link, linkOff } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 import {
 	BaseControl,
-	ButtonGroup,
 	Button,
 	Tooltip,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalText as Text,
 } from '@wordpress/components';
 
@@ -23,7 +24,6 @@ import {
  */
 import { BORDER_STYLE_CONTROLS, SIDE_CONTROLS } from '../constants';
 import { SideIndicatorControl } from './indicator-control';
-import type { BorderStyleValue } from '../BlockAttributes';
 
 const DEFAULT_VALUES = {
 	top: '',
@@ -90,7 +90,7 @@ export default function BorderStyleControl( {
 		onChange( DEFAULT_VALUES );
 	};
 
-	const handleOnClickAll = ( value: BorderStyleValue ) => {
+	const handleOnClickAll = ( value: string | number | undefined ) => {
 		const newValue =
 			value === values.top &&
 			value === values.right &&
@@ -107,7 +107,7 @@ export default function BorderStyleControl( {
 		} );
 	};
 
-	const handleOnClick = ( value: BorderStyleValue, targetSide: ValuesKey ) => {
+	const handleOnClick = ( value: string | number | undefined, targetSide: ValuesKey ) => {
 		const newValue =
 			values[ targetSide as ValuesKey ] && value === values[ targetSide as ValuesKey ]
 				? undefined
@@ -133,44 +133,46 @@ export default function BorderStyleControl( {
 						{ isLinked && (
 							<div className="ftb-border-style-control__button-controls-row">
 								{ hasIndicator && <SideIndicatorControl /> }
-								<ButtonGroup className="ftb-button-group">
+								<ToggleGroupControl
+									hideLabelFromVision
+									__nextHasNoMarginBottom
+									label={ label }
+									value={ allInputValue }
+									isDeselectable
+									onChange={ handleOnClickAll }
+								>
 									{ BORDER_STYLE_CONTROLS.map( ( borderStyle ) => (
-										<Button
+										<ToggleGroupControlOptionIcon
 											key={ borderStyle.value }
 											label={ borderStyle.label }
+											value={ borderStyle.value }
 											icon={ borderStyle.icon }
-											variant={ allInputValue === borderStyle.value ? 'primary' : undefined }
-											onClick={ () => handleOnClickAll( borderStyle.value ) }
-											size="compact"
 										/>
 									) ) }
-								</ButtonGroup>
+								</ToggleGroupControl>
 							</div>
 						) }
 						{ ! isLinked &&
 							SIDE_CONTROLS.map( ( item ) => (
 								<div className="ftb-border-style-control__button-controls-row" key={ item.value }>
 									{ hasIndicator && <SideIndicatorControl sides={ [ item.value ] } /> }
-									<ButtonGroup className="ftb-button-group" aria-label={ item.label }>
-										{ BORDER_STYLE_CONTROLS.map( ( borderStyle ) => {
-											return (
-												<Button
-													key={ borderStyle.value }
-													label={ borderStyle.label }
-													icon={ borderStyle.icon }
-													variant={
-														values[ item.value as ValuesKey ] === borderStyle.value
-															? 'primary'
-															: undefined
-													}
-													onClick={ () =>
-														handleOnClick( borderStyle.value, item.value as ValuesKey )
-													}
-													size="compact"
-												/>
-											);
-										} ) }
-									</ButtonGroup>
+									<ToggleGroupControl
+										hideLabelFromVision
+										__nextHasNoMarginBottom
+										label={ item.label }
+										value={ values[ item.value as ValuesKey ] }
+										isDeselectable
+										onChange={ ( value ) => handleOnClick( value, item.value as ValuesKey ) }
+									>
+										{ BORDER_STYLE_CONTROLS.map( ( borderStyle ) => (
+											<ToggleGroupControlOptionIcon
+												key={ borderStyle.value }
+												label={ borderStyle.label }
+												value={ borderStyle.value }
+												icon={ borderStyle.icon }
+											/>
+										) ) }
+									</ToggleGroupControl>
 								</div>
 							) ) }
 					</div>

diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -126,7 +126,7 @@
 	justify-content: space-between;
 
 	.ftb-border-style-control__header-linked-button {
-		margin-top: 4px;
+		margin-top: 6px;
 	}
 }
 

diff --git a/src/edit.tsx b/src/edit.tsx
@@ -73,13 +73,10 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 
 	const tableStylesObj: Properties = convertToObject( tableStyles );
 	const captionStylesObj: Properties = convertToObject( captionStyles );
-	const options: StoreOptions = useSelect(
-		( select ) =>
-			select( STORE_NAME )
-				// @ts-ignore
-				.getOptions(),
-		[]
-	);
+	const options = useSelect( ( select ) => {
+		const { getOptions }: { getOptions: () => StoreOptions } = select( STORE_NAME );
+		return getOptions();
+	}, [] );
 	const { createWarningNotice } = useDispatch( noticesStore );
 	const blockEditingMode = useBlockEditingMode();
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';