feat(Toolbar): responsive

[miroslavstastny]

This PR adds possibility for a Toolbar to move items which do not fit to an overflow menu:

Based on requested use cases it is not enough to just remove items from end one by one and move them to the overflow menu. There is a requirement for the consumer to be able to specify custom "resize steps".

API

onReduceItems(renderedItems, measures): newItems function has been added to ToolbarProps. If this prop is specified, Toolbar is watching its size and if it does not fit, it calls this function so that the consumer can restructure the items.

Basic idea

Technically this work is inspired by Office UI Fabric's ResizeGroup.

1. the whole toolbar is wrapped by an additional wrapper div.
2. inside the div, there is a hidden measurement div.
3. inside the measurement div, a hidden toolbar is rendered
4. once the hidden toolbar is rendered, all its DOM children are measured and their rects are compared with wrapper rect to find out what overflows.
5. if there is an overflow, onReduceItems callback is called for the consumer to restructure the items, the hidden toolbar is re-rendered with the new items and the whole process repeats
6. once the hidden toolbar fits the wrapper, current items are rendered to visible toolbar and hidden toolbar is removed
7. there is a resize detector inside the wrapper to detect width changes - if width changes, visible toolbar is not touched, but the whole process inside hidden toolbar starts again with the initial (full) set of items

Part of Toolbar vs ResponsiveToolbar vs universal wrapper

There are three options how to implement this:

1. as part of Toolbar implementation
   👍user starts with Toolbar, wants to just "enable responsiveness"
   👍implementation can be optimized for Toolbar
   🛑complicates Toolbar implementation
   🛑only for Toolbar
2. ResponsiveToolbar which composes Toolbar
   👍separation of concerns
   👍implementation can be optimized for Toolbar
   🛑user needs to replace components to enable responsiveness
   🛑only for Toolbar
3. universal wrapper
   👍usable for any component
   👍separation of concerns
   🛑less intuitive for users
   🛑cannot be optimized for Toolbar

After offline discussion with @levithomason we agreed to start with option 1.

Known issues, todos

• no performance test
• no performance optimizations
• onReduceItems implementation is in hands of a consumer and is not a straightforward/simple thing
• given current ToolbarMenu can contain only items and divider, there is no way how to move radiogroup and custom items to the overflow menu
• requestAnimationFrame registrations must be canceled on unmount
• the example should show how to handle dividers
• if overflow menu is opened and screen is resized so that the whole toolbar fits (=overflow menu disappears), and then resized back, the menu is automatically opened again

[DustyTheBot]

	Warnings
⚠️	Package (or peer) dependencies changed. Make sure you have approval before merging!

Changed dependencies are detected.

Changed dependencies in packages/react/package.json

package	before	after
react-resize-detector	-	^4.2.0

Generated by 🚫 dangerJS

[codecov]

Codecov Report

Merging #1657 into master will decrease coverage by 0.28%.
The diff coverage is 29.41%.

@@            Coverage Diff             @@
##           master    #1657      +/-   ##
==========================================
- Coverage   70.03%   69.75%   -0.29%     
==========================================
  Files         867      868       +1     
  Lines        7433     7483      +50     
  Branches     2164     2199      +35     
==========================================
+ Hits         5206     5220      +14     
- Misses       2219     2255      +36     
  Partials        8        8

Impacted Files	Coverage Δ
...hemes/teams/components/Toolbar/toolbarVariables.ts	50% <ø> (ø)	⬆️
...emes/teams/components/Toolbar/toolbarItemStyles.ts	6.25% <ø> (ø)	⬆️
...rc/themes/base/components/Toolbar/toolbarStyles.ts	25% <0%> (-25%)	⬇️
packages/react/src/components/Toolbar/Toolbar.tsx	47.76% <29.78%> (-42.72%)	⬇️
...base/components/Toolbar/toolbarRadioGroupStyles.ts	50% <50%> (ø)

---

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 ab1d1a6...34b573b. Read the comment docs.

[miroslavstastny]

without this items in radio group are wrapped if toolbar does not fit

[layershifter]

Dependency

• ❌ react-resize-detector^4.2.0 🚀
  • ✔️ lodash^4.17.11 - 4.17.12 🚀
  • ❌ lodash-es^4.17.11 - 4.17.15 🚀
  • ✔️ prop-types^15.7.2 - 15.7.2
  • ❌ raf-schd^4.0.0 - 4.0.2 🚀
  • ❌ resize-observer-polyfill^1.5.1 - 1.5.1 🚀

[kuzhelov]

Detected by approved dependency check:

failed constrains	approved candidates
lodash-es@^4.17.11	there are no any approved packages
raf-schd@^4.0.0	there are no any approved packages
react-resize-detector@^4.2.0	there are no any approved packages
resize-observer-polyfill@^1.5.1	there are no any approved packages

[miroslavstastny]

Screener test is not working for overflow Toolbar, created a separate issue #1788.