From 4d1235a018a139506868a41fa137ffe28afac8b7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 19 Dec 2024 13:35:07 +0000 Subject: [PATCH] Finish it up Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 47 ++++++++----------- packages/canon/src/components/Inline/Docs.mdx | 9 ++-- .../src/components/Inline/Inline.stories.tsx | 8 ++-- .../canon/src/components/Inline/Inline.tsx | 32 ++++--------- .../src/components/Inline/sprinkles.css.ts | 34 -------------- .../canon/src/components/Inline/styles.css | 2 +- packages/canon/src/components/Inline/types.ts | 17 +++---- packages/canon/src/components/Stack/Docs.mdx | 4 +- 8 files changed, 45 insertions(+), 108 deletions(-) delete mode 100644 packages/canon/src/components/Inline/sprinkles.css.ts diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 4ff3824bb0..75bcd30cda 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -154,24 +154,24 @@ export const Container: React_2.ForwardRefExoticComponent< >; // @public (undocumented) -export interface ContainerProps - extends Omit< - SpaceProps, - | 'padding' - | 'paddingLeft' - | 'paddingRight' - | 'paddingX' - | 'margin' - | 'marginLeft' - | 'marginRight' - | 'marginX' - | 'gap' - > { +export interface ContainerProps { // (undocumented) children?: React.ReactNode; // (undocumented) className?: string; // (undocumented) + marginBottom?: SpaceProps['marginBottom']; + // (undocumented) + marginTop?: SpaceProps['marginTop']; + // (undocumented) + marginY?: SpaceProps['marginY']; + // (undocumented) + paddingBottom?: SpaceProps['paddingBottom']; + // (undocumented) + paddingTop?: SpaceProps['paddingTop']; + // (undocumented) + paddingY?: SpaceProps['paddingY']; + // (undocumented) style?: React.CSSProperties; } @@ -265,17 +265,12 @@ export const Inline: ForwardRefExoticComponent< // @public (undocumented) export interface InlineProps extends SpaceProps, ColorProps { // (undocumented) - align?: - | 'left' - | 'center' - | 'right' - | Partial>; + align?: Omit< + UtilityProps['justifyContent'], + 'stretch' | 'around' | 'between' + >; // (undocumented) - alignY?: - | 'top' - | 'center' - | 'bottom' - | Partial>; + alignY?: UtilityProps['alignItems']; // (undocumented) as?: AsProps; // (undocumented) @@ -340,11 +335,7 @@ export const Stack: ForwardRefExoticComponent< // @public (undocumented) export interface StackProps extends SpaceProps, ColorProps { // (undocumented) - align?: - | 'left' - | 'center' - | 'right' - | Partial>; + align?: UtilityProps['alignItems']; // (undocumented) as?: AsProps; // (undocumented) diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx index 8ff19747f0..7671122966 100644 --- a/packages/canon/src/components/Inline/Docs.mdx +++ b/packages/canon/src/components/Inline/Docs.mdx @@ -1,8 +1,7 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as InlineStories from './Inline.stories'; import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacingProperties } from '../../layout/sprinkles.css'; -import { inlineProperties } from './sprinkles.css'; +import { spacePropsList } from '../../../docs/spaceProps'; @@ -34,11 +33,11 @@ import { inlineProperties } from './sprinkles.css'; - + Examples diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx index ab58a3b7f7..7edaaa971b 100644 --- a/packages/canon/src/components/Inline/Inline.stories.tsx +++ b/packages/canon/src/components/Inline/Inline.stories.tsx @@ -81,7 +81,7 @@ export const Default: Story = { export const AlignLeft: Story = { args: { ...Default.args, - align: 'left', + align: 'start', }, }; @@ -95,14 +95,14 @@ export const AlignCenter: Story = { export const AlignRight: Story = { args: { ...Default.args, - align: 'right', + align: 'end', }, }; export const VerticalAlignTop: Story = { args: { ...Default.args, - alignY: 'top', + alignY: 'start', }, }; @@ -116,7 +116,7 @@ export const VerticalAlignCenter: Story = { export const VerticalAlignBottom: Story = { args: { ...Default.args, - alignY: 'bottom', + alignY: 'end', }, }; diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx index b583b2ae08..5283fbf067 100644 --- a/packages/canon/src/components/Inline/Inline.tsx +++ b/packages/canon/src/components/Inline/Inline.tsx @@ -15,46 +15,32 @@ */ import { createElement, forwardRef } from 'react'; -import { inlineSprinkles } from './sprinkles.css'; import type { InlineProps } from './types'; - -const alignYToFlexAlign = (alignY: InlineProps['alignY']) => { - if (alignY === 'top') return 'flex-start'; - if (alignY === 'center') return 'center'; - if (alignY === 'bottom') return 'flex-end'; - return undefined; -}; - -const alignToFlexAlignY = (align: InlineProps['align']) => { - if (align === 'left') return 'flex-start'; - if (align === 'center') return 'center'; - if (align === 'right') return 'flex-end'; - return undefined; -}; +import { getClassNames } from '../../utils/getClassNames'; /** @public */ export const Inline = forwardRef((props, ref) => { const { as = 'div', children, - align = 'left', - alignY = 'top', + align = 'start', + alignY = 'start', gap = 'xs', className, style, ...restProps } = props; - // Generate the list of class names - const sprinklesClassName = inlineSprinkles({ - ...restProps, + // Generate utility class names + const utilityClassNames = getClassNames({ gap, - alignItems: alignYToFlexAlign(alignY), - justifyContent: alignToFlexAlignY(align), + alignItems: alignY, + justifyContent: align, + ...restProps, }); // Combine the base class name, the sprinkles class name, and any additional class names - const classNames = ['inline', sprinklesClassName, className] + const classNames = ['canon-inline', utilityClassNames, className] .filter(Boolean) .join(' '); diff --git a/packages/canon/src/components/Inline/sprinkles.css.ts b/packages/canon/src/components/Inline/sprinkles.css.ts deleted file mode 100644 index ccd4126608..0000000000 --- a/packages/canon/src/components/Inline/sprinkles.css.ts +++ /dev/null @@ -1,34 +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'; - -export const inlineProperties = defineProperties({ - conditions: breakpoints, - defaultCondition: 'xs', - properties: { - alignItems: ['flex-start', 'center', 'flex-end'], - justifyContent: ['flex-start', 'center', 'flex-end'], - }, -}); - -export const inlineSprinkles = createSprinkles( - spacingProperties, - colorProperties, - inlineProperties, -); diff --git a/packages/canon/src/components/Inline/styles.css b/packages/canon/src/components/Inline/styles.css index fb9b1c3825..bafd29bf53 100644 --- a/packages/canon/src/components/Inline/styles.css +++ b/packages/canon/src/components/Inline/styles.css @@ -1,4 +1,4 @@ -.inline { +.canon-inline { display: flex; flex-wrap: wrap; } diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts index e3069213c3..40577d72bc 100644 --- a/packages/canon/src/components/Inline/types.ts +++ b/packages/canon/src/components/Inline/types.ts @@ -15,23 +15,18 @@ */ import { AsProps, ColorProps } from '../../layout/types'; -import type { Breakpoint, SpaceProps, UtilityProps } from '../../types'; +import type { SpaceProps, UtilityProps } from '../../types'; /** @public */ export interface InlineProps extends SpaceProps, ColorProps { children: React.ReactNode; as?: AsProps; gap?: UtilityProps['gap']; - align?: - | 'left' - | 'center' - | 'right' - | Partial>; - alignY?: - | 'top' - | 'center' - | 'bottom' - | Partial>; + align?: Omit< + UtilityProps['justifyContent'], + 'stretch' | 'around' | 'between' + >; + alignY?: UtilityProps['alignItems']; className?: string; style?: React.CSSProperties; } diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx index 224ce8c2d7..921618f49f 100644 --- a/packages/canon/src/components/Stack/Docs.mdx +++ b/packages/canon/src/components/Stack/Docs.mdx @@ -1,7 +1,7 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as StackStories from './Stack.stories'; import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacingProperties } from '../../layout/sprinkles.css'; +import { spacePropsList } from '../../../docs/spaceProps'; @@ -55,7 +55,7 @@ import { spacingProperties } from '../../layout/sprinkles.css'; The grid component also accepts all the spacing props from the Box component. - + Common questions