fix(accordion/notification): style updates

carbon-design-system · Dec 5, 2023 · fdf5b24 · fdf5b24
1 parent 14e0f66
commit fdf5b24
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-item.ts b/packages/carbon-web-components/src/components/accordion/accordion-item.ts
@@ -107,6 +107,15 @@ class CDSAccordionItem extends FocusMixin(LitElement) {
         )
       );
     }
+    const content = this.shadowRoot.querySelector(`.${prefix}--accordion__wrapper`);
+
+    if (this.open) {
+      // accordion opens
+      content.style.maxBlockSize = content.scrollHeight + 15 + 'px';
+    } else {
+      // accordion closes
+      content.style.maxBlockSize = '';
+    }
   }
 
   /**
@@ -213,8 +222,10 @@ class CDSAccordionItem extends FocusMixin(LitElement) {
           <slot name="title">${title}</slot>
         </div>
       </button>
-      <div id="content" part="content" class="${contentClasses}">
-        <slot></slot>
+      <div class="${prefix}--accordion__wrapper">
+        <div id="content" part="content" class="${contentClasses}">
+          <slot></slot>
+        </div>
       </div>
     `;
   }

diff --git a/packages/carbon-web-components/src/components/notification/inline-notification.scss b/packages/carbon-web-components/src/components/notification/inline-notification.scss
@@ -29,6 +29,11 @@ $css--plex: true !default;
   .#{$prefix}--inline-notification__close-button:focus {
     @include focus-outline('outline');
   }
+
+  .#{$prefix}--inline-notification__title {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
 }
 
 :host(#{$prefix}-inline-notification[low-contrast])::before {