feat: implement SidePanel component - #770
Open
patricklx wants to merge 1 commit into
Open
Conversation
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>
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
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 deprecatedslug/aiLabelhandled the same way React treats them — as icon aliases, via theicon/renderIconalias on toolbar buttons),selectorPrimaryFocus,launcherButtonRef(as a plainHTMLElementrather than React'sRefObject, since Ember has no ref objects),animateTitle, andsize/placement.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), aComponentLikearg for@decorator/toolbar icons, and asubtitleblock for rich content alongside the plain@subtitlestring arg.--cds--side-panel--scroll-animation-progress) Carbon's own stylesheet already keys off, rather than re-implementing React's per-element margin bookkeeping.@carbon/stylesfrom1.112.0to1.113.0(already permitted by the existing^1.112.0range) —1.113.0is the first release whose compiled CSS actually includes.cds--side-panel/.cds--resizerstyles; without it the component would render unstyled.ActionSet/ButtonSet/Resizer/IconButtonare not implemented as separate public components here (they're tracked separately, e.g.ButtonSet/IconButtonare already open parity issues) — the footer action-button stacking/ordering and the resize handle are implemented privately insideside-panel.gtsinstead, matching their real Carbon CSS classes.docs-app/app/templates/2-components/side-panel.mdwith 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).test-app/tests/components/side-panel-test.gtscovering rendering, open/close, actions, toolbar buttons, decorator, overlay/outside-click, Escape, slide-in, and resizing.Known simplifications (documented on the issue)
animationend, deferred viaember-lifeline'srunTaskto avoid Ember's backtracking-rerender assertion) rather than React'susePresencehook — same visible behavior, different plumbing.usePrefersReducedMotiondetection isn't replicated; Carbon's own@media (prefers-reduced-motion)CSS still applies.Test plan
pnpm buildsucceeds incarbon-components-ember/pnpm test -- --filter="SidePanel"intest-app/— all 19 SidePanel tests pass (533/533 overall, no regressions)glint --declarationtype-checks cleanlyCloses #748