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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: Enforce consistent usage of Button and ToolbarGroup components #18817

Merged
merged 4 commits into from Dec 3, 2019

Conversation

@gziolo
Copy link
Member

gziolo commented Nov 29, 2019

Description

It also extracts some changes from #17847, cc @diegohaz:

  • converts all button tag elements to Button components for consistency
  • replaces all usages of Toolbar components with ToolbarGroup in core blocks

In addition, this PR introduced ESLint change which discourages usage on button tag element in all production files. The only exception is save method implementation for the block definition.

How has this been tested?

npm run test-unit
npm run lint-js

Types of changes

Refactoring

Screenshots

Before

Screen Shot 2019-12-02 at 10 47 03
Screen Shot 2019-11-29 at 12 57 32
Screen Shot 2019-11-29 at 12 55 20
Screen Shot 2019-11-29 at 12 59 56

After

No visual changes 馃槂

Screen Shot 2019-12-02 at 12 17 43
Screen Shot 2019-12-02 at 10 44 58
Screen Shot 2019-11-29 at 12 55 31
Screen Shot 2019-11-29 at 12 55 54

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .
@gziolo

This comment has been minimized.

Copy link
Member Author

gziolo commented Nov 29, 2019

There are two issues with CSS specificity which I couldn't resolve myself:

Tabs in the sidebar still need a fix for the outline when focused:
Screen Shot 2019-11-29 at 12 54 46

Inserter item still needs a fix for the background color when focused and hovered:
Screen Shot 2019-11-29 at 12 54 59

I would appreciate some help.

@gziolo gziolo changed the title Components: Enforce consisten usage of Button component Components: Enforce consistent usage of Button and ToolbarGroup components Nov 29, 2019
@gziolo gziolo mentioned this pull request Dec 2, 2019
@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 2, 2019

Pushed a fix for the two things you mentioned.

@gziolo

This comment has been minimized.

Copy link
Member Author

gziolo commented Dec 2, 2019

I can confirm that the inserter item was fixed. The focused tab item which isn't the selected one still looks different than in master:

This branch:
Screen Shot 2019-12-02 at 10 46 27

master:
Screen Shot 2019-12-02 at 10 47 03

the outline should be dotted.

@gziolo gziolo self-assigned this Dec 2, 2019
@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 2, 2019

Fixed 馃憤 馃憤

@gziolo

This comment has been minimized.

Copy link
Member Author

gziolo commented Dec 2, 2019

Thanks @jasmussen, everything looks good now. You are my CSS superhero 馃

@gziolo gziolo force-pushed the update/button-cross-platform branch from e31bff8 to e1f908c Dec 2, 2019
@gziolo

This comment has been minimized.

Copy link
Member Author

gziolo commented Dec 2, 2019

After rebasing with the `master I noticed one unexpected change in the UI:

Screen Shot 2019-12-02 at 16 00 59

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Dec 3, 2019

I see this:

html

The focus rectangle is missing from the toggled state, and it could use a border radius like the others. Let me know if you need help with that.

@gziolo

This comment has been minimized.

Copy link
Member Author

gziolo commented Dec 3, 2019

This is what I see in this branch:
html-block

Should we update the hover state?

@gziolo gziolo force-pushed the update/button-cross-platform branch from e1f908c to ae766c7 Dec 3, 2019
Copy link
Contributor

jasmussen left a comment

This is a solid step forward, and one that will enable further enhancements through code simplification. The HTML/Preview isn't perfect, but that "toolbar tab" pattern deserves some thought separately. As such and from a design POV, this looks good to me.

@gziolo gziolo merged commit c0ba214 into master Dec 3, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@gziolo gziolo deleted the update/button-cross-platform branch Dec 3, 2019
@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 3, 2019

Nice work here

@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.