feat: add masterSize and detailSize properties to master-detail-layout (#8788)

web-padawan · web-flow · commit 75bab861d37b · 2025-03-13T12:02:11.000+02:00
diff --git a/dev/master-detail-layout.html b/dev/master-detail-layout.html
@@ -7,15 +7,40 @@
     <title>Master Detail Layout</title>
     <script type="module" src="./common.js"></script>
 
-    <script type="module">
-      import '@vaadin/master-detail-layout';
-    </script>
   </head>
 
   <body>
+    <style>
+      vaadin-master-detail-layout {
+        border: solid 1px #ccc;
+      }
+    </style>
+
+    <p>
+      <vaadin-checkbox id="detailSize" label="Set detail size"></vaadin-checkbox>
+      <vaadin-checkbox id="masterSize" label="Set master size"></vaadin-checkbox>
+    </p>
+
     <vaadin-master-detail-layout>
-      <div>Master content</div>
-      <div slot="detail">Detail content</div>
+      <master-content></master-content>
+      <detail-content slot="detail"></detail-content>
     </vaadin-master-detail-layout>
+
+    <script type="module">
+      import '@vaadin/checkbox';
+      import '@vaadin/master-detail-layout';
+      import '@vaadin/master-detail-layout/test/helpers/master-content.js';
+      import '@vaadin/master-detail-layout/test/helpers/detail-content.js';
+
+      const layout = document.querySelector('vaadin-master-detail-layout');
+
+      document.querySelector('#detailSize').addEventListener('change', (e) => {
+        layout.detailSize = e.target.checked ? '300px' : null;
+      });
+
+      document.querySelector('#masterSize').addEventListener('change', (e) => {
+        layout.masterSize = e.target.checked ? '300px' : null;
+      });
+    </script>
   </body>
 </html>
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout.d.ts b/packages/master-detail-layout/src/vaadin-master-detail-layout.d.ts
@@ -11,7 +11,23 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * (or primary) area and a detail (or secondary) area that is displayed next to, or
  * overlaid on top of, the master area, depending on configuration and viewport size.
  */
-declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)) {}
+declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)) {
+  /**
+   * Fixed size (in CSS length units) to be set on the detail area.
+   * When specified, it prevents the detail area from growing.
+   *
+   * @attr {string} detail-size
+   */
+  detailSize: string | null | undefined;
+
+  /**
+   * Fixed size (in CSS length units) to be set on the master area.
+   * When specified, it prevents the master area from growing.
+   *
+   * @attr {string} master-size
+   */
+  masterSize: string | null | undefined;
+}
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout.js b/packages/master-detail-layout/src/vaadin-master-detail-layout.js
@@ -27,26 +27,114 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   static get styles() {
     return css`
       :host {
-        display: block;
+        display: flex;
+        box-sizing: border-box;
+        height: 100%;
       }
 
       :host([hidden]) {
         display: none !important;
       }
+
+      :host(:not([has-detail])) [part='detail'] {
+        display: none;
+      }
+
+      /* No fixed size */
+      :host(:not([has-master-size])) [part='master'],
+      :host(:not([has-detail-size])) [part='detail'] {
+        flex-grow: 1;
+        flex-basis: 50%;
+      }
+
+      /* Fixed size */
+      :host([has-master-size]) [part='master'] {
+        width: var(--_master-size);
+        flex-shrink: 0;
+      }
+
+      :host([has-detail-size]) [part='detail'] {
+        width: var(--_detail-size);
+        flex-shrink: 0;
+      }
+
+      :host([has-master-size][has-detail-size]) [part='master'] {
+        flex-grow: 1;
+        flex-basis: var(--_master-size);
+      }
+
+      :host([has-master-size][has-detail-size]) [part='detail'] {
+        flex-grow: 1;
+        flex-basis: var(--_detail-size);
+      }
     `;
   }
 
+  static get properties() {
+    return {
+      /**
+       * Fixed size (in CSS length units) to be set on the detail area.
+       * When specified, it prevents the detail area from growing.
+       *
+       * @attr {string} detail-size
+       */
+      detailSize: {
+        type: String,
+        sync: true,
+        observer: '__detailSizeChanged',
+      },
+
+      /**
+       * Fixed size (in CSS length units) to be set on the master area.
+       * When specified, it prevents the master area from growing.
+       *
+       * @attr {string} master-size
+       */
+      masterSize: {
+        type: String,
+        sync: true,
+        observer: '__masterSizeChanged',
+      },
+    };
+  }
+
   /** @protected */
   render() {
     return html`
       <div part="master">
         <slot></slot>
       </div>
       <div part="detail">
-        <slot name="detail"></slot>
+        <slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
       </div>
     `;
   }
+
+  /** @private */
+  __onDetailSlotChange(e) {
+    this.toggleAttribute('has-detail', e.target.assignedNodes().length > 0);
+  }
+
+  /** @private */
+  __detailSizeChanged(size, oldSize) {
+    this.toggleAttribute('has-detail-size', !!size);
+    this.__updateStyleProperty('detail-size', size, oldSize);
+  }
+
+  /** @private */
+  __masterSizeChanged(size, oldSize) {
+    this.toggleAttribute('has-master-size', !!size);
+    this.__updateStyleProperty('master-size', size, oldSize);
+  }
+
+  /** @private */
+  __updateStyleProperty(prop, size, oldSize) {
+    if (size) {
+      this.style.setProperty(`--_${prop}`, size);
+    } else if (oldSize) {
+      this.style.removeProperty(`--_${prop}`);
+    }
+  }
 }
 
 defineCustomElement(MasterDetailLayout);
diff --git a/packages/master-detail-layout/test/helpers/detail-content.js b/packages/master-detail-layout/test/helpers/detail-content.js
@@ -0,0 +1,44 @@
+import { css, html, LitElement } from 'lit';
+
+customElements.define(
+  'detail-content',
+  class extends LitElement {
+    static get styles() {
+      return css`
+        :host {
+          display: block;
+        }
+
+        .form {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 0.5rem;
+          gap: 0.5rem;
+        }
+
+        input {
+          width: 8rem;
+        }
+      `;
+    }
+
+    render() {
+      return html`
+        <div class="form">
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+          <div class="field"><input type="text" /></div>
+        </div>
+      `;
+    }
+  },
+);
diff --git a/packages/master-detail-layout/test/helpers/master-content.js b/packages/master-detail-layout/test/helpers/master-content.js
@@ -0,0 +1,61 @@
+import { css, html, LitElement } from 'lit';
+
+customElements.define(
+  'master-content',
+  class extends LitElement {
+    static get styles() {
+      return css`
+        :host {
+          display: block;
+        }
+
+        .list {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          padding: 0.5rem;
+          grid-gap: 0.25rem;
+        }
+
+        .item {
+          padding: 1rem;
+          border: solid 1px #e2e2e2;
+        }
+
+        h3 {
+          margin: 0 0 0.25rem;
+        }
+      `;
+    }
+
+    render() {
+      return html`
+        <div class="list">
+          <div class="item">
+            <h3>Lorem</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur et quisquam obcaecati!</p>
+          </div>
+          <div class="item">
+            <h3>Lorem</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur et quisquam obcaecati!</p>
+          </div>
+          <div class="item">
+            <h3>Lorem</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur et quisquam obcaecati!</p>
+          </div>
+          <div class="item">
+            <h3>Lorem</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur et quisquam obcaecati!</p>
+          </div>
+          <div class="item">
+            <h3>Lorem</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur et quisquam obcaecati!</p>
+          </div>
+          <div class="item">
+            <h3>Lorem</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur et quisquam obcaecati!</p>
+          </div>
+        </div>
+      `;
+    }
+  },
+);
diff --git a/packages/master-detail-layout/test/master-detail-layout.test.js b/packages/master-detail-layout/test/master-detail-layout.test.js
@@ -1,17 +1,22 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync } from '@vaadin/testing-helpers';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import '../vaadin-master-detail-layout.js';
+import './helpers/master-content.js';
+import './helpers/detail-content.js';
 
 describe('vaadin-master-detail-layout', () => {
-  let layout;
+  let layout, master, detail;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     layout = fixtureSync(`
       <vaadin-master-detail-layout>
-        <div>Master content</div>
-        <div slot="detail">Detail content</div>
+        <master-content></master-content>
+        <detail-content slot="detail"></detail-content>
       </vaadin-master-detail-layout>
     `);
+    await nextRender();
+    master = layout.shadowRoot.querySelector('[part="master"]');
+    detail = layout.shadowRoot.querySelector('[part="detail"]');
   });
 
   describe('custom element definition', () => {
@@ -29,4 +34,59 @@ describe('vaadin-master-detail-layout', () => {
       expect(customElements.get(tagName).is).to.equal(tagName);
     });
   });
+
+  describe('default', () => {
+    it('should set height: 100% on the host element to expand to full height', () => {
+      layout.parentElement.style.height = '1000px';
+      expect(getComputedStyle(master).height).to.equal('1000px');
+      expect(getComputedStyle(detail).height).to.equal('1000px');
+    });
+
+    it('should show the detail part with the detail child if provided', () => {
+      expect(getComputedStyle(detail).display).to.equal('block');
+    });
+
+    it('should hide the detail part after the detail child is removed', async () => {
+      layout.querySelector('[slot="detail"]').remove();
+      await nextRender();
+      expect(getComputedStyle(detail).display).to.equal('none');
+    });
+  });
+
+  describe('size properties', () => {
+    it('should set flex-basis to 50% on the master and detail by default', () => {
+      expect(getComputedStyle(master).flexBasis).to.equal('50%');
+      expect(getComputedStyle(detail).flexBasis).to.equal('50%');
+    });
+
+    it('should set flex-grow to 1 on the master and detail by default', () => {
+      expect(getComputedStyle(master).flexGrow).to.equal('1');
+      expect(getComputedStyle(detail).flexGrow).to.equal('1');
+    });
+
+    it('should set fixed width on the master area when masterSize is set', () => {
+      layout.masterSize = '300px';
+      expect(getComputedStyle(master).width).to.equal('300px');
+      expect(getComputedStyle(master).flexBasis).to.equal('auto');
+      expect(getComputedStyle(master).flexGrow).to.equal('0');
+      expect(getComputedStyle(master).flexShrink).to.equal('0');
+    });
+
+    it('should set fixed width on the detail area when detailSize is set', () => {
+      layout.detailSize = '300px';
+      expect(getComputedStyle(detail).width).to.equal('300px');
+      expect(getComputedStyle(detail).flexBasis).to.equal('auto');
+      expect(getComputedStyle(detail).flexGrow).to.equal('0');
+      expect(getComputedStyle(detail).flexShrink).to.equal('0');
+    });
+
+    it('should use size as flex-basis when both masterSize and detailSize are set', () => {
+      layout.masterSize = '300px';
+      layout.detailSize = '300px';
+      expect(getComputedStyle(master).flexBasis).to.equal('300px');
+      expect(getComputedStyle(master).flexGrow).to.equal('1');
+      expect(getComputedStyle(detail).flexBasis).to.equal('300px');
+      expect(getComputedStyle(detail).flexGrow).to.equal('1');
+    });
+  });
 });
diff --git a/packages/master-detail-layout/test/typings/master-detail-layout.types.ts b/packages/master-detail-layout/test/typings/master-detail-layout.types.ts
@@ -9,3 +9,7 @@ const layout = document.createElement('vaadin-master-detail-layout');
 // Mixins
 assertType<ElementMixinClass>(layout);
 assertType<ThemableMixinClass>(layout);
+
+// Properties
+assertType<string | null | undefined>(layout.detailSize);
+assertType<string | null | undefined>(layout.masterSize);
