feat(Stack): add useMargin prop and deprecate legacy

useMargin should be used instead of legacy prop
kiwicom · Oct 22, 2024 · 4202c01 · 4202c01
1 parent 6f7f05e
commit 4202c01
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/packages/orbit-components/cypress/integration/pages/stack-mediaquery-props.tsx b/packages/orbit-components/cypress/integration/pages/stack-mediaquery-props.tsx
@@ -13,13 +13,13 @@ export default function StackMediaProps() {
   return (
     <Stack
       spacing="none"
-      legacy
+      useMargin
       dataTest="test"
       mediumMobile={{ spacing: "50" }}
       largeMobile={{ spacing: "100", direction: "column" }}
       tablet={{ spacing: "200", direction: "row" }}
       desktop={{ spacing: "300" }}
-      largeDesktop={{ spacing: "400", legacy: false }}
+      largeDesktop={{ spacing: "400", useMargin: false }}
     >
       <div style={{ background: "blue", ...commonStyles }}>1</div>
       <div style={{ background: "red", ...commonStyles }}>2</div>

diff --git a/packages/orbit-components/src/Stack/README.md b/packages/orbit-components/src/Stack/README.md
@@ -40,7 +40,7 @@ The table below contains all types of props available in the Stack component.
 | spaceAfter   | `enum`                     |            | Additional `padding` to bottom of the Stack.                                                        |
 | tablet       | [`Object`](#media-queries) |            | Object for setting up properties for the tablet viewport. [See Media queries](#media-queries)       |
 | wrap         | `boolean`                  | `false`    | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.            |
-| legacy       | `boolean`                  | `false`    | If `true`, the Stack will be using margins instead of gap                                           |
+| useMargin    | `boolean`                  | `false`    | If `true`, the Stack will be using margins instead of gap                                           |
 
 ### Media Queries
 

diff --git a/packages/orbit-components/src/Stack/Stack.stories.tsx b/packages/orbit-components/src/Stack/Stack.stories.tsx
@@ -651,7 +651,7 @@ export const Playground: Story = {
   args: {
     as: "div",
     flex: true,
-    legacy: false,
+    useMargin: false,
     basis: "",
     align: ALIGNS.START,
     justify: JUSTIFY.START,

diff --git a/packages/orbit-components/src/Stack/index.tsx b/packages/orbit-components/src/Stack/index.tsx
@@ -29,9 +29,9 @@ const shouldUseFlex = (props: CommonProps & Common.SpaceAfter) =>
     .map(prop => ["spacing", "spaceAfter", "dataTest", "children"].includes(prop))
     .includes(false);
 
-// use margins instead of gap, works with block
-const shouldUseLegacy = (props: CommonProps & Common.SpaceAfter) => {
-  if (props.legacy) return true;
+// use margins instead of gap to work with display:block
+const shouldUseMargin = (props: CommonProps & Common.SpaceAfter) => {
+  if (props.useMargin || props.legacy) return true;
   if (!shouldUseFlex(props) && Boolean(props.spacing)) return true;
   return false;
 };
@@ -63,14 +63,14 @@ const Stack = (props: Props) => {
       shrink = false,
       wrap = false,
       flex,
-      legacy = shouldUseLegacy({ ...props, spacing }),
+      useMargin = shouldUseMargin({ ...props, spacing }),
       align = ALIGN.START,
       inline = false,
     } = props;
 
     return {
       flex: flex || isFlex,
-      legacy,
+      useMargin,
       direction,
       spacing,
       grow,
@@ -134,7 +134,7 @@ const Stack = (props: Props) => {
       spacing,
       inline,
       flex,
-      legacy,
+      useMargin,
     } = opts;
 
     return cx(
@@ -149,7 +149,7 @@ const Stack = (props: Props) => {
         getDirectionClasses(direction, viewport),
       ],
       flex || inline ? getDisplayClasses(inline ? "inline-flex" : "flex", viewport) : "block",
-      getSpacingClasses(spacing, viewport, direction, legacy),
+      getSpacingClasses(spacing, viewport, direction, useMargin),
       inline === false && "w-full",
     );
   };
@@ -170,7 +170,7 @@ const Stack = (props: Props) => {
               flex: getProperty("flex", viewports, index),
               direction: getProperty("direction", viewports, index),
               spacing: getProperty("spacing", viewports, index),
-              legacy: getProperty("legacy", viewports, index),
+              useMargin: getProperty("useMargin", viewports, index),
             },
             viewport,
           );

diff --git a/packages/orbit-components/src/Stack/types.d.ts b/packages/orbit-components/src/Stack/types.d.ts
@@ -46,7 +46,11 @@ export interface CommonProps extends Common.SpaceAfter {
   readonly align?: Align;
   readonly justify?: Justify;
   readonly spacing?: Spacing;
+  /**
+   * @deprecated This prop is deprecated. Use `useMargin` instead.
+   */
   readonly legacy?: boolean;
+  readonly useMargin?: boolean;
 }
 
 export interface Props extends CommonProps, Common.Globals {