Skip to content

feat(badge): add an archived variant and a brand-orange token #128

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

Closed
tmccoy14 wants to merge 1 commit into from
Closed

feat(badge): add an archived variant and a brand-orange token #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 21 additions & 15 deletions packages/demo/src/content/components/badge.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,17 @@ import {

## Overview

The Badge component comes with four color variants to visually communicate different statuses or contexts:
The Badge component comes with several color variants to visually communicate different statuses or contexts:

- **Primary:** The default style, suitable for general labeling.
- **Secondary:** Use after primary but information is of secondary (or equal) importance
- **Neutral:** For non-critical, informational, or secondary status.
- **Warning:** Indicates something that is worthy of more attention.
- **Danger:** Indicates an error or danger state that requires serious attention.
- **Success:** Represents positive outcomes or completed statuses.
- **Archived:** Marks something withdrawn from active use but still on record.

`archived` draws on the same orange as [ControlStatusBadge](control-status-badge)'s In Progress. The two describe different things and are not expected to share a view, so let an archived badge carry its icon and label rather than separating them by colour alone.

For control compliance and resource types see [ControlStatusBadge](control-status-badge) and [ResourceBadge](resource-badge) respectively.

Expand Down Expand Up @@ -48,6 +51,7 @@ import { Badge } from "@eqtylab/equality";
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="archived">Archived</Badge>
</div>
<div className="flex flex-col items-start space-y-3">
<PanelLabel label="With Icons" />
Expand All @@ -63,6 +67,7 @@ import { Badge } from "@eqtylab/equality";
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="archived">Archived</Badge>
</div>
<div className="flex flex-col items-start space-y-3">
<PanelLabel label="Icon Only" />
Expand All @@ -72,6 +77,7 @@ import { Badge } from "@eqtylab/equality";
<Badge variant="warning" display="icon-only" />
<Badge variant="danger" display="icon-only" />
<Badge variant="success" display="icon-only" />
<Badge variant="archived" display="icon-only" />
</div>
</div>

Expand Down Expand Up @@ -202,17 +208,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 and `handleClosable` is provided, displays a close button on the badge. |
| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required to render the close button when `closeable` is true. |
| `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. |
| Prop | Type | Default | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `variant` | `"neutral"` \| `"primary"` \| `"secondary"` \| `"warning"` \| `"danger"` \| `"success"` \| `"archived"` | `"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 and `handleClosable` is provided, displays a close button on the badge. |
| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required to render the close button when `closeable` is true. |
| `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. |
40 changes: 40 additions & 0 deletions packages/tokens/equality-tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,14 @@
"hex": "#3F2A86"
}
},
"archived": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.4118, 0.2185, 0.1135],
"hex": "#69381D"
}
},
"comment": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -197,6 +205,14 @@
"hex": "#CCC6FF"
}
},
"archived": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.9272, 0.788, 0.7058],
"hex": "#ECC9B4"
}
},
"comment": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -1061,6 +1077,14 @@
"hex": "#CCC6FF"
}
},
"archived": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.9272, 0.788, 0.7058],
"hex": "#ECC9B4"
}
},
"comment": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -1191,6 +1215,14 @@
"hex": "#291D57"
}
},
"archived": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.2598, 0.1437, 0.0748],
"hex": "#422513"
}
},
"comment": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -1460,6 +1492,14 @@
"hex": "#70A369"
}
},
"orange": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.9843, 0.5725, 0.2353],
"hex": "#FB923C"
}
},
"primary": {
"$type": "color",
"$value": {
Expand Down
36 changes: 36 additions & 0 deletions packages/tokens/equality-tokens.pinwheel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1496,6 +1496,17 @@
<subIndexDark>1</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Archived</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>E70AEB3A-46D2-4910-AA0C-8DE1F122368D</referencedItemId>
<subIndex>7</subIndex>
<referencedItemIdDark>E70AEB3A-46D2-4910-AA0C-8DE1F122368D</referencedItemIdDark>
<subIndexDark>1</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Not Started</name>
<type>3</type>
Expand Down Expand Up @@ -1677,6 +1688,17 @@
<subIndexDark>6</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Archived</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>E70AEB3A-46D2-4910-AA0C-8DE1F122368D</referencedItemId>
<subIndex>1</subIndex>
<referencedItemIdDark>E70AEB3A-46D2-4910-AA0C-8DE1F122368D</referencedItemIdDark>
<subIndexDark>6</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Not Started</name>
<type>3</type>
Expand Down Expand Up @@ -2741,6 +2763,20 @@
<subIndex>3</subIndex>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<colorItem>
<id>4C6C13BE-9A84-4771-9D54-32BE6DF8FB1A</id>
<name>Orange</name>
<profile>DisplayP3</profile>
<format>7</format>
<color>
<variants>
<variant>
<rgba>0.98431 0.57255 0.23529 1</rgba>
</variant>
</variants>
</color>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</colorItem>
</group>
<group>
<id>D7B954B6-4112-44FA-A9F9-570423BEA0FB</id>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@eqtylab/equality",
"description": "EQTYLab's component and token-based design system",
"homepage": "https://equality.eqtylab.io/",
"version": "3.2.6",
"version": "3.3.0",
"license": "Apache-2.0",
"keywords": [
"component library",
Expand Down
5 changes: 5 additions & 0 deletions packages/ui/src/components/badge/badge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@
--badge-fg-color: var(--color-badge-text-success);
}

.badge--archived {
--badge-bg-color: var(--color-badge-background-archived);
--badge-fg-color: var(--color-badge-text-archived);
}

/* Closable Variant */

.badge .closable-btn {
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const badgeVariants = cva(styles['badge'], {
neutral: styles['badge--neutral'],
warning: styles['badge--warning'],
success: styles['badge--success'],
archived: styles['badge--archived'],
},
size: {
sm: styles['badge--sm'],
Expand Down Expand Up @@ -56,6 +57,7 @@ const defaultVariantIcons: Record<string, string> = {
success: 'Check',
warning: 'OctagonAlert',
danger: 'TriangleAlert',
archived: 'Archive',
};

function Badge({
Expand Down
5 changes: 5 additions & 0 deletions packages/ui/src/theme/generated/color-vars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
--color-background-top: color(display-p3 0.9294 0.9355 0.9426);
--color-background: color(display-p3 1 1 1);
--color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866);
--color-badge-background-archived: color(display-p3 0.9272 0.788 0.7058);
--color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866);
--color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417);
--color-badge-background-danger: color(display-p3 0.9358 0.751 0.7228);
Expand All @@ -33,6 +34,7 @@
--color-badge-background-success: color(display-p3 0.7403 0.8486 0.7417);
--color-badge-background-warning: color(display-p3 0.9327 0.8528 0.7204);
--color-badge-text-accepted: color(display-p3 0.1608 0.1145 0.3417);
--color-badge-text-archived: color(display-p3 0.2598 0.1437 0.0748);
--color-badge-text-comment: color(display-p3 0.1608 0.1145 0.3417);
--color-badge-text-compliant: color(display-p3 0.1097 0.1998 0.08667);
--color-badge-text-danger: color(display-p3 0.2625 0.1106 0.09605);
Expand Down Expand Up @@ -66,6 +68,7 @@
--color-border-top: color(display-p3 0.8011 0.807 0.814);
--color-border: color(display-p3 0.7432 0.7432 0.7432);
--color-brand-green: color(display-p3 0.4374 0.6383 0.4134);
--color-brand-orange: color(display-p3 0.9843 0.5725 0.2353);
--color-brand-primary: color(display-p3 0.7319 0.6108 0.8873);
--color-brand-red: color(display-p3 0.8114 0.4167 0.3761);
--color-brand-secondary: color(display-p3 0.3895 0.4853 0.8187);
Expand Down Expand Up @@ -270,6 +273,7 @@
--dark-color-background-top: color(display-p3 0.1399 0.14 0.1485);
--dark-color-background: color(display-p3 0.06018 0.06019 0.06787);
--dark-color-badge-background-accepted: color(display-p3 0.2473 0.1645 0.5241);
--dark-color-badge-background-archived: color(display-p3 0.4118 0.2185 0.1135);
--dark-color-badge-background-comment: color(display-p3 0.2473 0.1645 0.5241);
--dark-color-badge-background-compliant: color(display-p3 0.1689 0.3045 0.136);
--dark-color-badge-background-danger: color(display-p3 0.4113 0.1505 0.1319);
Expand All @@ -286,6 +290,7 @@
--dark-color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
--dark-color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
--dark-color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
--dark-color-badge-text-archived: color(display-p3 0.9272 0.788 0.7058);
--dark-color-badge-text-comment: color(display-p3 0.795 0.7755 0.9866);
--dark-color-badge-text-compliant: color(display-p3 0.7403 0.8486 0.7417);
--dark-color-badge-text-danger: color(display-p3 0.9358 0.751 0.7228);
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/theme/generated/dark-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
--color-background-top: color(display-p3 0.1399 0.14 0.1485);
--color-background: color(display-p3 0.06018 0.06019 0.06787);
--color-badge-background-accepted: color(display-p3 0.2473 0.1645 0.5241);
--color-badge-background-archived: color(display-p3 0.4118 0.2185 0.1135);
--color-badge-background-comment: color(display-p3 0.2473 0.1645 0.5241);
--color-badge-background-compliant: color(display-p3 0.1689 0.3045 0.136);
--color-badge-background-danger: color(display-p3 0.4113 0.1505 0.1319);
Expand All @@ -24,6 +25,7 @@
--color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
--color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
--color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
--color-badge-text-archived: color(display-p3 0.9272 0.788 0.7058);
--color-badge-text-comment: color(display-p3 0.795 0.7755 0.9866);
--color-badge-text-compliant: color(display-p3 0.7403 0.8486 0.7417);
--color-badge-text-danger: color(display-p3 0.9358 0.751 0.7228);
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/theme/generated/global-dark-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ html[data-equality-theme='dark'] {
--color-background-top: color(display-p3 0.1399 0.14 0.1485);
--color-background: color(display-p3 0.06018 0.06019 0.06787);
--color-badge-background-accepted: color(display-p3 0.2473 0.1645 0.5241);
--color-badge-background-archived: color(display-p3 0.4118 0.2185 0.1135);
--color-badge-background-comment: color(display-p3 0.2473 0.1645 0.5241);
--color-badge-background-compliant: color(display-p3 0.1689 0.3045 0.136);
--color-badge-background-danger: color(display-p3 0.4113 0.1505 0.1319);
Expand All @@ -24,6 +25,7 @@ html[data-equality-theme='dark'] {
--color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
--color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
--color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
--color-badge-text-archived: color(display-p3 0.9272 0.788 0.7058);
--color-badge-text-comment: color(display-p3 0.795 0.7755 0.9866);
--color-badge-text-compliant: color(display-p3 0.7403 0.8486 0.7417);
--color-badge-text-danger: color(display-p3 0.9358 0.751 0.7228);
Expand Down
Loading
Loading