Skip to content

Commit 3714859

Browse files
veejveej
committed
add Table configs for header/footer size and default cells options
1 parent ece8548 commit 3714859

File tree

6 files changed

+161
-27
lines changed

6 files changed

+161
-27
lines changed

‎packages/bento-design-system/src/Table/Config.ts

+26
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@ import { TooltipPlacement } from "../Field/FieldProps";
22
import { IconProps } from "../Icons";
33
import { BentoSprinkles } from "../internal";
44
import { vars } from "../vars.css";
5+
import { LabelProps } from "../Typography/Label/Label";
6+
import { BodyProps } from "../Typography/Body/Body";
7+
import { ComponentProps } from "react";
8+
import {
9+
ButtonCell,
10+
ButtonLinkCell,
11+
IconButtonCell,
12+
IconCell,
13+
LabelCell,
14+
LinkCell,
15+
TextCell,
16+
TextWithIconCell,
17+
} from "./cells";
518

619
type CellPaddingConfig = {
720
paddingX: BentoSprinkles["paddingX"];
@@ -13,8 +26,10 @@ export type TableConfig = {
1326
emptyIcon: (props: IconProps) => JSX.Element;
1427
headerBackgroundColor: BentoSprinkles["background"];
1528
headerForegroundColor: BentoSprinkles["color"];
29+
headerSize: LabelProps["size"];
1630
footerBackgroundColor: BentoSprinkles["background"];
1731
footerForegroundColor: BentoSprinkles["color"];
32+
footerSize: LabelProps["size"];
1833
hintPlacement: TooltipPlacement;
1934
cellTooltipPlacement: TooltipPlacement;
2035
evenRowsBackgroundColor: BentoSprinkles["background"];
@@ -36,6 +51,17 @@ export type TableConfig = {
3651
iconCell: CellPaddingConfig | undefined;
3752
iconButtonCell: CellPaddingConfig | undefined;
3853
};
54+
defaultCellOptions: {
55+
defaultCell: { size: BodyProps["size"] };
56+
buttonCell: Required<ComponentProps<typeof ButtonCell>["options"]>;
57+
buttonLinkCell: Required<ComponentProps<typeof ButtonLinkCell>["options"]>;
58+
textCell: Required<ComponentProps<typeof TextCell>["options"]>;
59+
textWithIconCell: Required<ComponentProps<typeof TextWithIconCell>["options"]>;
60+
labelCell: Required<ComponentProps<typeof LabelCell>["options"]>;
61+
linkCell: Required<ComponentProps<typeof LinkCell>["options"]>;
62+
iconCell: Required<ComponentProps<typeof IconCell>["options"]>;
63+
iconButtonCell: Required<ComponentProps<typeof IconButtonCell>["options"]>;
64+
};
3965
boundaryPadding: BentoSprinkles["padding"];
4066
columnDividers: boolean;
4167
};

‎packages/bento-design-system/src/Table/Table.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -611,7 +611,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
611611
<Columns space={8} alignY="center" align={column.align}>
612612
{column.Header ? (
613613
<Column width="content">
614-
<Label size="large">{column.render("Header") as any}</Label>
614+
<Label size={config.headerSize}>{column.render("Header") as any}</Label>
615615
</Column>
616616
) : null}
617617
{hint && <Column width="content">{hint}</Column>}
@@ -677,7 +677,7 @@ function ColumnFooter<D extends Record<string, unknown>>({
677677
>
678678
<Columns space={8} alignY="center" align={column.align}>
679679
<Column width="content">
680-
<Label size="large">{column.render("Footer") as any}</Label>
680+
<Label size={config.footerSize}>{column.render("Footer") as any}</Label>
681681
</Column>
682682
</Columns>
683683
</Box>

‎packages/bento-design-system/src/Table/cells.tsx

+39-22
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,25 @@ import {
2020
ButtonLink,
2121
ButtonLinkProps,
2222
BodyProps,
23+
LabelProps,
2324
} from "..";
2425
import { useBentoConfig } from "../BentoConfigContext";
26+
import { mergeProps } from "@react-aria/utils";
2527

2628
export function ButtonCell({
2729
value: buttonProps,
2830
column: { align },
29-
options: { size },
31+
options,
3032
}: CellProps<{}, Omit<ButtonProps, "size">> & {
3133
options: Partial<Pick<ButtonProps, "size">>;
3234
}) {
3335
const config = useBentoConfig().table;
36+
const { size } = mergeProps(config.defaultCellOptions.buttonCell, options);
3437
const padding = config.padding.buttonCell ?? config.padding.defaultCell;
3538
return (
3639
<Inset spaceX={padding.paddingX} spaceY={padding.paddingY}>
3740
<Inline space={0} align={align} alignY="center">
38-
<Button size={size ?? "medium"} {...buttonProps} />
41+
<Button size={size} {...buttonProps} />
3942
</Inline>
4043
</Inset>
4144
);
@@ -44,16 +47,17 @@ export function ButtonCell({
4447
export function ButtonLinkCell({
4548
value: buttonProps,
4649
column: { align },
47-
options: { size },
50+
options,
4851
}: CellProps<{}, Omit<ButtonLinkProps, "size">> & {
4952
options: Partial<Pick<ButtonLinkProps, "size">>;
5053
}) {
5154
const config = useBentoConfig().table;
55+
const { size } = mergeProps(config.defaultCellOptions.buttonLinkCell, options);
5256
const padding = config.padding.buttonLinkCell ?? config.padding.defaultCell;
5357
return (
5458
<Inset spaceX={padding.paddingX} spaceY={padding.paddingY}>
5559
<Inline space={0} align={align}>
56-
<ButtonLink size={size ?? "medium"} {...buttonProps} />
60+
<ButtonLink size={size} {...buttonProps} />
5761
</Inline>
5862
</Inset>
5963
);
@@ -62,15 +66,16 @@ export function ButtonLinkCell({
6266
export function TextCell({
6367
value,
6468
column: { align },
65-
options: { size, weight, color },
69+
options,
6670
}: CellProps<{}, LocalizedString> & {
6771
options: Partial<Pick<BodyProps, "size" | "weight" | "color">>;
6872
}) {
6973
const config = useBentoConfig().table;
7074
const padding = config.padding.textCell ?? config.padding.defaultCell;
75+
const { size, weight, color } = mergeProps(config.defaultCellOptions.textCell, options);
7176
return (
7277
<Box {...padding} textAlign={align}>
73-
<Body size={size ?? "medium"} weight={weight} color={color}>
78+
<Body size={size} weight={weight} color={color}>
7479
{value}
7580
</Body>
7681
</Box>
@@ -80,7 +85,7 @@ export function TextCell({
8085
export function TextWithIconCell({
8186
value: { icon, iconPosition, text, tooltipContent },
8287
column: { align },
83-
options: { size, weight, color, iconSize, iconColor },
88+
options,
8489
}: CellProps<
8590
{},
8691
{
@@ -96,8 +101,12 @@ export function TextWithIconCell({
96101
};
97102
}) {
98103
const config = useBentoConfig().table;
104+
const { size, weight, color, iconSize, iconColor } = mergeProps(
105+
config.defaultCellOptions.textWithIconCell,
106+
options
107+
);
99108
const padding = config.padding.textWithIconCell ?? config.padding.defaultCell;
100-
const icon_ = icon && icon({ size: iconSize ?? 12, color: iconColor });
109+
const icon_ = icon && icon({ size: iconSize, color: iconColor });
101110

102111
return (
103112
<Inset spaceX={padding.paddingX} spaceY={padding.paddingY}>
@@ -115,7 +124,7 @@ export function TextWithIconCell({
115124
) : (
116125
icon_
117126
)}
118-
<Body size={size ?? "medium"} weight={weight} color={color}>
127+
<Body size={size} weight={weight} color={color}>
119128
{text}
120129
</Body>
121130
</Inline>
@@ -135,28 +144,38 @@ export function ChipCell({ value: chipProps, column: { align } }: CellProps<{},
135144
);
136145
}
137146

138-
export function LabelCell({ value, column: { align } }: CellProps<{}, LocalizedString>) {
147+
export function LabelCell({
148+
value,
149+
column: { align },
150+
options,
151+
}: CellProps<{}, LocalizedString> & {
152+
options: Partial<Pick<LabelProps, "size" | "color">>;
153+
}) {
139154
const config = useBentoConfig().table;
140155
const padding = config.padding.labelCell ?? config.padding.defaultCell;
156+
const { size, color } = mergeProps(config.defaultCellOptions.labelCell, options);
141157
return (
142158
<Box {...padding} textAlign={align}>
143-
<Label size="large">{value}</Label>
159+
<Label size={size} color={color}>
160+
{value}
161+
</Label>
144162
</Box>
145163
);
146164
}
147165

148166
export function LinkCell({
149167
value,
150168
column: { align },
151-
options: { size, weight },
169+
options,
152170
}: CellProps<{}, ComponentProps<typeof Link>> & {
153171
options: Partial<Pick<BodyProps, "size" | "weight">>;
154172
}) {
155173
const config = useBentoConfig().table;
156174
const padding = config.padding.linkCell ?? config.padding.defaultCell;
175+
const { size, weight } = mergeProps(config.defaultCellOptions.linkCell, options);
157176
return (
158177
<Box {...padding} textAlign={align}>
159-
<Body size={size ?? "medium"} weight={weight}>
178+
<Body size={size} weight={weight}>
160179
<Link {...value} />
161180
</Body>
162181
</Box>
@@ -166,37 +185,35 @@ export function LinkCell({
166185
export function IconCell({
167186
value,
168187
column: { align },
169-
options: { size, color },
188+
options,
170189
}: CellProps<{}, { icon: (props: IconProps) => JSX.Element; label: LocalizedString }> & {
171190
options: Partial<Pick<IconProps, "size" | "color">>;
172191
}) {
173192
const config = useBentoConfig().table;
193+
const { size, color } = mergeProps(config.defaultCellOptions.iconCell, options);
174194
const padding = config.padding.iconCell ?? config.padding.defaultCell;
175195
return (
176196
<Box {...padding} textAlign={align} aria-label={value.label}>
177-
{value.icon({ size: size ?? 16, color: color ?? "default" })}
197+
{value.icon({ size, color })}
178198
</Box>
179199
);
180200
}
181201

182202
export function IconButtonCell({
183203
value: iconButtonProps,
184204
column: { align },
185-
options: { size, hierarchy, kind },
205+
options,
186206
}: CellProps<{}, Omit<IconButtonProps, "size" | "kind" | "hierarchy">> & {
187207
options: Partial<Pick<IconButtonProps, "size" | "kind" | "hierarchy">>;
188208
}) {
189209
const config = useBentoConfig().table;
210+
const { size, hierarchy, kind } = mergeProps(config.defaultCellOptions.iconButtonCell, options);
190211
const padding = config.padding.iconButtonCell ?? config.padding.defaultCell;
212+
191213
return (
192214
<Inset spaceX={padding.paddingX} spaceY={padding.paddingY}>
193215
<Inline space={0} align={align} alignY="center">
194-
<IconButton
195-
kind={kind ?? "transparent"}
196-
hierarchy={hierarchy ?? "primary"}
197-
size={size ?? 16}
198-
{...iconButtonProps}
199-
/>
216+
<IconButton kind={kind} hierarchy={hierarchy} size={size} {...iconButtonProps} />
200217
</Inline>
201218
</Inset>
202219
);

‎packages/bento-design-system/src/Table/tableColumn.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
IconButtonProps,
1010
BodyProps,
1111
ButtonProps,
12+
LabelProps,
1213
} from "..";
1314
import { Column } from "./types";
1415
import {
@@ -55,7 +56,7 @@ export function custom<A extends string, V, D extends Record<string, unknown>>({
5556
const value = missingValue ?? defaultMessages.Table.missingValue;
5657
return (
5758
<Box {...config.padding.defaultCell} textAlign={options.align}>
58-
<Body size="medium">{value}</Body>
59+
<Body size={config.defaultCellOptions.defaultCell.size}>{value}</Body>
5960
</Box>
6061
);
6162
} else {
@@ -234,10 +235,16 @@ export function numberWithIcon<A extends string>({
234235
});
235236
}
236237

237-
export function label<A extends string>(options: ColumnOptionsBase<A>) {
238+
export function label<A extends string>({
239+
size,
240+
color,
241+
...options
242+
}: ColumnOptionsBase<A> & Partial<Pick<LabelProps, "size" | "color">>) {
238243
return custom({
239244
...options,
240-
Cell: LabelCell,
245+
Cell: (props: Omit<ComponentProps<typeof TextCell>, "options">) => (
246+
<LabelCell {...{ ...props, options: { size, color } }} />
247+
),
241248
});
242249
}
243250

‎packages/bento-design-system/src/util/defaultConfigs.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -507,8 +507,10 @@ export const table: TableConfig = {
507507
emptyIcon: IconSearch,
508508
headerBackgroundColor: "backgroundPrimary",
509509
headerForegroundColor: "foregroundPrimary",
510+
headerSize: "large",
510511
footerBackgroundColor: "backgroundPrimary",
511512
footerForegroundColor: "foregroundPrimary",
513+
footerSize: "large",
512514
hintPlacement: "top",
513515
cellTooltipPlacement: "bottom",
514516
evenRowsBackgroundColor: "backgroundSecondary",
@@ -527,6 +529,46 @@ export const table: TableConfig = {
527529
iconCell: { paddingX: 16, paddingY: 16 },
528530
iconButtonCell: { paddingX: 16, paddingY: 16 },
529531
},
532+
defaultCellOptions: {
533+
defaultCell: {
534+
size: "medium",
535+
},
536+
textCell: {
537+
size: "medium",
538+
weight: "default",
539+
color: "default",
540+
},
541+
textWithIconCell: {
542+
size: "medium",
543+
weight: "default",
544+
color: "default",
545+
iconSize: 12,
546+
iconColor: "default",
547+
},
548+
iconCell: {
549+
size: 12,
550+
color: "default",
551+
},
552+
buttonCell: {
553+
size: "medium",
554+
},
555+
buttonLinkCell: {
556+
size: "medium",
557+
},
558+
labelCell: {
559+
size: "large",
560+
color: "default",
561+
},
562+
iconButtonCell: {
563+
size: 16,
564+
hierarchy: "primary",
565+
kind: "transparent",
566+
},
567+
linkCell: {
568+
size: "medium",
569+
weight: "default",
570+
},
571+
},
530572
boundaryPadding: 8,
531573
columnDividers: false,
532574
};

0 commit comments

Comments
 (0)