From c6fe0d17c58ca3ff30cafdd982485f89d3c33396 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 12:16:42 +0200 Subject: [PATCH 01/10] Simplify icon active cell computation --- .../src/alignment-matrix-control/icon.tsx | 17 ++++++----------- .../src/alignment-matrix-control/utils.tsx | 19 ------------------- 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx index bacc9771cf3e44..62e2c5dea40bd1 100644 --- a/packages/components/src/alignment-matrix-control/icon.tsx +++ b/packages/components/src/alignment-matrix-control/icon.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx'; /** * Internal dependencies */ -import { ALIGNMENTS, getAlignmentIndex } from './utils'; +import { ALIGNMENTS } from './utils'; import { Root, Cell, @@ -25,7 +25,6 @@ function AlignmentMatrixControlIcon( { value = 'center', ...props }: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) { - const alignIndex = getAlignmentIndex( value ); const scale = ( size / BASE_SIZE ).toFixed( 2 ); const classes = clsx( @@ -46,15 +45,11 @@ function AlignmentMatrixControlIcon( { role="presentation" style={ styles } > - { ALIGNMENTS.map( ( align, index ) => { - const isActive = alignIndex === index; - - return ( - - - - ); - } ) } + { ALIGNMENTS.map( ( align ) => ( + + + + ) ) } ); } diff --git a/packages/components/src/alignment-matrix-control/utils.tsx b/packages/components/src/alignment-matrix-control/utils.tsx index e206e197c25558..dcb816a5fad633 100644 --- a/packages/components/src/alignment-matrix-control/utils.tsx +++ b/packages/components/src/alignment-matrix-control/utils.tsx @@ -84,22 +84,3 @@ export function getItemValue( prefixId: string, id?: string | null ) { const value = id?.replace( prefixId + '-', '' ); return normalize( value ); } - -/** - * Retrieves the alignment index from a value. - * - * @param alignment Value to check. - * - * @return The index of a matching alignment. - */ -export function getAlignmentIndex( - alignment: AlignmentMatrixControlValue = 'center' -) { - const normalized = normalize( alignment ); - if ( ! normalized ) { - return undefined; - } - - const index = ALIGNMENTS.indexOf( normalized ); - return index > -1 ? index : undefined; -} From c94c212a697c2c64775ea74c50b88233bc1ab56d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 14:27:07 +0200 Subject: [PATCH 02/10] AlignmentMatrixControl: simplify styles --- .../src/alignment-matrix-control/cell.tsx | 12 +- .../src/alignment-matrix-control/index.tsx | 29 ++--- .../src/alignment-matrix-control/styles.ts | 113 ++++++++++++++++++ .../src/alignment-matrix-control/types.ts | 4 +- 4 files changed, 129 insertions(+), 29 deletions(-) create mode 100644 packages/components/src/alignment-matrix-control/styles.ts diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/packages/components/src/alignment-matrix-control/cell.tsx index 6e045c26694f4e..8a3d1735b5ecfa 100644 --- a/packages/components/src/alignment-matrix-control/cell.tsx +++ b/packages/components/src/alignment-matrix-control/cell.tsx @@ -9,23 +9,17 @@ import { VisuallyHidden } from '../visually-hidden'; * Internal dependencies */ import { ALIGNMENT_LABEL } from './utils'; -import { - Cell as CellView, - Point, -} from './styles/alignment-matrix-control-styles'; +import { Cell as CellView, Point } from './styles'; import type { AlignmentMatrixControlCellProps } from './types'; import type { WordPressComponentProps } from '../context'; export default function Cell( { id, - isActive = false, value, ...props }: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) { - const tooltipText = ALIGNMENT_LABEL[ value ]; - return ( - + } @@ -34,7 +28,7 @@ export default function Cell( { otherwise it'll announce the content as "blank". So we use a visually hidden element instead of aria-label. */ } { value } - + ); diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx index 4f3e78ca921f01..a865cd4f57a98b 100644 --- a/packages/components/src/alignment-matrix-control/index.tsx +++ b/packages/components/src/alignment-matrix-control/index.tsx @@ -2,7 +2,6 @@ * External dependencies */ import clsx from 'clsx'; -import { useStoreState } from '@ariakit/react'; /** * WordPress dependencies @@ -16,7 +15,7 @@ import { useInstanceId } from '@wordpress/compose'; import Cell from './cell'; import { Composite } from '../composite'; import { useCompositeStore } from '../composite/store'; -import { Root, Row } from './styles/alignment-matrix-control-styles'; +import { GridContainer, GridRow } from './styles'; import AlignmentMatrixControlIcon from './icon'; import { GRID, getItemId, getItemValue } from './utils'; import type { WordPressComponentProps } from '../context'; @@ -70,15 +69,13 @@ export function AlignmentMatrixControl( { rtl: isRTL(), } ); - const activeId = useStoreState( compositeStore, 'activeId' ); - const classes = clsx( 'component-alignment-matrix-control', className ); return ( { GRID.map( ( cells, index ) => ( - } key={ index }> - { cells.map( ( cell ) => { - const cellId = getItemId( baseId, cell ); - const isActive = cellId === activeId; - - return ( - - ); - } ) } + } key={ index }> + { cells.map( ( cell ) => ( + + ) ) } ) ) } diff --git a/packages/components/src/alignment-matrix-control/styles.ts b/packages/components/src/alignment-matrix-control/styles.ts new file mode 100644 index 00000000000000..73a20c2a37564b --- /dev/null +++ b/packages/components/src/alignment-matrix-control/styles.ts @@ -0,0 +1,113 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; + +/** + * Internal dependencies + */ +import { COLORS, CONFIG } from '../utils'; +import type { + AlignmentMatrixControlProps, + AlignmentMatrixControlIconProps, +} from './types'; + +// Grid structure + +const rootBase = ( { size = 92 } ) => css` + direction: ltr; + + display: grid; + grid-template-columns: repeat( 3, 1fr ); + grid-template-rows: repeat( 3, 1fr ); + + box-sizing: border-box; + width: ${ size }px; + aspect-ratio: 1; + + border-radius: ${ CONFIG.radiusMedium }; + outline: none; +`; + +export const GridContainer = styled.div< { + size?: AlignmentMatrixControlProps[ 'width' ]; + disablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ]; +} >` + ${ rootBase } + + border: 1px solid transparent; + + ${ ( props ) => + props.disablePointerEvents + ? css`` + : css` + cursor: pointer; + ` } +`; + +export const GridRow = styled.div` + grid-column: 1 / -1; + + box-sizing: border-box; + display: grid; + grid-template-columns: repeat( 3, 1fr ); +`; + +// Cell +export const Cell = styled.span` + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + margin: 0; + padding: 0; + + appearance: none; + border: none; + outline: none; +`; + +const POINT_SIZE = 6; +export const Point = styled.span` + display: block; + contain: strict; + + box-sizing: border-box; + width: ${ POINT_SIZE }px; + aspect-ratio: 1; + + margin: auto; + + color: ${ COLORS.theme.gray[ 400 ] }; + + /* Use border instead of background color so that the point shows + in Windows High Contrast Mode */ + border: ${ POINT_SIZE / 2 }px solid currentColor; + + /* Highlight active item */ + ${ Cell }[data-active-item] & { + color: ${ COLORS.gray[ 900 ] }; + transform: scale( calc( 5 / 3 ) ); + } + + /* Hover styles for non-active items */ + ${ Cell }:not([data-active-item]):hover & { + color: ${ COLORS.theme.accent }; + } + + /* Show an outline only when interacting with keyboard */ + ${ Cell }[data-focus-visible] & { + outline: 1px solid ${ COLORS.theme.accent }; + outline-offset: 1px; + } + + @media not ( prefers-reduced-motion ) { + transition-property: color, transform; + transition-duration: 120ms; + transition-timing-function: linear; + } +`; diff --git a/packages/components/src/alignment-matrix-control/types.ts b/packages/components/src/alignment-matrix-control/types.ts index 892781234e694c..581c4a9d5b965e 100644 --- a/packages/components/src/alignment-matrix-control/types.ts +++ b/packages/components/src/alignment-matrix-control/types.ts @@ -45,10 +45,12 @@ export type AlignmentMatrixControlIconProps = Pick< 'value' > & { disablePointerEvents?: boolean; + // Should deprecate size?: number; + width?: number; + height?: number; }; export type AlignmentMatrixControlCellProps = { - isActive?: boolean; value: NonNullable< AlignmentMatrixControlProps[ 'value' ] >; }; From ef194d16794d1beed4b6c4695f2f7c33433acb84 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 14:27:38 +0200 Subject: [PATCH 03/10] AlignmentMatrixControl.Icon: rewrite using SVG --- .../src/alignment-matrix-control/icon.tsx | 83 +++++++++----- .../alignment-matrix-control-icon-styles.ts | 77 ------------- .../styles/alignment-matrix-control-styles.ts | 102 ------------------ .../src/alignment-matrix-control/types.ts | 23 +++- 4 files changed, 75 insertions(+), 210 deletions(-) delete mode 100644 packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts delete mode 100644 packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx index 62e2c5dea40bd1..1a5aa238e46b0e 100644 --- a/packages/components/src/alignment-matrix-control/icon.tsx +++ b/packages/components/src/alignment-matrix-control/icon.tsx @@ -3,54 +3,79 @@ */ import clsx from 'clsx'; +/** + * WordPress dependencies + */ +import { Rect, SVG } from '@wordpress/primitives'; + /** * Internal dependencies */ import { ALIGNMENTS } from './utils'; -import { - Root, - Cell, - Point, -} from './styles/alignment-matrix-control-icon-styles'; import type { AlignmentMatrixControlIconProps } from './types'; import type { WordPressComponentProps } from '../context'; const BASE_SIZE = 24; +const GRID_CELL_SIZE = 7; +const GRID_PADDING = ( BASE_SIZE - 3 * GRID_CELL_SIZE ) / 2; +const DOT_SIZE = 2; +const DOT_SIZE_SELECTED = 4; function AlignmentMatrixControlIcon( { className, disablePointerEvents = true, - size = BASE_SIZE, + size, + width, + height, // extracted so that it doesn't apply to the DOM style = {}, value = 'center', ...props -}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) { - const scale = ( size / BASE_SIZE ).toFixed( 2 ); - - const classes = clsx( - 'component-alignment-matrix-control-icon', - className - ); - - const styles = { - ...style, - transform: `scale(${ scale })`, - }; +}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) { + const computedWidth = size ?? width ?? BASE_SIZE; + const computedHeight = size ?? width ?? BASE_SIZE; return ( - - { ALIGNMENTS.map( ( align ) => ( - - - - ) ) } - + { ALIGNMENTS.map( ( align, index ) => { + const dotSize = align === value ? DOT_SIZE_SELECTED : DOT_SIZE; + + return ( + + ); + } ) } + ); } diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts deleted file mode 100644 index a14894633e05d1..00000000000000 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts +++ /dev/null @@ -1,77 +0,0 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; - -/** - * Internal dependencies - */ -import { - rootBase, - pointBase, - Cell as CellBase, -} from './alignment-matrix-control-styles'; -import type { - AlignmentMatrixControlIconProps, - AlignmentMatrixControlCellProps, -} from '../types'; - -const rootSize = () => { - const padding = 1.5; - const size = 24; - - return css( { - gridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`, - padding, - maxHeight: size, - maxWidth: size, - } ); -}; - -const rootPointerEvents = ( { - disablePointerEvents, -}: Pick< AlignmentMatrixControlIconProps, 'disablePointerEvents' > ) => { - return css( { - pointerEvents: disablePointerEvents ? 'none' : undefined, - } ); -}; - -export const Wrapper = styled.div` - box-sizing: border-box; - padding: 2px; -`; - -export const Root = styled.div` - transform-origin: top left; - height: 100%; - width: 100%; - - ${ rootBase }; - ${ rootSize }; - ${ rootPointerEvents }; -`; - -const pointActive = ( { - isActive, -}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => { - const boxShadow = isActive ? `0 0 0 1px currentColor` : null; - - return css` - box-shadow: ${ boxShadow }; - color: currentColor; - - *:hover > & { - color: currentColor; - } - `; -}; - -export const Point = styled.span` - height: 2px; - width: 2px; - ${ pointBase }; - ${ pointActive }; -`; - -export const Cell = CellBase; diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts deleted file mode 100644 index efbd23ab2be0af..00000000000000 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts +++ /dev/null @@ -1,102 +0,0 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; - -/** - * Internal dependencies - */ -import { COLORS, CONFIG } from '../../utils'; -import type { - AlignmentMatrixControlProps, - AlignmentMatrixControlCellProps, -} from '../types'; - -export const rootBase = () => { - return css` - border-radius: ${ CONFIG.radiusMedium }; - box-sizing: border-box; - direction: ltr; - display: grid; - grid-template-columns: repeat( 3, 1fr ); - outline: none; - `; -}; - -const rootSize = ( { size = 92 } ) => { - return css` - grid-template-rows: repeat( 3, calc( ${ size }px / 3 ) ); - width: ${ size }px; - `; -}; - -export const Root = styled.div< { - size: AlignmentMatrixControlProps[ 'width' ]; -} >` - ${ rootBase }; - - border: 1px solid transparent; - cursor: pointer; - grid-template-columns: auto; - - ${ rootSize }; -`; - -export const Row = styled.div` - box-sizing: border-box; - display: grid; - grid-template-columns: repeat( 3, 1fr ); -`; - -const pointActive = ( { - isActive, -}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => { - const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null; - const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ]; - const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.theme.accent; - - return css` - box-shadow: ${ boxShadow }; - color: ${ pointColor }; - - *:hover > & { - color: ${ pointColorHover }; - } - `; -}; - -export const pointBase = ( - props: Pick< AlignmentMatrixControlCellProps, 'isActive' > -) => { - return css` - background: currentColor; - box-sizing: border-box; - display: grid; - margin: auto; - @media not ( prefers-reduced-motion ) { - transition: all 120ms linear; - } - - ${ pointActive( props ) } - `; -}; - -export const Point = styled.span` - height: 6px; - width: 6px; - ${ pointBase } -`; - -export const Cell = styled.span` - appearance: none; - border: none; - box-sizing: border-box; - margin: 0; - display: flex; - position: relative; - outline: none; - align-items: center; - justify-content: center; - padding: 0; -`; diff --git a/packages/components/src/alignment-matrix-control/types.ts b/packages/components/src/alignment-matrix-control/types.ts index 581c4a9d5b965e..41225181729c5d 100644 --- a/packages/components/src/alignment-matrix-control/types.ts +++ b/packages/components/src/alignment-matrix-control/types.ts @@ -44,11 +44,30 @@ export type AlignmentMatrixControlIconProps = Pick< AlignmentMatrixControlProps, 'value' > & { + /** + * If `true`, disables pointer events on the icon. + * @default true + */ disablePointerEvents?: boolean; - // Should deprecate - size?: number; + /** + * The width of the icon + * @default 24 + */ width?: number; + /** + * The height of the icon + * @default 24 + */ height?: number; + /** + * _Note: this prop is deprecated. Use the `width` and `height` props, or the + * `size` prop on the parent `Icon` component instead_ + * + * The size of the icon. + * @ignore + * @default 24 + */ + size?: number; }; export type AlignmentMatrixControlCellProps = { From 2386514846b5b59e1b986596aa4a8ecd99a44c1d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 14:28:25 +0200 Subject: [PATCH 04/10] Do not use `size` prop on AlignmentMatrixControl.Icon in Storybook --- .../stories/index.story.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx index 03bec9d92a8b78..11de17153492d8 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx +++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx @@ -59,18 +59,9 @@ export const Default = Template.bind( {} ); export const IconSubcomponent = () => { return ( + } /> - } - /> - - } + icon={ } /> ); From eac4e1454327c6c9389faed60ba0b6ec3051ac2a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 14:49:08 +0200 Subject: [PATCH 05/10] Cleanup --- packages/components/src/alignment-matrix-control/icon.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx index 1a5aa238e46b0e..50d01d1668df39 100644 --- a/packages/components/src/alignment-matrix-control/icon.tsx +++ b/packages/components/src/alignment-matrix-control/icon.tsx @@ -26,7 +26,7 @@ function AlignmentMatrixControlIcon( { disablePointerEvents = true, size, width, - height, // extracted so that it doesn't apply to the DOM + height, style = {}, value = 'center', ...props @@ -37,7 +37,6 @@ function AlignmentMatrixControlIcon( { return ( Date: Tue, 27 Aug 2024 15:34:39 +0200 Subject: [PATCH 06/10] CHANGELOG --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8c676c3334465c..f3c851344b9769 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,11 +5,13 @@ ### Deprecations - Deprecate `replace` from the options accepted by `useNavigator().goTo()` ([#64675](https://github.com/WordPress/gutenberg/pull/64675)). +- Soft deprecate `size` prop on `AlignmentMatrixControl.Icon` ([#64827](https://github.com/WordPress/gutenberg/pull/64827)). ### Enhancements - `ColorPicker`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)). - `CustomSelectControl V2`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)). +- `AlignmentMatrixControl.Icon`: rewrite entirely using SVG markup ([#64827](https://github.com/WordPress/gutenberg/pull/64827)). - `DateTime`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)). - `FormToggle`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)). - `FormTokenField`: Remove unused border-radius ([#64693](https://github.com/WordPress/gutenberg/pull/64693)). From ec8dc7b35bf317ef35c51c87cf53c3cc2b8dcb98 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 20:40:04 +0200 Subject: [PATCH 07/10] Do not type height and width explicitly --- .../src/alignment-matrix-control/types.ts | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/types.ts b/packages/components/src/alignment-matrix-control/types.ts index 41225181729c5d..0f97c2df3b02bb 100644 --- a/packages/components/src/alignment-matrix-control/types.ts +++ b/packages/components/src/alignment-matrix-control/types.ts @@ -50,18 +50,8 @@ export type AlignmentMatrixControlIconProps = Pick< */ disablePointerEvents?: boolean; /** - * The width of the icon - * @default 24 - */ - width?: number; - /** - * The height of the icon - * @default 24 - */ - height?: number; - /** - * _Note: this prop is deprecated. Use the `width` and `height` props, or the - * `size` prop on the parent `Icon` component instead_ + * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon` + * component instead_ * * The size of the icon. * @ignore From 765ab4087e42619746f18b653087767dba9efc9c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 27 Aug 2024 20:40:10 +0200 Subject: [PATCH 08/10] Fix typo --- packages/components/src/alignment-matrix-control/icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx index 50d01d1668df39..56bfe9b3ddabbf 100644 --- a/packages/components/src/alignment-matrix-control/icon.tsx +++ b/packages/components/src/alignment-matrix-control/icon.tsx @@ -32,7 +32,7 @@ function AlignmentMatrixControlIcon( { ...props }: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) { const computedWidth = size ?? width ?? BASE_SIZE; - const computedHeight = size ?? width ?? BASE_SIZE; + const computedHeight = size ?? height ?? BASE_SIZE; return ( Date: Tue, 27 Aug 2024 21:00:50 +0200 Subject: [PATCH 09/10] Inline computedWidth and computedHeight --- packages/components/src/alignment-matrix-control/icon.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx index 56bfe9b3ddabbf..390dc0471531ae 100644 --- a/packages/components/src/alignment-matrix-control/icon.tsx +++ b/packages/components/src/alignment-matrix-control/icon.tsx @@ -31,15 +31,12 @@ function AlignmentMatrixControlIcon( { value = 'center', ...props }: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) { - const computedWidth = size ?? width ?? BASE_SIZE; - const computedHeight = size ?? height ?? BASE_SIZE; - return ( Date: Tue, 27 Aug 2024 21:01:05 +0200 Subject: [PATCH 10/10] Restore getAlignmentIndex function, since it normalizes values internally --- .../src/alignment-matrix-control/icon.tsx | 7 +++++-- .../src/alignment-matrix-control/utils.tsx | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx index 390dc0471531ae..24cf54c0214937 100644 --- a/packages/components/src/alignment-matrix-control/icon.tsx +++ b/packages/components/src/alignment-matrix-control/icon.tsx @@ -11,7 +11,7 @@ import { Rect, SVG } from '@wordpress/primitives'; /** * Internal dependencies */ -import { ALIGNMENTS } from './utils'; +import { ALIGNMENTS, getAlignmentIndex } from './utils'; import type { AlignmentMatrixControlIconProps } from './types'; import type { WordPressComponentProps } from '../context'; @@ -49,7 +49,10 @@ function AlignmentMatrixControlIcon( { { ...props } > { ALIGNMENTS.map( ( align, index ) => { - const dotSize = align === value ? DOT_SIZE_SELECTED : DOT_SIZE; + const dotSize = + getAlignmentIndex( value ) === index + ? DOT_SIZE_SELECTED + : DOT_SIZE; return ( -1 ? index : undefined; +}