From 33e8655f9630d555c5300306c9a4cbce7c8e12e6 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 22 Aug 2024 13:07:10 -0700
Subject: [PATCH] feat: add subtle and outline fill to s2 badge (#6898)

* feat: add subtle and outline fill to s2 badge

* update comment

* add transparent border, fix neutral outline color

* fix layout

* make props optional
---
 packages/@react-spectrum/s2/src/Badge.tsx | 134 ++++++++++++++++------
 1 file changed, 99 insertions(+), 35 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index 4c9fda7473f..54dfb01a5cd 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -34,7 +34,12 @@ export interface BadgeStyleProps {
    * 
    * @default 'neutral'
    */
-  variant: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver'
+  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
+  /**
+   * The fill of the badge.
+   * @default 'bold'
+   */
+  fillStyle?: 'bold' | 'subtle' | 'outline'
 }
 
 export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {
@@ -73,42 +78,100 @@ const badge = style<BadgeStyleProps>({
   },
   columnGap: 'text-to-visual',
   color: {
-    default: 'white',
-    variant: {
-      notice: 'black',
-      orange: 'black',
-      yellow: 'black',
-      charteuse: 'black',
-      celery: 'black'
+    fillStyle: {
+      bold: {
+        default: 'white',
+        variant: {
+          notice: 'black',
+          orange: 'black',
+          yellow: 'black',
+          charteuse: 'black',
+          celery: 'black'
+        }
+      },
+      subtle: 'gray-1000',
+      outline: 'gray-1000'
     }
   },
   backgroundColor: {
-    variant: {
-      accent: 'accent',
-      informative: 'informative',
-      neutral: 'neutral-subdued',
-      positive: 'positive',
-      notice: 'notice',
-      negative: 'negative',
-      gray: 'gray',
-      red: 'red',
-      orange: 'orange',
-      yellow: 'yellow',
-      charteuse: 'chartreuse',
-      celery: 'celery',
-      green: 'green',
-      seafoam: 'seafoam',
-      cyan: 'cyan',
-      blue: 'blue',
-      indigo: 'indigo',
-      purple: 'purple',
-      fuchsia: 'fuchsia',
-      magenta: 'magenta',
-      pink: 'pink',
-      turquoise: 'turquoise',
-      brown: 'brown',
-      cinnamon: 'cinnamon',
-      silver: 'silver'
+    fillStyle: {
+      bold: {
+        variant: {
+          accent: 'accent',
+          informative: 'informative',
+          neutral: 'neutral-subdued',
+          positive: 'positive',
+          notice: 'notice',
+          negative: 'negative',
+          gray: 'gray',
+          red: 'red',
+          orange: 'orange',
+          yellow: 'yellow',
+          charteuse: 'chartreuse',
+          celery: 'celery',
+          green: 'green',
+          seafoam: 'seafoam',
+          cyan: 'cyan',
+          blue: 'blue',
+          indigo: 'indigo',
+          purple: 'purple',
+          fuchsia: 'fuchsia',
+          magenta: 'magenta',
+          pink: 'pink',
+          turquoise: 'turquoise',
+          brown: 'brown',
+          cinnamon: 'cinnamon',
+          silver: 'silver'
+        }
+      },
+      subtle: {
+        variant: {
+          accent: 'accent-200',
+          informative: 'informative-subtle',
+          neutral: 'neutral-subtle',
+          positive: 'positive-subtle',
+          notice: 'notice-subtle',
+          negative: 'negative-subtle',
+          gray: 'gray-100',
+          red: 'red-200',
+          orange: 'orange-200',
+          yellow: 'yellow-200',
+          charteuse: 'chartreuse-200',
+          celery: 'celery-200',
+          green: 'green-200',
+          seafoam: 'seafoam-200',
+          cyan: 'cyan-200',
+          blue: 'blue-200',
+          indigo: 'indigo-200',
+          purple: 'purple-200',
+          fuchsia: 'fuchsia-200',
+          magenta: 'magenta-200',
+          pink: 'pink-200',
+          turquoise: 'turquoise-200',
+          brown: 'brown-200',
+          cinnamon: 'cinnamon-200',
+          silver: 'silver-200'
+        }
+      },
+      outline: 'gray-25'
+    }
+  },
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  borderWidth: 2,
+  borderColor: {
+    default: 'transparent',
+    fillStyle: {
+      outline: {
+        variant: {
+          accent: 'accent-800',
+          informative: 'informative-800',
+          neutral: 'gray-700',
+          positive: 'positive-700',
+          notice: 'notice-700',
+          negative: 'negative-800',
+        }
+      }
     }
   },
   '--iconPrimary': {
@@ -123,6 +186,7 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
     children,
     variant = 'neutral',
     size = 'S',
+    fillStyle = 'bold',
     ...otherProps
   } = props; // useProviderProps(props) in v3
   let domRef = useDOMRef(ref);
@@ -140,7 +204,7 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
       <span
         {...filterDOMProps(otherProps)}
         role="presentation"
-        className={(props.UNSAFE_className || '') + badge({variant, size}, props.styles)}
+        className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}
         ref={domRef}>
         {
           typeof children === 'string' || isTextOnly