From 865a05834d3af46a6eecd142fe6acda40642756d Mon Sep 17 00:00:00 2001 From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com> Date: Sat, 16 Nov 2024 04:24:35 +0530 Subject: [PATCH] DimensionControl: Deprecate 36px default size (#66705) * Add the deprecation notice for the DimensionControl for 36px size * Add the size as undefined * Add the deprecation changelog * Update snapshots --------- Co-authored-by: hbhalodia Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + .../src/dimension-control/README.md | 1 + .../src/dimension-control/index.tsx | 8 ++++ .../dimension-control/stories/index.story.tsx | 1 + .../test/__snapshots__/index.test.js.snap | 48 +++++++++---------- .../src/dimension-control/test/index.test.js | 8 +++- 6 files changed, 42 insertions(+), 25 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index dc51518eb32f10..0eb5052c748f10 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). +- `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)). ### Bug Fixes diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md index 78c1a60275c13a..fd04d99ca4ca93 100644 --- a/packages/components/src/dimension-control/README.md +++ b/packages/components/src/dimension-control/README.md @@ -22,6 +22,7 @@ export default function MyCustomDimensionControl() { return ( setPaddingSize( value ) } diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index 25880f9b4fdb38..2cc39379ebde0c 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/packages/components/src/dimension-control/index.tsx @@ -18,6 +18,7 @@ import type { DimensionControlProps, Size } from './types'; import type { SelectControlSingleSelectionProps } from '../select-control/types'; import { ContextSystemProvider } from '../context'; import deprecated from '@wordpress/deprecated'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; const CONTEXT_VALUE = { BaseControl: { @@ -41,6 +42,7 @@ const CONTEXT_VALUE = { * * return ( * { const theSize = findSizeBySlug( sizes, val ); diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 15a63fcf6ccf6c..61fd0aae4ee768 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -50,6 +50,7 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => ( export const Default = Template.bind( {} ); Default.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, label: 'Please select a size', sizes, }; diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index bd2c26d641fe72..fd6cc2df3fcde7 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -126,12 +126,12 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` white-space: nowrap; text-overflow: ellipsis; font-size: 16px; - height: 32px; - min-height: 32px; + height: 40px; + min-height: 40px; padding-top: 0; padding-bottom: 0; - padding-left: 8px; - padding-right: 26px; + padding-left: 12px; + padding-right: 30px; overflow: hidden; } @@ -157,8 +157,8 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` } .emotion-21 { - -webkit-padding-end: 8px; - padding-inline-end: 8px; + -webkit-padding-end: 12px; + padding-inline-end: 12px; position: absolute; pointer-events: none; right: 0; @@ -408,12 +408,12 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` white-space: nowrap; text-overflow: ellipsis; font-size: 16px; - height: 32px; - min-height: 32px; + height: 40px; + min-height: 40px; padding-top: 0; padding-bottom: 0; - padding-left: 8px; - padding-right: 26px; + padding-left: 12px; + padding-right: 30px; overflow: hidden; } @@ -439,8 +439,8 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` } .emotion-21 { - -webkit-padding-end: 8px; - padding-inline-end: 8px; + -webkit-padding-end: 12px; + padding-inline-end: 12px; position: absolute; pointer-events: none; right: 0; @@ -700,12 +700,12 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] white-space: nowrap; text-overflow: ellipsis; font-size: 16px; - height: 32px; - min-height: 32px; + height: 40px; + min-height: 40px; padding-top: 0; padding-bottom: 0; - padding-left: 8px; - padding-right: 26px; + padding-left: 12px; + padding-right: 30px; overflow: hidden; } @@ -731,8 +731,8 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] } .emotion-21 { - -webkit-padding-end: 8px; - padding-inline-end: 8px; + -webkit-padding-end: 12px; + padding-inline-end: 12px; position: absolute; pointer-events: none; right: 0; @@ -1004,12 +1004,12 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] white-space: nowrap; text-overflow: ellipsis; font-size: 16px; - height: 32px; - min-height: 32px; + height: 40px; + min-height: 40px; padding-top: 0; padding-bottom: 0; - padding-left: 8px; - padding-right: 26px; + padding-left: 12px; + padding-right: 30px; overflow: hidden; } @@ -1035,8 +1035,8 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] } .emotion-21 { - -webkit-padding-end: 8px; - padding-inline-end: 8px; + -webkit-padding-end: 12px; + padding-inline-end: 12px; position: absolute; pointer-events: none; right: 0; diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js index 14f1c509f70cf9..8f3cb7ea944cd1 100644 --- a/packages/components/src/dimension-control/test/index.test.js +++ b/packages/components/src/dimension-control/test/index.test.js @@ -15,7 +15,13 @@ import { plus } from '@wordpress/icons'; import { DimensionControl as _DimensionControl } from '../'; const DimensionControl = ( props ) => { - return <_DimensionControl { ...props } __nextHasNoMarginBottom />; + return ( + <_DimensionControl + { ...props } + __next40pxDefaultSize + __nextHasNoMarginBottom + /> + ); }; describe( 'DimensionControl', () => {