Skip to content

Commit

Permalink
fix(side-panel): refactor to match latest ibm-products (#11511)
Browse files Browse the repository at this point in the history 
### Related Ticket(s)

carbon-design-system/ibm-products#4141

### Description

Updates structure of SidePanel following restructure of @carbon/ibm-products SidePanel. This simplifies the HTML structure and title scroll animation.

### Changelog

**Changed**

- packages/carbon-web-components/src/components/side-panel/side-panel.scss
- packages/carbon-web-components/src/components/side-panel/side-panel.ts
  • Loading branch information
@lee-chase
lee-chase authored Feb 16, 2024
1 parent ffe3a70 commit 51e021a
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 496 deletions.
Binary file removed .yarn/cache/@carbon-ibm-products-styles-npm-2.20.1-1f210e0807-a069cae6b7.zip
View file
Binary file not shown.
Binary file added .yarn/cache/@carbon-ibm-products-styles-npm-2.24.0-7b5a90470f-cd8103d46a.zip
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion packages/carbon-web-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
],
"dependencies": {
"@babel/runtime": "^7.16.3",
"@carbon/ibm-products-styles": "2.20.1",
"@carbon/ibm-products-styles": "^2.24.0",
"@carbon/styles": "1.50.0",
"flatpickr": "4.6.1",
"lit": "^2.7.6",
Expand Down
24 changes: 21 additions & 3 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 @@ -26,6 +26,18 @@ const toggleButton = () => {
document.querySelector(`${prefix}-side-panel`)?.toggleAttribute('open');
};

const nextStep = () => {
document
.querySelector(`${prefix}-side-panel`)
?.setAttribute('current-step', '1');
};

const prevStep = () => {
document
.querySelector(`${prefix}-side-panel`)
?.setAttribute('current-step', '0');
};

const sizes = {
// 'default (md)': null,
[`Extra small size (${SIDE_PANEL_SIZE.EXTRA_SMALL})`]:
Expand Down Expand Up @@ -69,7 +81,8 @@ const getContent = (index) => {
class="${storyPrefix}text-input"></cds-text-input>
`;
case 2:
return html` <style>
return html`
<style>
${styles}
</style>
<h5>Section</h5>
Expand Down Expand Up @@ -99,7 +112,9 @@ const getContent = (index) => {
<cds-textarea
label="Notes"
value="This is a text area"></cds-textarea>
</div>`;
</div>
`;

default:
return null;
}
Expand Down Expand Up @@ -276,6 +291,7 @@ const DefaultTemplate = (argsIn) => {
),
animateTitle: boolean('animate-title (Title animates on scroll)', true),
class: text('class', 'a-user-class'),
closeIconDescription: text('Close icon description', 'Close panel'),
condensedActions: boolean('condensed-actions', false),
content: getContent(select('Slot (default), panel contents', contents, 2)),
includeOverlay: boolean('include-overlay', true),
Expand Down Expand Up @@ -325,9 +341,11 @@ const DefaultTemplate = (argsIn) => {
size=${args.size}
?slide-in=${args.slideIn}
slug=${args.slug}
title=${args.title}>
title=${args.title}
@cds-side-panel-navigate-back=${prevStep}>
<!-- default slotted content -->
${args.content}
<cds-button @click="${nextStep}">Step two</cds-button>
<!-- slotted subtitle slotted content -->
${args.subtitle}
Expand Down
158 changes: 35 additions & 123 deletions packages/carbon-web-components/src/components/side-panel/side-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
}

.#{$block-class} {
@extend .#{$block-class}__container;
@extend .#{$block-class};

/* for actions container query - note this changes the size calculation */
container-name: side-panel;
Expand Down Expand Up @@ -76,7 +76,7 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
}

&[placement='right'] {
@extend .#{$block-class}__container-right-placement;
@extend .#{$block-class}--right-placement;

/* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
border-inline-end: 1px solid $border-subtle-02;
Expand All @@ -85,7 +85,7 @@ $block-class-action-set: #{$pkg-prefix}--action-set;

/* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */
&[placement='left'] {
@extend .#{$block-class}__container-left-placement;
@extend .#{$block-class}--left-placement;

/* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
border-inline-end: 1px solid $border-subtle-02;
Expand All @@ -94,21 +94,20 @@ $block-class-action-set: #{$pkg-prefix}--action-set;

@each $size, $size_value in spv.$side-panel-sizes {
&[size='#{$size}'] {
@extend .#{$block-class}__container--#{$size};
@extend .#{$block-class}--#{$size};
}
}
}

&:not([overlay]) {
@extend .#{$block-class}__container-without-overlay;
}
#{$prefix}-layer {
display: contents;
}

.#{$block-class}__overlay {
@extend .#{$block-class}__overlay;

&[opening] {
opacity: 0;
}

@media screen and (prefers-reduced-motion: reduce) {
&[open] {
opacity: 1;
Expand All @@ -133,32 +132,22 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
}
}

.#{$block-class}__title-container {
@extend .#{$block-class}__title-container;

.#{$block-class}__header {
&::before {
z-index: 99; /* must be higher than action toolbar */
}

&[detail-step] {
@extend .#{$block-class}__on-detail-step;
}

&:not([has-title]) {
@extend .#{$block-class}__title-container-without-title;
}

&[detail-step]:not([has-title]) {
@extend .#{$block-class}__on-detail-step-without-title;
@extend .#{$block-class}__header--on-detail-step;
}

&[no-title-animation] {
@extend .#{$block-class}__title-container--no-title-animation;
@extend .#{$block-class}__header--no-title-animation;
// inset-block-start: 0;
}

&[reduced-motion] {
@extend .#{$block-class}__title-container--reduced-motion;
@extend .#{$block-class}__header--reduced-motion;
}

&[has-action-toolbar] {
Expand All @@ -167,115 +156,35 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
}
}

.#{$block-class}
.#{$block-class}__title-container[has-action-toolbar]::before {
.#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
content: initial; /* remove border below */
}

.#{$block-class}__nav-back-button {
@extend .#{$block-class}__navigation-back-button;
}

.#{$block-class}__collapsed-title {
@extend .#{$block-class}__collapsed-title-text;
}

.#{$block-class}__title {
@extend .#{$block-class}__title-text;
}

.#{$block-class} .#{$block-class}__title {
margin-block-end: calc(-1 * var(--#{$block-class}--reduce-titles-by));
}

.#{$block-class}__slug-and-close {
@extend .#{$block-class}__slug-and-close;
}

.#{$block-class}__close-button {
@extend .#{$block-class}__close-button;
}

.#{$block-class}__label {
@extend .#{$block-class}__label-text;

// opacity: var(--#{$block-class}--subtitle-opacity, 1);
}

.#{$block-class}__subtitle {
@extend .#{$block-class}__subtitle-text;

.#{$block-class}__subtitle-text {
&[hidden] {
@extend .#{$prefix}--visually-hidden;
}

&[no-title-animation] {
@extend .#{$block-class}__subtitle-text-no-animation;
}

&[no-title-animation][no-action-toolbar] {
/* not working @extend .#{$block-class}__subtitle-text-no-animation-no-action-toolbar; */
border-block-end: 1px solid $layer-active-01;
margin-block-end: $spacing-05;
}

&[no-title] {
@extend .#{$block-class}__subtitle-without-title;
}
}

.#{$block-class}__action-toolbar {
@extend .#{$block-class}__action-toolbar;

margin-block-end: 0;
padding-inline-start: 0;

&[hidden] {
@extend .#{$prefix}--visually-hidden;
}

&[no-title-animation] {
@extend .#{$block-class}__action-toolbar-no-animation;
}

&::after {
position: absolute;
background-color: $border-subtle-02;
block-size: 1px;
content: '';
inline-size: 100%;
inset-block-end: 0;
inset-inline-start: 0;
opacity: var(--#{$block-class}--divider-opacity);
}
}

.#{$block-class} .#{$block-class}__action-toolbar[hidden] {
@extend .#{$prefix}--visually-hidden;
}

.#{$block-class}__inner-content {
@extend .#{$block-class}__inner-content;

block-size: calc(
100% - var(--#{$block-class}--actions-height, $spacing-09)
);

&[no-title-animation] {
@extend .#{$block-class}__static-inner-content;
}

&[has-actions] {
@extend .#{$block-class}__inner-content-with-actions;
}

&[no-title-animation]:not([has-actions]) {
@extend .#{$block-class}__static-inner-content-no-actions;
}
.#{$block-class}[has-slug] {
@extend .#{$block-class}--has-slug;
}

.#{$block-class}[has-slug] .#{$block-class}__inner-content {
@include callout-gradient('default');
[scrolls] {
@extend .#{$block-class}--scrolls;
}

.#{$block-class}__body-content {
Expand All @@ -288,21 +197,21 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
flex-direction: var(--flex-direction);

/* stylelint-disable-next-line selector-type-no-unknown */
::slotted(cds-button) {
::slotted(#{$prefix}-button) {
flex: 0 1 25%;
max-inline-size: to-rem(232px);
}

/* stylelint-disable-next-line selector-type-no-unknown */
::slotted(cds-button[kind='ghost']) {
::slotted(#{$prefix}-button[kind='ghost']) {
flex: 1 1 25%;
max-inline-size: none;
}

// -1 in @container query is for 1px left border
@container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
/* stylelint-disable-next-line selector-type-no-unknown */
&:not([actions-multiple='triple']) ::slotted(cds-button) {
&:not([actions-multiple='triple']) ::slotted(#{$prefix}-button) {
// double and single on lg use 50%
flex: 0 1 50%;
max-inline-size: none;
Expand All @@ -314,19 +223,26 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
// md is 50% for two and 100% for one
// column for triple
/* stylelint-disable-next-line selector-type-no-unknown */
&[actions-multiple] ::slotted(cds-button) {
&[actions-multiple] ::slotted(#{$prefix}-button) {
flex: 0 0 100%;
max-inline-size: none;
}

/* stylelint-disable-next-line selector-type-no-unknown */
&[actions-multiple='double'] ::slotted(cds-button) {
&[actions-multiple='double'] ::slotted(#{$prefix}-button) {
flex: 0 1 50%;
max-inline-size: none;
}

&[actions-multiple='triple'] {
--flex-direction: column;

/* stylelint-disable-next-line selector-type-no-unknown */
::slotted(#{$prefix}-button) {
flex: initial;
inline-size: 100%;
max-inline-size: none;
}
}
}

Expand All @@ -335,23 +251,23 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
--flex-direction: column;

/* stylelint-disable-next-line selector-type-no-unknown */
&[actions-multiple] ::slotted(cds-button) {
flex: 0 0 100%;
::slotted(#{$prefix}-button) {
flex: initial;
inline-size: 100%;
max-inline-size: none;
}
}
}

.#{$block-class}__actions {
@extend .#{$block-class}__actions-container;
.#{$block-class}__actions-container {
@extend .#{$block-class-action-set};
@include actions-placement();

display: flex;
inline-size: 100%;

/* stylelint-disable-next-line selector-type-no-unknown */
::slotted(cds-button) {
::slotted(#{$prefix}-button) {
@extend .#{$block-class-action-set}__action-button;
}

Expand All @@ -361,10 +277,6 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
display: none;
}

&[condensed] {
@extend .#{$block-class}__actions-container-condensed;
}

$multiples: 'single' 'double' 'triple';
@each $m in $multiples {
&[actions-multiple='#{$m}'] {
Expand Down
Loading

0 comments on commit 51e021a

Please sign in to comment.