670 - Toolbar children: set horizontal and vertical layout #699
Conversation
src/toolbar/index.ts
Outdated
| @@ -81,6 +81,10 @@ export class Toolbar extends I18nMixin(ThemedMixin(WidgetBase))<ToolbarPropertie | |||
| classes, | |||
| heading | |||
| } = this.properties; | |||
| const actions = v('div', { | |||
| classes: this.theme(this._collapsed ? css.slidePaneActions : css.actions), | |||
There was a problem hiding this comment.
I think that we can always use css.actions here. We can differentiate between slide pane / toolbar placement via the collapsed class. This makes the dom / classes more predictable for the end user.
There was a problem hiding this comment.
Thanks, this is definitely a better solution! Updated
Codecov Report
@@ Coverage Diff @@
## master #699 +/- ##
==========================================
- Coverage 99.04% 99.04% -0.01%
==========================================
Files 45 45
Lines 3342 3334 -8
Branches 926 925 -1
==========================================
- Hits 3310 3302 -8
Misses 32 32
Continue to review full report at Codecov.
|
msssk
force-pushed
the
670-toolbar-layout
branch
from
6656075 to
5273813
Compare
src/theme/toolbar.m.css
Outdated
| } | ||
|
|
||
| .collapsed { | ||
| & .actions { |
There was a problem hiding this comment.
sorry to be a pain, but we're avoiding the use of nested selectors via the & operator. Could you change this to .collapsed .actions please then we can get this merged.
|
Thanks @msssk |
Type: feature
The following has been addressed in the PR:
Description:
Toolbar: add CSS classes and rules to lay out children using
flex-direction: rowfor the toolbar andflex-direction: columnfor the slide pane.Resolves #670