Skip to content

Commit

Permalink
UnitControl : Deprecate 36px default size (WordPress#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 <[email protected]>
Co-authored-by: mirka <[email protected]>
  • Loading branch information
@hbhalodia @mirka @im3dabasia
3 people authored and im3dabasia committed Dec 4, 2024
1 parent ee02fe1 commit f2b4928
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;
};

0 comments on commit f2b4928

Please sign in to comment.