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

Align Dropdown and DropdownMenu styles #18631

Merged
merged 5 commits into from Nov 21, 2019
Merged

Conversation

@youknowriad
Copy link
Contributor

youknowriad commented Nov 20, 2019

Closes #8559
While working on #18624 I notice that if I use Dropdown or DropdownMenu, the styling of the DropdownToggle is different. This PR tries to address that by:

  • Removing specific styles from DropdownMenu and just relying on the default styles of IconButton
  • In addition to that I automatically applied inline-block to all Dropdown wrappers, i think it makes sense IMO (duplicate of #16491). this allows the popover to be positioned properly.

The downside here is that the specific styles for the Toggle in DropdownMenu were specifically targetted to match the styling of ToolbarButton (block toolbars) which means the size of the regular buttons and the dropdowns (hover) is not consistent now. My thinking at the moment is that we should fix this by removing the specific styles for ToobarButton and instead make sure any IconButton (ToolbarButton or not) inside Toolbar component should be adapted (hover styles with a smaller size).

Capture d’écran 2019-11-20 à 2 25 13 PM

I decided to leave the toolbar hover style fix for a separate PR but if you think the breakage in the current PR is severe enough, I'm happy to do everything in the same PR. I preferred not including here to keep the size of the PR smallish.

I also added a temporary story to the Dropdown component where we show both a DropdownMenu and a Dropdown in the same canvas to be able to compare them.

Capture d’écran 2019-11-20 à 2 25 27 PM

@@ -0,0 +1,3 @@
.components-dropdown {
display: inline-block;

This comment has been minimized.

Copy link
@ItsJonQ

ItsJonQ Nov 20, 2019

Contributor

Thanks for fixing this! Changing the display of the div makes sense. Can confirm it's working in Storybook 👍

Copy link
Contributor

ItsJonQ left a comment

@youknowriad Tested in Docker + Storybook, and it's working as expected. Awesome job 🚀 .

I decided to leave the toolbar hover style fix for a separate...

I agree 👍

youknowriad added 2 commits Nov 21, 2019
@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Nov 21, 2019

When trying to work on the toolbar buttons style alignments, I noticed that it basically comes down to remove styles from the ToolbarButton component, so I just went ahead and did it here.

The hover style is not consistent but bigger than it was before. It could be considered a very small visual regression but I think consistency wins here and if we were to restore the smaller hover style, we should restore it for all components consistently.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 21, 2019

This is what I see when running this branch:

dropdowns

If that's also what you see, then 👍 👍

@youknowriad youknowriad merged commit b3f1c2d into master Nov 21, 2019
1 of 2 checks passed
1 of 2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Canceled
Details
@youknowriad youknowriad deleted the fix/dropdown-dropdown-menu branch Nov 21, 2019
@youknowriad youknowriad added this to the Gutenberg 7.0 milestone Nov 25, 2019
@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Nov 29, 2019

I noticed that this change created regression for toolbar buttons:
toggled-buttons

When they are toggled they no longer change their visual appearance. This is how it worked before 7.0:

Screen Shot 2019-11-29 at 15 38 14

Filed in #18825.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.