fix: fixed banners next to drawers were positioned wrong

hperrin · Apr 13, 2021 · 5143e11 · 5143e11
1 parent 417b864
commit 5143e11
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/banner/Banner.svelte b/packages/banner/Banner.svelte
@@ -22,7 +22,7 @@
     instance && instance.handleSecondaryActionClick()}
   {...exclude($$restProps, ['content$', 'textWrapper$', 'graphic$'])}
 >
-  <Fixed bind:fixed>
+  <Fixed bind:fixed {width}>
     <div
       bind:this={content}
       class={classMap({
@@ -106,6 +106,7 @@
   let content;
   let addLayoutListener = getContext('SMUI:addLayoutListener');
   let removeLayoutListener;
+  let width;
 
   setContext('SMUI:label:context', 'banner');
   setContext('SMUI:icon:context', 'banner');
@@ -133,9 +134,12 @@
     instance = new MDCBannerFoundation({
       addClass,
       getContentHeight: () => {
-        element.classList.add('smui-banner--force-show');
-        const offsetHeight = content.offsetHeight;
-        element.classList.remove('smui-banner--force-show');
+        let offsetHeight = content.offsetHeight;
+        if (offsetHeight === 0) {
+          getElement().classList.add('smui-banner--force-show');
+          offsetHeight = content.offsetHeight;
+          getElement().classList.remove('smui-banner--force-show');
+        }
         return offsetHeight;
       },
       notifyClosed: (reason) => {
@@ -157,7 +161,7 @@
     });
 
     instance.init();
-    instance.layout();
+    layout();
 
     return () => {
       instance.destroy();
@@ -202,6 +206,14 @@
   }
 
   export function layout() {
+    if (fixed) {
+      width = element.offsetWidth;
+      if (width === 0) {
+        element.classList.add('smui-banner--force-show');
+        width = element.offsetWidth;
+        element.classList.remove('smui-banner--force-show');
+      }
+    }
     instance.layout();
   }
 

diff --git a/packages/banner/Fixed.svelte b/packages/banner/Fixed.svelte
@@ -1,5 +1,10 @@
 {#if fixed}
-  <div bind:this={element} use:forwardEvents class="mdc-banner__fixed">
+  <div
+    bind:this={element}
+    use:forwardEvents
+    class="mdc-banner__fixed"
+    style={width == null ? null : `width: ${width}px;`}
+  >
     <slot />
   </div>
 {:else}
@@ -13,6 +18,7 @@
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let fixed = false;
+  export let width = null;
 
   let element;
 

diff --git a/site/src/routes/_app.scss b/site/src/routes/_app.scss
@@ -75,6 +75,7 @@ body,
   overflow: auto;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .demo-main-content section {

diff --git a/site/src/routes/demo/banner/Fixed.svelte b/site/src/routes/demo/banner/Fixed.svelte
@@ -1,10 +1,4 @@
-<Banner
-  open
-  fixed
-  mobileStacked
-  content$style="max-width: 100%;"
-  textWrapper$style="width: max-content;"
->
+<Banner open fixed mobileStacked content$style="max-width: max-content;">
   <Label slot="label">
     This is a fixed banner! It's here to let you know an important thing. Once
     you've successfully known the thing, you can dismiss it.