fix(root-layout): remove fixed height on header/footer

dialpad · Oct 3, 2023 · c91e982 · c91e982
1 parent bc8c320
commit c91e982
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 146 deletions.
diff --git a/components/root_layout/root_layout.vue b/components/root_layout/root_layout.vue
@@ -4,66 +4,57 @@
     data-qa="dt-root-layout"
   >
     <header
-      v-if="hasSlotContent($slots.header)"
       :class="['d-root-layout__header', { 'd-root-layout__header--sticky': headerSticky }, headerClass]"
-      :style="{ 'height': headerHeight, 'min-height': headerHeight }"
       data-qa="dt-root-layout-header"
     >
-      <!-- @slot Slot for header content -->
+      <!-- @slot Slot for header content be sure to set a height on the element inside this
+        if you want a fixed height. -->
       <slot name="header" />
     </header>
-    <dt-root-layout-body
-      :body-class="bodyClass"
-      :content-class="contentClass"
-      :sidebar-class="sidebarClass"
-      :sidebar-width="sidebarWidth"
-      :sidebar-position="sidebarPosition"
-      :header-height="hasSlotContent($slots.header) ? headerHeight : '0px'"
-      :footer-height="hasSlotContent($slots.footer) ? footerHeight : '0px'"
-      :fixed="fixed"
+    <div
+      ref="root-layout-body"
+      :class="['d-root-layout__body', bodyClasses]"
+      data-qa="dt-root-layout-body"
     >
-      <template
-        v-if="hasSlotContent($slots.sidebar)"
-        #sidebar
+      <aside
+        ref="root-layout-sidebar"
+        :class="['d-root-layout__sidebar', { 'd-root-layout__sidebar--sticky': fixed }, sidebarClass]"
+        :style="{ 'flex-basis': sidebarWidth }"
+        data-qa="dt-root-layout-sidebar"
       >
         <!-- @slot Slot for the sidebar -->
         <slot name="sidebar" />
-      </template>
-      <template
-        v-if="hasSlotContent($slots.default)"
-        #content
+      </aside>
+      <main
+        ref="root-layout-content"
+        :class="['d-root-layout__content', contentClass]"
+        data-qa="dt-root-layout-content"
+        tabindex="0"
       >
-        <!-- @slot Slot for main content -->
+        <!-- @slot Slot for the main content -->
         <slot name="default" />
-      </template>
-    </dt-root-layout-body>
+      </main>
+    </div>
     <footer
-      v-if="hasSlotContent($slots.footer)"
       :class="['d-root-layout__footer', footerClass]"
-      :style="{ 'height': footerHeight, 'min-height': footerHeight }"
       data-qa="dt-root-layout-footer"
     >
-      <!-- @slot Slot for footer content -->
+      <!-- @slot Slot for footer content be sure to set a height on the element inside this
+        if you want a fixed height. -->
       <slot name="footer" />
     </footer>
   </div>
 </template>
 
 <script>
-import DtRootLayoutBody from './root_layout_body.vue';
 import { ROOT_LAYOUT_SIDEBAR_POSITIONS, ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS } from './root_layout_constants';
-import { hasSlotContent } from '@/common/utils';
 
 /**
  * A root layout provides a standardized group of containers to display content at the root level.
  */
 export default {
   name: 'DtRootLayout',
 
-  components: {
-    DtRootLayoutBody,
-  },
-
   props: {
     /**
      * When true, the header, footer and sidebar will be locked in position and the content will
@@ -84,8 +75,7 @@ export default {
     },
 
     /**
-     * The height of the header
-     * Possible units rem|px|%|em
+     * DEPRECATED: set the height of the inner element instead.
      */
     headerHeight: {
       type: String,
@@ -154,8 +144,7 @@ export default {
     },
 
     /**
-     * The height of the footer
-     * Possible units rem|px|%|em
+     * DEPRECATED: set the height of the inner element instead.
      */
     footerHeight: {
       type: String,
@@ -173,17 +162,18 @@ export default {
     },
   },
 
-  data () {
-    return {
-      hasSlotContent,
-    };
-  },
-
   computed: {
     responsiveClass () {
       if (!this.responsiveBreakpoint) return;
       return `d-root-layout__responsive--${this.responsiveBreakpoint}`;
     },
+
+    bodyClasses () {
+      return [
+        this.bodyClass,
+        { 'd-root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT },
+      ];
+    },
   },
 };
 </script>
diff --git a/components/root_layout/root_layout_body.vue b/components/root_layout/root_layout_body.vue