Skip to content

Commit

Permalink
UnitControl : Deprecate 36px default size (#66791)
Browse files Browse the repository at this point in the history 
* Add the console warning for 36px size variation

* Add the changelog for the deprecation

* Update the unit test for the unitcontrol to use default 40px size

* Use __shouldNotWarnDeprecated36pxSize to not throw redundant warning from parent component used

* Add the missing prop for __next40pxDefaultSize on the index file and updated readme as well

* Add changelog to unreleased section

* Add __shouldNotWarnDeprecated36pxSize prop to supress console warning from child component

* Update tools panel storybook and docs to use __next40pxDefaultSize for UnitControl

* Updated the unit test to minimise the file changes

* Revert changes on mobile FontSizePicker

---------

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
  • Loading branch information
@hbhalodia @mirka
3 people authored Nov 29, 2024
1 parent 2c88f6a commit edd6328
Show file tree
Hide file tree
Showing 14 changed files with 49 additions and 5 deletions.
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

- `BoxControl`: Passive deprecate `onMouseOver`/`onMouseOut`. Pass to the `inputProps` prop instead ([#67332](https://github.com/WordPress/gutenberg/pull/67332)).
- `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)).
- `UnitControl`: Deprecate 36px default size ([#66791](https://github.com/WordPress/gutenberg/pull/66791)).

### Enhancements

Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/border-control/border-control/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ const UnconnectedBorderControl = (
/>
<HStack spacing={ 4 } className={ innerWrapperClassName }>
<UnitControl
__next40pxDefaultSize={ __next40pxDefaultSize }
__shouldNotWarnDeprecated36pxSize
prefix={
<Spacer marginRight={ 1 } marginBottom={ 0 }>
<BorderControlDropdown
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/box-control/all-input-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export default function AllInputControl( {
<>
<StyledUnitControl
{ ...props }
__shouldNotWarnDeprecated36pxSize
__next40pxDefaultSize={ __next40pxDefaultSize }
className="component-box-control__unit-control"
disableUnits={ isMixed }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/box-control/axial-input-controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export default function AxialInputControls( {
<Tooltip placement="top-end" text={ LABELS[ side ] }>
<StyledUnitControl
{ ...props }
__shouldNotWarnDeprecated36pxSize
__next40pxDefaultSize={ __next40pxDefaultSize }
className="component-box-control__unit-control"
id={ inputId }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/box-control/input-controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default function BoxInputControls( {
<Tooltip placement="top-end" text={ LABELS[ side ] }>
<StyledUnitControl
{ ...props }
__shouldNotWarnDeprecated36pxSize
__next40pxDefaultSize={ __next40pxDefaultSize }
className="component-box-control__unit-control"
id={ inputId }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/font-size-picker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ const UnforwardedFontSizePicker = (
<FlexItem isBlock>
<UnitControl
__next40pxDefaultSize={ __next40pxDefaultSize }
__shouldNotWarnDeprecated36pxSize
label={ __( 'Custom' ) }
labelPosition="top"
hideLabelFromVision
Expand Down
12 changes: 12 additions & 0 deletions packages/components/src/tools-panel/stories/index.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Width"
value={ width }
onChange={ ( next ) => setWidth( next ) }
Expand All @@ -86,6 +87,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Height"
value={ height }
onChange={ ( next ) => setHeight( next ) }
Expand All @@ -98,6 +100,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Minimum height"
value={ minHeight }
onChange={ ( next ) => setMinHeight( next ) }
Expand Down Expand Up @@ -167,6 +170,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Width"
value={ width }
onChange={ ( next ) => setWidth( next ) }
Expand All @@ -179,6 +183,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Height"
value={ height }
onChange={ ( next ) => setHeight( next ) }
Expand Down Expand Up @@ -237,6 +242,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
}
>
<UnitControl
__next40pxDefaultSize
label="Minimum width"
value={ minWidth }
onChange={ ( next ) => setMinWidth( next ) }
Expand All @@ -249,6 +255,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault={ false }
>
<UnitControl
__next40pxDefaultSize
label="Width"
value={ width }
onChange={ ( next ) => setWidth( next ) }
Expand All @@ -261,6 +268,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault={ false }
>
<UnitControl
__next40pxDefaultSize
label="Height"
value={ height }
onChange={ ( next ) => setHeight( next ) }
Expand Down Expand Up @@ -341,6 +349,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
panelId={ panelId }
>
<UnitControl
__next40pxDefaultSize
label="Injected Width"
value={ width }
onChange={ ( next ) =>
Expand All @@ -356,6 +365,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
panelId={ panelId }
>
<UnitControl
__next40pxDefaultSize
label="Injected Height"
value={ height }
onChange={ ( next ) =>
Expand Down Expand Up @@ -441,6 +451,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Injected Height"
value={ height }
onChange={ ( next ) =>
Expand Down Expand Up @@ -541,6 +552,7 @@ export const WithConditionallyRenderedControl: StoryFn<
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label="Injected Height"
value={ height }
onChange={ ( next ) =>
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/tools-panel/tools-panel/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ export function DimensionPanel() {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label={ __( 'Height' ) }
onChange={ setHeight }
value={ height }
Expand All @@ -113,6 +114,7 @@ export function DimensionPanel() {
isShownByDefault
>
<UnitControl
__next40pxDefaultSize
label={ __( 'Width' ) }
onChange={ setWidth }
value={ width }
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/tools-panel/tools-panel/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const UnconnectedToolsPanel = (
* onDeselect={ () => setHeight() }
* >
* <UnitControl
* __next40pxDefaultSize
* label={ __( 'Height' ) }
* onChange={ setHeight }
* value={ height }
Expand All @@ -86,6 +87,7 @@ const UnconnectedToolsPanel = (
* onDeselect={ () => setWidth() }
* >
* <UnitControl
* __next40pxDefaultSize
* label={ __( 'Width' ) }
* onChange={ setWidth }
* value={ width }
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/unit-control/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { __experimentalUnitControl as UnitControl } from '@wordpress/components'
const Example = () => {
const [ value, setValue ] = useState( '10px' );

return <UnitControl onChange={ setValue } value={ value } />;
return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
};
```

Expand Down Expand Up @@ -128,7 +128,7 @@ const Example = () => {
];

return (
<UnitControl onChange={ setValue } value={ value } units={ units } />
<UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } units={ units } />
);
};
```
Expand All @@ -143,7 +143,7 @@ For example, a `value` of `50%` will set the current unit to `%`.
Example:

```jsx
<UnitControl value="50%" />
<UnitControl __next40pxDefaultSize value="50%" />
```

- Required: No
Expand Down
11 changes: 10 additions & 1 deletion packages/components/src/unit-control/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { useControlledState } from '../utils/hooks';
import { escapeRegExp } from '../utils/strings';
import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';

function UnforwardedUnitControl(
unitControlProps: WordPressComponentProps<
Expand Down Expand Up @@ -55,9 +56,17 @@ function UnforwardedUnitControl(
units: unitsProp = CSS_UNITS,
value: valueProp,
onFocus: onFocusProp,
__shouldNotWarnDeprecated36pxSize,
...props
} = useDeprecated36pxDefaultSizeProp( unitControlProps );

maybeWarnDeprecated36pxSize( {
componentName: 'UnitControl',
__next40pxDefaultSize: props.__next40pxDefaultSize,
size,
__shouldNotWarnDeprecated36pxSize,
} );

if ( 'unit' in unitControlProps ) {
deprecated( 'UnitControl unit prop', {
since: '5.6',
Expand Down Expand Up @@ -246,7 +255,7 @@ function UnforwardedUnitControl(
* const Example = () => {
* const [ value, setValue ] = useState( '10px' );
*
* return <UnitControl onChange={ setValue } value={ value } />;
* return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
* };
* ```
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/unit-control/stories/index.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
);
Default.args = {
label: 'Label',
__next40pxDefaultSize: true,
};

/**
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/unit-control/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,13 @@ import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import UnitControl from '..';
import _UnitControl from '..';
import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';

const UnitControl = ( props: React.ComponentProps< typeof _UnitControl > ) => (
<_UnitControl __next40pxDefaultSize { ...props } />
);

const getInput = ( {
isInputTypeText = false,
}: {
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/unit-control/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,11 @@ export type UnitControlProps = Pick< InputControlProps, 'size' > &
* Callback when either the quantity or the unit inputs gains focus.
*/
onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
/**
* 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;
};

1 comment on commit edd6328

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in edd6328.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12087212537
📝 Reported issues:

Please sign in to comment.