(chore) migrate Storybook to <Flex> usage (#8078)

Co-authored-by: Cameron Joyner <cjoyner@palantir.com>

Author: cameronjoyner

packages/core/src/components/breadcrumbs/Breadcrumbs.stories.tsx

@@ -6,6 +6,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { storybookLayoutDecorator, StoryLabel } from "@storybook-common";
 import React from "react";
 
+import { Flex } from "@blueprintjs/labs";
+
 import { Boundary } from "../../common/boundary";
 
 import { type BreadcrumbProps } from "./breadcrumb";
@@ -67,7 +69,7 @@ export const CollapseFromExample: Story = {
         collapseFrom: { table: { disable: true } },
     },
     render: ({ width, ...args }) => (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
+        <Flex flexDirection="column" gap={4} alignItems="start">
             <div style={{ width }}>
                 <StoryLabel title="Collapse from start (default)" />
                 <Breadcrumbs {...args} collapseFrom={Boundary.START} />
@@ -76,7 +78,7 @@ export const CollapseFromExample: Story = {
                 <StoryLabel title="Collapse from end" />
                 <Breadcrumbs {...args} collapseFrom={Boundary.END} />
             </div>
-        </div>
+        </Flex>
     ),
 };
 
@@ -86,7 +88,7 @@ export const CollapseFromExample: Story = {
 export const OverflowExample: Story = {
     name: "Overflow",
     render: args => (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Flex flexDirection="column" gap={4}>
             <div>
                 <StoryLabel title="Constrained width (300px)" />
                 <div style={{ width: 300 }}>
@@ -99,7 +101,7 @@ export const OverflowExample: Story = {
                     <Breadcrumbs {...args} />
                 </div>
             </div>
-        </div>
+        </Flex>
     ),
 };
 

packages/core/src/components/button/Button.stories.tsx

@@ -5,6 +5,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { storybookLayoutDecorator, StoryLabel } from "@storybook-common";
 
+import { Flex } from "@blueprintjs/labs";
+
 import { Alignment, ButtonVariant, Intent, Size } from "../../common";
 
 import { Button } from "./buttons";
@@ -116,7 +118,7 @@ export const IntentExample: Story = {
         intent: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", gap: 8 }}>
+        <Flex gap={2}>
             {Object.values(Intent)
                 .filter(i => i !== "none")
                 .map(intent => (
@@ -127,7 +129,7 @@ export const IntentExample: Story = {
                         text={intent.charAt(0).toUpperCase() + intent.slice(1)}
                     />
                 ))}
-        </div>
+        </Flex>
     ),
 };
 
@@ -141,7 +143,7 @@ export const VariantExample: Story = {
         variant: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", gap: 8 }}>
+        <Flex gap={2}>
             {Object.values(ButtonVariant).map(variant => (
                 <Button
                     key={variant}
@@ -150,7 +152,7 @@ export const VariantExample: Story = {
                     text={variant.charAt(0).toUpperCase() + variant.slice(1)}
                 />
             ))}
-        </div>
+        </Flex>
     ),
 };
 
@@ -163,11 +165,11 @@ export const SizeExample: Story = {
         size: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <Flex gap={2} alignItems="center">
             {Object.values(Size).map(size => (
                 <Button key={size} {...args} size={size} text={size.charAt(0).toUpperCase() + size.slice(1)} />
             ))}
-        </div>
+        </Flex>
     ),
 };
 
@@ -182,12 +184,12 @@ export const StateExample: Story = {
         loading: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", gap: 8 }}>
+        <Flex gap={2}>
             <Button {...args} text="Default" />
             <Button {...args} active={true} text="Active" />
             <Button {...args} disabled={true} text="Disabled" />
             <Button {...args} loading={true} text="Loading" />
-        </div>
+        </Flex>
     ),
 };
 
@@ -201,12 +203,12 @@ export const IconExample: Story = {
         endIcon: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", gap: 8 }}>
+        <Flex gap={2}>
             <Button {...args} icon="refresh" text="Reset" />
             <Button {...args} icon="user" endIcon="caret-down" text="Profile" />
             <Button {...args} endIcon="arrow-right" text="Next" />
             <Button {...args} icon="edit" text={undefined} aria-label="edit" />
-        </div>
+        </Flex>
     ),
 };
 
@@ -219,7 +221,7 @@ export const AlignmentExample: Story = {
         alignText: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 300 }}>
+        <Flex flexDirection="column" gap={2} style={{ minWidth: 300 }}>
             {Object.values(Alignment).map(alignment => (
                 <Button
                     key={alignment}
@@ -230,7 +232,7 @@ export const AlignmentExample: Story = {
                     text={alignment.charAt(0).toUpperCase() + alignment.slice(1)}
                 />
             ))}
-        </div>
+        </Flex>
     ),
 };
 
@@ -250,10 +252,10 @@ export const FillExample: Story = {
         ),
     ],
     render: args => (
-        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Flex flexDirection="column" gap={2}>
             <Button {...args} fill={true} text="Full Width" />
             <Button {...args} fill={false} text="Auto Width" />
-        </div>
+        </Flex>
     ),
 };
 
@@ -269,16 +271,16 @@ export const AllIntentsAllVariants: Story = {
         loading: { table: { disable: true } },
     },
     render: args => (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Flex flexDirection="column" gap={4}>
             {Object.values(ButtonVariant).map(variant => (
-                <div key={variant} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                <Flex key={variant} flexDirection="column" gap={2}>
                     <StoryLabel title={variant} />
-                    <div style={{ display: "flex", gap: 8 }}>
+                    <Flex gap={2}>
                         {Object.values(Intent).map(intent => (
                             <Button key={intent} {...args} variant={variant} intent={intent} text={intent} />
                         ))}
-                    </div>
-                    <div style={{ display: "flex", gap: 8 }}>
+                    </Flex>
+                    <Flex gap={2}>
                         {Object.values(Intent).map(intent => (
                             <Button
                                 key={intent}
@@ -289,8 +291,8 @@ export const AllIntentsAllVariants: Story = {
                                 text={intent}
                             />
                         ))}
-                    </div>
-                    <div style={{ display: "flex", gap: 8 }}>
+                    </Flex>
+                    <Flex gap={2}>
                         {Object.values(Intent).map(intent => (
                             <Button
                                 key={intent}
@@ -301,8 +303,8 @@ export const AllIntentsAllVariants: Story = {
                                 text={intent}
                             />
                         ))}
-                    </div>
-                    <div style={{ display: "flex", gap: 8 }}>
+                    </Flex>
+                    <Flex gap={2}>
                         {Object.values(Intent).map(intent => (
                             <Button
                                 key={intent}
@@ -313,10 +315,10 @@ export const AllIntentsAllVariants: Story = {
                                 text={intent}
                             />
                         ))}
-                    </div>
-                </div>
+                    </Flex>
+                </Flex>
             ))}
-        </div>
+        </Flex>
     ),
 };