docs: Refreshing preview SidePanel storybook examples

Workday / canvas-kit

Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -

Apache License 2.0

302 stars 221 forks source link

Summary

I recently reviewed the accessibility of a bespoke team's work, using the Canvas SidePanel component for their navigation.

I wanted to add semantic list markup inside the navigation

I wanted to demonstrate a "compact view" of the nav that used icon buttons with Tooltips, and the Canvas Menu component for fly-out menus.

I knew the style tokens needed updating

Then I saw all of the other examples were in need of the new style tokens

Release Category

Documentation > Storybook examples

Release Note

Optional release note message. Changelog and release summaries will contain a pull request title. This section will add additional notes under that title. This section is not a summary, but something extra to point out in release notes. An example might be calling out breaking changes in a labs component or minor visual changes that need visual regression updates. Remove this section if no additional release notes are required.

For the Reviewer

[ ] PR title is short and descriptive

[ ] PR summary describes the change (Fixes/Resolves linked correctly)

[ ] PR Release Notes describes additional information useful to call out in a release message or removed if not applicable

[ ] Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Start here: modules/react/_examples/stories/mdx/examples/SidePanelWithNavigation.tsx Updated docs: modules/react/_examples/stories/mdx/SidePanel.mdx modules/react/_examples/stories/mdx/examples/SidePanelWithOverlay.tsx

Important change to external controlProps: modules/preview-react/side-panel/stories/examples/ExternalControl.tsx Notes about accessibility: modules/preview-react/side-panel/stories/SidePanel.mdx

modules/preview-react/side-panel/stories/examples/Basic.tsx And all other examples in this folder.

Workday/canvas-kit Run #8061

Run Properties: Passed #8061 • d8ce2bd004 ℹ️: Merge edf126db25f90696e7ac0d3d7beb11da5e25ac41 into 9a6f57a9daed9618b7de81ff67ec...

Project	`Workday/canvas-kit`
Branch Review	`william-sidepanel-nav-example`
Run status	`Passed #8061`
Run duration	`03m 55s`
Commit	`d8ce2bd004 ℹ️: Merge edf126db25f90696e7ac0d3d7beb11da5e25ac41 into 9a6f57a9daed9618b7de81ff67ec...`
Committer	`William Stanton`
View all properties for this run ↗︎