Merge pull request #1815 from lowdefy/remove-borders

Remove highlightBorders
lowdefy · May 13, 2024 · e7ed974 · e7ed974
2 parents bed99b0 + 1e5995a
commit e7ed974
Show file tree

Hide file tree

Showing 22 changed files with 423 additions and 2,892 deletions.
diff --git a/.changeset/large-pens-dress.md b/.changeset/large-pens-dress.md
@@ -0,0 +1,6 @@
+---
+'@lowdefy/client': patch
+'@lowdefy/layout': patch
+---
+
+Move layoutParamsToArea into Area component.
diff --git a/.changeset/thin-zebras-hear.md b/.changeset/thin-zebras-hear.md
@@ -0,0 +1,6 @@
+---
+'@lowdefy/client': patch
+'@lowdefy/layout': patch
+---
+
+Remove highlightBorders from layout.
diff --git a/packages/client/src/block/CategorySwitch.js b/packages/client/src/block/CategorySwitch.js
@@ -70,7 +70,6 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy }) => {
         <BlockLayout
           id={`bl-${block.blockId}`}
           blockStyle={block.eval.style}
-          highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
           layout={block.eval.layout}
           makeCssClass={makeCssClass}
         >
@@ -102,7 +101,6 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy }) => {
         <BlockLayout
           id={`bl-${block.blockId}`}
           blockStyle={block.eval.style}
-          highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
           layout={block.eval.layout}
           makeCssClass={makeCssClass}
         >

diff --git a/packages/client/src/block/Container.js b/packages/client/src/block/Container.js
@@ -15,7 +15,7 @@
 */
 
 import React from 'react';
-import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
+import { Area, BlockLayout } from '@lowdefy/layout';
 import { makeCssClass } from '@lowdefy/block-utils';
 
 import Block from './Block.js';
@@ -27,35 +27,31 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy }) => {
   Object.keys(areas).forEach((areaKey, i) => {
     content[areaKey] = (areaStyle) => (
       <Area
+        area={block.eval.areas[areaKey]}
+        areaKey={areaKey}
+        areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
         id={`ar-${block.blockId}-${areaKey}`}
         key={`ar-${block.blockId}-${areaKey}-${i}`}
-        area={layoutParamsToArea({
-          area: block.eval.areas[areaKey],
-          areaKey,
-          layout: block.eval.layout,
-        })}
-        areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
-        highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
+        layout={block.eval.layout}
         makeCssClass={makeCssClass}
       >
         {areas[areaKey].blocks.map((bl, k) => (
           <Block
-            key={`co-${bl.blockId}-${k}`}
-            Blocks={Blocks.subBlocks[block.id][0]}
             block={bl}
+            Blocks={Blocks.subBlocks[block.id][0]}
             context={context}
-            parentLoading={loading}
+            key={`co-${bl.blockId}-${k}`}
             lowdefy={lowdefy}
+            parentLoading={loading}
           />
         ))}
       </Area>
     );
   });
   return (
     <BlockLayout
-      id={`bl-${block.blockId}`}
       blockStyle={block.eval.style}
-      highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
+      id={`bl-${block.blockId}`}
       layout={block.eval.layout}
       makeCssClass={makeCssClass}
     >

diff --git a/packages/client/src/block/List.js b/packages/client/src/block/List.js
@@ -15,7 +15,7 @@
 */
 
 import React from 'react';
-import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
+import { Area, BlockLayout } from '@lowdefy/layout';
 import { makeCssClass } from '@lowdefy/block-utils';
 
 import Block from './Block.js';
@@ -27,25 +27,22 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy }) => {
     Object.keys(SBlock.areas).forEach((areaKey) => {
       content[areaKey] = (areaStyle) => (
         <Area
+          area={block.eval.areas[areaKey]}
+          areaKey={areaKey}
+          areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
           id={`ar-${block.blockId}-${SBlock.id}-${areaKey}`}
           key={`ar-${block.blockId}-${SBlock.id}-${areaKey}`}
-          area={layoutParamsToArea({
-            area: block.eval.areas[areaKey],
-            areaKey,
-            layout: block.eval.layout,
-          })}
-          areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
-          highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
+          layout={block.eval.layout}
           makeCssClass={makeCssClass}
         >
           {SBlock.areas[areaKey].blocks.map((bl) => (
             <Block
-              key={`ls-${bl.blockId}`}
-              Blocks={SBlock}
               block={bl}
+              Blocks={SBlock}
               context={context}
-              parentLoading={loading}
+              key={`ls-${bl.blockId}`}
               lowdefy={lowdefy}
+              parentLoading={loading}
             />
           ))}
         </Area>
@@ -55,9 +52,8 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy }) => {
   });
   return (
     <BlockLayout
-      id={`bl-${block.blockId}`}
       blockStyle={block.eval.style}
-      highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
+      id={`bl-${block.blockId}`}
       layout={block.eval.layout}
       makeCssClass={makeCssClass}
     >

diff --git a/packages/client/src/block/LoadingBlock.js b/packages/client/src/block/LoadingBlock.js
@@ -84,7 +84,6 @@ const LoadingBlock = ({
       return (
         <BlockLayout
           blockStyle={skeleton.style ?? blockStyle}
-          highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
           id={`s-bl-${blockId}-${skeleton.id}`}
           layout={skeleton.layout ?? blockLayout}
           makeCssClass={makeCssClass}

diff --git a/packages/client/src/block/LoadingContainer.js b/packages/client/src/block/LoadingContainer.js
@@ -15,7 +15,7 @@
 */
 
 import React from 'react';
-import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
+import { Area, BlockLayout } from '@lowdefy/layout';
 import { makeCssClass } from '@lowdefy/block-utils';
 
 import LoadingBlock from './LoadingBlock.js';
@@ -35,15 +35,12 @@ const LoadingContainer = ({
   Object.keys(skeleton.areas).forEach((areaKey, i) => {
     content[areaKey] = (areaStyle) => (
       <Area
-        area={layoutParamsToArea({
-          area: skeleton.areas[areaKey],
-          areaKey,
-          layout: skeleton.layout ?? blockLayout,
-        })}
+        area={skeleton.areas[areaKey]}
+        areaKey={areaKey}
         areaStyle={[areaStyle, skeleton.areas[areaKey]?.style]}
-        highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
         id={`s-ar-${blockId}-${skeleton.id}-${areaKey}`}
         key={`s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`}
+        layout={skeleton.layout ?? blockLayout}
         makeCssClass={makeCssClass}
       >
         {skeleton.areas[areaKey].blocks.map((skl, k) => (
@@ -61,7 +58,6 @@ const LoadingContainer = ({
   return (
     <BlockLayout
       blockStyle={skeleton.style ?? blockStyle}
-      highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
       id={`s-bl-${blockId}-${skeleton.id}`}
       layout={skeleton.layout ?? blockLayout}
       makeCssClass={makeCssClass}

diff --git a/packages/client/src/block/LoadingList.js b/packages/client/src/block/LoadingList.js
@@ -15,7 +15,7 @@
 */
 
 import React from 'react';
-import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
+import { Area, BlockLayout } from '@lowdefy/layout';
 import { makeCssClass } from '@lowdefy/block-utils';
 
 import LoadingBlock from './LoadingBlock.js';
@@ -36,15 +36,12 @@ const LoadingList = ({
     Object.keys(skeleton.areas).forEach((areaKey, i) => {
       content[areaKey] = (areaStyle) => (
         <Area
-          area={layoutParamsToArea({
-            area: skeleton.areas[areaKey],
-            areaKey,
-            layout: skeleton.layout ?? blockLayout,
-          })}
+          area={skeleton.areas[areaKey]}
+          areaKey={areaKey}
           areaStyle={[areaStyle, skeleton.areas[areaKey]?.style]}
-          highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
           id={`s-ar-${blockId}-${skeleton.id}-${areaKey}`}
           key={`s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`}
+          layout={skeleton.layout ?? blockLayout}
           makeCssClass={makeCssClass}
         >
           {skeleton.areas[areaKey].blocks.map((skl, k) => (
@@ -64,7 +61,6 @@ const LoadingList = ({
   return (
     <BlockLayout
       blockStyle={skeleton.style ?? blockStyle}
-      highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
       id={`s-bl-${blockId}-${skeleton.id}`}
       layout={skeleton.layout ?? blockLayout}
       makeCssClass={makeCssClass}

diff --git a/packages/layout/src/Area.js b/packages/layout/src/Area.js
@@ -19,25 +19,28 @@ import { Row } from 'antd';
 import { blockDefaultProps } from '@lowdefy/block-utils';
 
 import gutterSetup from './gutterSetup.js';
-
-const Area = ({ area = {}, areaStyle, children, highlightBorders, id, makeCssClass }) => (
-  <Row
-    id={id}
-    align={area.align}
-    className={makeCssClass(areaStyle)}
-    gutter={gutterSetup(area.gutter)}
-    justify={area.justify}
-    style={{
-      // antd keeps bottom margin which can cause overflow issues.
-      flexDirection: area.direction,
-      flexWrap: area.wrap,
-      overflow: area.overflow,
-      border: highlightBorders && '1px dashed red',
-    }}
-  >
-    {children}
-  </Row>
-);
+import layoutParamsToArea from './layoutParamsToArea.js';
+
+const Area = ({ area = {}, areaKey, areaStyle, children, id, layout, makeCssClass }) => {
+  const derivedArea = layoutParamsToArea({ area, areaKey, layout });
+  return (
+    <Row
+      id={id}
+      align={derivedArea.align}
+      className={makeCssClass(areaStyle)}
+      gutter={gutterSetup(derivedArea.gutter)}
+      justify={derivedArea.justify}
+      style={{
+        // antd keeps bottom margin which can cause overflow issues.
+        flexDirection: derivedArea.direction,
+        flexWrap: derivedArea.wrap,
+        overflow: derivedArea.overflow,
+      }}
+    >
+      {children}
+    </Row>
+  );
+};
 
 Area.defaultProps = blockDefaultProps;
 

diff --git a/packages/layout/src/BlockLayout.js b/packages/layout/src/BlockLayout.js
@@ -32,7 +32,7 @@ const alignSelf = (align) => {
   return align;
 };
 
-const BlockLayout = ({ id, blockStyle, children, highlightBorders, layout = {}, makeCssClass }) => {
+const BlockLayout = ({ id, blockStyle, children, layout = {}, makeCssClass }) => {
   if (layout.disabled) {
     return (
       <div id={id} className={makeCssClass(blockStyle)}>
@@ -45,7 +45,6 @@ const BlockLayout = ({ id, blockStyle, children, highlightBorders, layout = {},
       {...deriveLayout(layout)}
       style={{
         alignSelf: alignSelf(layout.align),
-        border: highlightBorders && '1px dashed #8eccf5',
       }}
       id={id}
       className={makeCssClass(blockStyle)}

diff --git a/packages/layout/src/index.js b/packages/layout/src/index.js
@@ -16,6 +16,5 @@
 
 import Area from './Area.js';
 import BlockLayout from './BlockLayout.js';
-import layoutParamsToArea from './layoutParamsToArea.js';
 
-export { Area, BlockLayout, layoutParamsToArea };
+export { Area, BlockLayout };
diff --git a/packages/layout/src/layoutParamsToArea.js b/packages/layout/src/layoutParamsToArea.js
@@ -21,11 +21,11 @@ const layoutParamsToArea = ({ areaKey, area = {}, layout = {} }) => {
     return area;
   }
   area.align = type.isNone(area.align) ? layout.contentAlign : area.align;
-  area.justify = type.isNone(area.justify) ? layout.contentJustify : area.justify;
   area.direction = type.isNone(area.direction) ? layout.contentDirection : area.direction;
-  area.wrap = type.isNone(area.wrap) ? layout.contentWrap : area.wrap;
-  area.overflow = type.isNone(area.overflow) ? layout.contentOverflow : area.overflow;
   area.gutter = type.isNone(area.gutter) ? layout.contentGutter : area.gutter;
+  area.justify = type.isNone(area.justify) ? layout.contentJustify : area.justify;
+  area.overflow = type.isNone(area.overflow) ? layout.contentOverflow : area.overflow;
+  area.wrap = type.isNone(area.wrap) ? layout.contentWrap : area.wrap;
   return area;
 };
 

diff --git a/packages/layout/src/tests/__snapshots__/basic.test.js.snap b/packages/layout/src/tests/__snapshots__/basic.test.js.snap
@@ -5,7 +5,6 @@ exports[`Button 1`] = `
   <div
     class="ant-col emotion-0 ant-col-xs-24 ant-col-sm-24 ant-col-md-24"
     id="bl-Button23456"
-    style="border: 1px dashed #8eccf5;"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -41,7 +40,6 @@ exports[`Input 1`] = `
   <div
     class="ant-col emotion-0 ant-col-xs-24 ant-col-sm-24 ant-col-md-24"
     id="bl-Input23456"
-    style="border: 1px dashed #8eccf5;"
   >
     <input
       class="ant-input"
@@ -58,7 +56,6 @@ exports[`Input 2`] = `
   <div
     class="ant-col emotion-0 ant-col-xs-24 ant-col-sm-24 ant-col-md-4"
     id="bl-Input23456"
-    style="border: 1px dashed #8eccf5;"
   >
     <input
       class="ant-input"
@@ -75,7 +72,6 @@ exports[`Paragraph span: 12 1`] = `
   <div
     class="ant-col emotion-0 ant-col-xs-24 ant-col-sm-24 ant-col-md-12"
     id="bl-Paragraph span: 1223456"
-    style="border: 1px dashed #8eccf5;"
   >
     <div
       id="Paragraph span: 1223456"
@@ -96,7 +92,6 @@ exports[`Paragraph style 1`] = `
   <div
     class="ant-col emotion-0 ant-col-xs-24 ant-col-sm-24 ant-col-md-24"
     id="bl-Paragraph style23456"
-    style="border: 1px dashed #8eccf5;"
   >
     <div
       id="Paragraph style23456"