[DRAFT - DO NOT REVIEW YET] Update Toolbar to use CSS grid

[timmcca-be]

Summary:

This PR makes it so elements passed to the title of a Toolbar can set max-width: 100% to ensure the title never overlaps leftContent or rightContent.

Issue: AX-315

Test plan:

Check out the Toolbar stories

[changeset-bot]

🦋 Changeset detected

Latest commit: 5ad3532

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@khanacademy/wonder-blocks-toolbar	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Size Change: +31 B (+0.03%)

Total Size: 101 kB

Filename	Size	Change
packages/wonder-blocks-toolbar/dist/es/index.js	858 B	+31 B (+3.75%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-accordion/dist/es/index.js	3.78 kB
packages/wonder-blocks-banner/dist/es/index.js	1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.77 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	887 B
packages/wonder-blocks-button/dist/es/index.js	4.04 kB
packages/wonder-blocks-cell/dist/es/index.js	2.01 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.06 kB
packages/wonder-blocks-core/dist/es/index.js	3.44 kB
packages/wonder-blocks-data/dist/es/index.js	6.24 kB
packages/wonder-blocks-dropdown/dist/es/index.js	18.2 kB
packages/wonder-blocks-form/dist/es/index.js	6.28 kB
packages/wonder-blocks-grid/dist/es/index.js	1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js	4.76 kB
packages/wonder-blocks-icon-button/dist/es/index.js	3 kB
packages/wonder-blocks-icon/dist/es/index.js	871 B
packages/wonder-blocks-labeled-field/dist/es/index.js	72 B
packages/wonder-blocks-layout/dist/es/index.js	1.82 kB
packages/wonder-blocks-link/dist/es/index.js	2.28 kB
packages/wonder-blocks-modal/dist/es/index.js	5.36 kB
packages/wonder-blocks-pill/dist/es/index.js	1.65 kB
packages/wonder-blocks-popover/dist/es/index.js	4.87 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.3 kB
packages/wonder-blocks-switch/dist/es/index.js	1.94 kB
packages/wonder-blocks-testing-core/dist/es/index.js	3.74 kB
packages/wonder-blocks-testing/dist/es/index.js	1.07 kB
packages/wonder-blocks-theming/dist/es/index.js	693 B
packages/wonder-blocks-timing/dist/es/index.js	1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js	2.36 kB
packages/wonder-blocks-tooltip/dist/es/index.js	7.08 kB
packages/wonder-blocks-typography/dist/es/index.js	1.23 kB

_{compressed-size-action}

[github-actions]

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-ymgmpxrcfk.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	369
Tests with visual changes	3
Total stories	503
Inherited (not captured) snapshots [TurboSnap]	0
Tests on the build	369

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/plenty-rocks-mix.md, __docs__/wonder-blocks-toolbar/toolbar.stories.tsx, packages/wonder-blocks-toolbar/src/components/toolbar.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (eea0853) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2361"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2361