ToggleGroupControl : Deprecate 36px default size #66747

mirka · 2024-11-18T21:44:04Z

Let's move this up to the Unreleased section.

mirka · 2024-11-18T21:45:39Z

I think we're also going to need a prop like this to prevent the redundant warnings when used inside another component: 1b7eeec

Hi @mirka should we also update the usage of ToggleGroupControl by adding this prop in other packages as well like block editor and library?

Not that I'm aware of. We only want to suppress the warning when ToggleGroupControl's size is dependent on a parent component's size, and the parent component is responsible for logging the warning. I'm not aware of any other cases like that.

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ @@
     -   `BorderBoxControl`: Deprecate 36px default size ([#65752](https://github.com/WordPress/gutenberg/pull/65752)).
     -   `BorderControl`: Deprecate 36px default size ([#65755](https://github.com/WordPress/gutenberg/pull/65755)).
+    -   `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
     ### Bug Fixes
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
     		<ToggleGroupControl
     			__nextHasNoMarginBottom
     			__next40pxDefaultSize={ __next40pxDefaultSize }
+    			__shouldNotWarnDeprecated36pxSize
     			label={ __( 'Font size' ) }
     			hideLabelFromVision
     			value={ value }
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ const Template: StoryFn< typeof ToggleGroupControl > = ( { @@
     	return (
     		<ToggleGroupControl
     			__nextHasNoMarginBottom
+    			__next40pxDefaultSize
     			{ ...props }
     			onChange={ ( ...changeArgs ) => {
     				setValue( ...changeArgs );
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,13 @@ @@
     };
     const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
-    	return <_ToggleGroupControl { ...props } __nextHasNoMarginBottom />;
+    	return (
+    		<_ToggleGroupControl
+    			{ ...props }
+    			__nextHasNoMarginBottom
+    			__next40pxDefaultSize
+    		/>
+    	);
     };
     const ControlledToggleGroupControl = ( {
@@ Expand Down Expand Up / @@ -106,7 +112,7 @@ @@
     				</Component>
     			);
     			expect( container ).toMatchSnapshot();
     		} );
     		it( 'with icons', () => {
@@ Expand All / @@ -125,7 +131,7 @@ @@
     				</Component>
     			);
     			expect( container ).toMatchSnapshot();
     		} );
     	} );
     	it( 'should render with the correct option initially selected when `value` is defined', () => {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
     function Example() {
     	return (
-    		<ToggleGroupControl __nextHasNoMarginBottom>
+    		<ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
     			<ToggleGroupControlOptionIcon
     				value="uppercase"
     				icon={ formatUppercase }
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ToggleGroupControl : Deprecate 36px default size #66747

Diff view

Diff view

There are no files selected for viewing

mirka Nov 18, 2024

mirka Nov 18, 2024

vipul0425 Nov 19, 2024

mirka Nov 19, 2024

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

-Original file line number
+Diff line change
@@ Expand Up / @@ -52,7 +52,7 @@ function UnforwardedToggleGroupControlOptionIcon( @@
      *
      * function Example() {
      *  return (
-     *    <ToggleGroupControl __nextHasNoMarginBottom>
+     *    <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
      *      <ToggleGroupControlOptionIcon
      *        value="uppercase"
      *        label="Uppercase"
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -53,6 +53,7 @@ function UnforwardedToggleGroupControlOption( @@
      *       value="vertical"
      *       isBlock
      *       __nextHasNoMarginBottom
+     *       __next40pxDefaultSize
      *     >
      *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
      *       <ToggleGroupControlOption value="vertical" label="Vertical" />
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
     import { useTrackElementOffsetRect } from '../../utils/element-rect';
     import { useMergeRefs } from '@wordpress/compose';
     import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
+    import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
     function UnconnectedToggleGroupControl(
     	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ Expand All / @@ -31,6 +32,7 @@ function UnconnectedToggleGroupControl( @@
     	const {
     		__nextHasNoMarginBottom = false,
     		__next40pxDefaultSize = false,
+    		__shouldNotWarnDeprecated36pxSize,
     		className,
     		isAdaptiveWidth = false,
     		isBlock = false,
@@ Expand Down Expand Up / @@ -81,6 +83,13 @@ function UnconnectedToggleGroupControl( @@
     		? ToggleGroupControlAsButtonGroup
     		: ToggleGroupControlAsRadioGroup;
+    	maybeWarnDeprecated36pxSize( {
+    		componentName: 'ToggleGroupControl',
+    		size,
+    		__next40pxDefaultSize,
+    		__shouldNotWarnDeprecated36pxSize,
+    	} );
     	return (
     		<BaseControl
     			help={ help }
@@ Expand Down Expand Up / @@ -135,6 +144,7 @@ function UnconnectedToggleGroupControl( @@
      *       value="vertical"
      *       isBlock
      *       __nextHasNoMarginBottom
+     *       __next40pxDefaultSize
      *     >
      *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
      *       <ToggleGroupControlOption value="vertical" label="Vertical" />
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -128,6 +128,13 @@ export type ToggleGroupControlProps = Pick< @@
     	 * @default false
     	 */
     	__next40pxDefaultSize?: boolean;
+    	/**
+    	 * Do not throw a warning for the deprecated 36px default size.
+    	 * For internal components of other components that already throw the warning.
+    	 *
+    	 * @ignore
+    	 */
+    	__shouldNotWarnDeprecated36pxSize?: boolean;
     };
     export type ToggleGroupControlContextProps = {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,12 +7,15 @@ export function maybeWarnDeprecated36pxSize( { @@
     	componentName,
     	__next40pxDefaultSize,
     	size,
+    	__shouldNotWarnDeprecated36pxSize,
     }: {
     	componentName: string;
     	__next40pxDefaultSize: boolean | undefined;
     	size: string | undefined;
+    	__shouldNotWarnDeprecated36pxSize?: boolean;
     } ) {
     	if (
+    		__shouldNotWarnDeprecated36pxSize ||
     		__next40pxDefaultSize ||
     		( size !== undefined && size !== 'default' )
     	) {
@@ Expand Down @@

ToggleGroupControl : Deprecate 36px default size #66747

ToggleGroupControl : Deprecate 36px default size #66747

Diff view

Diff view

There are no files selected for viewing

mirka Nov 18, 2024

Choose a reason for hiding this comment

mirka Nov 18, 2024

Choose a reason for hiding this comment

vipul0425 Nov 19, 2024

Choose a reason for hiding this comment

mirka Nov 19, 2024

Choose a reason for hiding this comment

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 20) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4

GitHub Actions / JavaScript (Node.js 22) 4/4