feat(status-badge): add borderless size (#4094)

Author: nkrantz

.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.

.changeset/fuzzy-crews-brake.md

@@ -0,0 +1,5 @@
+---
+"@twilio-paste/codemods": minor
+---
+
+[Codemods] new export from badge package (type)

.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

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";

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 {"default" | "small" | "borderless"}
+     */
+    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}

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({});

packages/paste-core/components/status/type-docs.json

@@ -1542,10 +1542,11 @@
       "externalProp": true
     },
     "size": {
-      "type": "BadgeSizes",
+      "type": "BadgeSizes | \"borderless\"",
       "defaultValue": "default",
       "required": false,
-      "externalProp": false
+      "externalProp": false,
+      "description": "Sets the size of the Status Badge"
     },
     "slot": {
       "type": "string",