feat(Toolbar): add custom kind of ToolbarItem

[miroslavstastny]

custom Toolbar Item kind allows to insert any content into a toolbar item - either non-focusable (Text) or focusable (Button):

<Toolbar
  items={[
    {
      key: 'custom-text',
      kind: 'custom',
      content: <Text content="text" />,
    },
    {
      key: 'custom-button',
      kind: 'custom',
      fitted: 'horizontally',
      content: <Button content="button" />,
    },
  ]}
/>

fitted prop

This custom item adds padding by default. This can be customised by specifying fitted prop, which can be:

• false (default)
• true - removes all padding
• 'horizontally' - removes left and right padding
• 'vertically' - removes top and bottom padding

focused prop

A custom item can be focused.

[codecov]

Codecov Report

Merging #1558 into master will decrease coverage by 0.05%.
The diff coverage is 57.14%.

@@            Coverage Diff            @@
##           master   #1558      +/-   ##
=========================================
- Coverage   71.56%   71.5%   -0.06%     
=========================================
  Files         842     844       +2     
  Lines        6862    6890      +28     
  Branches     1947    1960      +13     
=========================================
+ Hits         4911    4927      +16     
- Misses       1945    1957      +12     
  Partials        6       6

Impacted Files	Coverage Δ
packages/react/src/index.ts	100% <ø> (ø)	⬆️
...hemes/teams/components/Toolbar/toolbarVariables.ts	50% <ø> (ø)	⬆️
packages/react/src/components/Toolbar/Toolbar.tsx	90.47% <100%> (+1%)	⬆️
...react/src/components/Toolbar/ToolbarCustomItem.tsx	100% <100%> (ø)
...eams/components/Toolbar/toolbarCustomItemStyles.ts	7.69% <7.69%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ee412c7...d2638b8. Read the comment docs.

[jurokapsiar]

is it possible to restrict the prop types and remove onClick? onClick should be put on the content element instead as the custom item is not focusable.

[kuzhelov]

probably, I am missing something - but currently not sure how aforementioned statement can coexist with focusable prop :)

  /** A custom item can be focused. */
  focusable?: boolean

@miroslavstastny, @jurokapsiar, could you, please, suggest which part I am missing?

[layershifter]

Per offline discussion: it should be focusable conditionally, but it can't be actionable (onClick: never). We can consider to change this later based on provided use cases.

[kuzhelov]

ui-toolbar__custom-item?

[layershifter]

We have a UT for this one:

test(`is a static equal to "${info.componentClassName}"`, () => {

It expects to have: ui-toolbar__customitem

[kuzhelov]

just to be sure - which case we are protecting against with explicit p.fitted !== true && .., instead of !p.fitted && ..?

[layershifter]

const hasPadding = (fitted) => fitted !== true && fitted !== 'horizontally'
const hasPaddingModified = (fitted) => !fitted && fitted !== 'horizontally'

console.log(hasPadding(true), hasPadding('horizontally'), hasPadding('vertically'))

false false true

console.log(hasPaddingModified(true), hasPaddingModified('horizontally'), hasPaddingModified('vertically'))

false false false

I believe it's the reason

[jurokapsiar]

You can add:

This kind of items can't be actionable, but actionable components might be added to the content slot of the custom kind.