From 5bbd9fd8ecf126b81bd13cd35d6e911b7344322d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 13 Dec 2024 17:20:57 +0000 Subject: [PATCH] Improve Table API Signed-off-by: Charles de Dreuille --- packages/canon/.storybook/preview.tsx | 3 +- packages/canon/report.api.md | 43 +++++++++++++++++++ packages/canon/src/components/Table/Table.tsx | 8 ++++ packages/canon/src/components/Table/index.ts | 24 +++++++++++ .../canon/src/css/{backstage.css => core.css} | 16 +++---- packages/canon/src/index.ts | 1 + 6 files changed, 83 insertions(+), 12 deletions(-) create mode 100644 packages/canon/src/components/Table/index.ts rename packages/canon/src/css/{backstage.css => core.css} (92%) diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index 906434e4f7..e78a9bb923 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -6,8 +6,7 @@ import { withThemeByDataAttribute } from '@storybook/addon-themes'; import '../docs/components/styles.css'; // Canon specific styles - -import '../src/css/backstage.css'; +import '../src/css/core.css'; import '../src/css/components.css'; // Custom themes diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index b314020d81..cba0983972 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -7,6 +7,7 @@ import { ForwardRefExoticComponent } from 'react'; import { default as React_2 } from 'react'; +import * as React_3 from 'react'; import { RefAttributes } from 'react'; // @public (undocumented) @@ -457,6 +458,48 @@ export interface StackProps extends SpaceProps, ColorProps { style?: React.CSSProperties; } +// @public (undocumented) +export const Table: React_3.ForwardRefExoticComponent< + React_3.HTMLAttributes & + React_3.RefAttributes +>; + +// @public (undocumented) +export const TableBody: React_3.ForwardRefExoticComponent< + React_3.HTMLAttributes & + React_3.RefAttributes +>; + +// @public (undocumented) +export const TableCell: React_3.ForwardRefExoticComponent< + React_3.TdHTMLAttributes & + React_3.RefAttributes +>; + +// @public (undocumented) +export const TableFooter: React_3.ForwardRefExoticComponent< + React_3.HTMLAttributes & + React_3.RefAttributes +>; + +// @public (undocumented) +export const TableHead: React_3.ForwardRefExoticComponent< + React_3.ThHTMLAttributes & + React_3.RefAttributes +>; + +// @public (undocumented) +export const TableHeader: React_3.ForwardRefExoticComponent< + React_3.HTMLAttributes & + React_3.RefAttributes +>; + +// @public (undocumented) +export const TableRow: React_3.ForwardRefExoticComponent< + React_3.HTMLAttributes & + React_3.RefAttributes +>; + // @public (undocumented) export type Theme = keyof typeof themes; diff --git a/packages/canon/src/components/Table/Table.tsx b/packages/canon/src/components/Table/Table.tsx index bb40d9c92f..efd5181036 100644 --- a/packages/canon/src/components/Table/Table.tsx +++ b/packages/canon/src/components/Table/Table.tsx @@ -15,6 +15,7 @@ */ import * as React from 'react'; +/** @public */ const Table = React.forwardRef< HTMLTableElement, React.HTMLAttributes @@ -25,6 +26,7 @@ const Table = React.forwardRef< )); Table.displayName = 'Table'; +/** @public */ const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes @@ -37,6 +39,7 @@ const TableHeader = React.forwardRef< )); TableHeader.displayName = 'TableHeader'; +/** @public */ const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes @@ -45,6 +48,7 @@ const TableBody = React.forwardRef< )); TableBody.displayName = 'TableBody'; +/** @public */ const TableFooter = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes @@ -57,6 +61,7 @@ const TableFooter = React.forwardRef< )); TableFooter.displayName = 'TableFooter'; +/** @public */ const TableRow = React.forwardRef< HTMLTableRowElement, React.HTMLAttributes @@ -67,6 +72,7 @@ const TableRow = React.forwardRef< )); TableRow.displayName = 'TableRow'; +/** @public */ const TableHead = React.forwardRef< HTMLTableCellElement, React.ThHTMLAttributes @@ -75,6 +81,7 @@ const TableHead = React.forwardRef< )); TableHead.displayName = 'TableHead'; +/** @public */ const TableCell = React.forwardRef< HTMLTableCellElement, React.TdHTMLAttributes @@ -83,6 +90,7 @@ const TableCell = React.forwardRef< )); TableCell.displayName = 'TableCell'; +/** @public */ const TableCaption = React.forwardRef< HTMLTableCaptionElement, React.HTMLAttributes diff --git a/packages/canon/src/components/Table/index.ts b/packages/canon/src/components/Table/index.ts new file mode 100644 index 0000000000..cf88de2b1a --- /dev/null +++ b/packages/canon/src/components/Table/index.ts @@ -0,0 +1,24 @@ +/* + * 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. + */ +export { + Table, + TableHead, + TableRow, + TableHeader, + TableCell, + TableBody, + TableFooter, +} from './Table'; diff --git a/packages/canon/src/css/backstage.css b/packages/canon/src/css/core.css similarity index 92% rename from packages/canon/src/css/backstage.css rename to packages/canon/src/css/core.css index 178a714ee3..95e4b6ce5b 100644 --- a/packages/canon/src/css/backstage.css +++ b/packages/canon/src/css/core.css @@ -17,16 +17,6 @@ /* Normalize */ @import './normalize.css'; -/* Geist font */ -@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap'); - -*, -html, -body { - font-family: var(--canon-font-regular); -} - /* Light theme tokens */ :root { /* Colors */ @@ -101,6 +91,12 @@ body { /* Container */ --canon-container-max-width: 1200px; --canon-container-padding: 1rem; + + *, + html, + body { + font-family: var(--canon-font-regular); + } } /* Dark theme tokens */ diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index 5d0ebb5a2e..d6a375b8dd 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -34,3 +34,4 @@ export * from './components/Container'; export * from './components/Button'; export * from './components/Icon'; export * from './components/Checkbox'; +export * from './components/Table';