[Parity Check] Investigate SidePanel component

[github-actions]

Component Parity Investigation

Component: SidePanel
Carbon React Version: 11.113.0
Commit: a57cf8a
Status: Missing in Ember implementation

Investigation Tasks

• Review React implementation: https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/SidePanel
• Check Storybook examples: https://react.carbondesignsystem.com/?path=/docs/components-sidepanel--overview
• Document component API (props, events, variants)
• Assess implementation complexity
• Determine priority (High/Medium/Low)
• Create implementation plan or decide to skip

Resources

• Carbon React Component
• Storybook Documentation
• Carbon Design System

---

Auto-generated by parity-check script on 2026-08-07T15:48:35.824Z

[patricklx]

Investigation

SidePanel was entirely missing from the Ember addon (only its icons — side-panel-open/side-panel-close/etc. — already existed). React's SidePanel.tsx is large: it composes IconButton, ActionSet, Resizer, and Layer, none of which exist as standalone components in this addon yet (ButtonSet/IconButton are already tracked as separate missing-component issues; ActionSet/Resizer/Layer aren't separately tracked at all — they're purely internal to SidePanel in practice).

Notably, @carbon/styles was pinned at 1.112.0 locally, which does not ship any .cds--side-panel/.cds--resizer CSS — that only landed in 1.113.0 (matching the commit/version this issue cites). Without bumping the dependency, any implementation would render completely unstyled.

What was implemented (PR #770)

• Full SidePanel component (Path B — new implementation) at carbon-components-ember/src/components/side-panel.gts, covering the complete React prop surface (see PR description for the full list).
• Bumped @carbon/styles to 1.113.0 (already permitted by the existing ^1.112.0 semver range) so the component actually renders styled.
• The footer action-button stacking/ordering (ActionSet) and the resize handle (Resizer) are implemented privately inside side-panel.gts rather than as new standalone public components, since ButtonSet/IconButton are already separately tracked and ActionSet/Resizer have no independent existence in Carbon React outside of SidePanel.
• Docs with a live-preview example per Storybook story, and a full test suite (19 tests, all passing).

Known simplifications

• The exit animation uses a small presence-tracking modifier (animationend + ember-lifeline's runTask) instead of replicating React's usePresence hook — same visible result.
• usePrefersReducedMotion JS detection isn't replicated (Carbon's own prefers-reduced-motion CSS still applies).
• The title-collapse-on-scroll effect drives the same CSS custom property (--cds--side-panel--scroll-animation-progress) Carbon's stylesheet already keys off, rather than porting React's per-element margin math — visually equivalent, less code.

See PR #770 for the full diff and test plan.