react-ui-org/react-ui

Make `ToolbarItem` optional / remove it entirely?

adamkudrna opened this issue · 0 comments

Now when the gap property in flex layouts is widely supported by browsers, we can get rid of ToolbarItem in most cases.

It needs to be thoroughly tested though.

Basic Usage

Before:

<Toolbar>
  <ToolbarItem></ToolbarItem>
  <ToolbarItem></ToolbarItem>
</Toolbar>

After:

<Toolbar>
  …
  …
</Toolbar>

Groups

Groups are still necessary to, well, group items together.

Before:

<Toolbar>
  <ToolbarGroup>
    <ToolbarItem></ToolbarItem>
    <ToolbarItem></ToolbarItem>
  </ToolbarGroup>
</Toolbar>

After:

<Toolbar>
  <ToolbarGroup>
    …
    …
  </ToolbarGroup>
</Toolbar>

Flexible Items

We may still need ToolbarItem for flexible items:

Image

But! As @mbohal pointed out, Grid may be more suitable for this kind of layout. ToolbarItem then could be removed entirely.

Before:

<Toolbar>
  <ToolbarItem flexible></ToolbarItem>
  <ToolbarItem></ToolbarItem>
</Toolbar>

After:

<Grid columns="1fr auto">
  …
  …
</Grid>