refactor!: set expand property default to master

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

@@ -132,7 +132,7 @@ declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)
   /**
    * Controls which column(s) expand to fill available space.
    * Possible values: `'master'`, `'detail'`, `'both'`.
-   * Defaults to `'both'`.
+   * Defaults to `'master'`.
    */
   expand: 'master' | 'detail' | 'both';
 

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

@@ -175,11 +175,11 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       /**
        * Controls which column(s) expand to fill available space.
        * Possible values: `'master'`, `'detail'`, `'both'`.
-       * Defaults to `'both'`.
+       * Defaults to `'master'`.
        */
       expand: {
         type: String,
-        value: 'both',
+        value: 'master',
         reflectToAttribute: true,
         sync: true,
       },

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

@@ -3,7 +3,7 @@ export const snapshots = {};
 
 snapshots["vaadin-master-detail-layout host default"] = 
 `<vaadin-master-detail-layout
-  expand="both"
+  expand="master"
   orientation="horizontal"
   overlay-containment="layout"
 >
@@ -22,7 +22,7 @@ snapshots["vaadin-master-detail-layout host default"] =
 
 snapshots["vaadin-master-detail-layout host masterSize"] = 
 `<vaadin-master-detail-layout
-  expand="both"
+  expand="master"
   orientation="horizontal"
   overlay-containment="layout"
   style="--_master-size: 300px;"
@@ -42,7 +42,7 @@ snapshots["vaadin-master-detail-layout host masterSize"] =
 
 snapshots["vaadin-master-detail-layout host detailSize"] = 
 `<vaadin-master-detail-layout
-  expand="both"
+  expand="master"
   orientation="horizontal"
   overlay-containment="layout"
   style="--_detail-size: 400px;"
@@ -62,7 +62,7 @@ snapshots["vaadin-master-detail-layout host detailSize"] =
 
 snapshots["vaadin-master-detail-layout host masterSize and detailSize"] = 
 `<vaadin-master-detail-layout
-  expand="both"
+  expand="master"
   orientation="horizontal"
   overlay-containment="layout"
   style="--_master-size: 300px; --_detail-size: 400px;"
@@ -82,7 +82,7 @@ snapshots["vaadin-master-detail-layout host masterSize and detailSize"] =
 
 snapshots["vaadin-master-detail-layout host no detail"] = 
 `<vaadin-master-detail-layout
-  expand="both"
+  expand="master"
   has-detail-placeholder=""
   orientation="horizontal"
   overlay-containment="layout"
@@ -99,7 +99,7 @@ snapshots["vaadin-master-detail-layout host no detail"] =
 
 snapshots["vaadin-master-detail-layout host no detail placeholder"] = 
 `<vaadin-master-detail-layout
-  expand="both"
+  expand="master"
   has-detail=""
   orientation="horizontal"
   overlay-containment="layout"
@@ -152,7 +152,7 @@ snapshots["vaadin-master-detail-layout shadow default"] =
 snapshots["vaadin-master-detail-layout overlay mode default"] = 
 `<vaadin-master-detail-layout
   detail-size="300px"
-  expand="both"
+  expand="master"
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -168,7 +168,7 @@ snapshots["vaadin-master-detail-layout overlay mode default"] =
 snapshots["vaadin-master-detail-layout overlay mode with detail"] = 
 `<vaadin-master-detail-layout
   detail-size="300px"
-  expand="both"
+  expand="master"
   has-detail=""
   keep-detail-column-offscreen=""
   master-size="300px"
@@ -190,7 +190,7 @@ snapshots["vaadin-master-detail-layout overlay mode with detail"] =
 snapshots["vaadin-master-detail-layout overlay mode with detail placeholder"] = 
 `<vaadin-master-detail-layout
   detail-size="300px"
-  expand="both"
+  expand="master"
   has-detail-placeholder=""
   master-size="300px"
   orientation="horizontal"

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

@@ -78,13 +78,8 @@ describe('vaadin-master-detail-layout', () => {
   });
 
   describe('expand', () => {
-    it('should be set to both by default', () => {
-      expect(layout.expand).to.equal('both');
-    });
-
-    it('should reflect expand property to attribute', () => {
-      layout.expand = 'master';
-      expect(layout.getAttribute('expand')).to.equal('master');
+    it('should be set to master by default', () => {
+      expect(layout.expand).to.equal('master');
     });
   });
 

packages/master-detail-layout/test/split-mode.test.js

@@ -28,7 +28,11 @@ describe('split mode', () => {
       await onceResized(layout);
     });
 
-    describe('expand both (default)', () => {
+    describe('expand both', () => {
+      beforeEach(() => {
+        layout.expand = 'both';
+      });
+
       it('should expand both columns equally when both sizes are the same', async () => {
         layout.masterSize = '200px';
         layout.detailSize = '200px';
@@ -59,9 +63,8 @@ describe('split mode', () => {
       });
     });
 
-    describe('expand master', () => {
+    describe('expand master (default)', () => {
       it('should fix detail and expand master to fill the rest', async () => {
-        layout.expand = 'master';
         layout.masterSize = '100px';
         layout.detailSize = '200px';
         await onceResized(layout);
@@ -72,8 +75,11 @@ describe('split mode', () => {
     });
 
     describe('expand detail', () => {
-      it('should fix master and expand detail to fill the rest', async () => {
+      beforeEach(() => {
         layout.expand = 'detail';
+      });
+
+      it('should fix master and expand detail to fill the rest', async () => {
         layout.masterSize = '200px';
         layout.detailSize = '100px';
         await onceResized(layout);
@@ -97,7 +103,11 @@ describe('split mode', () => {
       await onceResized(layout);
     });
 
-    describe('expand both (default)', () => {
+    describe('expand both', () => {
+      beforeEach(() => {
+        layout.expand = 'both';
+      });
+
       it('should expand both rows equally when both sizes are the same', async () => {
         layout.masterSize = '200px';
         layout.detailSize = '200px';
@@ -108,9 +118,8 @@ describe('split mode', () => {
       });
     });
 
-    describe('expand master', () => {
+    describe('expand master (default)', () => {
       it('should fix detail and expand master to fill the rest', async () => {
-        layout.expand = 'master';
         layout.masterSize = '100px';
         layout.detailSize = '200px';
         await onceResized(layout);
@@ -121,8 +130,11 @@ describe('split mode', () => {
     });
 
     describe('expand detail', () => {
-      it('should fix master and expand detail to fill the rest', async () => {
+      beforeEach(() => {
         layout.expand = 'detail';
+      });
+
+      it('should fix master and expand detail to fill the rest', async () => {
         layout.masterSize = '200px';
         layout.detailSize = '100px';
         await onceResized(layout);

packages/master-detail-layout/test/visual/base/master-detail-layout.test.js

@@ -58,6 +58,18 @@ describe('master-detail-layout', () => {
             await visualDiff(div, `${dir}-split-default`);
           });
 
+          it('expand both', async () => {
+            mdl.expand = 'both';
+            await onceResized(mdl);
+            await visualDiff(div, `${dir}-split-expand-both`);
+          });
+
+          it('expand detail', async () => {
+            mdl.expand = 'detail';
+            await onceResized(mdl);
+            await visualDiff(div, `${dir}-split-expand-detail`);
+          });
+
           it('dark', async () => {
             document.documentElement.style.setProperty('color-scheme', 'dark');
             await visualDiff(div, `${dir}-split-dark`);
@@ -82,6 +94,12 @@ describe('master-detail-layout', () => {
             await visualDiff(document.body, `${dir}-overlay-viewport`);
           });
 
+          it('overlay size', async () => {
+            mdl.overlaySize = '100%';
+            await onceResized(mdl);
+            await visualDiff(div, `${dir}-overlay-size`);
+          });
+
           it('dark', async () => {
             document.documentElement.style.setProperty('color-scheme', 'dark');
             await visualDiff(div, `${dir}-overlay-dark`);
@@ -107,7 +125,6 @@ describe('master-detail-layout', () => {
     });
 
     it('default', async () => {
-      div.style.width = '800px';
       await onceResized(mdl);
       await visualDiff(div, 'detail-placeholder');
     });
@@ -117,5 +134,17 @@ describe('master-detail-layout', () => {
       await onceResized(mdl);
       await visualDiff(div, 'detail-placeholder-overflow');
     });
+
+    it('expand both', async () => {
+      mdl.expand = 'both';
+      await onceResized(mdl);
+      await visualDiff(div, `detail-placeholder-expand-both`);
+    });
+
+    it('expand detail', async () => {
+      mdl.expand = 'detail';
+      await onceResized(mdl);
+      await visualDiff(div, `detail-placeholder-expand-detail`);
+    });
   });
 });