Skip to content

feat: implement SidePanel component - #770

Open
patricklx wants to merge 1 commit into
mainfrom
fix-issue-748
Open

feat: implement SidePanel component#770
patricklx wants to merge 1 commit into
mainfrom
fix-issue-748

Conversation

@patricklx

Copy link
Copy Markdown
Collaborator

Summary

  • Implements SidePanel, previously missing from the Ember addon (carbon-components-ember/src/components/side-panel.gts), covering the full React prop surface: actions, actionToolbarButtons (leading/icon-only variants), currentStep/onNavigationBack, includeOverlay/preventCloseOnClickOutside, slideIn/selectorPageContent, resizable, decorator (plus deprecated slug/aiLabel handled the same way React treats them — as icon aliases, via the icon/renderIcon alias on toolbar buttons), selectorPrimaryFocus, launcherButtonRef (as a plain HTMLElement rather than React's RefObject, since Ember has no ref objects), animateTitle, and size/placement.
  • Translates React's hooks/refs into this addon's existing idioms: functional ember-modifiers for DOM work (presence/exit-animation tracking, focus-on-open, Escape-to-close, resize drag/keyboard handling, and the scroll-driven title collapse), a ComponentLike arg for @decorator/toolbar icons, and a subtitle block for rich content alongside the plain @subtitle string arg.
  • The scroll-driven title-collapse effect is implemented by setting the same CSS custom property (--cds--side-panel--scroll-animation-progress) Carbon's own stylesheet already keys off, rather than re-implementing React's per-element margin bookkeeping.
  • Bumps @carbon/styles from 1.112.0 to 1.113.0 (already permitted by the existing ^1.112.0 range) — 1.113.0 is the first release whose compiled CSS actually includes .cds--side-panel/.cds--resizer styles; without it the component would render unstyled.
  • ActionSet/ButtonSet/Resizer/IconButton are not implemented as separate public components here (they're tracked separately, e.g. ButtonSet/IconButton are already open parity issues) — the footer action-button stacking/ordering and the resize handle are implemented privately inside side-panel.gts instead, matching their real Carbon CSS classes.
  • Adds docs at docs-app/app/templates/2-components/side-panel.md with one live-preview example per React Storybook story (default/slide-over, slide-in, action toolbar, multi-step, decorator, initial-focus selector, static title, no-title, plus resizable).
  • Adds tests at test-app/tests/components/side-panel-test.gts covering rendering, open/close, actions, toolbar buttons, decorator, overlay/outside-click, Escape, slide-in, and resizing.

Known simplifications (documented on the issue)

  • The exit animation is driven by a small presence-tracking modifier (listens for animationend, deferred via ember-lifeline's runTask to avoid Ember's backtracking-rerender assertion) rather than React's usePresence hook — same visible behavior, different plumbing.
  • usePrefersReducedMotion detection isn't replicated; Carbon's own @media (prefers-reduced-motion) CSS still applies.

Test plan

  • pnpm build succeeds in carbon-components-ember/
  • pnpm test -- --filter="SidePanel" in test-app/ — all 19 SidePanel tests pass (533/533 overall, no regressions)
  • glint --declaration type-checks cleanly

Closes #748

Bring carbon-components-ember to parity with Carbon React's SidePanel by
adding a new component that covers the full React prop surface (actions,
action toolbar, multi-step navigation, overlay/slide-in variants, resizing,
decorator, and scroll-driven title collapse), translated into ember
idioms (functional modifiers instead of refs/effects, ComponentLike args
for icons/decorators, and CSS custom properties Carbon's own stylesheet
already keys off for the title animation instead of re-implementing it in
JS).

Bumps @carbon/styles to 1.113.0, the first release that ships SidePanel's
(and its Resizer sub-part's) compiled CSS.

Closes #748

Signed-off-by: Patrick Pircher <pa.trickjlp@gmail.com>
Signed-off-by: Patrick Pircher <patrick.pircher@ibm.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Parity Check] Investigate SidePanel component

1 participant