Decouple custom margin in centered layout from legacy wide position

REDMINE-20384
codevise · Aug 28, 2023 · 1ff555f · 1ff555f
1 parent 293296b
commit 1ff555f
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 3 deletions.
diff --git a/entry_types/scrolled/package/spec/frontend/Layout-spec.js b/entry_types/scrolled/package/spec/frontend/Layout-spec.js
@@ -681,7 +681,20 @@ describe('Layout', () => {
           expect(container.textContent).toEqual('custom 1 ');
         });
 
-        it('is false if rendered custom margin is not supported by position', () => {
+        it('is true if rendered with xl width with custom margin', () => {
+          const items = [
+            {id: 1, type: 'probeWithCustomMarginProp', props: {width: 2}}
+          ];
+          const {container} = renderInEntry(
+            <Layout sectionProps={{layout: 'center'}} items={items}>
+              {children => children}
+            </Layout>
+          );
+
+          expect(container.textContent).toEqual('custom 1 ');
+        });
+
+        it('is false if rendered with floated position', () => {
           const items = [
             {id: 1, type: 'probeWithCustomMarginProp', position: 'left'}
           ];
@@ -693,6 +706,32 @@ describe('Layout', () => {
 
           expect(container.textContent).toEqual('normal 1 ');
         });
+
+        it('is false if rendered with legacy full position with custom margin', () => {
+          const items = [
+            {id: 1, type: 'probeWithCustomMarginProp', position: 'full'}
+          ];
+          const {container} = renderInEntry(
+            <Layout sectionProps={{layout: 'center'}} items={items}>
+              {children => children}
+            </Layout>
+          );
+
+          expect(container.textContent).toEqual('normal 1 ');
+        });
+
+        it('is false if rendered with full width with custom margin', () => {
+          const items = [
+            {id: 1, type: 'probeWithCustomMarginProp', props: {width: 3}}
+          ];
+          const {container} = renderInEntry(
+            <Layout sectionProps={{layout: 'center'}} items={items}>
+              {children => children}
+            </Layout>
+          );
+
+          expect(container.textContent).toEqual('normal 1 ');
+        });
       });
     });
 
@@ -1076,6 +1115,32 @@ describe('Layout', () => {
       expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['group-full'])).not.toBeNull();
     });
 
+    it('lets width take precedence for legacy wide item', () => {
+      const items = [
+        {id: 2, type: 'probe', position: 'wide', props: {width: 1}}
+      ];
+      const {getByTestId} = renderInEntry(
+        <Layout sectionProps={{layout: 'left'}} items={items}>
+          {children => children}
+        </Layout>
+      );
+
+      expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['width-lg'])).not.toBeNull();
+    });
+
+    it('applies width class to legacy full items', () => {
+      const items = [
+        {id: 2, type: 'probe', position: 'full'}
+      ];
+      const {getByTestId} = renderInEntry(
+        <Layout sectionProps={{layout: 'left'}} items={items}>
+          {children => children}
+        </Layout>
+      );
+
+      expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['width-full'])).not.toBeNull();
+    });
+
     it('applies restrict classes to inline box with negative width', () => {
       const items = [
         {id: 2, type: 'probe', props: {width: -2}}
@@ -1088,6 +1153,32 @@ describe('Layout', () => {
 
       expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
     });
+
+    it('changes xxs to xs for sticky item', () => {
+      const items = [
+        {id: 2, type: 'probe', position: 'sticky', props: {width: -3}}
+      ];
+      const {getByTestId} = renderInEntry(
+        <Layout sectionProps={{layout: 'left'}} items={items}>
+          {children => children}
+        </Layout>
+      );
+
+      expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['restrict-xs'])).not.toBeNull();
+    });
+
+    it('changes full to xl for sticky item', () => {
+      const items = [
+        {id: 2, type: 'probe', position: 'sticky', props: {width: 3}}
+      ];
+      const {getByTestId} = renderInEntry(
+        <Layout sectionProps={{layout: 'left'}} items={items}>
+          {children => children}
+        </Layout>
+      );
+
+      expect(findParentWithClass(getByTestId('probe'), twoColumnStyles['width-xl'])).not.toBeNull();
+    });
   });
 
   describe('width classes in centered variant', () => {

diff --git a/entry_types/scrolled/package/src/frontend/layouts/Center.js b/entry_types/scrolled/package/src/frontend/layouts/Center.js
@@ -147,7 +147,7 @@ function supportsWrappingAroundFloats(item) {
 function hasCustomMargin(item) {
   const position = getPosition(item);
   const {customMargin: elementSupportsCustomMargin} = api.contentElementTypes.getOptions(item.type) || {};
-  return !!elementSupportsCustomMargin && (position === 'inline' || position === 'wide');
+  return !!(elementSupportsCustomMargin && position === 'inline' && getWidth(item) < 3);
 }
 
 function getPosition(item) {

diff --git a/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js b/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js
@@ -178,6 +178,15 @@ const legacyPositionWidths = {
 
 function getWidth(item) {
   return (typeof item.props?.width === 'number') ?
-         item.props.width :
+         clampWidthByPosition(item) :
          legacyPositionWidths[item.position] || 0;
 }
+
+function clampWidthByPosition(item) {
+  if (item.position === 'sticky') {
+    return Math.min(Math.max(item.props?.width || 0, -2), 2);
+  }
+  else {
+    return item.props?.width;
+  }
+}