diff --git a/src/Table.tsx b/src/Table.tsx index 7a67b7a84..2d3ac1ff2 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -24,6 +24,8 @@ export type TableProps = { /** Default: false */ bottomCaption?: boolean; style?: CSSProperties; + /** Default medium */ + size?: "small" | "medium" | "large"; colorVariant?: TableProps.ColorVariant; }; @@ -31,7 +33,14 @@ export namespace TableProps { type ExtractColorVariant = FrClassName extends `fr-table--${infer AccentColor}` ? Exclude< AccentColor, - "no-scroll" | "no-caption" | "caption-bottom" | "layout-fixed" | "bordered" + | "no-scroll" + | "no-caption" + | "caption-bottom" + | "layout-fixed" + | "bordered" + | "multiline" + | "sm" + | "lg" > : never; @@ -53,6 +62,7 @@ export const Table = memo( bottomCaption = false, colorVariant, className, + size = "medium", style, ...rest } = props; @@ -77,7 +87,9 @@ export const Table = memo( "fr-table--no-scroll": noScroll, "fr-table--layout-fixed": fixed, "fr-table--no-caption": noCaption, - "fr-table--caption-bottom": bottomCaption + "fr-table--caption-bottom": bottomCaption, + "fr-table--sm": size === "small", + "fr-table--lg": size === "large" }, colorVariant !== undefined && `fr-table--${colorVariant}` ), diff --git a/stories/Table.stories.tsx b/stories/Table.stories.tsx index aaa936ee1..d1c4d72e2 100644 --- a/stories/Table.stories.tsx +++ b/stories/Table.stories.tsx @@ -37,6 +37,17 @@ const { meta, getStory } = getStoryFactory({ "description": "Move caption to bottom", "type": { "name": "boolean" } }, + "size": { + "options": (() => { + const options = ["small", "medium", "large"] as const; + + assert>>(); + + return options; + })(), + "control": { "type": "radio" }, + "defaultValue": "medium" + }, "colorVariant": { "options": (() => { const options = [