New design pattern updates for menu and listbox #78
Conversation
docs/_includes/ds6/menu.html
Outdated
| <div class="demo"> | ||
| <div class="demo__inner"> | ||
| <span class="menu"> | ||
| <button class="expand-btn btn--borderless" aria-haspopup="true" type="button"> |
There was a problem hiding this comment.
The base class is expand-btn, so it's modifier has to be expand-btn--borderless.
There was a problem hiding this comment.
You know, I actually had it that way at the very beginning. I’ll adjust.
|
@ianmcburnie Please note that there were a couple other changes that I noticed in the DSL spec that I have fixed in these most recents changes (after your PR comment). Let me know if you have any questions about them. |
|
Thanks, will do another look through ASAP. |
| @@ -82,13 +93,13 @@ div.menu__item[role^="menuitem"]:hover, | |||
| div.listbox__option[role^="option"]:hover, | |||
| a.fake-menu__item:hover, | |||
There was a problem hiding this comment.
Do we need this background color for :focus too?
There was a problem hiding this comment.
If you expand the lines right above this, it's all part of the same group of selectors (focus and hover).
There was a problem hiding this comment.
My bad. Of course the items themselves never gain focus, so I guess this bg color will come from aria-selected instead?
There was a problem hiding this comment.
FYI, I moved this around a tiny bit, in order to fix the linting complaining, but it is accomplished exactly the same.
| @@ -15,6 +15,18 @@ span.listbox { | |||
|
|
|||
| // BEM elements | |||
|
|
|||
| .menu button.expand-btn--borderless, | |||
| .fake-menu button.expand-btn--borderless { | |||
| border: none; | |||
There was a problem hiding this comment.
Lesshint is throwing a warning about border: none.
Warning: dropdown-base.less: line 20, col 13, borderZero: Border properties should use 0 instead of "none".
There was a problem hiding this comment.
Yeah, let me grab that one. Old habits die hard ...
dist/dropdown/ds6/dropdown.css
Outdated
| } | ||
| div.menu__item[role^="menuitem"]:focus, | ||
| div.listbox__option[role^="option"]:focus, | ||
| a.fake-menu__item:focus, | ||
| button.fake-menu__item:focus { | ||
| outline: 1px solid #c7c7c7; | ||
| outline: none; |
There was a problem hiding this comment.
Csshint is throwing a warning here:
Outlines shouldn't be hidden unless other visual changes are made.
div.menu__item[role^="menuitem"]:focus
I guess we can overrule this line, as we are making other visual changes.
There was a problem hiding this comment.
How do we overrule it when comments are stripped out?
ianmcburnie
changed the title
Closes #62