CircularOptionPicker: Update Button sizes (#67285)

* CircularOptionPicker: Update Button sizes * Add changelog * Update snapshot * Fixup changelog Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Nov 26, 2024 · 8c34d91 · 8c34d91
1 parent de7b09b
commit 8c34d91
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -219,7 +219,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         <button
                           aria-label="Color: red"
                           aria-selected="true"
-                          class="components-button components-circular-option-picker__option"
+                          class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
@@ -247,7 +247,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   class="components-circular-option-picker__custom-clear-wrapper"
                 >
                   <button
-                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
                     type="button"
                   >
                     Clear

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -30,6 +30,7 @@
 -   `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)).
 -   `ComboboxControl`: Update reset button size ([#67215](https://github.com/WordPress/gutenberg/pull/67215)).
 -   `Autocomplete`: Increase option height ([#67214](https://github.com/WordPress/gutenberg/pull/67214)).
+-   `CircularOptionPicker`: Update `Button` sizes to be ready for 40px default size ([#67285](https://github.com/WordPress/gutenberg/pull/67285)).
 
 ### Experimental
 

diff --git a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
@@ -47,6 +47,7 @@ export function ButtonAction( {
 }: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
+			__next40pxDefaultSize
 			className={ clsx(
 				'components-circular-option-picker__clear',
 				className

diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -94,6 +94,7 @@ export function Option( {
 	const commonProps = {
 		id,
 		className: 'components-circular-option-picker__option',
+		__next40pxDefaultSize: true,
 		...additionalProps,
 	};
 

diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
@@ -67,8 +67,8 @@ $color-palette-circle-spacing: 12px;
 .components-circular-option-picker__option {
 	display: inline-block;
 	vertical-align: top;
-	height: 100%;
-	width: 100%;
+	height: 100% !important;
+	aspect-ratio: 1;
 	border: none;
 	border-radius: $radius-round;
 	background: transparent;