studio(chore): badge component defrag (supabase#40118)

* component clean up

* optically center

* docs and type size

* code badge variant

* sensible defaults

* fix product menu flex

* badge sweep

* new project badges

* logs

* compute badge

* studio badge sweep

* www sweep

* docs sweep

* clean up

* fixes

* cleanup

* fixes

* better docs

* fixes

* misc fixes

* consistency

* Minor fixes for issues i found

* simplify mt-0

* mt simplification

* remaining optical alignment

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: dnywh

apps/design-system/__registry__/index.tsx

@@ -192,24 +192,13 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "badge-destructive": {
-      name: "badge-destructive",
+    "badge-state": {
+      name: "badge-state",
       type: "components:example",
       registryDependencies: ["badge"],
-      component: React.lazy(() => import("@/registry/default/example/badge-destructive")),
+      component: React.lazy(() => import("@/registry/default/example/badge-state")),
       source: "",
-      files: ["registry/default/example/badge-destructive.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "badge-outline": {
-      name: "badge-outline",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: React.lazy(() => import("@/registry/default/example/badge-outline")),
-      source: "",
-      files: ["registry/default/example/badge-outline.tsx"],
+      files: ["registry/default/example/badge-state.tsx"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []

apps/design-system/components/source-panel.tsx

@@ -3,9 +3,9 @@ import Link from 'next/link'
 import { forwardRef } from 'react'
 
 import { ExternalLink } from 'lucide-react'
+import Image from 'next/image'
 import { Button } from 'ui'
 import { cn } from 'ui/src/lib/utils/cn'
-import Image from 'next/image'
 
 const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & { doc: Doc }>(
   ({ doc, children, ...props }, ref) => {
@@ -133,13 +133,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
-                    <Link
-                      href={doc.links.api}
-                      target="_blank"
-                      rel="noreferrer"
-
-                      // className={cn(badgeVariants({ variant: 'default' }), 'gap-1')}
-                    >
+                    <Link href={doc.links.api} target="_blank" rel="noreferrer">
                       API Reference
                     </Link>
                   </Button>
@@ -233,13 +227,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
-                      <Link
-                        href={doc.links.api}
-                        target="_blank"
-                        rel="noreferrer"
-
-                        // className={cn(badgeVariants({ variant: 'default' }), 'gap-1')}
-                      >
+                      <Link href={doc.links.api} target="_blank" rel="noreferrer">
                         API Reference
                       </Link>
                     </Button>

apps/design-system/content/docs/components/badge.mdx

@@ -1,44 +1,12 @@
 ---
 title: Badge
-description: Displays a badge or a component that looks like a badge.
+description: Add contextual metadata to another item.
 component: true
-source:
-  shadcn: true
 ---
 
-<ComponentPreview name="badge-demo" peekCode wide />
+Badge displays contextual information such as surrounding state or product category. Its purpose should be be self-evident based on surrounding context.
 
-## Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn-ui@latest add badge
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource name="badge" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
+<ComponentPreview name="badge-demo" peekCode />
 
 ## Usage
 
@@ -47,41 +15,23 @@ import { Badge } from '@/components/ui/badge'
 ```
 
 ```tsx
-<Badge variant="outline">Badge</Badge>
+<Badge variant="default">Default</Badge>
 ```
 
-### Link
+Avoid altering the Badge style, such as text case or roundedness. Consistent implementation makes Badge immediately recognizable throughout Supabase for denoting state or category. Use or create another component for other use cases, such as compute size and status.
 
-You can use the `badgeVariants` helper to create a link that looks like a badge.
+Keep Badge text to one or two words as it is designed to support other elements, not as a primary communication aid.
 
-```tsx
-import { badgeVariants } from '@/components/ui/badge'
-```
-
-```tsx
-<Link className={badgeVariants({ variant: 'outline' })}>Badge</Link>
-```
+Badge is designed to stand out, so should be used sparingly.
 
 ## Examples
 
-### Default
+### States
 
-<ComponentPreview name="badge-demo" peekCode wide />
-
----
+<ComponentPreview name="badge-state" peekCode />
 
 ### Secondary
 
-<ComponentPreview name="badge-secondary" />
-
----
-
-### Outline
-
-<ComponentPreview name="badge-outline" />
-
----
-
-### Destructive
+A content-only variant similar to the `text` variant of [Button](../components/button#types).
 
-<ComponentPreview name="badge-destructive" />
+<ComponentPreview name="badge-secondary" peekCode />

apps/design-system/registry/default/example/badge-demo.tsx

@@ -1,5 +1,5 @@
 import { Badge } from 'ui'
 
 export default function BadgeDemo() {
-  return <Badge>Badge</Badge>
+  return <Badge>Default</Badge>
 }

apps/design-system/registry/default/example/badge-destructive.tsx

@@ -0,0 +1,12 @@
+import { Badge } from 'ui'
+
+export default function BadgeState() {
+  return (
+    <div className="flex flex-row gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+    </div>
+  )
+}

apps/design-system/registry/default/example/badge-outline.tsx

@@ -32,9 +32,7 @@ export default function ModalVerticalCustomFooter() {
         customFooter={
           <div className="flex items-center gap-3">
             <div>
-              <Badge variant="destructive" dot size="small">
-                Proceed with caution
-              </Badge>
+              <Badge variant="destructive">Proceed with caution</Badge>
             </div>
             <Button type="secondary">Cancel</Button>
             <Button type="danger">Delete</Button>

apps/design-system/registry/default/example/badge-state.tsx

@@ -62,16 +62,10 @@ export const examples: Registry = [
     files: ['example/badge-demo.tsx'],
   },
   {
-    name: 'badge-destructive',
+    name: 'badge-state',
     type: 'components:example',
     registryDependencies: ['badge'],
-    files: ['example/badge-destructive.tsx'],
-  },
-  {
-    name: 'badge-outline',
-    type: 'components:example',
-    registryDependencies: ['badge'],
-    files: ['example/badge-outline.tsx'],
+    files: ['example/badge-state.tsx'],
   },
   {
     name: 'badge-secondary',

apps/design-system/registry/default/example/modal-custom-footer.tsx

@@ -179,7 +179,7 @@ export const MenuItem = React.forwardRef<
         <>
           {icon && <MenuIconPicker icon={icon} className="text-foreground-lighter" />}
           <span className="flex-1">{title}</span>
-          {community && <Badge size="small">Community</Badge>}
+          {community && <Badge>Community</Badge>}
         </>
       )}
     </Link>