Components: Use a div wrapper for the toolbar #3001
Conversation
Codecov Report
@@ Coverage Diff @@
## master #3001 +/- ##
==========================================
+ Coverage 34.37% 35.25% +0.87%
==========================================
Files 196 196
Lines 5809 6192 +383
Branches 1027 1117 +90
==========================================
+ Hits 1997 2183 +186
- Misses 3222 3376 +154
- Partials 590 633 +43
Continue to review full report at Codecov.
|
|
Fine for me, thanks! From an accessibility perspective, the toolbar wrapper should have a |
editor/block-switcher/style.scss
Outdated
| @@ -5,6 +5,7 @@ | |||
| font-size: $default-font-size; | |||
| line-height: $default-line-height; | |||
| margin-right: -1px; | |||
| margin-bottom: -1px; | |||
There was a problem hiding this comment.
This fixed a double border issue, but it looks like it's unnecessary after updating the remaining ul references.
components/toolbar/style.scss
Outdated
| @@ -6,14 +6,12 @@ | |||
| } | |||
|
|
|||
| ul.components-toolbar { | |||
There was a problem hiding this comment.
This element selector needs to be dropped? Or changed to div?
88e7537 to
e4feb9d
Compare
| @@ -40,7 +40,7 @@ class UrlInputButton extends Component { | |||
| const { expanded } = this.state; | |||
|
|
|||
| return ( | |||
| <li className="blocks-url-input__button"> | |||
| <div className="blocks-url-input__button"> | |||
There was a problem hiding this comment.
I double checked and it looks like it is only used in the toolbar at the moment. It makes a lot of sense to use div here as it makes it more reusable 👍
| @@ -33,7 +33,6 @@ describe( 'Toolbar', () => { | |||
| ]; | |||
| const toolbar = shallow( <Toolbar controls={ controls } /> ); | |||
| const listItem = toolbar.find( 'IconButton' ); | |||
There was a problem hiding this comment.
I found this jest-enzyme yesterday. It might simplify testing components. We can also experiment with snaphsots to minimize the number of assertions where we validate HTML, which should be an implementation detail that is more likely to change.
Per comment #2960 (comment) The toolbar wrapper shouldn't be a list, it was also creating some invalid HTML in some places where we were using the Toolbar component without using
lias children.Testing instructions