Merge pull request #518 from buildo/expand_list_config

Expand config and props of List/ListItem

Author: federico-ercoles

packages/bento-design-system/src/Illustrations/IllustrationProps.ts

@@ -1,5 +1,7 @@
 import { AtLeast } from "../util/AtLeast";
 
+export type IllustrationColor = "default" | "disabled" | "inherit";
+
 // NOTE(gabro): we deprecated the `style` prop due to false positive warnings in
 // popular ESLint configs, which expect `style` to be an object.
 // We're still keeping the old props around for backwards compatibility.
@@ -25,5 +27,5 @@ export type IllustrationProps = {
         style: "outline";
       },
       "kind" | "style"
-    > & { color: "default" | "disabled" | "inherit" })
+    > & { color: IllustrationColor })
 );

packages/bento-design-system/src/List/Config.ts

@@ -1,5 +1,5 @@
 import { IconProps } from "../Icons";
-import { IllustrationProps } from "../Illustrations";
+import { IllustrationColor, IllustrationProps } from "../Illustrations";
 import { BentoSprinkles } from "../internal";
 import { BodyProps } from "../Typography/Body/Body";
 import { LabelProps } from "../Typography/Label/Label";
@@ -10,6 +10,7 @@ type ListItemSizeConfig<T> = {
 };
 
 export type ListItemConfig = {
+  borderRadius: BentoSprinkles["borderRadius"];
   paddingX: ListItemSizeConfig<BentoSprinkles["paddingX"]>;
   paddingY: ListItemSizeConfig<BentoSprinkles["paddingY"]>;
   fontSize: {
@@ -23,8 +24,14 @@ export type ListItemConfig = {
     trailing: IconProps["size"];
     illustration: IllustrationProps["size"];
   };
+  iconColor: {
+    leading: IconProps["color"];
+    trailing: IconProps["color"];
+    illustration: IllustrationColor;
+  };
 };
 
 export type ListConfig = {
   item: ListItemConfig;
+  spacing: BentoSprinkles["gap"];
 };

packages/bento-design-system/src/List/InternalList.tsx

@@ -1,13 +1,15 @@
 import { Stack, Children } from "..";
+import { useBentoConfig } from "../BentoConfigContext";
 import type { ListProps } from "./List";
 
 type Props = Omit<ListProps, "items" | "size"> & {
   children: Children;
 };
 
-export function InternalList({ dividers, children }: Props) {
+export function InternalList({ dividers, space, children }: Props) {
+  const config = useBentoConfig().list;
   return (
-    <Stack space={0} as="ul" dividers={dividers}>
+    <Stack space={space ?? config.spacing} as="ul" dividers={dividers}>
       {children}
     </Stack>
   );

packages/bento-design-system/src/List/List.tsx

@@ -1,10 +1,12 @@
 import { ListItem, ListItemProps } from "./ListItem";
 import { InternalList } from "./InternalList";
+import { BentoSprinkles } from "../internal";
 
 export type ListSize = "medium" | "large";
 type Props = {
   size: ListSize;
   items: ListItemProps[];
+  space?: BentoSprinkles["gap"];
   dividers?: boolean;
 };
 

packages/bento-design-system/src/List/ListItem.tsx

@@ -19,6 +19,7 @@ import { element } from "../reset.css";
 import { Children } from "../util/Children";
 import { useBentoConfig } from "../BentoConfigContext";
 import type { ListItemConfig } from "./Config";
+import { BentoSprinkles } from "../internal";
 
 type Kind =
   | {
@@ -55,6 +56,7 @@ type RightItem = {
 };
 
 type CommonItemProps = {
+  borderRadius?: BentoSprinkles["borderRadius"];
   disabled?: boolean;
   isFocused?: boolean;
   isSelected?: boolean;
@@ -105,6 +107,7 @@ export const ListItem = forwardRef<HTMLElement, Props>((props, ref) => {
         focused: !!props.isFocused,
         selected: !!props.isSelected,
       })}
+      borderRadius={props.borderRadius ?? config.borderRadius}
       disabled={props.disabled}
     >
       <Box
@@ -136,7 +139,7 @@ function renderLeft(props: Props, config: ListItemConfig) {
         {props.illustration({
           size: config.iconSize.illustration,
           kind: "outline",
-          color: props.disabled ? "disabled" : "default",
+          color: props.disabled ? "disabled" : config.iconColor.illustration,
         })}
       </Column>
     );
@@ -147,7 +150,7 @@ function renderLeft(props: Props, config: ListItemConfig) {
       <Column width="content">
         {props.icon({
           size: config.iconSize.leading,
-          color: props.disabled ? "disabled" : "default",
+          color: props.disabled ? "disabled" : config.iconColor.leading,
         })}
       </Column>
     );
@@ -162,7 +165,7 @@ function renderRight(props: Props, config: ListItemConfig) {
       <Column width="content">
         {props.trailingIcon({
           size: config.iconSize.trailing,
-          color: props.disabled ? "disabled" : "default",
+          color: props.disabled ? "disabled" : config.iconColor.trailing,
         })}
       </Column>
     );

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

@@ -323,6 +323,7 @@ export const iconButton: IconButtonConfig = {
 
 export const list: ListConfig = {
   item: {
+    borderRadius: 0,
     paddingX: {
       medium: 16,
       large: 16,
@@ -342,7 +343,13 @@ export const list: ListConfig = {
       trailing: 16,
       illustration: 32,
     },
+    iconColor: {
+      leading: "default",
+      trailing: "default",
+      illustration: "default",
+    },
   },
+  spacing: 0,
 };
 
 export const menu: MenuConfig = {
@@ -433,6 +440,7 @@ export const dropdown: DropdownConfig = {
   menuPaddingY: 8,
   list: {
     item: {
+      borderRadius: 0,
       paddingX: {
         medium: 16,
         large: 16,
@@ -452,7 +460,13 @@ export const dropdown: DropdownConfig = {
         trailing: 16,
         illustration: 32,
       },
+      iconColor: {
+        leading: "default",
+        trailing: "default",
+        illustration: "default",
+      },
     },
+    spacing: 0,
   },
   defaultMenuSize: "medium",
   openIndicatorIcon: IconChevronDown,

packages/storybook/stories/Components/List.stories.tsx

@@ -155,3 +155,23 @@ export const OverlineIllustration = createStory({
     },
   ],
 });
+
+export const WithSpacing = createStory({
+  items: [
+    { kind: "single-line", label, href },
+    { kind: "single-line", label: labelLong, href },
+    { kind: "single-line", label, href },
+    { kind: "single-line", label: labelRich, href },
+  ],
+  space: 8,
+});
+
+export const WithRoundBorders = createStory({
+  items: [
+    { kind: "single-line", borderRadius: 8, label, href },
+    { kind: "single-line", borderRadius: 8, label: labelLong, href },
+    { kind: "single-line", borderRadius: 8, label, href },
+    { kind: "single-line", borderRadius: 8, label: labelRich, href },
+  ],
+  space: 8,
+});