Skip to content

Commit

Permalink
feat: add slide in story
Browse files Browse the repository at this point in the history
  • Loading branch information
@lee-chase
lee-chase committed Dec 5, 2023
1 parent 83d7ea2 commit b4e7d84
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 34 deletions.
61 changes: 48 additions & 13 deletions packages/carbon-web-components/src/components/side-panel/side-panel-story.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,15 +277,13 @@ const DefaultTemplate = (args) => {
};

return html`
<div style="width: 100vw; height: 100vh">
<div
style="position: fixed; top: 0; left: 0; display: grid; grid-template-rows: 3rem 1fr; width: 100vw; height: 100vh;">
<div style="background: black;"></div>
<div
style="position: fixed; top: 0; left: 0; background: black; width: 100%; height: 3rem;"></div>
<div id="page-content">
<cds-button
@click="${toggleButton}"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
>Toggle side-panel</cds-button
>
id="page-content-selector"
style="position: relative; display: flex; justify-content: center; align-items: center;">
<cds-button @click="${toggleButton}">Toggle side-panel</cds-button>
</div>
</div>
<cds-side-panel
Expand All @@ -298,8 +296,8 @@ const DefaultTemplate = (args) => {
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)}
Expand All @@ -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)',
Expand Down Expand Up @@ -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(
Expand Down
84 changes: 63 additions & 21 deletions packages/carbon-web-components/src/components/side-panel/side-panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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.
Expand All @@ -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;
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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,
});
Expand Down Expand Up @@ -734,7 +736,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
<div class="${blockClass}__title-container-inner">
<!-- render collapsed title -->
${animateTitle && title?.length && !reducedMotion.matches
${animateTitle && title?.length && !this._reducedMotion.matches
? html`<h2
id="collapsed-title"
class="${blockClass}__collapsed-title-text"
Expand Down Expand Up @@ -852,9 +854,49 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
}
};

adjustPageContent = () => {
// 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;
Expand Down

0 comments on commit b4e7d84

Please sign in to comment.