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.

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

Fix copy & expand button padding. #335

Merged
merged 3 commits into from
Nov 7, 2023
Merged

Conversation

StevenDufresne
Copy link
Contributor

Fixes #326.

This uses classes introduced in WordPress/wporg-parent-2021#112 to fix the buttons growing too much on :focus.

Default
Screenshot 2023-11-06 at 2 20 58 PM

Focal States
After the user clicks, the button text updates.

First Second
Screenshot 2023-11-06 at 2 17 15 PM Screenshot 2023-11-06 at 2 17 18 PM
Screenshot 2023-11-06 at 2 17 06 PM Screenshot 2023-11-06 at 2 17 10 PM

const $copyButtonContainer = $( '<div class="wp-block-button is-style-outline"></div>' );
const $copyButton = $( '<a href="#" class="wp-block-button__link wp-element-button"></a>' );
const $copyButtonContainer = $( '<div class="wp-block-button is-style-outline is-small"></div>' );
const $copyButton = $( '<a href="#" class="wp-block-button__link wp-element-button has-background"></a>' );
Copy link
Contributor

@adamwoodnz adamwoodnz Nov 7, 2023

Choose a reason for hiding this comment

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

Without this the white background color was being overwritten

Screenshot 2023-11-07 at 4 02 26 PM

Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

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

Made a small change, now LGTM, thanks!

@adamwoodnz adamwoodnz merged commit 6c7f266 into trunk Nov 7, 2023
1 check passed
@adamwoodnz adamwoodnz deleted the fix/326-copy-button-big branch November 7, 2023 03:04
@StevenDufresne StevenDufresne changed the title Be specific about the padding to stop it from growing too large. Fix copy & expand button padding. Nov 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Code Reference: After clicking code "copy", button goes big.
2 participants