fix(Stack): do not apply flex styles, when not needed

packages/orbit-components/src/Stack/Stack.ct-story.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+import Stack from ".";
+
+export default function StackStory(props: Omit<Props, "children">) {
+  return (
+    <Stack {...props}>
+      <div className="bg-blue-normal text-white-normal flex h-[50px] items-center">First child</div>
+      <div className="bg-blue-dark text-white-normal flex h-[70px] items-center">Second child</div>
+      <div className="bg-blue-darker text-white-normal flex h-[90px] items-center">Third child</div>
+    </Stack>
+  );
+}

packages/orbit-components/src/Stack/Stack.ct.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { DIRECTIONS, SPACINGS } from "../utils/layout/consts";
+import { ALIGN } from "../common/tailwind/alignItems";
+import StackStory from "./Stack.ct-story";
+import { JUSTIFY } from "../common/tailwind/justify";
+import Box from "../Box";
+
+test.describe("visual Stack", () => {
+  test(`Stack default`, async ({ mount }) => {
+    const component = await mount(<StackStory />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  Object.values(SPACINGS).forEach(spacing => {
+    test(`Stack with spacing ${spacing}`, async ({ mount }) => {
+      const component = await mount(<StackStory spacing={spacing} />);
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  test("Stack with inline", async ({ mount }) => {
+    const component = await mount(<StackStory inline />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Stack with gap", async ({ mount }) => {
+    const component = await mount(<StackStory flex legacy={false} />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  Object.values(DIRECTIONS).forEach(direction => {
+    test(`Stack with direction ${direction}`, async ({ mount }) => {
+      const component = await mount(<StackStory direction={direction} />);
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  Object.values(ALIGN).forEach(align => {
+    test(`Stack with align ${align} and direction row`, async ({ mount }) => {
+      const component = await mount(<StackStory align={align} />);
+
+      await expect(component).toHaveScreenshot();
+    });
+
+    test(`Stack with align ${align} and direction column`, async ({ mount }) => {
+      const component = await mount(<StackStory direction="column" align={align} />);
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
+
+  Object.values(JUSTIFY).forEach(justify => {
+    test(`Stack with justify ${justify} and direction row`, async ({ mount }) => {
+      const component = await mount(<StackStory flex justify={justify} />);
+
+      await expect(component).toHaveScreenshot();
+    });
+
+    test(`Stack with justify ${justify} and direction column`, async ({ mount }) => {
+      const component = await mount(
+        <Box height="350px" background="cloudDark">
+          <StackStory flex direction="column" justify={justify} />
+        </Box>,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});