Finish it up

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

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<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  align?: Omit<
+    UtilityProps['justifyContent'],
+    'stretch' | 'around' | 'between'
+  >;
   // (undocumented)
-  alignY?:
-    | 'top'
-    | 'center'
-    | 'bottom'
-    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
+  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<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  align?: UtilityProps['alignItems'];
   // (undocumented)
   as?: AsProps;
   // (undocumented)

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';
 
 <Meta of={InlineStories} />
 
@@ -34,11 +33,11 @@ import { inlineProperties } from './sprinkles.css';
 <PropsTable
   data={{
     align: {
-      type: 'left | center | right',
+      type: 'start | center | end',
       responsive: true,
     },
     alignY: {
-      type: 'top | center | bottom',
+      type: 'start | center | end',
       responsive: true,
     },
     children: {
@@ -60,7 +59,7 @@ import { inlineProperties } from './sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable data={spacePropsList} />
 
 <Title type="h2">Examples</Title>
 

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

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

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

@@ -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,
-);

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

@@ -1,4 +1,4 @@
-.inline {
+.canon-inline {
   display: flex;
   flex-wrap: wrap;
 }

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<Record<Breakpoint, 'left' | 'center' | 'right'>>;
-  alignY?:
-    | 'top'
-    | 'center'
-    | 'bottom'
-    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
+  align?: Omit<
+    UtilityProps['justifyContent'],
+    'stretch' | 'around' | 'between'
+  >;
+  alignY?: UtilityProps['alignItems'];
   className?: string;
   style?: React.CSSProperties;
 }

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';
 
 <Meta of={StackStories} />
 
@@ -55,7 +55,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable data={spacePropsList} />
 
 <Title type="h2">Common questions</Title>