Update Container to the new css classes

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

packages/canon/src/components/Container/Container.tsx

@@ -14,22 +14,24 @@
  * limitations under the License.
  */
 import React, { forwardRef } from 'react';
-import { containerSprinkles } from './sprinkles.css';
 import { ContainerProps } from './types';
+import { getClassNames } from '../../utils/getClassNames';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
     const { children, className, style, ...restProps } = props;
 
-    const containerClassName = containerSprinkles(restProps);
+    // Generate utility class names
+    const utilityClassNames = getClassNames(restProps);
+
+    // Combine the base class name, the sprinkles class name, and any additional class names
+    const classNames = ['canon-container', utilityClassNames, className]
+      .filter(Boolean)
+      .join(' ');
 
     return (
-      <div
-        ref={ref}
-        className={['container', containerClassName].filter(Boolean).join(' ')}
-        style={style}
-      >
+      <div ref={ref} className={classNames} style={style}>
         {children}
       </div>
     );

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

@@ -1,40 +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, space } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-export const containerProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    paddingTop: space,
-    paddingBottom: space,
-    marginTop: space,
-    marginBottom: space,
-  },
-  shorthands: {
-    paddingY: ['paddingTop', 'paddingBottom'],
-    marginY: ['marginTop', 'marginBottom'],
-  },
-});
-
-export const containerSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  containerProperties,
-);

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

@@ -1,4 +1,4 @@
-.container {
+.canon-container {
   max-width: var(--canon-container-max-width);
   margin: 0 auto;
   padding: 0 var(--canon-container-padding);

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

@@ -16,20 +16,14 @@
 import { SpaceProps } from '../../types';
 
 /** @public */
-export interface ContainerProps
-  extends Omit<
-    SpaceProps,
-    | 'padding'
-    | 'paddingLeft'
-    | 'paddingRight'
-    | 'paddingX'
-    | 'margin'
-    | 'marginLeft'
-    | 'marginRight'
-    | 'marginX'
-    | 'gap'
-  > {
+export interface ContainerProps {
   children?: React.ReactNode;
   className?: string;
+  marginY?: SpaceProps['marginY'];
+  marginBottom?: SpaceProps['marginBottom'];
+  marginTop?: SpaceProps['marginTop'];
+  paddingY?: SpaceProps['paddingY'];
+  paddingBottom?: SpaceProps['paddingBottom'];
+  paddingTop?: SpaceProps['paddingTop'];
   style?: React.CSSProperties;
 }