From e68297bc710e74edb2b40ec81a230e2446d59537 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Wed, 4 Oct 2023 19:32:13 +0200 Subject: [PATCH] fix(Stack): flex prop by default false --- packages/orbit-components/src/Stack/README.md | 4 +-- .../src/Stack/__tests__/index.test.tsx | 16 +++++++-- packages/orbit-components/src/Stack/index.tsx | 36 ++++++++++++------- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/packages/orbit-components/src/Stack/README.md b/packages/orbit-components/src/Stack/README.md index b76f5acc0d..dfe5579004 100644 --- a/packages/orbit-components/src/Stack/README.md +++ b/packages/orbit-components/src/Stack/README.md @@ -28,9 +28,9 @@ The table below contains all types of props available in the Stack component. | dataTest | `string` | | Optional prop for testing purposes. | | desktop | [`Object`](#media-queries) | | Object for setting up properties for the desktop viewport. [See Media queries](#media-queries) | | direction | [`enum`](#enum) | | The `flex-direction` of the Stack. [See Functional specs](#functional-specs) | -| flex | `boolean` | `true` | If `true` or you specify some flex attribute, the Stack will use flex attributes. | +| flex | `boolean` | `false` | If `true` or you specify some flex attribute, the Stack will use flex attributes. | | grow | `boolean` | `true` | If `true`, the Stack will have `flex-grow` set to `1`, otherwise it will be `0`. | -| inline | `boolean` | `false` | If `true`, the Stack will have `display` set to `inline-flex`, otherwise it will be `flex`. | +| inline | `boolean` | `false` | If `true`, the Stack will have `display` set to `inline-flex`. | | justify | [`enum`](#enum) | `"start"` | The `justify-content` of the Stack. | | largeDesktop | [`Object`](#media-queries) | | Object for setting up properties for the largeDesktop viewport. [See Media queries](#media-queries) | | largeMobile | [`Object`](#media-queries) | | Object for setting up properties for the largeMobile viewport. [See Media queries](#media-queries) | diff --git a/packages/orbit-components/src/Stack/__tests__/index.test.tsx b/packages/orbit-components/src/Stack/__tests__/index.test.tsx index b69b517ff6..f197be6add 100644 --- a/packages/orbit-components/src/Stack/__tests__/index.test.tsx +++ b/packages/orbit-components/src/Stack/__tests__/index.test.tsx @@ -42,7 +42,7 @@ describe("Stack", () => { it("should turn off grow", () => { render( - +
kek
bur
, @@ -51,9 +51,21 @@ describe("Stack", () => { expect(screen.getByTestId("test")).toHaveStyle(`flex-grow: 0`); }); + it("should be block with spacing", () => { + render( + +
1
+
2
+ , + ); + + expect(screen.getByTestId("test")).toHaveStyle(`display: block`); + expect(screen.getByTestId("test")).toHaveClass("space-y-xl space-x-none block w-full"); + }); + it("should turn on shrink", () => { render( - +
kek
bur
, diff --git a/packages/orbit-components/src/Stack/index.tsx b/packages/orbit-components/src/Stack/index.tsx index f5761e5d90..67ce39480c 100644 --- a/packages/orbit-components/src/Stack/index.tsx +++ b/packages/orbit-components/src/Stack/index.tsx @@ -6,7 +6,7 @@ import cx from "clsx"; import type { Props, CommonProps, Direction, Spacing } from "./types"; import type * as Common from "../common/types"; import { - getDisplayInlineClass, + getDisplayClasses, getDirectionClasses, getAlignItemsClasses, getWrapClasses, @@ -29,6 +29,13 @@ 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; + if (!shouldUseFlex(props) && Boolean(props.spacing)) return true; + return false; +}; + const Stack = (props: Props) => { const { children, @@ -45,7 +52,7 @@ const Stack = (props: Props) => { const viewportProps = { mediumMobile, largeMobile, tablet, desktop, largeDesktop }; const defaultMediaProps = React.useMemo(() => { - const isFlex = shouldUseFlex(props) || props.inline; + const isFlex = shouldUseFlex(props); const { spacing = SPACING.medium, @@ -55,8 +62,8 @@ const Stack = (props: Props) => { justify = JUSTIFY.START, shrink = false, wrap = false, - flex = true, - legacy = false, + flex, + legacy = shouldUseLegacy({ ...props, spacing }), align = ALIGN.START, inline = false, } = props; @@ -132,17 +139,20 @@ const Stack = (props: Props) => { return cx( typeof spaceAfter !== "undefined" && getSpaceAfterClasses(spaceAfter, viewport), - typeof align !== "undefined" && getAlignItemsClasses(align, viewport), - typeof align !== "undefined" && getAlignContentClasses(align, viewport), - typeof wrap !== "undefined" && getWrapClasses(wrap, viewport), - typeof grow !== "undefined" && getGrowClasses(grow, viewport), - typeof shrink !== "undefined" && getShrinkClasses(shrink, viewport), - typeof justify !== "undefined" && getJustifyClasses(justify, viewport), - getDirectionClasses(direction, viewport), + flex || inline + ? [ + getDisplayClasses(inline ? "inline-flex" : "flex", viewport), + typeof align !== "undefined" && getAlignItemsClasses(align, viewport), + typeof align !== "undefined" && getAlignContentClasses(align, viewport), + typeof wrap !== "undefined" && getWrapClasses(wrap, viewport), + typeof grow !== "undefined" && getGrowClasses(grow, viewport), + typeof shrink !== "undefined" && getShrinkClasses(shrink, viewport), + typeof justify !== "undefined" && getJustifyClasses(justify, viewport), + getDirectionClasses(direction, viewport), + ] + : "block", getSpacingClasses(spacing, viewport, direction, legacy), - inline && getDisplayInlineClass(inline, viewport), inline === false && "w-full", - flex && "flex", ); };