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

Radio: Deprecate 36px default size #66572

Merged
merged 4 commits into from
Oct 31, 2024
Merged

Radio: Deprecate 36px default size #66572

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f0fbe7
Radio: Deprecate 36px default size
mirka Oct 29, 2024
2124cd4
Add changelog
mirka Oct 29, 2024
f2dae3e
Merge branch 'trunk' into radio-group-36px
mirka Oct 31, 2024
b7b4351
Fix changelog
mirka Oct 31, 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
16 changes: 8 additions & 8 deletions packages/components/src/radio-group/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ const MyControlledRadioRadioGroup = () => {
const [ checked, setChecked ] = useState( '25' );
return (
<RadioGroup label="Width" onChange={ setChecked } checked={ checked }>
<Radio value="25">25%</Radio>
<Radio value="50">50%</Radio>
<Radio value="75">75%</Radio>
<Radio value="100">100%</Radio>
<Radio __next40pxDefaultSize value="25">25%</Radio>
<Radio __next40pxDefaultSize value="50">50%</Radio>
<Radio __next40pxDefaultSize value="75">75%</Radio>
<Radio __next40pxDefaultSize value="100">100%</Radio>
</RadioGroup>
);
};
Expand All @@ -80,10 +80,10 @@ import {
const MyUncontrolledRadioRadioGroup = () => {
return (
<RadioGroup label="Width" defaultChecked="25">
<Radio value="25">25%</Radio>
<Radio value="50">50%</Radio>
<Radio value="75">75%</Radio>
<Radio value="100">100%</Radio>
<Radio __next40pxDefaultSize value="25">25%</Radio>
<Radio __next40pxDefaultSize value="50">50%</Radio>
<Radio __next40pxDefaultSize value="75">75%</Radio>
<Radio __next40pxDefaultSize value="100">100%</Radio>
</RadioGroup>
);
};
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/radio-group/radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Button from '../button';
import { RadioGroupContext } from './context';
import type { WordPressComponentProps } from '../context';
import type { RadioProps } from './types';
import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';

function UnforwardedRadio(
{
Expand All @@ -30,6 +31,12 @@ function UnforwardedRadio(
const selectedValue = useStoreState( store, 'value' );
const isChecked = selectedValue !== undefined && selectedValue === value;

maybeWarnDeprecated36pxSize( {
componentName: 'Radio',
size: undefined,
__next40pxDefaultSize: props.__next40pxDefaultSize,
} );

return (
<Ariakit.Radio
disabled={ disabled }
Expand Down
20 changes: 16 additions & 4 deletions packages/components/src/radio-group/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,13 @@ const meta: Meta< typeof RadioGroup > = {
parameters: {
actions: { argTypesRegex: '^on.*' },
controls: { expanded: true },
docs: { canvas: { sourceState: 'shown' } },
docs: {
canvas: { sourceState: 'shown' },
description: {
component:
'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
Comment on lines +34 to +35
Copy link
Member Author

Choose a reason for hiding this comment

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

Adding this description so people visiting the Storybook page can also see what the alternatives are.

},
},
},
};
export default meta;
Expand All @@ -44,9 +50,15 @@ Default.args = {
defaultChecked: 'option2',
children: (
<>
<Radio value="option1">Option 1</Radio>
<Radio value="option2">Option 2</Radio>
<Radio value="option3">Option 3</Radio>
<Radio __next40pxDefaultSize value="option1">
Option 1
</Radio>
<Radio __next40pxDefaultSize value="option2">
Option 2
</Radio>
<Radio __next40pxDefaultSize value="option3">
Option 3
</Radio>
</>
),
};
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/radio-group/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* Internal dependencies
*/
import type { ButtonProps } from '../button/types';

export type RadioGroupProps = {
/**
* Accessible label for the radio group
Expand Down Expand Up @@ -27,7 +32,7 @@ export type RadioGroupProps = {
children: React.ReactNode;
};

export type RadioProps = {
export type RadioProps = Pick< ButtonProps, '__next40pxDefaultSize' > & {
/**
* The actual value of the radio element.
*/
Expand Down
7 changes: 5 additions & 2 deletions packages/components/src/utils/deprecated-36px-size.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,12 @@ export function maybeWarnDeprecated36pxSize( {
}: {
componentName: string;
__next40pxDefaultSize: boolean | undefined;
size: string;
size: string | undefined;
Copy link
Member Author

Choose a reason for hiding this comment

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

Making this explicit instead of optional (size?: string) to prevent accidental omission when passing arguments to this function.

} ) {
if ( __next40pxDefaultSize || size !== 'default' ) {
if (
__next40pxDefaultSize ||
( size !== undefined && size !== 'default' )
) {
return;
}

Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/create-template-part-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ export function CreateTemplatePartModalContents( {
{ templatePartAreas.map(
( { icon, label, area: value, description } ) => (
<Radio
__next40pxDefaultSize
Copy link
Member Author

Choose a reason for hiding this comment

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

In the site editor, go to Patterns ▸ All template parts ▸ Add New Pattern button ▸ Add new template part. There should be no visual changes.

Add New Template Part modal

key={ label }
value={ value }
className="editor-create-template-part-modal__area-radio"
Expand Down
Loading