diff --git a/packages/carbon-web-components/src/components/side-panel/side-panel-story.ts b/packages/carbon-web-components/src/components/side-panel/side-panel-story.ts index 319b88faeb5..aab9bde1296 100644 --- a/packages/carbon-web-components/src/components/side-panel/side-panel-story.ts +++ b/packages/carbon-web-components/src/components/side-panel/side-panel-story.ts @@ -277,15 +277,13 @@ const DefaultTemplate = (args) => { }; return html` -
+
+
-
- Toggle side-panel + id="page-content-selector" + style="position: relative; display: flex; justify-content: center; align-items: center;"> + Toggle side-panel
{ label-text="${getLabel(label)}" title="This title is testing a very long title to see how this behaves with a longer title. It needs to be long enough to trigger overflow when collapsed." ?open=${open} - ?selectorPageContent=${selectorPageContent} - ?slideIn=${slideIn} + selector-page-content=${selectorPageContent} + ?slide-in=${slideIn} @cds-side-panel-action-stack="${handleStackingChange}"> ${getContent(content)} @@ -320,8 +318,8 @@ Default.parameters = { ...storyDocs.parameters, knobs: { 'cds-side-panel': () => ({ - actionItems: select('Actions slot', actionItems, 4), - actionToolbarItems: select('Action toolbar slot', actionToolbarItems, 1), + actionItems: select('Actions slot', actionItems, 1), + actionToolbarItems: select('Action toolbar slot', actionToolbarItems, 0), containerClass: 'container-class', // closeButtonLabel: text( // 'Close button label (close-button-label)', @@ -355,7 +353,44 @@ SlideIn.parameters = { ...storyDocs.parameters, knobs: { 'cds-side-panel': () => ({ - actionItems: select('Actions slot', actionItems, 4), + actionItems: select('Actions slot', actionItems, 1), + actionToolbarItems: select('Action toolbar slot', actionToolbarItems, 0), + containerClass: 'container-class', + // closeButtonLabel: text( + // 'Close button label (close-button-label)', + // 'Close' + // ), + // danger: boolean('Danger mode (danger)', false), + // fullWidth: boolean('Full width (full-width)', false), + // sidePanelHeading: text('SidePanel heading', 'Add a custom domain'), + // sidePanelLabel: text('SidePanel label', ''), + // numberOfButtons: select('Number of buttons', buttons, 2), + content: select('Side panel contents', contents, 1), + label: select('SidePanel label', labels, 1), + open: boolean('Open (open)', true), + placement: select( + 'SidePanel placement', + placements, + SIDE_PANEL_PLACEMENT.RIGHT + ), + preventCloseOnClickOutside: boolean( + 'Prevent close on click outside', + false + ), + selectorPageContent: '#page-content-selector', + size: select('SidePanel size (size)', sizes, SIDE_PANEL_SIZE.MEDIUM), + slideIn: boolean('Slides in', true), + subtitle: select('Side panel subtitle', subtitles, 1), + }), + }, +}; + +export const WithActionToolbar = DefaultTemplate.bind({}); +WithActionToolbar.parameters = { + ...storyDocs.parameters, + knobs: { + 'cds-side-panel': () => ({ + actionItems: select('Actions slot', actionItems, 1), actionToolbarItems: select('Action toolbar slot', actionToolbarItems, 1), containerClass: 'container-class', // closeButtonLabel: text( diff --git a/packages/carbon-web-components/src/components/side-panel/side-panel.ts b/packages/carbon-web-components/src/components/side-panel/side-panel.ts index 2774a83bae8..98da30b8510 100644 --- a/packages/carbon-web-components/src/components/side-panel/side-panel.ts +++ b/packages/carbon-web-components/src/components/side-panel/side-panel.ts @@ -19,12 +19,26 @@ import { selectorTabbable } from '../../globals/settings'; import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16'; import Close20 from '@carbon/icons/lib/close/20'; +import { moderate02 } from '@carbon/motion'; import '../button/index'; import '../layer/index'; import Handle from '../../globals/internal/handle'; export { SIDE_PANEL_SIZE }; +// todo: +// - use published styles +// - button set does not re-order when stacked +// - story knobs not working as expected even when changing stories +// - option to not animate title +// - condensed actions +// - multi-step side panel (including navigate back) +// - check without overlay operation +// - preventCloseOnClickOutside +// - selectorPrimaryFocus +// - slug +// - additional stories (Panel with second step, initial focus, static title, static title and action bar) + // eslint-disable-next-line no-bitwise const PRECEDING = Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS; @@ -230,6 +244,11 @@ class CDSSidePanel extends HostListenerMixin(LitElement) { } }; + private _reducedMotion = + typeof window !== 'undefined' && window?.matchMedia + ? window.matchMedia('(prefers-reduced-motion: reduce)') + : { matches: true }; + /** * Handles `click` event on the side-panel container. * @@ -544,7 +563,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) { * Selector for page content, used to push content to side except */ @property({ reflect: true, attribute: 'selector-page-content' }) - selectorPageContent = '#page-content'; + selectorPageContent = ''; /** * SidePanel size. @@ -569,19 +588,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) { */ @property({ reflect: false }) title; - // firstUpdated() { - // console.log('first-updated', this); - // - // const body = this.querySelector( - // (this.constructor as typeof CDSSidePanel).selectorSidePanelBody - // ); - // if (!body) { - // const bodyElement = document.createElement( - // (this.constructor as typeof CDSSidePanel).selectorSidePanelBody - // ); - // this.appendChild(bodyElement); - // } - // } async connectObservers() { await this.updateComplete; @@ -631,11 +637,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) { return html``; } - const reducedMotion = - typeof window !== 'undefined' && window?.matchMedia - ? window.matchMedia('(prefers-reduced-motion: reduce)') - : { matches: true }; - const containerClass = this.containerClass .split(' ') .filter(Boolean) @@ -671,7 +672,8 @@ class CDSSidePanel extends HostListenerMixin(LitElement) { currentStep > 0 && !title, [`${blockClass}__title-container--no-title-animation`]: !animateTitle, [`${blockClass}__title-container-without-title`]: !title, - [`${blockClass}__title-container--reduced-motion`]: reducedMotion.matches, + [`${blockClass}__title-container--reduced-motion`]: + this._reducedMotion.matches, [`${blockClass}__title-container--has-action-toolbar`]: this._hasActionToolbar, }); @@ -734,7 +736,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
- ${animateTitle && title?.length && !reducedMotion.matches + ${animateTitle && title?.length && !this._reducedMotion.matches ? html`

{ + // sets/resets styles based on slideIn property and selectorPageContent; + if (this.selectorPageContent && !this._reducedMotion.matches) { + const pageContentEl: HTMLElement | null = document.querySelector( + this.selectorPageContent + ); + + if (pageContentEl) { + const newValues = { + marginInlineStart: '', + marginInlineEnd: '', + inlineSize: '', + transition: `all ${moderate02}`, + transitionProperty: 'margin-inline-start, margin-inline-end', + }; + if (this.open) { + newValues.inlineSize = 'auto'; + if (this.placement === 'left') { + newValues.marginInlineStart = `${this._sidePanel.offsetWidth}px`; + } else { + newValues.marginInlineEnd = `${this._sidePanel.offsetWidth}px`; + } + } + + Object.keys(newValues).forEach((key) => { + pageContentEl.style[key] = newValues[key]; + }); + } + } + }; + + firstUpdated() { + this.checkSetOpen(); + this.adjustPageContent(); + } + async updated(changedProperties) { this.checkSetOpen(); + if (changedProperties.has('slide-in') || changedProperties.has('open')) { + this.adjustPageContent(); + } + if (changedProperties.has('open')) { if (this.open) { this._launcher = this.ownerDocument!.activeElement;