Components: Deprecate 36px default size

[mirka]

Part of #46741

In our transition process to the new 40px default sizes, we are now ready to officially start the deprecation period by logging console warnings.

List of components

• BorderBoxControl BorderBoxControl: Deprecate 36px default size #65752
• BorderControl BorderControl: Deprecate 36px default size #65755
• BoxControl BoxControl: Deprecate 36px default size #66704
• Button @mirka
• ComboboxControl ComboboxControl : Deprecate 36px default size #66900
• CustomSelectControl CustomSelectControl: Deprecate 36px default size #67441
• DimensionControl DimensionControl: Deprecate 36px default size #66705
• FontSizePicker FontSizePicker : Deprecate 36px default size #66920
• FormFileUpload FormFileUpload: Deprecate 36px default size #67438
• FormTokenField
• InputControl InputControl : Deprecate 36px default size #66897
• NumberControl NumberControl: Deprecate 36px default size #66730
• Radio Radio: Deprecate 36px default size #66572
• RangeControl Feat: Adds the deprecation warning for 36px default size in range control. #66721
• SelectControl SelectControl : Deprecate 36px default size #66898
• TextControl TextControl: Deprecate 36px default size #66745
• ToggleGroupControl ToggleGroupControl : Deprecate 36px default size #66747
• TreeSelect @mirka
• UnitControl UnitControl : Deprecate 36px default size  #66791

Block Editor @mirka

• FontAppearanceControl (CustomSelectControl)
• FontFamilyControl (CustomSelectControl)
• LetterSpacingControl (UnitControl) LetteringSpacingControl: Deprecate 36px default size #67429
• LineHeightControl (NumberControl)

Procedure

- [ ] Log deprecation warning
- [ ] Update unit tests
- [ ] Update Storybook (including all stories where the component is used)
- [ ] Update code snippets (Storybook, JSDoc, READMEs, and any other Markdown docs)
- [ ] Changelog
- [ ] Add Dev Note tag

If used inside another wp-components component and the parent component is dictating the child component's size dynamically, the parent component is responsible for logging the deprecation warning. To suppress the redundant warning from the child component, add the __shouldNotWarnDeprecated36pxSize prop as shown here for the ToggleGroupControl used inside FontSizePicker.

Success criteria

- [ ] Unit tests must all be passing
- [ ] If used in a Storybook story for another component, it must have the prop so it isn't logging console warnings
- [ ] All code snippets in the repo must be updated, including all Markdown docs (not just the component's own README)

[hbhalodia]

Hi @mirka, I would like to pick some of the controls to add the deprecations. Should I wait until any of the PR get's merged to use the maybeWarnDeprecated36pxSize utility function?

Thank You,

[mirka]

@hbhalodia Awesome! Yes, I'll need to merge those first. I'll ping you when this is ready for contributors 🙏

[hbhalodia]

Hi @mirka, I have raised the PR to deprecate 36px default size on BoxControl - #66704.

Thank You,

[hbhalodia]

Hi @mirka, I have raised the PR to deprecate 36px default size on DimensionControl - #66705.

Thank You,

[vipul0425]

Hi @mirka , I have raised the PR for RangeControl - #66721

Thank You 🙇

[PARTHVATALIYA]

Hi @mirka, I have raised the PR for InputControl - #66897

Thank You!

[mirka]

@hbhalodia @PARTHVATALIYA Unit tests are not passing in the rest of your open PRs. That likely means that the unit tests for the component are not completely updated, and/or some components need a __shouldNotWarnDeprecated36pxSize added. Please check the updated Procedure section in the first issue comment.