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

Feat: Button groups in Typography tools should use ToggleGroupControl #64529

Merged
merged 4 commits into from
Aug 16, 2024
Merged

Feat: Button groups in Typography tools should use ToggleGroupControl #64529

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d18c729
Update the letterCase typogrpahy panel to use toggleGroupOption compo…
hbhalodia Aug 15, 2024
4206c46
Remove unecessary style for segmented text control and match height w…
hbhalodia Aug 15, 2024
6b0f5a3
Remove SegmentedTextControl component and use toggleControl
hbhalodia Aug 16, 2024
42889a2
Reduce the diff change in the PR
hbhalodia Aug 16, 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
40 changes: 24 additions & 16 deletions packages/block-editor/src/components/segmented-text-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { BaseControl, Button } from '@wordpress/components';
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';

/**
* @typedef {Object} Option
Expand Down Expand Up @@ -41,22 +44,27 @@ export default function SegmentedTextControl( {
className
) }
>
<BaseControl.VisualLabel as="legend">
{ label }
</BaseControl.VisualLabel>
<div className="block-editor-segmented-text-control__buttons">
{ options.map( ( option ) => {
return (
<Button
size="compact"
key={ option.value }
icon={ option.icon }
label={ option.label }
isPressed={ option.value === value }
onClick={ () => onChange( option.value ) }
/>
);
} ) }
<ToggleGroupControl
__nextHasNoMarginBottom
isDeselectable
label={ label }
onChange={ ( newValue ) => {
onChange( newValue );
} }
value={ value }
>
{ options.map( ( option ) => {
return (
<ToggleGroupControlOptionIcon
key={ option.value }
value={ option.value }
icon={ option.icon }
label={ option.label }
/>
);
} ) }
</ToggleGroupControl>
</div>
</fieldset>
Copy link
Member

Choose a reason for hiding this comment

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

The ToggleGroupControl usage looks good, thank you!

However, the outer fieldset and div are now completely unnecessary, and this SegmentedTextControl component is also unnecessary, as consumers can just use ToggleGroupControl directly. There is nothing that this component adds on top of ToggleGroupControl itself.

Ideally, we would clean that up in this PR, but if you prefer, we can split out the refactoring work to a separate PR. At minimum, I think we should to remove the fieldset and div before landing.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can update on this PR itself, let me know what suits better. I am open to both.

Thanks

Copy link
Contributor

@ciampo ciampo Aug 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Probably better to have those updates as part of this PR, if you don't mind. Thank you 🙏

Copy link
Contributor

Choose a reason for hiding this comment

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

The SegmentedTextControl component is a wrapper component introduced in #60841 to make the same code common.

We should be able to simply replace the SegmentedTextControl component with the ToggleGroupControl component.
Also, since the SegmentControl component is not exposed, it is safe to delete it 👍

Copy link
Member

@mirka mirka Aug 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

And thank you @t-hamano for apparently having done the work (#60841) to consolidate all the instances into this unified component 🙏 I had assumed that they were all separate implementations as I had seen before, but pleasantly surprised to see that they were actually consolidated now 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi Team, apologies, I would be updating these feedbacks by tomorrow. ✨

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi @mirka @t-hamano @ciampo, Have updated the PR with the requested changes.

Thank You,

);
Expand Down
Loading