Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SelectControl : Deprecate 36px default size #66898

Open
wants to merge 7 commits into
base: trunk
Choose a base branch
from
Open

SelectControl : Deprecate 36px default size #66898

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
de47793
Add the changelog for the deprecation
PARTHVATALIYA Nov 11, 2024
df05b7c
Add the changelog for the deprecation
PARTHVATALIYA Nov 11, 2024
f62c60c
Merge branch 'trunk' into fix/issue-65751-deprecation-selectControl
mirka Nov 20, 2024
7b0b20f
Move changelog
mirka Nov 20, 2024
65b4a24
Merge branch 'trunk' into fix/issue-65751-deprecation-selectControl
mirka Nov 20, 2024
70b6769
Suppress warning on internal usage
mirka Nov 20, 2024
3716ae9
Add props to WithCustomChildren and remove size from selectControl
parthVataliya16 Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)).
- `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745).
- `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
- `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)).
- `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/dimension-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ export function DimensionControl( props: DimensionControlProps ) {
<ContextSystemProvider value={ CONTEXT_VALUE }>
<SelectControl
__next40pxDefaultSize={ __next40pxDefaultSize }
__shouldNotWarnDeprecated36pxSize
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
className={ clsx(
className,
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/input-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@ interface BaseProps {
* @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;
__unstableInputWidth?: CSSProperties[ 'width' ];
/**
* If true, the label will only be visible to screen readers.
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/select-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const MySelectControl = () => {

return (
<SelectControl
__next40pxDefaultSize
label="Size"
value={ size }
options={ [
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/select-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type { WordPressComponentProps } from '../context';
import type { SelectControlProps } from './types';
import SelectControlChevronDown from './chevron-down';
import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';

function useUniqueId( idProp?: string ) {
const instanceId = useInstanceId( SelectControl );
Expand Down Expand Up @@ -65,6 +66,7 @@ function UnforwardedSelectControl< V extends string >(
variant = 'default',
__next40pxDefaultSize = false,
__nextHasNoMarginBottom = false,
__shouldNotWarnDeprecated36pxSize,
...restProps
} = useDeprecated36pxDefaultSizeProp( props );
const id = useUniqueId( idProp );
Expand Down Expand Up @@ -94,6 +96,13 @@ function UnforwardedSelectControl< V extends string >(

const classes = clsx( 'components-select-control', className );

maybeWarnDeprecated36pxSize( {
componentName: 'SelectControl',
__next40pxDefaultSize,
size: undefined,
PARTHVATALIYA marked this conversation as resolved.
Show resolved Hide resolved
__shouldNotWarnDeprecated36pxSize,
} );

return (
<BaseControl
help={ help }
Expand Down Expand Up @@ -154,6 +163,7 @@ function UnforwardedSelectControl< V extends string >(
*
* return (
* <SelectControl
* __next40pxDefaultSize
PARTHVATALIYA marked this conversation as resolved.
Show resolved Hide resolved
* __nextHasNoMarginBottom
* label="Size"
* value={ size }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/select-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {

export const Default = SelectControlWithState.bind( {} );
Default.args = {
PARTHVATALIYA marked this conversation as resolved.
Show resolved Hide resolved
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: 'Label',
options: [
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/select-control/test/select-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@ import _SelectControl from '..';
const SelectControl = (
props: React.ComponentProps< typeof _SelectControl >
) => {
return <_SelectControl { ...props } __nextHasNoMarginBottom />;
return (
<_SelectControl
{ ...props }
__nextHasNoMarginBottom
__next40pxDefaultSize
/>
);
};

describe( 'SelectControl', () => {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/select-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ type SelectControlBaseProps< V extends string > = Pick<
InputBaseProps,
| '__next36pxDefaultSize'
| '__next40pxDefaultSize'
| '__shouldNotWarnDeprecated36pxSize'
| 'disabled'
| 'hideLabelFromVision'
| 'label'
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/tree-select/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export function TreeSelect( props: TreeSelectProps ) {
return (
<ContextSystemProvider value={ CONTEXT_VALUE }>
<SelectControl
__shouldNotWarnDeprecated36pxSize
{ ...{ label, options, onChange } }
value={ selectedId }
{ ...restProps }
Expand Down
Loading