refactor: restore forceOverlay property (#11489)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: vursen

packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js

@@ -49,20 +49,30 @@ export const masterDetailLayoutStyles = css`
     --_detail-size: var(--_detail-cached-size);
     --_detail-extra: 0px;
     --_detail-cached-size: min-content;
+
+    /* prettier-ignore */
+    --_grid-template:
+      [master-start] var(--_master-size) [master-extra] var(--_master-extra)
+      [detail-start] var(--_detail-size) [detail-extra] var(--_detail-extra)
+      [detail-end];
+  }
+
+  :host([force-overlay]) {
+    /* prettier-ignore */
+    --_grid-template:
+      [master-start] var(--_master-size) [master-extra] var(--_master-extra)
+      [detail-start] 0px                 [detail-extra] 0px
+      [detail-end];
   }
 
   :host([orientation='horizontal']) {
-    grid-template-columns:
-      [master-start] var(--_master-size) [master-extra-start] var(--_master-extra)
-      [detail-start] var(--_detail-size) [detail-extra-start] var(--_detail-extra) [detail-end];
+    grid-template-columns: var(--_grid-template);
     grid-template-rows: 100%;
   }
 
   :host([orientation='vertical']) {
     grid-template-columns: 100%;
-    grid-template-rows:
-      [master-start] var(--_master-size) [master-extra-start] var(--_master-extra)
-      [detail-start] var(--_detail-size) [detail-extra-start] var(--_detail-extra) [detail-end];
+    grid-template-rows: var(--_grid-template);
   }
 
   /* CSS grid placement */
@@ -78,7 +88,7 @@ export const masterDetailLayoutStyles = css`
       min-content resolves to 0, making it impossible to measure the detail's intrinsic
       minimum width from JavaScript.
     */
-    --_detail-area: detail-start / detail-extra-start;
+    --_detail-area: detail-start / detail-extra;
   }
 
   :host(:is([has-detail], [has-detail-placeholder]):not([recalculating-detail-size])) {

packages/master-detail-layout/src/vaadin-master-detail-layout.d.ts

@@ -161,6 +161,15 @@ declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)
    */
   noAnimation: boolean;
 
+  /**
+   * When true, the layout forces the detail area to be shown as an overlay,
+   * even if there is enough space for master and detail to be shown next to
+   * each other using the default (split) mode.
+   *
+   * @attr {boolean} force-overlay
+   */
+  forceOverlay: boolean;
+
   /**
    * When `detailSize` is not explicitly set, re-measures the cached intrinsic size of
    * the detail content by placing it in a min-content CSS grid column, then repeats

packages/master-detail-layout/src/vaadin-master-detail-layout.js

@@ -121,7 +121,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       detailSize: {
         type: String,
         sync: true,
-        observer: '__detailSizeChanged',
       },
 
       /**
@@ -135,7 +134,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       masterSize: {
         type: String,
         sync: true,
-        observer: '__masterSizeChanged',
       },
 
       /**
@@ -162,7 +160,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         value: 'horizontal',
         reflectToAttribute: true,
         sync: true,
-        observer: '__orientationChanged',
       },
 
       /**
@@ -219,6 +216,20 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         reflectToAttribute: true,
       },
 
+      /**
+       * When true, the layout forces the detail area to be shown as an overlay,
+       * even if there is enough space for master and detail to be shown next to
+       * each other using the default (split) mode.
+       *
+       * @attr {boolean} force-overlay
+       */
+      forceOverlay: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        sync: true,
+      },
+
       /** @private */
       __detailCachedSize: {
         type: String,
@@ -287,27 +298,24 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     cancelAnimations(this);
   }
 
-  /** @private */
-  __masterSizeChanged(size, oldSize) {
-    this.style.setProperty('--_master-size', size);
+  /** @protected */
+  updated(props) {
+    super.updated(props);
 
-    if (oldSize != null) {
-      this.recalculateLayout();
+    if (props.has('masterSize')) {
+      this.style.setProperty('--_master-size', this.masterSize);
     }
-  }
 
-  /** @private */
-  __detailSizeChanged(size, oldSize) {
-    this.style.setProperty('--_detail-size', size);
-
-    if (oldSize != null) {
-      this.recalculateLayout();
+    if (props.has('detailSize')) {
+      this.style.setProperty('--_detail-size', this.detailSize);
     }
-  }
 
-  /** @private */
-  __orientationChanged(_orientation, oldOrientation) {
-    if (oldOrientation != null) {
+    if (
+      (props.has('masterSize') && props.get('masterSize') != null) ||
+      (props.has('detailSize') && props.get('detailSize') != null) ||
+      (props.has('orientation') && props.get('orientation') != null) ||
+      (props.has('forceOverlay') && props.get('forceOverlay') != null)
+    ) {
       this.recalculateLayout();
     }
   }
@@ -375,7 +383,8 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     const trackSizesProp = isVertical ? 'gridTemplateRows' : 'gridTemplateColumns';
     const trackSizes = parseTrackSizes(computedStyle[trackSizesProp]);
 
-    const hasOverflow = (hasDetail || hasDetailPlaceholder) && detectOverflow(hostSize, trackSizes);
+    const hasOverflow =
+      (hasDetail || hasDetailPlaceholder) && (this.forceOverlay || detectOverflow(hostSize, trackSizes));
     const focusTarget = !hadDetail && hasDetail && hasOverflow ? getFocusableElements(slottedDetail)[0] : null;
 
     return {

packages/master-detail-layout/test/detail-auto-size.test.js

@@ -16,47 +16,6 @@ describe('detail auto size', () => {
     return layout.style.getPropertyValue('--_detail-cached-size');
   }
 
-  describe('basic', () => {
-    let spy;
-
-    beforeEach(async () => {
-      layout = fixtureSync(`
-        <vaadin-master-detail-layout master-size="200px" detail-size="200px" orientation="horizontal">
-          <div>Master</div>
-          <div slot="detail">Detail</div>
-        </vaadin-master-detail-layout>
-      `);
-      spy = sinon.spy(layout, 'recalculateLayout');
-      await onceResized(layout);
-    });
-
-    it('should not be called when masterSize, detailSize and orientation are provided initially', () => {
-      expect(spy).to.not.be.called;
-    });
-
-    it('should be called when masterSize is changed after initial render', () => {
-      layout.masterSize = '200px';
-      layout.masterSize = '300px';
-      expect(spy).to.be.calledOnce;
-    });
-
-    it('should be called when detailSize is changed after initial render', () => {
-      layout.detailSize = '200px';
-      layout.detailSize = '300px';
-      expect(spy).to.be.calledOnce;
-    });
-
-    it('should be called when orientation is changed after initial render', () => {
-      layout.orientation = 'vertical';
-      expect(spy).to.be.calledOnce;
-    });
-
-    it('should not throw when called on a disconnected element', () => {
-      layout.parentElement.removeChild(layout);
-      expect(() => layout.recalculateLayout()).to.not.throw();
-    });
-  });
-
   describe('Lit element detail', () => {
     const detailElementTag = defineCE(
       class extends LitElement {

packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js

@@ -56,7 +56,7 @@ snapshots["vaadin-master-detail-layout host masterSize and detailSize"] =
 `;
 /* end snapshot vaadin-master-detail-layout host masterSize and detailSize */
 
-snapshots["vaadin-master-detail-layout host expandMaster"] =
+snapshots["vaadin-master-detail-layout host expandMaster"] = 
 `<vaadin-master-detail-layout
   expand-master=""
   has-master=""
@@ -70,7 +70,7 @@ snapshots["vaadin-master-detail-layout host expandMaster"] =
 `;
 /* end snapshot vaadin-master-detail-layout host expandMaster */
 
-snapshots["vaadin-master-detail-layout host expandDetail"] =
+snapshots["vaadin-master-detail-layout host expandDetail"] = 
 `<vaadin-master-detail-layout
   expand-detail=""
   has-master=""
@@ -84,7 +84,7 @@ snapshots["vaadin-master-detail-layout host expandDetail"] =
 `;
 /* end snapshot vaadin-master-detail-layout host expandDetail */
 
-snapshots["vaadin-master-detail-layout shadow default"] =
+snapshots["vaadin-master-detail-layout shadow default"] = 
 `<div
   id="backdrop"
   part="backdrop"
@@ -195,6 +195,27 @@ snapshots["vaadin-master-detail-layout detail removed"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail removed */
 
+snapshots["vaadin-master-detail-layout detail forceOverlay"] = 
+`<vaadin-master-detail-layout
+  force-overlay=""
+  has-detail=""
+  has-master=""
+  master-size="300px"
+  orientation="horizontal"
+  overlay=""
+  overlay-containment="layout"
+  style="--_master-size: 300px;"
+>
+  <div>
+    Master content
+  </div>
+  <div slot="detail">
+    Detail content
+  </div>
+</vaadin-master-detail-layout>
+`;
+/* end snapshot vaadin-master-detail-layout detail forceOverlay */
+
 snapshots["vaadin-master-detail-layout detail placeholder default"] = 
 `<vaadin-master-detail-layout
   has-detail-placeholder=""
@@ -256,7 +277,7 @@ snapshots["vaadin-master-detail-layout nested layouts default"] =
   orientation="horizontal"
   overlay-containment="layout"
   overlay-size="100px"
-  style="--_master-size: 100px; --_overlay-size: 100px; --_detail-cached-size: 501px;"
+  style="--_overlay-size: 100px; --_master-size: 100px; --_detail-cached-size: 501px;"
 >
   <div>
     Master 0
@@ -270,7 +291,7 @@ snapshots["vaadin-master-detail-layout nested layouts default"] =
     overlay-containment="layout"
     overlay-size="100px"
     slot="detail"
-    style="--_master-size: 100px; --_detail-size: 400px; --_overlay-size: 100px;"
+    style="--_overlay-size: 100px; --_master-size: 100px; --_detail-size: 400px;"
   >
     <div>
       Master 1
@@ -283,7 +304,7 @@ snapshots["vaadin-master-detail-layout nested layouts default"] =
       overlay-containment="layout"
       overlay-size="100px"
       slot="detail"
-      style="--_master-size: 100px; --_overlay-size: 100px; --_detail-cached-size: 201px;"
+      style="--_overlay-size: 100px; --_master-size: 100px; --_detail-cached-size: 201px;"
     >
       <div>
         Master 2
@@ -321,7 +342,7 @@ snapshots["vaadin-master-detail-layout nested layouts overflow"] =
   overlay=""
   overlay-containment="layout"
   overlay-size="100px"
-  style="--_master-size: 100px; --_overlay-size: 100px; width: 200px; --_detail-cached-size: 501px;"
+  style="--_overlay-size: 100px; --_master-size: 100px; width: 200px; --_detail-cached-size: 501px;"
 >
   <div>
     Master 0
@@ -337,7 +358,7 @@ snapshots["vaadin-master-detail-layout nested layouts overflow"] =
     overlay-containment="layout"
     overlay-size="100px"
     slot="detail"
-    style="--_master-size: 100px; --_detail-size: 400px; --_overlay-size: 100px;"
+    style="--_overlay-size: 100px; --_master-size: 100px; --_detail-size: 400px;"
   >
     <div>
       Master 1
@@ -352,7 +373,7 @@ snapshots["vaadin-master-detail-layout nested layouts overflow"] =
       overlay-containment="layout"
       overlay-size="100px"
       slot="detail"
-      style="--_master-size: 100px; --_overlay-size: 100px; --_detail-cached-size: 201px;"
+      style="--_overlay-size: 100px; --_master-size: 100px; --_detail-cached-size: 201px;"
     >
       <div>
         Master 2
@@ -382,3 +403,73 @@ snapshots["vaadin-master-detail-layout nested layouts overflow"] =
 `;
 /* end snapshot vaadin-master-detail-layout nested layouts overflow */
 
+snapshots["vaadin-master-detail-layout nested layouts forceOverlay on child"] = 
+`<vaadin-master-detail-layout
+  has-detail=""
+  has-master=""
+  master-size="100px"
+  orientation="horizontal"
+  overlay-containment="layout"
+  overlay-size="100px"
+  style="--_overlay-size: 100px; --_master-size: 100px; --_detail-cached-size: 101px;"
+>
+  <div>
+    Master 0
+  </div>
+  <vaadin-master-detail-layout
+    detail-size="400px"
+    force-overlay=""
+    has-detail=""
+    has-master=""
+    keep-detail-column-offscreen=""
+    master-size="100px"
+    orientation="horizontal"
+    overlay=""
+    overlay-containment="layout"
+    overlay-size="100px"
+    slot="detail"
+    style="--_overlay-size: 100px; --_master-size: 100px; --_detail-size: 400px;"
+  >
+    <div>
+      Master 1
+    </div>
+    <vaadin-master-detail-layout
+      has-detail=""
+      has-master=""
+      keep-detail-column-offscreen=""
+      master-size="100px"
+      orientation="horizontal"
+      overlay=""
+      overlay-containment="layout"
+      overlay-size="100px"
+      slot="detail"
+      style="--_overlay-size: 100px; --_master-size: 100px; --_detail-cached-size: 201px;"
+    >
+      <div>
+        Master 2
+      </div>
+      <vaadin-master-detail-layout
+        detail-size="100px"
+        has-detail=""
+        has-master=""
+        keep-detail-column-offscreen=""
+        master-size="100px"
+        orientation="horizontal"
+        overlay=""
+        overlay-containment="layout"
+        slot="detail"
+        style="--_master-size: 100px; --_detail-size: 100px;"
+      >
+        <div>
+          Master 3
+        </div>
+        <div slot="detail">
+          Detail
+        </div>
+      </vaadin-master-detail-layout>
+    </vaadin-master-detail-layout>
+  </vaadin-master-detail-layout>
+</vaadin-master-detail-layout>
+`;
+/* end snapshot vaadin-master-detail-layout nested layouts forceOverlay on child */
+