From 7ff82816636a4a14053b9402398aba29c0b3c59e Mon Sep 17 00:00:00 2001
From: Alec P <a.povolotskiy@gmail.com>
Date: Fri, 24 Jul 2026 09:40:46 +0200
Subject: [PATCH 1/2] chore: CTORNDSD-653: add `xs` size option to Badge
 component

- Extended Badge size tokens with `xs` styling.
- Updated `Badge.types.ts` to include `xs` in the `BadgeSize` type.
- Adjusted Badge stories/docs to support and display the new `xs` size.
---
 .../src/components/atoms/Badge/Badge.stories.tsx   | 14 ++++++++++----
 libs/ui/src/components/atoms/Badge/Badge.types.ts  |  2 +-
 libs/ui/src/tokens/badge.ts                        | 10 ++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/libs/ui/src/components/atoms/Badge/Badge.stories.tsx b/libs/ui/src/components/atoms/Badge/Badge.stories.tsx
index 31052e7..97b2755 100644
--- a/libs/ui/src/components/atoms/Badge/Badge.stories.tsx
+++ b/libs/ui/src/components/atoms/Badge/Badge.stories.tsx
@@ -49,9 +49,9 @@ const meta: Meta<typeof Badge> = {
       },
     },
     size: {
-      description: 'Size of the badge (sm, md, lg)',
+      description: 'Size of the badge (xs, sm, md, lg)',
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg'],
       table: {
         category: 'Visual Style',
         defaultValue: { summary: 'md' },
@@ -404,7 +404,7 @@ The \`Badge\` component is used to display small pieces of information, such as
 <ul>
 <li><b>Variants:</b> Primary, Secondary, Tertiary, Quaternary, Quinary</li>
 <li><b>Appearances:</b> Filled, FilledLight, Outline, OutlineFilledLight</li>
-<li><b>Sizes:</b> Small (sm), Medium (md), Large (lg)</li>
+<li><b>Sizes:</b> Extra Small (xs), Small (sm), Medium (md), Large (lg)</li>
 <li><b>Icons:</b> Support for start and end icons</li>
 <li><b>Disabled:</b> Support for disabled state</li>
 <li><b>Flexible:</b> Consumes Box styles for full layout control</li>
@@ -434,6 +434,7 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <Row gap="16px" alignItems="center">
+      <Badge size="xs">Extra Small</Badge>
       <Badge size="sm">Small</Badge>
       <Badge size="md">Medium</Badge>
       <Badge size="lg">Large</Badge>
@@ -442,10 +443,11 @@ export const Sizes: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Badge component in all available sizes: small, medium, and large.',
+        story: 'Badge component in all available sizes: extra small, small, medium, and large.',
       },
       source: {
         code: `<Row gap="16px" alignItems="center">
+  <Badge size="xs">Extra Small</Badge>
   <Badge size="sm">Small</Badge>
   <Badge size="md">Medium</Badge>
   <Badge size="lg">Large</Badge>
@@ -709,6 +711,9 @@ export const Disabled: Story = {
       </Row>
       <Row gap="16px" alignItems="center">
         <Typography>Sizes Disabled:</Typography>
+        <Badge variant="primary" appearance="filled" size="xs" disabled>
+          Extra Small
+        </Badge>
         <Badge variant="primary" appearance="filled" size="sm" disabled>
           Small
         </Badge>
@@ -748,6 +753,7 @@ export const Disabled: Story = {
   </Row>
   <Row gap="16px" alignItems="center">
     <Typography>Sizes Disabled:</Typography>
+    <Badge variant="primary" appearance="filled" size="xs" disabled>Extra Small</Badge>
     <Badge variant="primary" appearance="filled" size="sm" disabled>Small</Badge>
     <Badge variant="primary" appearance="filled" size="md" disabled>Medium</Badge>
     <Badge variant="primary" appearance="filled" disabled iconStart={<Icon name="check" size="md" />}>
diff --git a/libs/ui/src/components/atoms/Badge/Badge.types.ts b/libs/ui/src/components/atoms/Badge/Badge.types.ts
index fcf6a42..c22c18d 100644
--- a/libs/ui/src/components/atoms/Badge/Badge.types.ts
+++ b/libs/ui/src/components/atoms/Badge/Badge.types.ts
@@ -5,7 +5,7 @@ import type { BoxCssComponentProps, BoxCssComponentStyledProps } from '@componen
 
 export type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
 export type BadgeAppearance = 'outline' | 'outlineFilledLight' | 'filled' | 'filledLight';
-export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
 
 export interface BadgeProps extends BoxCssComponentProps<HTMLSpanElement>, PropsWithChildren {
   variant?: EnumOrPrimitive<BadgeVariant>;
diff --git a/libs/ui/src/tokens/badge.ts b/libs/ui/src/tokens/badge.ts
index 2bbdc78..9b81337 100644
--- a/libs/ui/src/tokens/badge.ts
+++ b/libs/ui/src/tokens/badge.ts
@@ -8,6 +8,16 @@ export const badge = {
     whiteSpace: 'nowrap',
   },
   size: {
+    xs: {
+      height: '16px',
+      borderRadius: (theme: Record<symbol, unknown>) => get(theme, 'radius.default', 'theme.radius.default'),
+      padding: (theme: Record<symbol, unknown>) => `0 ${get(theme, 'spacing.sm', 'theme.spacing.sm')}`,
+      fontSize: (theme: Record<symbol, unknown>) => get(theme, 'font.size.caption', 'theme.font.size.caption'),
+      lineHeight: (theme: Record<symbol, unknown>) =>
+        get(theme, 'font.line.height.caption', 'theme.font.line.height.caption'),
+      fontWeight: (theme: Record<symbol, unknown>) => get(theme, 'font.weight.normal', 'theme.font.weight.normal'),
+      gap: (theme: Record<symbol, unknown>) => get(theme, 'spacing.xs', 'theme.spacing.xs'),
+    },
     sm: {
       height: '28px',
       borderRadius: (theme: Record<symbol, unknown>) => get(theme, 'radius.default', 'theme.radius.default'),

From e2a79dddb0511c668fa5f5f0a99bf904d31277d7 Mon Sep 17 00:00:00 2001
From: Alec P <a.povolotskiy@gmail.com>
Date: Fri, 24 Jul 2026 10:00:55 +0200
Subject: [PATCH 2/2] chore: CTORNDSD-653: add `xs` size option to Badge
 component and update related styles, docs, and examples

- Added `xs` size support to Badge component schema.
- Updated examples, README, and docs to include `xs` size.
- Fixed `flexWrap` property from `noWrap` to `nowrap` in defaultTheme.json.
---
 libs/ui/.storybook/public/defaultTheme.json | 5 ++++-
 libs/ui/llms.txt                            | 5 +++--
 libs/ui/src/ai/README.md                    | 4 ++--
 libs/ui/src/ai/a2ui/component-map.ts        | 2 +-
 libs/ui/src/ai/schemas/components/Badge.ts  | 3 ++-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/libs/ui/.storybook/public/defaultTheme.json b/libs/ui/.storybook/public/defaultTheme.json
index d959a3f..ff86c2e 100644
--- a/libs/ui/.storybook/public/defaultTheme.json
+++ b/libs/ui/.storybook/public/defaultTheme.json
@@ -461,7 +461,7 @@
       "itemRow": {
         "alignItems": "center",
         "justifyContent": "space-between",
-        "flexWrap": "noWrap"
+        "flexWrap": "nowrap"
       },
       "itemColumn": {
         "minWidth": 0,
@@ -1194,6 +1194,9 @@
       "whiteSpace": "nowrap"
     },
     "size": {
+      "xs": {
+        "height": "16px"
+      },
       "sm": {
         "height": "28px"
       },
diff --git a/libs/ui/llms.txt b/libs/ui/llms.txt
index cb2f3e3..757d251 100644
--- a/libs/ui/llms.txt
+++ b/libs/ui/llms.txt
@@ -84,7 +84,7 @@ Pre-built indexes for quick discovery:
 > Run `yarn build:ui` to regenerate. Do not edit the block between the markers manually.
 
 <!-- AUTO-GENERATED:COMPONENTS:START -->
-66 components total — generated from libs/ui/src/ai/schemas/ on 2026-07-22.
+66 components total — generated from libs/ui/src/ai/schemas/ on 2026-07-24.
 
 ## Other
 
@@ -1118,7 +1118,7 @@ Import: `import { Badge } from 'gd-design-library'`
 
 Badge component for displaying small pieces of information, status indicators, counts, or labels. Supports multiple variants and visual options with icon support. A2UI SPEC: use top-level "label" for badge text, top-level "iconStart" for the leading badge icon, and top-level "iconEnd" for the trailing badge icon. Legacy top-level "icon" is still accepted as a fallback alias for "iconStart". The renderer maps those icon names to the underlying Badge `iconStart?: ReactNode` and `iconEnd?: ReactNode` props internally, so do not pass raw React nodes in the A2UI payload.
 
-**Props:** `label`: string, `variant`: "primary"|"secondary"|"tertiary"|"quaternary"|"quinary", `size`: "sm"|"md"|"lg", `appearance`: "filled"|"filledLight"|"outline"|"outlineFilledLight", `disabled`: boolean, `iconStart`: string *(+2 more)*
+**Props:** `label`: string, `variant`: "primary"|"secondary"|"tertiary"|"quaternary"|"quinary", `size`: "xs"|"sm"|"md"|"lg", `appearance`: "filled"|"filledLight"|"outline"|"outlineFilledLight", `disabled`: boolean, `iconStart`: string *(+2 more)*
 
 **Examples:**
   `<Badge>New</Badge>`
@@ -1127,6 +1127,7 @@ Badge component for displaying small pieces of information, status indicators, c
   `<Badge variant="tertiary" appearance="filled">Tertiary Badge</Badge>`
   `<Badge variant="quaternary" appearance="filled">Quaternary Badge</Badge>`
   `<Badge variant="quinary" appearance="filled">Quinary Badge</Badge>`
+  `<Badge variant="primary" appearance="filled" size="xs">Extra Small Badge</Badge>`
   `<Badge variant="primary" appearance="filled" size="sm">Small Badge</Badge>`
   `<Badge variant="primary" appearance="filled" size="md">Medium Badge</Badge>`
   `<Badge variant="primary" appearance="filled" iconStart={<Icon name="check" size="xs" />}>With Icon</Badge>`
diff --git a/libs/ui/src/ai/README.md b/libs/ui/src/ai/README.md
index bd934d0..7d99ac8 100644
--- a/libs/ui/src/ai/README.md
+++ b/libs/ui/src/ai/README.md
@@ -594,7 +594,7 @@ yarn test:ai:watch
 
 <!-- AUTO-GENERATED:COMPONENTS:START -->
 
-_66 components total — generated from `libs/ui/src/ai/schemas/` on 2026-07-22._
+_66 components total — generated from `libs/ui/src/ai/schemas/` on 2026-07-24._
 
 ### Other
 
@@ -1379,7 +1379,7 @@ Badge component for displaying small pieces of information, status indicators, c
 | ------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `label`      | `string`                                                                      | Badge text or count to display (maps to children)                                                                                                                             |
 | `variant`    | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"quaternary"` \| `"quinary"` | Visual style variant of the badge                                                                                                                                             |
-| `size`       | `"sm"` \| `"md"` \| `"lg"`                                                    | Size of the badge                                                                                                                                                             |
+| `size`       | `"xs"` \| `"sm"` \| `"md"` \| `"lg"`                                          | Size of the badge                                                                                                                                                             |
 | `appearance` | `"filled"` \| `"filledLight"` \| `"outline"` \| `"outlineFilledLight"`        | Visual fill style of the badge                                                                                                                                                |
 | `disabled`   | `boolean`                                                                     | Whether the badge is disabled                                                                                                                                                 |
 | `iconStart`  | `string`                                                                      | Leading icon name from the shared A2UI icon catalog. The renderer converts this to the underlying Badge `iconStart?: ReactNode` prop. Preferred over the legacy `icon` alias. |
diff --git a/libs/ui/src/ai/a2ui/component-map.ts b/libs/ui/src/ai/a2ui/component-map.ts
index 2079c18..6a614f8 100644
--- a/libs/ui/src/ai/a2ui/component-map.ts
+++ b/libs/ui/src/ai/a2ui/component-map.ts
@@ -200,7 +200,7 @@ export type A2UIIconCatalog = typeof A2UI_ICON_CATALOG;
  *
  * @example
  * getA2UIPropEnum('button', 'variant')  // ['primary', 'secondary', ...]
- * getA2UIPropEnum('badge', 'size')      // ['sm', 'md', 'lg']
+ * getA2UIPropEnum('badge', 'size')      // ['xs', 'sm', 'md', 'lg']
  */
 export function getA2UIPropEnum(a2uiType: string, propName: string): readonly string[] {
   const schema = aiComponentsSchema.components.find((c) => (c as ExtendedComponentSchema).a2uiName === a2uiType);
diff --git a/libs/ui/src/ai/schemas/components/Badge.ts b/libs/ui/src/ai/schemas/components/Badge.ts
index b87e544..bf54127 100644
--- a/libs/ui/src/ai/schemas/components/Badge.ts
+++ b/libs/ui/src/ai/schemas/components/Badge.ts
@@ -27,7 +27,7 @@ const component = {
       name: 'size',
       type: 'string',
       description: 'Size of the badge',
-      enum: ['sm', 'md', 'lg'] as const,
+      enum: ['xs', 'sm', 'md', 'lg'] as const,
     },
     {
       name: 'appearance',
@@ -57,6 +57,7 @@ const component = {
     '<Badge variant="tertiary" appearance="filled">Tertiary Badge</Badge>',
     '<Badge variant="quaternary" appearance="filled">Quaternary Badge</Badge>',
     '<Badge variant="quinary" appearance="filled">Quinary Badge</Badge>',
+    '<Badge variant="primary" appearance="filled" size="xs">Extra Small Badge</Badge>',
     '<Badge variant="primary" appearance="filled" size="sm">Small Badge</Badge>',
     '<Badge variant="primary" appearance="filled" size="md">Medium Badge</Badge>',
     '<Badge variant="primary" appearance="filled" iconStart={<Icon name="check" size="xs" />}>With Icon</Badge>',