Rename Stack to Flex

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Box/Box.stories.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from './Box';
-import { Stack } from '../Stack';
+import { Flex } from '../Flex';
 import { Inline } from '../Inline';
 
 const meta = {
@@ -81,7 +81,7 @@ const CardDisplay = ({ children }: { children?: React.ReactNode }) => {
 
 export const Display: Story = {
   render: args => (
-    <Stack align="center">
+    <Flex align="center">
       <Inline>
         <Box display="block" {...args}>
           <CardDisplay>Block</CardDisplay>
@@ -96,7 +96,7 @@ export const Display: Story = {
       <Box display={{ initial: 'block', md: 'inline' }} {...args}>
         <CardDisplay>Responsive</CardDisplay>
       </Box>
-    </Stack>
+    </Flex>
   ),
 };
 
@@ -116,7 +116,7 @@ export const Padding: Story = {
     },
   },
   render: args => (
-    <Stack align="center" gap="md">
+    <Flex align="center" gap="md">
       <Inline alignY="center" gap="md">
         <Box p="3" style={styleInsideBox}>
           <Box {...args}>Padding</Box>
@@ -142,7 +142,7 @@ export const Padding: Story = {
           <Box {...args}>Padding Left</Box>
         </Box>
       </Inline>
-    </Stack>
+    </Flex>
   ),
 };
 
@@ -156,7 +156,7 @@ export const Margin: Story = {
     },
   },
   render: args => (
-    <Stack align="center" gap="md">
+    <Flex align="center" gap="md">
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
           <Box m="3" {...args}>
@@ -196,6 +196,6 @@ export const Margin: Story = {
           </Box>
         </Box>
       </Inline>
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 import { Inline } from '../Inline';
-import { Stack } from '../Stack';
+import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { ButtonProps } from './types';
 
@@ -95,11 +95,11 @@ export const FullWidth: Story = {
     children: 'Button',
   },
   render: args => (
-    <Stack style={{ width: '300px' }}>
+    <Flex style={{ width: '300px' }}>
       <Button {...args} iconStart="cloud" />
       <Button {...args} iconEnd="chevronRight" />
       <Button {...args} iconStart="cloud" iconEnd="chevronRight" />
-    </Stack>
+    </Flex>
   ),
 };
 
@@ -132,9 +132,9 @@ export const Playground: Story = {
     children: 'Button',
   },
   render: () => (
-    <Stack>
+    <Flex>
       {variants.map(variant => (
-        <Stack key={variant}>
+        <Flex key={variant}>
           <Text>{variant}</Text>
           {['small', 'medium'].map(size => (
             <Inline alignY="center" key={size}>
@@ -163,8 +163,8 @@ export const Playground: Story = {
               </Button>
             </Inline>
           ))}
-        </Stack>
+        </Flex>
       ))}
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/components/Checkbox/Checkbox.stories.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from './Checkbox';
 import { Inline } from '../Inline';
-import { Stack } from '../Stack';
+import { Flex } from '../Flex';
 import { Text } from '../Text';
 
 const meta = {
@@ -51,7 +51,7 @@ export const AllVariants: Story = {
 
 export const Playground: Story = {
   render: () => (
-    <Stack>
+    <Flex>
       <Text>All variants</Text>
       <Inline alignY="center">
         <Checkbox />
@@ -59,6 +59,6 @@ export const Playground: Story = {
         <Checkbox label="Checkbox" />
         <Checkbox label="Checkbox" checked />
       </Inline>
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/components/Flex/Flex.props.ts

@@ -25,7 +25,7 @@ const directionValues = [
 ] as const;
 
 /** @public */
-const stackPropDefs = {
+const flexPropDefs = {
   align: {
     type: 'enum',
     className: 'cu-align',
@@ -44,7 +44,7 @@ const stackPropDefs = {
 };
 
 /** @public */
-type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
+type FlexOwnProps = GetPropDefTypes<typeof flexPropDefs>;
 
-export { stackPropDefs };
-export type { StackOwnProps };
+export { flexPropDefs };
+export type { FlexOwnProps };

packages/canon/src/components/Flex/Flex.stories.tsx

@@ -16,11 +16,11 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Stack } from './Stack';
+import { Flex } from './Flex';
 
 const meta = {
-  title: 'Components/Stack',
-  component: Stack,
+  title: 'Components/Flex',
+  component: Flex,
   argTypes: {
     align: {
       control: 'inline-radio',
@@ -38,7 +38,7 @@ const meta = {
     gap: '4',
     children: 'hello world',
   },
-} satisfies Meta<typeof Stack>;
+} satisfies Meta<typeof Flex>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -81,60 +81,60 @@ export const RowDirection: Story = {
 
 export const AlignLeft: Story = {
   render: () => (
-    <Stack align="start">
+    <Flex align="start">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
-    </Stack>
+    </Flex>
   ),
 };
 
 export const AlignCenter: Story = {
   render: () => (
-    <Stack align="center">
+    <Flex align="center">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
-    </Stack>
+    </Flex>
   ),
 };
 
 export const AlignRight: Story = {
   render: () => (
-    <Stack align="end">
+    <Flex align="end">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
-    </Stack>
+    </Flex>
   ),
 };
 
 export const ResponsiveAlign: Story = {
   render: () => (
-    <Stack align={{ xs: 'start', md: 'center', lg: 'end' }}>
+    <Flex align={{ xs: 'start', md: 'center', lg: 'end' }}>
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
-    </Stack>
+    </Flex>
   ),
 };
 
 export const ResponsiveGap: Story = {
   render: () => (
-    <Stack gap={{ xs: '4', md: '8', lg: '12' }}>
+    <Flex gap={{ xs: '4', md: '8', lg: '12' }}>
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
-    </Stack>
+    </Flex>
   ),
 };
 
 export const LargeGap: Story = {
   render: () => (
-    <Stack gap="8">
+    <Flex gap="8">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/components/Flex/Flex.tsx

@@ -15,24 +15,24 @@
  */
 
 import { createElement, forwardRef } from 'react';
-import { StackProps } from './types';
+import { FlexProps } from './types';
 import clsx from 'clsx';
-import { stackPropDefs } from './Stack.props';
+import { flexPropDefs } from './Flex.props';
 import { extractProps } from '../../utils/extractProps';
 import { gapPropDefs } from '../../props/gap-props';
 
 /** @public */
-export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
+export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   const propDefs = {
     ...gapPropDefs,
-    ...stackPropDefs,
+    ...flexPropDefs,
   };
 
   const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-Stack', className),
+    className: clsx('canon-Flex', className),
     style,
     children: props.children,
   });

packages/canon/src/components/Flex/index.ts

@@ -13,5 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { Stack } from './Stack';
-export type { StackProps } from './types';
+export { Flex } from './Flex';
+export type { FlexProps } from './types';

packages/canon/src/components/Flex/styles.css

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-.canon-Stack {
+.canon-Flex {
   display: flex;
 }

packages/canon/src/components/Flex/types.ts

@@ -15,15 +15,15 @@
  */
 
 import type { SpaceProps } from '../../types';
-import { StackOwnProps } from './Stack.props';
+import { FlexOwnProps } from './Flex.props';
 import type { GapProps } from '../../props/gap-props';
 
 /** @public */
-export interface StackProps extends SpaceProps {
+export interface FlexProps extends SpaceProps {
   children: React.ReactNode;
   gap?: GapProps['gap'];
-  align?: StackOwnProps['align'];
-  direction?: StackOwnProps['direction'];
+  align?: FlexOwnProps['align'];
+  direction?: FlexOwnProps['direction'];
   className?: string;
   style?: React.CSSProperties;
 }

packages/canon/src/components/Grid/Grid.stories.tsx

@@ -19,7 +19,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Grid } from './Grid';
 import type { GridItemProps } from './types';
 import { Box } from '../Box/Box';
-import { Stack } from '../Stack';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Components/Grid',
@@ -82,7 +82,7 @@ export const ColumnSizes: Story = {
     columns: '12',
   },
   render: args => (
-    <Stack gap="4">
+    <Flex gap="4">
       {Array.from({ length: 11 }, (_, i) => (
         <Grid {...args} key={i}>
           <Grid.Item colSpan={String(i + 1) as GridItemProps['colSpan']}>
@@ -93,7 +93,7 @@ export const ColumnSizes: Story = {
           </Grid.Item>
         </Grid>
       ))}
-    </Stack>
+    </Flex>
   ),
 };
 
@@ -102,7 +102,7 @@ export const RowAndColumns: Story = {
     columns: '12',
   },
   render: args => (
-    <Stack gap="md">
+    <Flex gap="4">
       <Grid {...args} columns="3">
         <Grid.Item colSpan="1" rowSpan="2">
           <Box
@@ -123,6 +123,6 @@ export const RowAndColumns: Story = {
           <FakeBox />
         </Grid.Item>
       </Grid>
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/components/Heading/Heading.stories.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Heading } from './Heading';
-import { Stack } from '../Stack';
+import { Flex } from '../Flex';
 import { Text } from '../Text';
 const meta = {
   title: 'Components/Heading',
@@ -41,13 +41,13 @@ export const Title1: Story = {
 
 export const AllVariants: Story = {
   render: () => (
-    <Stack>
+    <Flex>
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
       <Heading variant="title2">Title 2</Heading>
       <Heading variant="title3">Title 3</Heading>
       <Heading variant="title4">Title 4</Heading>
-    </Stack>
+    </Flex>
   ),
 };
 
@@ -69,7 +69,7 @@ export const CustomTag: Story = {
 
 export const Playground: Story = {
   render: () => (
-    <Stack>
+    <Flex>
       <Text>All variants</Text>
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
@@ -77,6 +77,6 @@ export const Playground: Story = {
       <Heading variant="title3">Title 3</Heading>
       <Heading variant="title4">Title 4</Heading>
       <Heading variant="title5">Title 5</Heading>
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/components/Text/Text.stories.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text } from './Text';
-import { Stack } from '../Stack';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Components/Text',
@@ -40,7 +40,7 @@ export const Default: Story = {
 
 export const AllVariants: Story = {
   render: () => (
-    <Stack gap="md">
+    <Flex gap="4">
       <Text variant="subtitle" style={{ maxWidth: '600px' }}>
         A man looks at a painting in a museum and says, “Brothers and sisters I
         have none, but that man&apos;s father is my father&apos;s son.” Who is
@@ -61,13 +61,13 @@ export const AllVariants: Story = {
         have none, but that man&apos;s father is my father&apos;s son.” Who is
         in the painting?
       </Text>
-    </Stack>
+    </Flex>
   ),
 };
 
 export const AllWeights: Story = {
   render: () => (
-    <Stack gap="md">
+    <Flex gap="4">
       <Text weight="regular" style={{ maxWidth: '600px' }}>
         A man looks at a painting in a museum and says, “Brothers and sisters I
         have none, but that man&apos;s father is my father&apos;s son.” Who is
@@ -78,7 +78,7 @@ export const AllWeights: Story = {
         have none, but that man&apos;s father is my father&apos;s son.” Who is
         in the painting?
       </Text>
-    </Stack>
+    </Flex>
   ),
 };
 
@@ -93,7 +93,7 @@ export const Responsive: Story = {
 
 export const Playground: Story = {
   render: () => (
-    <Stack>
+    <Flex>
       <Text>Subtitle</Text>
       <Text variant="subtitle" style={{ maxWidth: '600px' }}>
         A man looks at a painting in a museum and says, “Brothers and sisters I
@@ -118,6 +118,6 @@ export const Playground: Story = {
         have none, but that man&apos;s father is my father&apos;s son.” Who is
         in the painting?
       </Text>
-    </Stack>
+    </Flex>
   ),
 };

packages/canon/src/css/components.css

@@ -17,7 +17,7 @@
 /* Components */
 @import '../components/Box/styles.css';
 @import '../components/Button/styles.css';
-@import '../components/Stack/styles.css';
+@import '../components/Flex/styles.css';
 @import '../components/Grid/styles.css';
 @import '../components/Container/styles.css';
 @import '../components/Icon/styles.css';

packages/canon/src/index.ts

@@ -26,7 +26,7 @@ export * from './contexts/canon';
 // Layout components
 export * from './components/Box';
 export * from './components/Grid';
-export * from './components/Stack';
+export * from './components/Flex';
 export * from './components/Container';
 export * from './components/Text';
 export * from './components/Heading';