fix(root-layout): use inner child width for sidebar (#1252)

* fix(root-layout): use inner child width for sidebar

* set 100p

* docs

components/root_layout/root_layout.stories.js

@@ -15,7 +15,7 @@ export const argsData = {
   header: '<div class="d-bgc-purple-200 d-h64 d-h100p">Header</div>',
   footer: '<div class="d-bgc-gold-200 d-h64 d-h100p">Footer</div>',
   sidebar:
-    '<div class="d-bgc-black-200 d-hmn100p"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div>',
+    '<div class="d-bgc-black-200 d-h100p d-w264"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div>',
   default: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim eleifend condimentum.
   Vestibulum euismod leo at finibus mattis. Integer ut dui id ligula tincidunt pellentesque. Vestibulum a ullamcorper
   risus. Ut tristique sapien eget magna lacinia, non interdum lacus malesuada. Proin augue lacus, finibus eget aliquam
@@ -48,7 +48,6 @@ export const argTypesData = {
   // Slots
   default: {
     control: 'text',
-    description: 'Slot for main content',
     table: {
       type: {
         summary: 'VNode',
@@ -57,7 +56,6 @@ export const argTypesData = {
   },
 
   header: {
-    description: 'Slot for header content',
     control: 'text',
     table: {
       category: 'slots',
@@ -68,7 +66,6 @@ export const argTypesData = {
   },
 
   sidebar: {
-    description: 'Slot for sidebar content',
     control: 'text',
     table: {
       category: 'slots',
@@ -79,7 +76,6 @@ export const argTypesData = {
   },
 
   footer: {
-    description: 'Slot for footer content',
     control: 'text',
     table: {
       category: 'slots',

components/root_layout/root_layout.vue

@@ -7,7 +7,7 @@
       :class="['d-root-layout__header', { 'd-root-layout__header--sticky': headerSticky }, headerClass]"
       data-qa="dt-root-layout-header"
     >
-      <!-- @slot Slot for header content be sure to set a height on the element inside this
+      <!-- @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>
@@ -19,10 +19,9 @@
       <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 Slot for sidebar content, be sure to set a width on the element within this. -->
         <slot name="sidebar" />
       </aside>
       <main
@@ -39,7 +38,7 @@
       :class="['d-root-layout__footer', footerClass]"
       data-qa="dt-root-layout-footer"
     >
-      <!-- @slot Slot for footer content be sure to set a height on the element inside this
+      <!-- @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>
@@ -116,8 +115,7 @@ export default {
     },
 
     /**
-     * The width of the sidebar
-     * Possible units rem|px|%|em
+     * DEPRECATED: set the height of the inner element instead.
      */
     sidebarWidth: {
       type: String,

components/root_layout/root_layout_default.story.vue

@@ -4,14 +4,10 @@
     :body-class="$attrs.bodyClass"
     :header-class="$attrs.headerClass"
     :header-sticky="$attrs.headerSticky"
-    :header-height="$attrs.headerHeight"
     :content-class="$attrs.contentClass"
-    :content-wrap-width-percent="$attrs.contentWrapWidthPercent"
     :sidebar-class="$attrs.sidebarClass"
     :sidebar-position="$attrs.sidebarPosition"
-    :sidebar-width="$attrs.sidebarWidth"
     :footer-class="$attrs.footerClass"
-    :footer-height="$attrs.footerHeight"
     :fixed="$attrs.fixed"
     :responsive-breakpoint="$attrs.responsiveBreakpoint"
   >