docs: Refreshing preview SidePanel storybook examples

[williamjstanton]

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.

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

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.

Areas for Feedback? (optional)

• Code
• Documentation
• Testing
• Codemods

I'd like some feedback about CSS styling and my use of the new tokens system.

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

[cypress]

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 ↗︎

---

Test results
Failures	0
Flaky	31
Pending	24
Skipped	0
Passing	1093
View all changes introduced in this branch ↗︎

UI Coverage  21.95%
Untested elements	1623
Tested elements	454

Accessibility  99.17%
Failed rules	5 critical   5 serious   0 moderate   2 minor
Failed elements	178