Fix Stack component

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

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,
     },
   }}
 />

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: {

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,7 +89,7 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'right',
+    align: 'end',
   },
 };
 
@@ -97,9 +97,9 @@ export const ResponsiveAlign: Story = {
   args: {
     ...Default.args,
     align: {
-      xs: 'left',
+      xs: 'start',
       md: 'center',
-      lg: 'right',
+      lg: 'end',
     },
   },
 };

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(' ');
 

packages/canon/src/components/Stack/sprinkles.css.ts

@@ -1,33 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-const stackProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
-  },
-});
-
-export const stackSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  stackProperties,
-);

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

@@ -1,4 +1,4 @@
-.stack {
+.canon-stack {
   display: flex;
   flex-direction: column;
 }

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;
 }