Add showBorder prop to Badge and StatusBadge components (#2830)

## Summary:

The Figma badge components for the status badges support disabling the border. To match this in code, we add a `showBorder` prop for the `Badge` and `StatusBadge` components

When `showBorder=false`, we set the border color to `transparent`. This is so overall, the badge maintains the same size, regardless of if the border is shown or not

Note: The Figma badge components now includes a NeutralBadge. I'll create this component in a separate PR!

Issue: WB-2028
Design: https://www.figma.com/design/EuFu0U7gqc1koXm8ZhlOLp/%E2%9A%A1%EF%B8%8F-Components?node-id=2151-112&m=dev

## Test plan:

1. Confirm the `showBorder` prop shows/hides the border only on the Badge and StatusBadge components

Author: beaesguerra

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2830

Author: beaesguerra

.changeset/dirty-hairs-deny.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-badge": minor
+---
+
+Add `showBorder` prop (defaults to true) to Badge and StatusBadge components

__docs__/wonder-blocks-badge/badge-testing-snapshots.stories.tsx

@@ -133,11 +133,25 @@ export const StateSheetStory: StoryComponentType = {
             <View style={{gap: sizing.size_080}}>
                 <HeadingLarge>Badge</HeadingLarge>
                 <StateSheet rows={rows} columns={columns} states={states}>
-                    {({props}) => <Badge {...props} />}
+                    {({props}) => (
+                        <View
+                            style={{gap: sizing.size_100, flexDirection: "row"}}
+                        >
+                            <Badge {...props} />
+                            <Badge {...props} showBorder={false} />
+                        </View>
+                    )}
                 </StateSheet>
                 <HeadingLarge>Status Badge</HeadingLarge>
                 <StateSheet rows={statusRows} columns={columns} states={states}>
-                    {({props}) => <StatusBadge {...props} />}
+                    {({props}) => (
+                        <View
+                            style={{gap: sizing.size_100, flexDirection: "row"}}
+                        >
+                            <StatusBadge {...props} />
+                            <StatusBadge {...props} showBorder={false} />
+                        </View>
+                    )}
                 </StateSheet>
                 <HeadingLarge>Gem Badge</HeadingLarge>
                 <StateSheet

__docs__/wonder-blocks-badge/badge.stories.tsx

@@ -68,6 +68,17 @@ export const Default = {
     },
 };
 
+/**
+ * A badge can be used without a border.
+ */
+export const NoBorder: StoryComponentType = {
+    args: {
+        icon: "cookieBold",
+        label: "Badge",
+        showBorder: false,
+    },
+};
+
 /**
  * A badge can be used with only a label.
  */

__docs__/wonder-blocks-badge/status-badge.stories.tsx

@@ -128,6 +128,39 @@ export const Kinds = {
     },
 };
 
+/**
+ * A status badge can be used without a border.
+ */
+export const NoBorder = {
+    args: {
+        icon: "cookieBold",
+    },
+    render(args: Omit<PropsFor<typeof StatusBadge>, "icon"> & {icon: string}) {
+        return (
+            <View style={styles.container}>
+                {kinds.map((kind) => {
+                    const kindLabel =
+                        kind.charAt(0).toUpperCase() + kind.slice(1);
+                    return (
+                        <StatusBadge
+                            showBorder={false}
+                            key={kind}
+                            kind={kind}
+                            label={kindLabel}
+                            icon={
+                                <PhosphorIcon
+                                    icon={args.icon}
+                                    aria-label="Cookie"
+                                />
+                            }
+                        />
+                    );
+                })}
+            </View>
+        );
+    },
+};
+
 /**
  * A badge can be used with only a label.
  */

packages/wonder-blocks-badge/src/components/badge.tsx

@@ -10,7 +10,14 @@ import * as React from "react";
 import {focusStyles} from "@khanacademy/wonder-blocks-styles";
 import {BaseBadgeProps, IconLabelProps} from "../types";
 
-type Props = IconLabelProps & BaseBadgeProps;
+type BadgeProps = {
+    /**
+     * Whether to show the border. Defaults to `true`.
+     */
+    showBorder?: boolean;
+};
+
+type Props = IconLabelProps & BaseBadgeProps & BadgeProps;
 
 const StyledSpan = addStyle("span");
 
@@ -29,6 +36,7 @@ const Badge = React.forwardRef<HTMLDivElement, Props>(function Badge(
         testId,
         styles: stylesProp,
         tag = "div",
+        showBorder = true,
         ...otherProps
     } = props;
     const StyledTag = React.useMemo(() => addStyle(tag, styles.default), [tag]);
@@ -46,6 +54,10 @@ const Badge = React.forwardRef<HTMLDivElement, Props>(function Badge(
                 styles.defaultBadgeStyling,
                 icon && !label ? styles.iconOnly : {},
                 stylesProp?.root,
+                // disabling border needs to be after custom styles so it can
+                // override any border styles that were applied by another badge
+                // component
+                !showBorder && styles.transparentBorder,
             ]}
             {...otherProps}
         >
@@ -156,4 +168,7 @@ const styles = StyleSheet.create({
     iconOnly: {
         padding: badgeTokens.root.layout.iconOnly.padding,
     },
+    transparentBorder: {
+        borderColor: semanticColor.core.transparent,
+    },
 });

packages/wonder-blocks-badge/src/components/status-badge.tsx

@@ -9,6 +9,10 @@ type Props = {
      * The kind of badge to display. Defaults to `info`.
      */
     kind?: "info" | "success" | "warning" | "critical";
+    /**
+     * Whether to show the border. Defaults to `true`.
+     */
+    showBorder?: boolean;
 } & BaseBadgeProps &
     IconLabelProps;
 
@@ -19,10 +23,11 @@ type Props = {
  * for the status kinds. For more details, see the `Badge` docs.
  */
 const StatusBadge = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
-    const {kind = "info", ...otherProps} = props;
+    const {kind = "info", showBorder, ...otherProps} = props;
     return (
         <Badge
             ref={ref}
+            showBorder={showBorder}
             {...otherProps}
             styles={{
                 ...otherProps.styles,