Merge pull request #519 from buildo/expand_modal_and_chip_config

Expand modal and chip config

Author: federico-ercoles

packages/bento-design-system/src/Chip/Chip.css.ts

@@ -1,12 +1,21 @@
 import { createVar, style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal";
+import { strictRecipe } from "../util/strictRecipe";
 
-export const chip = bentoSprinkles({
-  color: "textPrimary",
-  textTransform: "uppercase",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
+export const chipRecipe = strictRecipe({
+  base: bentoSprinkles({
+    color: "textPrimary",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  }),
+  variants: {
+    uppercase: {
+      true: bentoSprinkles({
+        textTransform: "uppercase",
+      }),
+    },
+  },
 });
 
 export const maxWidth = createVar();

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

@@ -11,7 +11,7 @@ import {
   Body,
 } from "..";
 import { BentoSprinkles } from "../internal";
-import { chip, ellipsedLabel, maxWidth } from "./Chip.css";
+import { chipRecipe, ellipsedLabel, maxWidth } from "./Chip.css";
 import { useDefaultMessages } from "../util/useDefaultMessages";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useBentoConfig } from "../BentoConfigContext";
@@ -46,6 +46,7 @@ type Props = {
   icon?: FunctionComponent<IconProps>;
   /** Truncate and show ellipsis after a number of characters */
   maxCharacters?: number;
+  uppercase?: boolean;
 } & DismissProps;
 
 const defaultColorsMapping: Record<DefaultColor, BentoSprinkles["background"]> = {
@@ -61,7 +62,14 @@ const defaultColorsMapping: Record<DefaultColor, BentoSprinkles["background"]> =
   pink: "softPink",
 };
 
-export function Chip({ color, label: _label, icon, maxCharacters, ...dismissProps }: Props) {
+export function Chip({
+  color,
+  label: _label,
+  icon,
+  maxCharacters,
+  uppercase,
+  ...dismissProps
+}: Props) {
   const config = useBentoConfig().chip;
   const colorsMapping = { ...defaultColorsMapping, ...config.customColors };
 
@@ -87,7 +95,7 @@ export function Chip({ color, label: _label, icon, maxCharacters, ...dismissProp
       <Box
         paddingX={config.paddingX}
         paddingY={config.paddingY}
-        className={chip}
+        className={chipRecipe({ uppercase: uppercase ?? config.uppercase })}
         background={colorsMapping[color]}
         borderRadius={config.radius}
       >

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

@@ -18,4 +18,5 @@ export type ChipConfig = {
     [k in ChipCustomColors]: BentoSprinkles["background"];
   };
   radius: BentoSprinkles["borderRadius"];
+  uppercase: boolean;
 };

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

@@ -19,4 +19,5 @@ export type ModalConfig = {
   titleIconSize: IconProps["size"];
   defaultErrorBannerWidth: NonNullable<ActionsProps["errorBannerWidth"]>;
   actionsSize: NonNullable<ActionsProps["size"]>;
+  internalSpacing: BentoSprinkles["gap"];
 };

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

@@ -8,7 +8,6 @@ import {
   Box,
   Column,
   Columns,
-  Inset,
   Actions,
 } from "..";
 import { useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
@@ -102,7 +101,11 @@ export function Modal(props: Props) {
 
   return (
     <CustomModal {...props} aria-label={props.title}>
-      <Inset spaceX={config.paddingX} spaceY={config.paddingY}>
+      <Box
+        paddingX={config.paddingX}
+        paddingTop={config.paddingY}
+        paddingBottom={config.internalSpacing}
+      >
         <Columns space={16} alignY="top">
           <Columns space={16} alignY="center">
             {icon && <Column width="content">{icon}</Column>}
@@ -120,11 +123,15 @@ export function Modal(props: Props) {
             />
           </Column>
         </Columns>
-      </Inset>
+      </Box>
       <Box className={modalBody} paddingX={config.paddingX}>
         {props.children}
       </Box>
-      <Inset spaceX={config.paddingX} spaceY={config.paddingY}>
+      <Box
+        paddingX={config.paddingX}
+        paddingTop={config.internalSpacing}
+        paddingBottom={config.paddingY}
+      >
         <Actions
           primaryAction={
             props.primaryAction
@@ -137,7 +144,7 @@ export function Modal(props: Props) {
           error={props.error}
           errorBannerWidth={props.errorBannerWidth || config.defaultErrorBannerWidth}
         />
-      </Inset>
+      </Box>
     </CustomModal>
   );
 }

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

@@ -169,6 +169,7 @@ export const chip: ChipConfig = {
   spacingAfterLabel: 8,
   customColors: {},
   radius: "circledX",
+  uppercase: true,
 };
 
 export const decorativeDivider: DecorativeDividerConfig = {
@@ -383,6 +384,7 @@ export const modal: ModalConfig = {
   titleIconSize: 24,
   defaultErrorBannerWidth: "content",
   actionsSize: "large",
+  internalSpacing: 24,
 };
 
 export const navigation: NavigationConfig = {

packages/storybook/stories/Components/Chip.stories.tsx

@@ -39,3 +39,8 @@ export const MaxWidth = createStory({
   color: "blue",
   maxCharacters: 10,
 });
+
+export const LowerCase = createStory({
+  color: "blue",
+  uppercase: false,
+});