Group ai, bot badges under "user" group

docs/_data/badges.json

@@ -192,27 +192,6 @@
       ]
     }
   ],
-  "ai": [
-    {
-      "title": "AI badges",
-      "class": "s-badge__ai",
-      "classes": [
-        {
-          "title": "AI",
-          "html": "s-badge s-badge__ai",
-          "label": "AI",
-          "description": "AI badge. Can be used to indicate AI generated content."
-        },
-        {
-          "title": "Small",
-          "class": "s-badge__sm",
-          "html": "s-badge s-badge__ai s-badge__sm",
-          "label": "AI",
-          "description": "Small variant of the AI badge"
-        }
-      ]
-    }
-  ],
   "users": [
     {
       "title": "User badges",
@@ -240,6 +219,22 @@
           "label": "Staff",
           "labelSm": "Staff",
           "description": "Badge indicating user is staff."
+        },
+        {
+          "title": "AI",
+          "class": "s-badge__ai",
+          "html": "s-badge s-badge__ai",
+          "label": "AI",
+          "labelSm": "AI",
+          "description": "Badge indicating content is AI generated."
+        },
+        {
+          "title": "Bot",
+          "class": "s-badge__bot",
+          "html": "s-badge s-badge__bot",
+          "label": "Bot",
+          "labelSm": "Bot",
+          "description": "Badge indicating user is a bot."
         }
       ]
     }

docs/product/components/badges.html

@@ -360,62 +360,6 @@
         </div>
     </div>
 
-    {% header "h3", "AI badges" %}
-    <div class="stacks-preview">
-{% highlight html %}
-<span class="s-badge s-badge__ai">
-    AI
-</span>
-<span class="s-badge s-badge__ai s-badge__sm">
-    AI
-</span>
-{% endhighlight %}
-        <div class="stacks-preview--example">
-            <div class="overflow-x-auto" tabindex="0">
-                <table class="wmn5 s-table s-table__bx-simple">
-                    <thead>
-                        <tr>
-                            <th scope="col">Example</th>
-                            <th scope="col" class="s-table--cell4">Class</th>
-                            <th scope="col">Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for badge in badges.ai %}
-                            {% assign types = badge.classes %}
-                            {% for type in types %}
-                                <tr>
-                                    <td class="va-middle pr8">
-                                        <span class="{{ type.html }}">
-                                            {% if type.icon != nil %}
-                                                {% icon type.icon %}
-                                                {{ type.label }}
-                                            {% else %}
-                                                {{ type.label }}
-                                            {% endif %}
-                                        </span>
-                                    </td>
-                                    <td class="va-middle">
-                                        <div class="d-flex g4 fw-wrap">
-                                            <code class="stacks-code">.s-badge</code>
-                                            {% if type.class != nil %}
-                                                <code class="stacks-code">.{{ type.class }}</code>
-                                            {% endif %}
-                                            {% if badge.class != nil %}
-                                                <code class="flex--item stacks-code">.{{ badge.class }}</code>
-                                            {% endif %}
-                                        </div>
-                                    </td>
-                                    <td class="va-middle">{{ type.description }}</td>
-                                </tr>
-                            {% endfor %}
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
     {% header "h3", "User badges" %}
     <div class="stacks-preview">
 {% highlight html %}
@@ -428,6 +372,12 @@
 <span class="s-badge s-badge__staff">Staff</span>
 <span class="s-badge s-badge__staff s-badge__sm">Staff</span>
 <span class="s-badge s-badge__staff s-badge__xs">Staff</span>
+<span class="s-badge s-badge__bot">Bot</span>
+<span class="s-badge s-badge__bot s-badge__sm">Bot</span>
+<span class="s-badge s-badge__bot s-badge__xs">Bot</span>
+<span class="s-badge s-badge__ai">AI</span>
+<span class="s-badge s-badge__ai s-badge__sm">AI</span>
+<span class="s-badge s-badge__ai s-badge__xs">AI</span>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="overflow-x-auto" tabindex="0">

lib/components/badge/badge.a11y.test.ts

@@ -7,8 +7,7 @@ const variants = {
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
     filled: ["danger", "muted"],
     states: ["danger", "muted", "info", "new", "warning"],
-    ai: ["ai"],
-    users: ["admin", "moderator", "staff"],
+    users: ["admin", "moderator", "staff", "ai", "bot"],
 };
 
 describe("badge", () => {
@@ -111,22 +110,6 @@ describe("badge", () => {
         tag: "span",
     });
 
-    // AI badges
-    runA11yTests({
-        baseClass: "s-badge",
-        variants: variants.ai,
-        modifiers: {
-            primary: ["sm"],
-        },
-        children: {
-            default: "AI",
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        tag: "span",
-    });
-
     // User badges
     runA11yTests({
         baseClass: "s-badge",

lib/components/badge/badge.less

@@ -179,19 +179,28 @@
         --_ba-bg: var(--black-050);
         --_ba-fc: var(--orange-500);
         --_ba-fs: var(--fs-body3);
-        --_ba-lh: var(--lh-sm);
+        --_ba-lh: var(--lh-xs);
         --_ba-px: var(--su4);
-        --_ba-py: var(--su2);
+        --_ba-py: var(--su4);
         --_ba-tt: uppercase;
 
         &.s-badge__sm {
             --_ba-fs: var(--fs-caption);
-            --_ba-lh: var(--lh-xs);
-            --_ba-px: var(--su1);
+            --_ba-px: var(--su4);
+        }
+
+        &.s-badge__xs {
+            --_ba-fs: var(--fs-fine);
+            --_ba-lh: var(--lh-sm);
+            --_ba-px: 0;
             --_ba-py: var(--su2);
         }
     }
 
+    &&__bot {
+        --_ba-bc: var(--black-300);
+    }
+
     &&__danger,
     &&__muted {
         &.s-badge__filled {

lib/components/badge/badge.visual.test.ts

@@ -8,8 +8,7 @@ const variants = {
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
     filled: ["danger", "muted"],
     states: ["danger", "muted", "info", "new", "warning"],
-    ai: ["ai"],
-    users: ["admin", "moderator", "staff"],
+    users: ["admin", "moderator", "staff", "ai", "bot"],
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -131,22 +130,6 @@ describe("badge", () => {
         template,
     });
 
-    // AI badges
-    runVisualTests({
-        baseClass: "s-badge",
-        variants: variants.ai,
-        modifiers: {
-            primary: ["sm"],
-        },
-        children: {
-            default: "AI",
-        },
-        options: {
-            includeNullVariant: false,
-        },
-        tag: "span",
-    });
-
     // User badges
     runVisualTests({
         baseClass: "s-badge",