From bd74f7663bf74772cb54b7ac36eb0e8c2998f86c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 19 Dec 2024 12:29:59 +0000 Subject: [PATCH] Fix Stack component Signed-off-by: Charles de Dreuille --- .../canon/src/components/Container/Docs.mdx | 34 +++++++++++++++---- packages/canon/src/components/Stack/Docs.mdx | 2 +- .../src/components/Stack/Stack.stories.tsx | 10 +++--- packages/canon/src/components/Stack/Stack.tsx | 24 ++++--------- .../src/components/Stack/sprinkles.css.ts | 33 ------------------ .../canon/src/components/Stack/styles.css | 2 +- packages/canon/src/components/Stack/types.ts | 8 ++--- 7 files changed, 44 insertions(+), 69 deletions(-) delete mode 100644 packages/canon/src/components/Stack/sprinkles.css.ts diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx index ca81477d4468a..05a0600813b2d 100644 --- 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'; @@ -28,18 +27,41 @@ import { containerProperties } from './sprinkles.css'; diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx index f1776e0262989..224ce8c2d7dfd 100644 --- 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'; ; @@ -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', }, }, }; diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx index e0c36f2043e27..08525bcd92a9c 100644 --- 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((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 deleted file mode 100644 index 85c8f83a716e7..0000000000000 --- a/packages/canon/src/components/Stack/sprinkles.css.ts +++ /dev/null @@ -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, -); diff --git a/packages/canon/src/components/Stack/styles.css b/packages/canon/src/components/Stack/styles.css index 784fd3b1abb66..fa5c3f7e5ded5 100644 --- 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 index d4948557e7efe..5df25ed452683 100644 --- 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>; + align?: UtilityProps['alignItems']; className?: string; style?: React.CSSProperties; }