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

BorderControl: always show clear button #69066

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

BorderControl: always show clear button #69066

wants to merge 7 commits into from
+22 −29

Conversation

shimotmk
Copy link
Contributor

@shimotmk shimotmk commented Feb 5, 2025

What?

Closes #69065

related
#63310
#68454

Why?

The BorderBoxControl will not display the clear button unless you set the color and style.
Also, when the clear button appears, the position of the popover changes, creating a small amount of stress.

How?

Testing Instructions

  1. Go to post or page
  2. Set borders for paragraph blocks, etc.
  3. You can see that the Clear button is always visible.

Testing Instructions for Keyboard

Screenshots or screencast

Before

before.mp4

After

after.mp4

@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 5, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: shimotmk <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: yogeshbhutkar <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

shimotmk
shimotmk commented Feb 5, 2025
View reviewed changes
packages/components/src/border-control/styles.ts
@@ -147,6 +147,12 @@ export const borderControlPopoverControls = css`
export const borderControlPopoverContent = css``;
export const borderColorIndicator = css``;

export const clearButton = css`
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Reference

gutenberg/packages/components/src/circular-option-picker/style.scss

Lines 9 to 13 in 3f0a805

.components-circular-option-picker__custom-clear-wrapper {
display: flex;
justify-content: flex-end;
margin-top: $grid-unit-15;
}

@Mamaduka Mamaduka added [Type] Enhancement A suggestion for improvement. [Feature] UI Components Impacts or related to the UI component system Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Feb 6, 2025
@Mamaduka
Copy link
Member

Mamaduka commented Feb 6, 2025

cc @WordPress/gutenberg-components

@ciampo
Copy link
Contributor

ciampo commented Feb 6, 2025

Thank you for the ping! Here are a few thoughts:

  • The change is actually on BorderControl, not BorderBoxControl
  • We prefer working on the @wordpress/components package in isolation from the rest of the Gutenberg app for better separation of concerns and better testing (ie. unit tests, Storybook). It would be great if we could move the changes to the rest of Gutenberg to a separate PR;
  • Why don't we always show the existing "Reset" button? We keep it "accessible but disabled" while there are no values to reset, and otherwise enabled when there are values to reset. We can do that by reusing the logic used in the showResetButton variable, and instead of using it to conditionally render the button, we use it to conditionally disable that same button. No need to add extra props and deprecation warnings.

What do y'all think?

@shimotmk
Copy link
Contributor Author

shimotmk commented Feb 6, 2025

We keep it "accessible but disabled" while there are no values to reset, and otherwise enabled when there are values to reset.

I think this is a very good idea.
I was worried that some people might like the old format, so I created a process that works the same as before in the deprecated process.

If it's okay to always display the reset button, I'll delete the showClearButton props.

@shimotmk shimotmk changed the title BorderBoxControl: always show clear button BorderControl: always show clear button Feb 7, 2025
@shimotmk
Copy link
Contributor Author

shimotmk commented Feb 7, 2025

Thank you. I adjusted it.😌

ciampo
ciampo reviewed Feb 7, 2025
View reviewed changes
packages/components/src/border-control/border-control-dropdown/component.tsx
Comment on lines +225 to +238
<div className={ clearButtonClassName }>
<Button
className={ resetButtonClassName }
variant="tertiary"
onClick={ () => {
onReset();
onClose();
} }
disabled={ ! showResetButton }
accessibleWhenDisabled
__next40pxDefaultSize
>
{ __( 'Reset' ) }
{ __( 'Clear' ) }
</Button>
</DropdownContentWrapper>
) }
</div>
</DropdownContentWrapper>
Copy link
Contributor

Choose a reason for hiding this comment

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

Are these DOM / layout changes necessary?

  • Adding an extra div around the reset button
  • moving the reset button as a child of DropdownContentWrapper
  • renaming and restyling the reset button to the clear button?

In other words, it seems to me that the main issue was the "reset" button being added and removed from the DOM.

If we change the logic from

{ showResetButton && (
  <DropdownContentWrapper paddingSize="none">
    <Button {...buttonProps} />
  </DropdownContentWrapper>
) }

to

<DropdownContentWrapper paddingSize="none">
  <Button {...buttonProps} accessibleWhenDisabled disabled={!showResetButton}/>
</DropdownContentWrapper>

wouldn't that be enough?

Is the change from "Reset" to "Clear" necessary, including the UI/layout change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the review!

Are these DOM / layout changes necessary?

gutenberg/packages/components/src/circular-option-picker/circular-option-picker.tsx

Lines 165 to 169 in 3f0a805

const actions = actionsProp ? (
<div className="components-circular-option-picker__custom-clear-wrapper">
{ actionsProp }
</div>
) : undefined;

I think this is necessary to align the button to the right.
I used circular-option-picker as a reference.

renaming and restyling the reset button to the clear button?

This was also based on circular-option-picker.

CircularOptionPicker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ciampo ciampo ciampo left review comments

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@ellatrix ellatrix Awaiting requested review from ellatrix

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Feature] UI Components Impacts or related to the UI component system Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

BorderBoxControl clear button not always visible
3 participants
@shimotmk @Mamaduka @ciampo