Fix Stack component

Signed-off-by: Charles de Dreuille <[email protected]>
autodesk-forks · Dec 19, 2024 · bd74f76 · bd74f76
1 parent 85d6754
commit bd74f76
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 69 deletions.
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
@@ -1,8 +1,7 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as ContainerStories from './Container.stories';
 import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacingProperties } from '../../layout/sprinkles.css';
-import { containerProperties } from './sprinkles.css';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={ContainerStories} />
 
@@ -28,18 +27,41 @@ import { containerProperties } from './sprinkles.css';
 
 <PropsTable
   data={{
-    ...getProps(containerProperties.styles),
     children: {
       type: 'ReactNode',
-      required: false,
+      responsive: false,
     },
     className: {
       type: 'string',
-      required: false,
+      responsive: false,
+    },
+    marginY: {
+      type: spacePropsList.marginY.type,
+      responsive: spacePropsList.marginY.responsive,
+    },
+    marginBottom: {
+      type: spacePropsList.marginBottom.type,
+      responsive: spacePropsList.marginBottom.responsive,
+    },
+    marginTop: {
+      type: spacePropsList.marginTop.type,
+      responsive: spacePropsList.marginTop.responsive,
+    },
+    paddingY: {
+      type: spacePropsList.paddingY.type,
+      responsive: spacePropsList.paddingY.responsive,
+    },
+    paddingBottom: {
+      type: spacePropsList.paddingBottom.type,
+      responsive: spacePropsList.paddingBottom.responsive,
+    },
+    paddingTop: {
+      type: spacePropsList.paddingTop.type,
+      responsive: spacePropsList.paddingTop.responsive,
     },
     style: {
       type: 'CSSProperties',
-      required: false,
+      responsive: false,
     },
   }}
 />

diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
@@ -33,7 +33,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 <PropsTable
   data={{
     align: {
-      type: ['left', 'center', 'right'],
+      type: ['start', 'center', 'end'],
       responsive: true,
     },
     children: {

diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -41,7 +41,7 @@ const meta = {
     },
   },
   args: {
-    align: 'left',
+    align: 'start',
     gap: 'xs',
   },
 } satisfies Meta<typeof Stack>;
@@ -75,7 +75,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'left',
+    align: 'start',
   },
 };
 
@@ -89,17 +89,17 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'right',
+    align: 'end',
   },
 };
 
 export const ResponsiveAlign: Story = {
   args: {
     ...Default.args,
     align: {
-      xs: 'left',
+      xs: 'start',
       md: 'center',
-      lg: 'right',
+      lg: 'end',
     },
   },
 };

diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
@@ -16,39 +16,29 @@
 
 import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
-import { stackSprinkles } from './sprinkles.css';
-
-const alignToFlexAlign = (align: StackProps['align']) => {
-  if (align === 'left') return 'stretch';
-  if (align === 'center') return 'center';
-  if (align === 'right') return 'flex-end';
-  return undefined;
-};
+import { getClassNames } from '../../utils/getClassNames';
 
 /** @public */
 export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'left',
+    align = 'start',
     gap = 'xs',
     className,
     style,
     ...restProps
   } = props;
 
-  // Transform the align prop
-  const flexAlign = alignToFlexAlign(align);
-
-  // Generate the list of class names
-  const sprinklesClassName = stackSprinkles({
-    ...restProps,
+  // Generate utility class names
+  const utilityClassNames = getClassNames({
     gap,
-    alignItems: flexAlign,
+    alignItems: align === 'start' ? 'stretch' : align,
+    ...restProps,
   });
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['stack', sprinklesClassName, className]
+  const classNames = ['canon-stack', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 

diff --git a/packages/canon/src/components/Stack/sprinkles.css.ts b/packages/canon/src/components/Stack/sprinkles.css.ts
diff --git a/packages/canon/src/components/Stack/styles.css b/packages/canon/src/components/Stack/styles.css
@@ -1,4 +1,4 @@
-.stack {
+.canon-stack {
   display: flex;
   flex-direction: column;
 }
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
@@ -14,18 +14,14 @@
  * limitations under the License.
  */
 import { AsProps, ColorProps } from '../../layout/types';
-import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+import type { SpaceProps, UtilityProps } from '../../types';
 
 /** @public */
 export interface StackProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  align?: UtilityProps['alignItems'];
   className?: string;
   style?: React.CSSProperties;
 }