diff --git a/packages/demo/src/content/components/badge.mdx b/packages/demo/src/content/components/badge.mdx index d33bb5f1..132ec5ac 100644 --- a/packages/demo/src/content/components/badge.mdx +++ b/packages/demo/src/content/components/badge.mdx @@ -202,16 +202,17 @@ You can enhance your badge by displaying an icon. The `icon` prop accepts either ## Props -| Prop | Type | Default | Description | -| ---------------- | --------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `variant` | `"neutral"` \| `"primary"` \| `"secondary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge. | -| `size` | `"sm"` \| `"md"` | `"md"` | The size of the badge. `"md"` renders at 20px tall, `"sm"` at 16px tall. | -| `display` | `"both"` \| `"text-only"` \| `"icon-only"` | `"both"` | Controls what elements are displayed. `"both"` shows icon and text, `"text-only"` shows only text, `"icon-only"` shows only icon. | -| `icon` | `string` \| `ReactElement` | - | Icon to display. Can be a Lucide icon name or a custom React element. | -| `pill` | `boolean` | `true` | When true (default), badge is pill-shaped. Set to `false` for a square badge with subtle border radius. | -| `monospace` | `boolean` | `false` | When true, renders badge text in a monospace font. | -| `closeable` | `boolean` | `false` | When true, displays a close button on the badge. | -| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required when `closeable` is true. | -| `truncate` | `boolean` | `false` | When true, truncates long text with an ellipsis and shows full text on hover. | -| `truncateLength` | `number` | `50` | Maximum character length before truncation occurs. | -| `className` | `string` | - | Additional CSS classes to apply to the badge. | +| Prop | Type | Default | Description | +| ---------------- | --------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| `variant` | `"neutral"` \| `"primary"` \| `"secondary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge. | +| `size` | `"sm"` \| `"md"` | `"md"` | The size of the badge. `"md"` renders at 20px tall, `"sm"` at 16px tall. | +| `display` | `"both"` \| `"text-only"` \| `"icon-only"` | `"both"` | Controls what elements are displayed. `"both"` shows icon and text, `"text-only"` shows only text, `"icon-only"` shows only icon. | +| `icon` | `string` \| `ReactElement` | - | Icon to display. Can be a Lucide icon name or a custom React element. | +| `pill` | `boolean` | `true` | When true (default), badge is pill-shaped. Set to `false` for a square badge with subtle border radius. | +| `monospace` | `boolean` | `false` | When true, renders badge text in a monospace font. | +| `closeable` | `boolean` | `false` | When true, displays a close button on the badge. | +| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Provide this whenever `closeable` is true, otherwise the button is a no-op. | +| `closeLabel` | `string` | `"Remove"` | Accessible label (`aria-label`) for the close button. Used by screen readers to describe the action. | +| `truncate` | `boolean` | `false` | When true, truncates long text with an ellipsis and shows full text on hover. | +| `truncateLength` | `number` | `50` | Maximum character length before truncation occurs. | +| `className` | `string` | - | Additional CSS classes to apply to the badge. | diff --git a/packages/demo/src/content/components/resource-badge.mdx b/packages/demo/src/content/components/resource-badge.mdx index 24379ca9..e7576afb 100644 --- a/packages/demo/src/content/components/resource-badge.mdx +++ b/packages/demo/src/content/components/resource-badge.mdx @@ -166,10 +166,11 @@ Set `closeable` and provide a `handleClosable` callback to render a close button ## Props -| Name | Description | Type | Default | Required | -| ---------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -| `type` | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` | | ✅ | -| `display` | Controls what elements are displayed: icon, text, or both. | `"both"`, `"text-only"`, `"icon-only"` | `"both"` | ❌ | -| `children` | Custom content to display in place of the default type label. | `ReactNode` | | ❌ | -| `closeable` | When true, displays a close button on the badge. | `boolean` | `false` | ❌ | -| `handleClosable` | Callback called when the close button is clicked. | `() => void` | | ❌ | +| Name | Description | Type | Default | Required | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | +| `type` | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` | | ✅ | +| `display` | Controls what elements are displayed: icon, text, or both. | `"both"`, `"text-only"`, `"icon-only"` | `"both"` | ❌ | +| `children` | Custom content to display in place of the default type label. | `ReactNode` | | ❌ | +| `closeable` | When true, displays a close button on the badge. | `boolean` | `false` | ❌ | +| `handleClosable` | Callback called when the close button is clicked. Provide this whenever `closeable` is true, otherwise the button is a no-op. | `() => void` | | ❌ | +| `closeLabel` | Accessible label (`aria-label`) for the close button. | `string` | `"Remove"` | ❌ | diff --git a/packages/ui/package.json b/packages/ui/package.json index 222c9950..7e79bf8c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -2,7 +2,7 @@ "name": "@eqtylab/equality", "description": "EQTYLab's component and token-based design system", "homepage": "https://equality.eqtylab.io/", - "version": "2.2.1", + "version": "2.2.2", "license": "Apache-2.0", "keywords": [ "component library", diff --git a/packages/ui/src/components/badge/badge.tsx b/packages/ui/src/components/badge/badge.tsx index a5b77d7f..bab4d1e2 100644 --- a/packages/ui/src/components/badge/badge.tsx +++ b/packages/ui/src/components/badge/badge.tsx @@ -42,6 +42,7 @@ export interface BadgeProps extends React.HTMLAttributes, VariantProps { closeable?: boolean; handleClosable?: () => void; + closeLabel?: string; truncate?: boolean; truncateLength?: number; icon?: React.ReactElement | string; @@ -63,6 +64,7 @@ function Badge({ size, closeable, handleClosable, + closeLabel = 'Remove', truncate = false, truncateLength = 50, icon, @@ -75,18 +77,19 @@ function Badge({ const effectiveIcon = icon ?? (variant ? defaultVariantIcons[variant] : undefined); const renderClosable = () => { - if (closeable && handleClosable) - return ( - - ); - return null; + if (!closeable) return null; + return ( + + ); }; const renderChildren = () => { diff --git a/packages/ui/src/components/resource-badge/resource-badge.tsx b/packages/ui/src/components/resource-badge/resource-badge.tsx index 67e8762e..ef9c293f 100644 --- a/packages/ui/src/components/resource-badge/resource-badge.tsx +++ b/packages/ui/src/components/resource-badge/resource-badge.tsx @@ -37,6 +37,7 @@ interface ResourceBadgeProps { display?: ResourceDisplayMode; closeable?: boolean; handleClosable?: () => void; + closeLabel?: string; children?: React.ReactNode; } @@ -45,6 +46,7 @@ const ResourceBadge = ({ display = 'both', closeable, handleClosable, + closeLabel, children, }: ResourceBadgeProps) => { const config = getTypeConfig(type); @@ -57,6 +59,7 @@ const ResourceBadge = ({ variant={null} closeable={closeable} handleClosable={handleClosable} + closeLabel={closeLabel} > {children ?? config.label}