From 11c7bb4d442bc0318a744485fa681a4d58cad668 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Dec 2024 13:44:24 +0000 Subject: [PATCH] Fixing Box Signed-off-by: Charles de Dreuille --- .../docs/components/PropsTable/getProps.ts | 2 +- .../canon/docs/components/PropsTable/index.ts | 2 +- packages/canon/docs/components/index.ts | 1 + packages/canon/src/components/Box/Box.tsx | 3 +-- packages/canon/src/components/Box/Docs.mdx | 9 +++----- packages/canon/src/components/Box/box.css.ts | 22 ------------------- packages/canon/src/components/Box/styles.css | 4 ++++ 7 files changed, 11 insertions(+), 32 deletions(-) delete mode 100644 packages/canon/src/components/Box/box.css.ts create mode 100644 packages/canon/src/components/Box/styles.css diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts index 866dcb9d10..5773eaeb27 100644 --- a/packages/canon/docs/components/PropsTable/getProps.ts +++ b/packages/canon/docs/components/PropsTable/getProps.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export function getBoxProps(styles: Record) { +export function getProps(styles: Record) { return Object.keys(styles).reduce( (acc: Record, n) => { const style = styles[n]; diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts index 010452ee2a..181933f0f8 100644 --- a/packages/canon/docs/components/PropsTable/index.ts +++ b/packages/canon/docs/components/PropsTable/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { PropsTable } from './PropsTable'; -export { getBoxProps } from './getProps'; +export { getProps } from './getProps'; diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts index a710adbb02..0e5ff2e325 100644 --- a/packages/canon/docs/components/index.ts +++ b/packages/canon/docs/components/index.ts @@ -20,6 +20,7 @@ export * from './Columns'; export * from './ComponentStatus'; export * from './IconLibrary'; export * from './LayoutComponents'; +export * from './PropsTable'; export * from './Roadmap'; export * from './Table'; export * from './Text'; diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index a470c0584d..d142b3d841 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -16,7 +16,6 @@ import { createElement, forwardRef } from 'react'; import { boxSprinkles } from './sprinkles.css'; -import { base } from './box.css'; import { BoxProps } from './types'; /** @public */ @@ -27,7 +26,7 @@ export const Box = forwardRef((props, ref) => { const sprinklesClassName = boxSprinkles(restProps); // Combine the base class name, the sprinkles class name, and any additional class names - const classNames = [base, sprinklesClassName, className] + const classNames = ['canon-box', sprinklesClassName, className] .filter(Boolean) .join(' '); diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index 0ded5c3160..a03c6d43d3 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -2,10 +2,7 @@ import { Meta, Unstyled, Source } from '@storybook/blocks'; import * as BoxStories from './Box.stories'; import { Title, Text } from '../../../docs/components'; import { Padding } from './docs/padding'; -import { - PropsTable, - getBoxProps, -} from '../../../docs/components/PropsTable/PropsTable'; +import { PropsTable, getProps } from '../../../docs/components'; import { boxProperties } from './sprinkles.css'; import { spacingProperties } from '../../layout/sprinkles.css'; @@ -32,7 +29,7 @@ import { spacingProperties } from '../../layout/sprinkles.css'; - + Examples Here are some examples of how you can use the Box component. diff --git a/packages/canon/src/components/Box/box.css.ts b/packages/canon/src/components/Box/box.css.ts deleted file mode 100644 index a3e49162fd..0000000000 --- a/packages/canon/src/components/Box/box.css.ts +++ /dev/null @@ -1,22 +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 { style } from '@vanilla-extract/css'; - -export const base = style({ - fontFamily: 'var(--canon-font-regular)', - color: 'var(--canon-text-primary)', -}); diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css new file mode 100644 index 0000000000..a90ce578cd --- /dev/null +++ b/packages/canon/src/components/Box/styles.css @@ -0,0 +1,4 @@ +.canon-box { + font-family: 'var(--canon-font-regular)'; + color: 'var(--canon-text-primary)'; +}