fix: non-animating title

carbon-design-system · Jan 16, 2024 · 6c7a85d · 6c7a85d
1 parent a0beae3
commit 6c7a85d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 27 deletions.
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
@@ -133,7 +133,6 @@ const subtitles = {
   'Longer subtitle': 2,
 };
 const getSubTitle = (index) => {
-  console.log('get subtitle index', index);
   switch (index) {
     case 1:
       return html`<div slot="subtitle">This is your subtitle slot.</div>`;

diff --git a/packages/carbon-web-components/src/components/side-panel/side-panel.scss b/packages/carbon-web-components/src/components/side-panel/side-panel.scss
@@ -38,6 +38,11 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
   /* Replaces use of FIGMA for slide in / out animation */
   --#{$block-class}--displaced: 100%;
 
+  * {
+    /* not sure why things are coming out as content-box */
+    box-sizing: border-box;
+  }
+
   #side-panel {
     @extend .#{$block-class}__container;
 
@@ -207,6 +212,12 @@ $block-class-action-set: #{$pkg-prefix}--action-set;
       @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;
     }

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
@@ -327,8 +327,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
     const target = e.target as HTMLSlotElement;
     const subtitle = target?.assignedNodes();
 
-    console.log(e.target);
-
     this._hasSubtitle = subtitle.length > 0;
   }
 
@@ -439,7 +437,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
   private _setMeasuredCustomProperties = async (reason, scrollY = 0) => {
     await this.updateComplete;
 
-    console.log('reason', reason);
     if (!this._sidePanel || (!this.open && !this._innerContent)) {
       return;
     }
@@ -454,20 +451,20 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
       titleContainerHeight + subtitleHeight + scrollSectionHeight;
     const actionToolbarHeight = this?._actionToolbar?.offsetHeight || 0;
 
+    this._sidePanel?.style.setProperty(
+      `--${blockClass}--title-text-height`,
+      this.animateTitle ? '0' : `${titleHeight + 24}px`
+    );
+    this._sidePanel?.style.setProperty(
+      `--${blockClass}--subtitle-container-height`,
+      this.animateTitle ? '0' : `${subtitleHeight}px`
+    );
+    this._sidePanel.style.setProperty(
+      `--${blockClass}--action-bar-container-height`,
+      this.animateTitle ? '0' : `${actionToolbarHeight}px`
+    );
     if (!this.animateTitle) {
-      this._innerContent.style.setProperty(
-        `--${blockClass}--title-text-height`,
-        `${titleHeight}px`
-      );
-      this._innerContent.style.setProperty(
-        `--${blockClass}--subtitle-container-height`,
-        `${subtitleHeight}px`
-      );
-      this._innerContent.style.setProperty(
-        `--${blockClass}--action-bar-container-height`,
-        `${actionToolbarHeight}px`
-      );
-      this._innerContent.style.setProperty(
+      this._sidePanel.style.setProperty(
         `--${blockClass}--label-text-height`,
         `${labelHeight}px`
       );
@@ -560,16 +557,6 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
         `--${blockClass}--title-container-height`,
         !scrolled ? '0px' : `${titleContainerHeight}px`
       );
-
-      this._sidePanel?.style.setProperty(
-        `--${blockClass}--title-text-height`,
-        this.animateTitle ? '0' : `${titleHeight + 24}px`
-      );
-
-      this._sidePanel?.style.setProperty(
-        `--${blockClass}--subtitle-container-height`,
-        this.animateTitle ? '0' : `${subtitleHeight}px`
-      );
     }
   };
 
@@ -815,6 +802,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
         id="subtitle"
         ?hidden=${!this._hasSubtitle}
         ?no-title-animation=${!animateTitle}
+        ?no-action-toolbar=${!this._hasActionToolbar}
         ?no-title=${!title}>
         <slot name="subtitle" @slotchange=${this._handleSubtitleChange}></slot>
       </p>