Skip to content

feat: CTORNDSD-653: add xs size option to Badge component #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zlodej43sm merged 3 commits into from
Jul 24, 2026
Merged

feat: CTORNDSD-653: add xs size option to Badge component #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ff8281
chore: CTORNDSD-653: add `xs` size option to Badge component
Zlodej43sm Jul 24, 2026
e2a79dd
chore: CTORNDSD-653: add `xs` size option to Badge component and upda…
Zlodej43sm Jul 24, 2026
1726ae4
Merge branch 'develop' into feat/CTORNDSD-653-Badge-size
Zlodej43sm Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions libs/ui/.storybook/public/defaultTheme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1194,6 +1194,9 @@
"whiteSpace": "nowrap"
},
"size": {
"xs": {
"height": "16px"
},
"sm": {
"height": "28px"
},
Expand Down
5 changes: 3 additions & 2 deletions libs/ui/llms.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-23.
66 components total — generated from libs/ui/src/ai/schemas/ on 2026-07-24.

## Other

Expand Down Expand Up @@ -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>`
Expand All @@ -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>`
Expand Down
4 changes: 2 additions & 2 deletions libs/ui/src/ai/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-23._
_66 components total — generated from `libs/ui/src/ai/schemas/` on 2026-07-24._

### Other

Expand Down Expand Up @@ -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. |
Expand Down
2 changes: 1 addition & 1 deletion libs/ui/src/ai/a2ui/component-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion libs/ui/src/ai/schemas/components/Badge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>',
Expand Down
14 changes: 10 additions & 4 deletions libs/ui/src/components/atoms/Badge/Badge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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" />}>
Expand Down
2 changes: 1 addition & 1 deletion libs/ui/src/components/atoms/Badge/Badge.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Comment thread
Zlodej43sm marked this conversation as resolved.
export interface BadgeProps extends BoxCssComponentProps<HTMLSpanElement>, PropsWithChildren {
variant?: EnumOrPrimitive<BadgeVariant>;
Expand Down
10 changes: 10 additions & 0 deletions libs/ui/src/tokens/badge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down