feat(status-badge): add borderless size

twilio-labs · Oct 2, 2024 · ce51229 · ce51229
1 parent 85a7545
commit ce51229
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 30 deletions.
diff --git a/.changeset/clean-llamas-joke.md b/.changeset/clean-llamas-joke.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/status": minor
+"@twilio-paste/core": minor
+---
+
+[Status Badge] add new `size` value "borderless" which removes padding and border (box shadow) for a less stylized option of Status Badge for use in Tables and other crowded layouts.
diff --git a/.changeset/fuzzy-crews-brake.md b/.changeset/fuzzy-crews-brake.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/codemods": minor
+---
+
+[Codemods] new export from badge package (type)
diff --git a/.changeset/soft-snails-crash.md b/.changeset/soft-snails-crash.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/badge": minor
+"@twilio-paste/core": minor
+---
+
+[Badge] new type export: BadgeSizes for use in status-badge package
diff --git a/packages/paste-core/components/badge/src/index.tsx b/packages/paste-core/components/badge/src/index.tsx
@@ -1,4 +1,4 @@
-export type { BadgeBaseProps, BadgeProps, BadgeButtonProps, BadgeSpanProps } from "./types";
+export type { BadgeBaseProps, BadgeProps, BadgeButtonProps, BadgeSpanProps, BadgeSizes } from "./types";
 export { useResizeChildIcons } from "./hooks";
 export { badgeBaseStyles, badgeVariantStyles, badgeButtonStyles, getBadgeButtonStyles } from "./styles";
 export { BadgeVariants } from "./constants";

diff --git a/packages/paste-core/components/status/src/StatusBadge.tsx b/packages/paste-core/components/status/src/StatusBadge.tsx
@@ -1,12 +1,13 @@
 import { badgeBaseStyles, badgeVariantStyles } from "@twilio-paste/badge";
-import type { BadgeBaseProps, BadgeSpanProps } from "@twilio-paste/badge";
-import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BadgeBaseProps, BadgeSizes, BadgeSpanProps } from "@twilio-paste/badge";
+import { Box, BoxStyleProps, safelySpreadBoxProps } from "@twilio-paste/box";
+import { Space } from "@twilio-paste/style-props";
 import * as React from "react";
 
 import { StatusObject } from "./constants";
 import type { StatusBadgeVariants } from "./types";
 
-export type StatusBadgeProps = Omit<BadgeBaseProps, "variant"> &
+export type StatusBadgeProps = Omit<BadgeBaseProps, "variant" | "size"> &
   BadgeSpanProps & {
     /**
      * Overrides the default element name to apply unique styles with the Customization Provider
@@ -21,10 +22,43 @@ export type StatusBadgeProps = Omit<BadgeBaseProps, "variant"> &
      * @type {StatusBadgeVariants}
      */
     variant: StatusBadgeVariants;
+    /**
+     * Sets the size of the Status Badge
+     *
+     * @default "default"
+     * @type {StatusBadgeVariants}
+     */
+    size?: BadgeSizes | "borderless";
   };
 
+const paddingX = (size: StatusBadgeProps["size"]): Space => {
+  switch (size) {
+    case "small":
+      return "space20";
+    case "borderless":
+      return "space0";
+    default:
+      return "space30";
+  }
+};
+const paddingY = (size: StatusBadgeProps["size"]): Space => {
+  switch (size) {
+    case "small":
+      return "space10";
+    case "borderless":
+      return "space0";
+    default:
+      return "space20";
+  }
+};
+
 const badgeStyles = { ...badgeBaseStyles, ...badgeVariantStyles.default };
 
+const badgeBorderlessStyles: BoxStyleProps = {
+  boxShadow: "none",
+  backgroundColor: "transparent",
+};
+
 const StatusBadge = React.forwardRef<HTMLElement, StatusBadgeProps>(
   ({ children, element = "STATUS_BADGE", size, variant, ...props }, ref) => {
     return (
@@ -35,12 +69,13 @@ const StatusBadge = React.forwardRef<HTMLElement, StatusBadgeProps>(
         variant={variant}
         {...badgeStyles}
         color={StatusObject[variant].color}
-        paddingX={size === "small" ? "space20" : "space30"}
-        paddingY={size === "small" ? "space10" : "space20"}
+        paddingX={paddingX(size)}
+        paddingY={paddingY(size)}
         display="flex"
         flexDirection="row"
         columnGap="space20"
         alignItems="center"
+        {...(size === "borderless" && badgeBorderlessStyles)}
         ref={ref}
       >
         {StatusObject[variant].icon}

diff --git a/packages/paste-core/components/status/stories/StatusBadge.stories.tsx b/packages/paste-core/components/status/stories/StatusBadge.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
 import { StatusBadge } from "../src";
@@ -18,9 +19,17 @@ export default {
 } as Meta<typeof StatusBadge>;
 
 const Template: StoryFn<typeof StatusBadge> = ({ variant }) => (
-  <StatusBadge as="span" variant={variant}>
-    {variant}
-  </StatusBadge>
+  <Box display="flex" flexDirection="column" rowGap="space60">
+    <StatusBadge as="span" variant={variant} size="default">
+      {variant}
+    </StatusBadge>
+    <StatusBadge as="span" variant={variant} size="small">
+      {variant}
+    </StatusBadge>
+    <StatusBadge as="span" variant={variant} size="borderless">
+      {variant}
+    </StatusBadge>
+  </Box>
 );
 
 export const ProcessSuccessStatusBadge = Template.bind({});

diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx
@@ -166,17 +166,10 @@ export const tableExample = `
     <TBody>
       <Tr>
         <Td>
-          <Box display="inline-flex" columnGap="space20">
-            <ProcessSuccessIcon
-              color="colorTextIconSuccess"
-              decorative={false}
-              title="success"
-            />
             <Box>
-              <Text as="div">Successfully exported</Text>
-              <Text as="div" color="colorTextWeak">Tuesday, January 2, 2021</Text>
+              <StatusBadge as="span" size="borderless" variant="ProcessSuccess">Successfully exported</StatusBadge>
+              <Text as="div" color="colorTextWeak" fontSize="fontSize20" marginLeft="space60">Tuesday, January 2, 2021</Text>
             </Box>
-          </Box>
         </Td>
         <Td>
           <strong>Contacts who did not click</strong>
@@ -185,14 +178,9 @@ export const tableExample = `
       <Tr>
         <Td>
           <Box display="inline-flex" columnGap="space20">
-            <ProcessSuccessIcon
-              color="colorTextIconSuccess"
-              decorative={false}
-              title="success"
-            />
             <Box>
-              <Text as="div">Successfully exported</Text>
-              <Text as="div" color="colorTextWeak">Tuesday, February 2, 2021</Text>
+              <StatusBadge as="span" size="borderless" variant="ProcessSuccess">Successfully exported</StatusBadge>
+              <Text as="div" color="colorTextWeak" fontSize="fontSize20" marginLeft="space60">Tuesday, February 2, 2021</Text>
             </Box>
           </Box>
         </Td>
@@ -223,7 +211,7 @@ export const tableExample = `
         <Td>WE902990c21gjioGasd</Td>
         <Td>North America</Td>
         <Td>
-          <StatusBadge variant="ProcessSuccess">Active</StatusBadge>
+          <StatusBadge variant="ProcessSuccess" size="borderless">Active</StatusBadge>
         </Td>
         <Td>2020-10-15</Td>
       </Tr>
@@ -232,7 +220,7 @@ export const tableExample = `
         <Td>WE928471c21gjioGasd</Td>
         <Td>North America</Td>
         <Td>
-          <StatusBadge variant="ProcessNeutral">Ready</StatusBadge>
+          <StatusBadge variant="ProcessNeutral" size="borderless">Ready</StatusBadge>
         </Td>
         <Td>2020-10-15</Td>
       </Tr>
@@ -260,7 +248,7 @@ export const tableWithPlainTextExample = `
         <Td>Bewitched</Td>
         <Td>Series</Td>
         <Td>
-          <StatusBadge variant="ProcessWarning">Progress halted</StatusBadge>
+          <StatusBadge variant="ProcessWarning" size="borderless">Progress halted</StatusBadge>
         </Td>
       </Tr>
       <Tr>

diff --git a/packages/paste-website/src/pages/components/status-badge/index.mdx b/packages/paste-website/src/pages/components/status-badge/index.mdx
@@ -260,6 +260,56 @@ Use small Badges sparingly, only when needed for vertical density. Guidelines fo
 `.trim()}
 </LivePreview>
 
+### Borderless Badges
+
+Use borderless Badges to reduce spacing and styling when many Badges are being used in close proxmity, such as within a [Table](/components/table) or [Data Grid](/components/data-grid). Guidelines for using variants in borderless Badge are the same as in their default size.
+
+<LivePreview scope={{Box, StatusBadge}} language="jsx">
+  {`<Box display="flex" flexDirection="column" rowGap="space40">
+  <Box display="flex" columnGap="space40" rowGap="space40" flexWrap="wrap">
+    <StatusBadge size="borderless" variant="ProcessSuccess">
+      Success
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ProcessError">
+      Error
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ProcessWarning">
+      Warning
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ProcessNeutral">
+      Neutral
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ProcessInProgress">
+      In-progress
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ProcessDisabled">
+      Disabled
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ProcessDraft">
+      Draft
+    </StatusBadge>
+  </Box>
+  <Box display="flex" columnGap="space40">
+    <StatusBadge size="borderless" variant="ConnectivityAvailable">
+      Available
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ConnectivityUnavailable">
+      Unavailable
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ConnectivityBusy">
+      Busy
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ConnectivityNeutral">
+      Neutral
+    </StatusBadge>
+    <StatusBadge size="borderless" variant="ConnectivityOffline">
+      Offline
+    </StatusBadge>
+  </Box>
+</Box>
+`.trim()}
+</LivePreview>
+
 ---
 
 ## Composition Notes

diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx
@@ -432,8 +432,7 @@ Use the [`StatusBadge`](/components/status-badge) component to compose a status
 
 ### Positioning in a table
 
-Statuses are most often used in tables across our products.
-Placement of the status in the table should depend on the importance of the status to the given user flow and should be tested with users.
+Statuses are most often used in tables across our products. [Borderless Status Badges](/components/status-badge#borderless-badges) should be used in tables and data grids. Placement of the status in the table should depend on the importance of the status to the given user flow and should be tested with users.
 
 <LivePreview
   scope={{