diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx index b27775e116..bea7b4caf1 100644 --- a/packages/canon/src/components/Container/Container.tsx +++ b/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( (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 ( -
+
{children}
); diff --git a/packages/canon/src/components/Container/sprinkles.css.ts b/packages/canon/src/components/Container/sprinkles.css.ts deleted file mode 100644 index 989e369433..0000000000 --- a/packages/canon/src/components/Container/sprinkles.css.ts +++ /dev/null @@ -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, -); diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css index 4da813623f..f3ebd64f52 100644 --- a/packages/canon/src/components/Container/styles.css +++ b/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); diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts index 1ccf305191..f9a71ecfa1 100644 --- a/packages/canon/src/components/Container/types.ts +++ b/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; }