Merge pull request #59 from buildo/3193003-make_chip_colors_configurable

Author: gabro

src/Chip/Chip.css.ts

@@ -1,27 +1,10 @@
 import { bentoSprinkles } from "../internal";
-import { strictRecipe } from "../util/strictRecipe";
 
-export const chipRecipe = strictRecipe({
-  base: bentoSprinkles({
-    color: "textPrimary",
-    borderRadius: "circledX",
-    textTransform: "uppercase",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  }),
-  variants: {
-    color: {
-      grey: bentoSprinkles({ background: "softGrey" }),
-      red: bentoSprinkles({ background: "softRed" }),
-      orange: bentoSprinkles({ background: "softOrange" }),
-      yellow: bentoSprinkles({ background: "softYellow" }),
-      green: bentoSprinkles({ background: "softGreen" }),
-      jade: bentoSprinkles({ background: "softJade" }),
-      blue: bentoSprinkles({ background: "softBlue" }),
-      indigo: bentoSprinkles({ background: "softIndigo" }),
-      violet: bentoSprinkles({ background: "softViolet" }),
-      pink: bentoSprinkles({ background: "softPink" }),
-    },
-  },
+export const chip = bentoSprinkles({
+  color: "textPrimary",
+  borderRadius: "circledX",
+  textTransform: "uppercase",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 });

src/Chip/createChip.tsx

@@ -1,8 +1,9 @@
 import { ComponentProps, FunctionComponent } from "react";
 import { IconProps } from "../Icons/IconProps";
-import { Label, LocalizedString, IconButton, IconClose } from "..";
-import { Box, Columns, Column, BentoSprinkles } from "../internal";
-import { chipRecipe } from "./Chip.css";
+import { Label, LocalizedString, IconButton, BoxProps, BoxType } from "..";
+import { IconClose } from "../Icons/IconClose";
+import { Column, Columns, BentoSprinkles, bentoSprinkles } from "../internal";
+import { chip } from "./Chip.css";
 import { useDefaultMessages } from "../util/useDefaultMessages";
 
 type DismissProps =
@@ -15,51 +16,64 @@ type DismissProps =
       onDismiss?: never;
     };
 
-export type ChipProps = {
+type DefaultColor =
+  | "grey"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "jade"
+  | "blue"
+  | "indigo"
+  | "violet"
+  | "pink";
+
+export type ChipProps<CustomColor extends string> = {
   label: LocalizedString;
-  color:
-    | "grey"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "jade"
-    | "blue"
-    | "indigo"
-    | "violet"
-    | "pink";
+  color: DefaultColor | CustomColor;
 } & DismissProps;
 
-type ChipConfig = {
+type ChipConfig<AtomsFn extends typeof bentoSprinkles, CustomColor extends string> = {
   paddingX: BentoSprinkles["paddingX"];
   paddingY: BentoSprinkles["paddingY"];
   labelSize: ComponentProps<typeof Label>["size"];
   closeIcon: FunctionComponent<IconProps>;
   closeIconSize: IconProps["size"];
   internalSpacing: BentoSprinkles["gap"];
+  customColors: {
+    [k in CustomColor]: BoxProps<AtomsFn>["background"];
+  };
+};
+
+const defaultColorsMapping: Record<DefaultColor, BentoSprinkles["background"]> = {
+  grey: "softGrey",
+  red: "softRed",
+  orange: "softOrange",
+  yellow: "softYellow",
+  green: "softGreen",
+  jade: "softJade",
+  blue: "softBlue",
+  indigo: "softIndigo",
+  violet: "softViolet",
+  pink: "softPink",
 };
 
-export function createChip(
-  config: ChipConfig = {
-    paddingX: 8,
-    paddingY: 4,
-    labelSize: "small",
-    closeIcon: IconClose,
-    closeIconSize: 8,
-    internalSpacing: 8,
-  }
+export function createChip<AtomsFn extends typeof bentoSprinkles, CustomColors extends string>(
+  Box: BoxType<AtomsFn>,
+  config: ChipConfig<AtomsFn, CustomColors>
 ) {
-  return function Chip({ color, label, ...dismissProps }: ChipProps) {
+  const colorsMapping = { ...defaultColorsMapping, ...config.customColors };
+
+  return function Chip({ color, label, ...dismissProps }: ChipProps<CustomColors>) {
     const { defaultMessages } = useDefaultMessages();
 
     return (
       <Box display="flex">
         <Box
           paddingX={config.paddingX}
           paddingY={config.paddingY}
-          className={chipRecipe({
-            color,
-          })}
+          className={chip}
+          background={colorsMapping[color]}
         >
           <Columns space={config.internalSpacing} align="center" alignY="center">
             <Label size={config.labelSize}>{label}</Label>
@@ -79,3 +93,13 @@ export function createChip(
     );
   };
 }
+
+export const defaultChipConfig: ChipConfig<typeof bentoSprinkles, string> = {
+  paddingX: 8,
+  paddingY: 4,
+  labelSize: "small",
+  closeIcon: IconClose,
+  closeIconSize: 8,
+  internalSpacing: 8,
+  customColors: {},
+};

stories/Components/Chip.stories.tsx

@@ -23,3 +23,7 @@ export const NonDismissable = createStory(
 export const Dismissable = createStory({
   color: "blue",
 });
+
+export const CustomColor = createStory({
+  color: "custom",
+});

stories/atoms.ts

@@ -11,6 +11,11 @@ const color = {
   ...vars.color,
 };
 
+const background = {
+  ...bentoAtoms.statusProperties.background,
+  ...vars.color,
+};
+
 const fill = {
   ...bentoAtoms.statusProperties.fill,
   ...vars.color,
@@ -35,6 +40,7 @@ export const responsiveProperties = {
 
 export const statusProperties = {
   ...bentoAtoms.statusProperties,
+  background,
   color,
   fill,
   stroke: color,

stories/index.tsx

@@ -26,6 +26,7 @@ import {
   createFeedback,
   IllustrationNegative,
   IllustrationPositive,
+  defaultChipConfig,
 } from "../src";
 import { sprinkles } from "./sprinkles.css";
 
@@ -50,7 +51,12 @@ export const Card = createCard<24 | 32 | 40>({});
 export const Link = createLink();
 export const Breadcrumb = createBreadcrumb(Link);
 export const Modal = createModal(Actions);
-export const Chip = createChip();
+export const Chip = createChip(Box, {
+  ...defaultChipConfig,
+  customColors: {
+    custom: "customColor1",
+  },
+});
 export const { List } = createListComponents();
 export const Disclosure = createDisclosure();
 export const DisclosureGroup = createDisclosureGroup(Disclosure);