Merge pull request #2384 from tf/no-sm-box

Apply width restriction per item in TwoColumn

Author: tf

entry_types/scrolled/package/spec/frontend/Layout-spec.js

@@ -537,11 +537,9 @@ describe('Layout', () => {
 
       it('decreases size when inlining wide side elements', () => {
         const items = [
-          {id: 1, type: 'probe', position: 'side', width: -2},
-          {id: 2, type: 'probe', position: 'side', width: -1},
-          {id: 3, type: 'probe', position: 'side'},
-          {id: 4, type: 'probe', position: 'side', width: 1},
-          {id: 5, type: 'probe', position: 'side', width: 2}
+          {id: 1, type: 'probe', position: 'side'},
+          {id: 2, type: 'probe', position: 'side', width: 1},
+          {id: 3, type: 'probe', position: 'side', width: 2}
         ];
         window.matchMedia.mockViewportWidth(500);
         const {container} = renderInEntry(
@@ -564,17 +562,15 @@ describe('Layout', () => {
         );
 
         expect(container.textContent).toEqual(
-          '[inline xs 1 ][inline sm 2 ][inline md 3 4 ][inline lg 5 ]'
+          '[inline md 1 2 ][inline lg 3 ]'
         );
       });
 
       it('decreases size when inlining wide sticky elements', () => {
         const items = [
-          {id: 1, type: 'probe', position: 'sticky', width: -2},
-          {id: 2, type: 'probe', position: 'sticky', width: -1},
-          {id: 3, type: 'probe', position: 'sticky'},
-          {id: 4, type: 'probe', position: 'sticky', width: 1},
-          {id: 5, type: 'probe', position: 'sticky', width: 2}
+          {id: 1, type: 'probe', position: 'sticky'},
+          {id: 2, type: 'probe', position: 'sticky', width: 1},
+          {id: 3, type: 'probe', position: 'sticky', width: 2}
         ];
         window.matchMedia.mockViewportWidth(500);
         const {container} = renderInEntry(
@@ -597,9 +593,10 @@ describe('Layout', () => {
         );
 
         expect(container.textContent).toEqual(
-          '[inline xs 1 ][inline sm 2 ][inline md 3 4 ][inline lg 5 ]'
+          '[inline md 1 2 ][inline lg 3 ]'
         );
       });
+
     });
 
     describe('in center variant', () => {
@@ -1384,6 +1381,56 @@ describe('Layout', () => {
 
       expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
     });
+
+    it('does not decrease size of inlined side element with width below md', () => {
+      const items = [
+        {id: 2, type: 'probe', position: 'side', width: -2}
+      ];
+      window.matchMedia.mockViewportWidth(500);
+      const {getByTestId} = renderInEntry(
+        <Layout sectionProps={{layout: 'left'}} items={items}>
+          {children => children}
+        </Layout>,
+        {
+          seed: {
+            themeOptions: {
+              properties: {
+                root: {
+                  twoColumnStickyBreakpoint: '950px'
+                }
+              }
+            }
+          }
+        }
+      );
+
+      expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
+    });
+
+    it('does not decrease size of inlined sticky element with width below md', () => {
+      const items = [
+        {id: 2, type: 'probe', position: 'sticky', width: -2}
+      ];
+      window.matchMedia.mockViewportWidth(500);
+      const {getByTestId} = renderInEntry(
+        <Layout sectionProps={{layout: 'left'}} items={items}>
+          {children => children}
+        </Layout>,
+        {
+          seed: {
+            themeOptions: {
+              properties: {
+                root: {
+                  twoColumnStickyBreakpoint: '950px'
+                }
+              }
+            }
+          }
+        }
+      );
+
+      expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
+    });
   });
 
   describe('width classes in centered variant', () => {

entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js

@@ -73,11 +73,13 @@ function renderItemGroup(props, box, key) {
                                            styles[`width-${widthName(box.width)}`],
                                            {[styles.customMargin]: box.customMargin})}>
         {props.children(
-          <RestrictWidth width={box.width} alignment={box.alignment}>
-            <ContentElements sectionProps={props.sectionProps}
-                             customMargin={box.customMargin}
-                             items={box.items} />
-          </RestrictWidth>,
+          <ContentElements sectionProps={props.sectionProps}
+                           customMargin={box.customMargin}
+                           items={box.items}>
+            {(item, child) =>
+              restrictWidth(item.effectiveWidth, item.effectiveAlignment, child)
+            }
+          </ContentElements>,
           {
             position: box.position,
             width: box.width,
@@ -94,18 +96,17 @@ function renderItemGroup(props, box, key) {
   }
 }
 
-function RestrictWidth({width, alignment, children}) {
+function restrictWidth(width, alignment, children) {
   if (width >= 0) {
     return children;
   }
-  else {
-    return (
-      <div className={classNames(styles[`restrict-${widthName(width)}`],
-                                 styles[`align-${alignment}`])}>
-        {children}
-      </div>
-    );
-  }
+
+  return (
+    <div className={classNames(styles[`restrict-${widthName(width)}`],
+                               styles[`align-${alignment}`])}>
+      {children}
+    </div>
+  );
 }
 
 function groupItemsByPosition(items, shouldInline, isContentPadded) {
@@ -134,27 +135,28 @@ function groupItemsByPosition(items, shouldInline, isContentPadded) {
       width -= 1;
     }
 
+    const boxWidth = position === 'inline' ? Math.max(width, widths.md) : width;
+
     if (!currentGroup || previousPosition !== position ||
         (onTheSide(position) && currentBox.customMargin !== customMargin) ||
-        currentBox.width !== width) {
+        currentBox.width !== boxWidth) {
       currentBox = null;
 
       if (!(onTheSide(previousPosition) && position === 'inline' && width <= widths.md)) {
         currentGroup = {
-          width: onTheSide(position) ? widths.md : width,
+          width: onTheSide(position) ? widths.md : boxWidth,
           boxes: []
         };
 
         groups.push(currentGroup);
       }
     }
 
-    if (!currentBox || currentBox.customMargin !== customMargin || currentBox.alignment !== alignment) {
+    if (!currentBox || currentBox.customMargin !== customMargin) {
       currentBox = {
         customMargin,
         position,
-        width,
-        alignment,
+        width: boxWidth,
         items: []
       };
 
@@ -171,6 +173,8 @@ function groupItemsByPosition(items, shouldInline, isContentPadded) {
 
     item = {
       ...item,
+      effectiveWidth: width,
+      effectiveAlignment: alignment,
       marginBottom: item.props?.marginBottom
     };