Update Box component

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

packages/canon/src/components/Box/Box.tsx

@@ -17,19 +17,20 @@
 import { createElement } from 'react';
 import { boxSprinkles } from './sprinkles.css';
 import { base } from './box.css';
+import { BoxProps } from './types';
 
-/**
- * Properties for {@link Box}
- *
- * @public
- */
-export type BoxProps = Parameters<typeof boxSprinkles>[0] &
-  Omit<
-    React.AllHTMLAttributes<HTMLElement>,
-    keyof Parameters<typeof boxSprinkles>[0]
-  > & {
-    as?: keyof JSX.IntrinsicElements;
-  };
+// /**
+//  * Properties for {@link Box}
+//  *
+//  * @public
+//  */
+// export type BoxProps = Parameters<typeof boxSprinkles>[0] &
+//   Omit<
+//     React.AllHTMLAttributes<HTMLElement>,
+//     keyof Parameters<typeof boxSprinkles>[0]
+//   > & {
+//     as?: keyof JSX.IntrinsicElements;
+//   };
 
 /** @public */
 export const Box = (props: BoxProps) => {

packages/canon/src/components/Box/index.tsx

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 export { Box } from './Box';
-export type { BoxProps } from './Box';
-export { boxSprinkles } from './sprinkles.css';
+export type * from './types';
+export { breakpoints, space, themes } from './properties';

packages/canon/src/components/Box/properties.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+/** @public */
 export const breakpoints = {
   xs: {},
   sm: { '@media': 'screen and (min-width: 640px)' },
@@ -23,6 +24,13 @@ export const breakpoints = {
   '2xl': { '@media': 'screen and (min-width: 1536px)' },
 };
 
+/** @public */
+export const themes = {
+  light: { selector: '[data-theme="light"] &' },
+  dark: { selector: '[data-theme="dark"] &' },
+};
+
+/** @public */
 export const space = {
   none: 0,
   xxs: 'var(--canon-space-xxs)',

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

@@ -21,8 +21,30 @@ import {
   ConditionalValue,
   createMapValueFn,
 } from '@vanilla-extract/sprinkles';
-import { breakpoints, space } from './properties';
 
+/** @public */
+export const breakpoints = {
+  xs: {},
+  sm: { '@media': 'screen and (min-width: 640px)' },
+  md: { '@media': 'screen and (min-width: 768px)' },
+  lg: { '@media': 'screen and (min-width: 1024px)' },
+  xl: { '@media': 'screen and (min-width: 1280px)' },
+  '2xl': { '@media': 'screen and (min-width: 1536px)' },
+};
+
+/** @public */
+export const space = {
+  none: 0,
+  xxs: 'var(--canon-space-xxs)',
+  xs: 'var(--canon-space-xs)',
+  sm: 'var(--canon-space-sm)',
+  md: 'var(--canon-space-md)',
+  lg: 'var(--canon-space-lg)',
+  xl: 'var(--canon-space-xl)',
+  xxl: 'var(--canon-space-xxl)',
+};
+
+/** @public */
 export const responsiveProperties = defineProperties({
   conditions: breakpoints,
   defaultCondition: 'xs',
@@ -54,7 +76,7 @@ export const responsiveProperties = defineProperties({
       thin: '1px solid var(--canon-outline)',
       error: '1px solid var(--canon-error)',
     },
-    display: ['none', 'flex', 'block', 'inline'],
+    display: ['flex', 'none', 'inline', 'block'],
     paddingTop: space,
     paddingBottom: space,
     paddingLeft: space,
@@ -76,6 +98,7 @@ export const responsiveProperties = defineProperties({
   },
 });
 
+/** @public */
 export const colorProperties = defineProperties({
   conditions: {
     light: { selector: '[data-theme="light"] &' },

packages/canon/src/components/Box/types.ts

@@ -0,0 +1,176 @@
+/*
+ * 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 { breakpoints, space, themes } from './properties';
+
+/** @public */
+export type Breakpoint = keyof typeof breakpoints;
+
+/** @public */
+export type Space = keyof typeof space;
+
+/** @public */
+export type Theme = keyof typeof themes;
+
+/** @public */
+export type Display =
+  | 'flex'
+  | 'none'
+  | 'inline'
+  | 'block'
+  | Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
+
+/** @public */
+export type FlexDirection =
+  | 'row'
+  | 'column'
+  | Partial<Record<Breakpoint, 'row' | 'column'>>;
+
+/** @public */
+export type FlexWrap =
+  | 'wrap'
+  | 'nowrap'
+  | Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
+
+/** @public */
+export type JustifyContent =
+  | 'stretch'
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-around'
+  | 'space-between'
+  | Partial<
+      Record<
+        Breakpoint,
+        | 'stretch'
+        | 'flex-start'
+        | 'center'
+        | 'flex-end'
+        | 'space-around'
+        | 'space-between'
+      >
+    >;
+
+/** @public */
+export type AlignItems =
+  | 'stretch'
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | Partial<
+      Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
+    >;
+
+/** @public */
+export type BorderRadius =
+  | 'none'
+  | 'small'
+  | 'medium'
+  | 'full'
+  | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
+
+/** @public */
+export type Gap = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type Padding = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type Margin = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
+
+/** @public */
+export type Background =
+  | 'background'
+  | 'elevation1'
+  | 'elevation2'
+  | 'transparent'
+  | Partial<
+      Record<Theme, 'background' | 'elevation1' | 'elevation2' | 'transparent'>
+    >;
+
+/** @public */
+export type Color =
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
+
+/** @public */
+export interface BoxProps {
+  as?: keyof JSX.IntrinsicElements;
+  background?: Background;
+  children?: React.ReactNode;
+  color?: Color;
+  display?: Display;
+  flexDirection?: FlexDirection;
+  flexWrap?: FlexWrap;
+  justifyContent?: JustifyContent;
+  alignItems?: AlignItems;
+  borderRadius?: BorderRadius;
+  gap?: Gap;
+  padding?: Padding;
+  paddingLeft?: PaddingLeft;
+  paddingRight?: PaddingRight;
+  paddingTop?: PaddingTop;
+  paddingBottom?: PaddingBottom;
+  paddingX?: PaddingX;
+  paddingY?: PaddingY;
+  margin?: Margin;
+  marginLeft?: MarginLeft;
+  marginRight?: MarginRight;
+  marginTop?: MarginTop;
+  marginBottom?: MarginBottom;
+  marginX?: MarginX;
+  marginY?: MarginY;
+  className?: string;
+  style?: React.CSSProperties;
+}

packages/canon/src/components/Button/Button.tsx

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { button } from './button.css';
-import { Box } from '../Box/Box';
 import { Icon } from '../Icon/Icon';
 import { IconNames } from '../Icon/context';
 
@@ -45,16 +44,15 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   return (
-    <Box
+    <button
       {...props}
-      as="button"
       disabled={disabled}
       className={button({ size, variant, disabled })}
     >
       {iconStart && <Icon name={iconStart} />}
       {children}
       {iconEnd && <Icon name={iconEnd} />}
-    </Box>
+    </button>
   );
 };
 

packages/canon/src/components/Inline/Inline.tsx

@@ -15,8 +15,9 @@
  */
 
 import React from 'react';
-import { Box, BoxProps } from '../Box/Box';
+import { Box } from '../Box/Box';
 import { alignToFlexAlign } from '../../utils/align';
+import type { BoxProps } from '../Box/types';
 
 export const validInlineComponents = [
   'div',

packages/canon/src/components/Stack/Stack.tsx

@@ -15,9 +15,9 @@
  */
 
 import React from 'react';
-import { Box, BoxProps } from '../Box/Box';
+import { Box } from '../Box/Box';
 import { alignToFlexAlign } from '../../utils/align';
-
+import type { BoxProps } from '../Box/types';
 const validStackComponents = [
   'div',
   'span',