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

Try: Align widget sidebar button. #32738

Merged
merged 1 commit into from
Jun 18, 2021
Merged

Try: Align widget sidebar button. #32738

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 6 additions & 1 deletion packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,12 +154,17 @@
white-space: nowrap;
color: var(--wp-admin-theme-color);
background: transparent;
padding: 6px; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
padding: $grid-unit-15 / 2; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.

.dashicon {
display: inline-block;
flex: 0 0 auto;
}

// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
Copy link
Member

Choose a reason for hiding this comment

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

It seems strange that the styles of a button depend on if the button follows a paragraph or not. Is this change something that should happen all the time if before the button there is a paragraph?
For the other button styles would this change or something similar also make sense?
What if instead of adding these styles to the button we add them to the container of the description and button (widget areas block)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The thing is, the tertiary button has a built-in padding of 6px, which means it needs the similar negative margin only if it stands on its own. In the Image block example shown (primary, tertiary, tertiary) the button should not have negative margin.

Copy link
Member

Choose a reason for hiding this comment

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

Thank you for the clarification 👍

p + & {
margin-left: -($grid-unit-15 / 2);
}
}

/**
Expand Down