Skip to content

Commit c97eb91

Browse files
taohsutaohsu
committed
update
1 parent b9a90c0 commit c97eb91

13 files changed

Lines changed: 238 additions & 7 deletions

‎components/indicator/badge/badge/dsm/changelog.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
| Date | Number | Notes |
22
|------|--------|-------|
3+
| Apr 7, 2026 | - | <ul><li>Documentation writing: Context of Color Usage (badge without icon)</ul> |
4+
| Mar 16, 2026 | - | <ul><li>Documentation writing: User zoom and responsiveness</ul> |
35
| Jan 6, 2026 | - | <ul><li>Documentation writing: Definition update</ul> |
46
| Oct 14, 2025 | 1.2.0 | <ul><li>The component now has two states: Enabled and Disabled. <li>Documentation has been updated and published in Zeroeight, with use case examples provided for every state. <li>The colors and background tokens for the functional states of the positive and info statuses have been changed. <li>For the "Status neutral" variant, the surface token "color-surface-status-neutral-emphasized" has been replaced by the token "color-surface-inverse-high"</ul> |
57
| Jun 16, 2025 | 1.1.0 | <ul><li>"Accent" variant added</ul> |

‎components/indicator/badge/badge/dsm/guideline/context_of_color_usage.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
A color-only badge should not be used as the only way to show fonctional information.
2+
It needs to be clearly visible on its background, with enough contrast and a readable size, especially for people with low vision or color blindness.
3+
4+
**Status context (badge + label)**
5+
6+
- Color alone doesn't explain meaning. It can support the interface visually, but it shouldn't be the only way to show a status or state. If multiple badge colors are used within the same interface, each color must have an accessible equivalent (e.g. visible text).
7+
- In this example, the badge is used together with an Extra label that clearly conveys the status (positive and negative). The badge only reinforces this meaning visually, allowing multiple statuses to coexist within the same interface.
8+
9+
**Non-status context (badge only)**
10+
11+
- If it is not possible to provide an accessible alternative (text or label), the badge must be considered decorative and must not be used to convey information or differentiate states.
12+
- In this context, the red badge is not used to indicate an error or negative status, but rather as a visual accent to draw attention. No other badge colors are used in the interface to avoid interpreting color as a carrier of meaning.
13+
14+
⚠️ Within a single interface, either a decorative or a functional color context should be used, but not both at the same time. This distinction ensures consistency and aligns with accessible design principles.

‎components/indicator/badge/badge/dsm/guideline/definition.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
**Badge** is a UI element that emphasizes system notifications, status, or the categorization of an information, throughout colour only. Badge is rendered as a coloured shape, without icon, text or number; and its chosen size remains unchanged regardless of the changes of the interface size.
1+
**Badge** is a UI element that emphasizes system notifications, status, or the categorization of an information. Badge is rendered as a coloured shape and its chosen size remains unchanged regardless of the changes of the interface size.

‎components/indicator/badge/badge/dsm/guideline/user_zoom_and_responsiveness.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
**Max-width vs full-width**
2+
This component have a max-width.
3+
It is not possible to set this component to use the full available width (of the screen or the container).
4+
5+
**User zoom in/out**
6+
- Componet must always scale proportionally with user zoom.
7+
- In order to preserve the minimun interactive area during user zoom out, this component have:
8+
- Large size: a min-width and a min-height **of 20px**
9+
- Medium size: a min-width and a min-height **of 16px**
10+
- Small size: a min-width and a min-height **of 12px**
11+
- Xsmall size: a min-width and a min-height **of 8px**
12+
- Even if, the component has a max-height or a max-width for resizing control purposes, technically, during user zoom in, these limitations are not fixed but must be scalable in order to adapt to the user's zoom level.

‎components/indicator/badge/badge/figma/badge_changelog.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
| Date | Number | Notes | Designer |
22
|------|--------|-------|----------|
3+
| Apr 7, 2026 | - | • Documentation writing: Context of Color Usage (badge without icon) | Anton Astafev |
4+
| Mar 16, 2026 | - | • Documentation writing: User zoom and responsiveness | Maxime Tonnerre |
5+
| Jan 6, 2026 | - | • Documentation writing: Definition update | Cyriaque Billard |
36
| Oct 14, 2025 | 1.2.0 | • The component now has two states: Enabled and Disabled. • Documentation has been updated and published in Zeroeight, with use case examples provided for every state. • The colors and background tokens for the functional states of the positive and info statuses have been changed. • For the "Status neutral" variant, the surface token "color-surface-status-neutral-emphasized" has been replaced by the token "color-surface-inverse-high" | Anton Astafev |
47
| Jun 16, 2025 | 1.1.0 | • "Accent" variant added | Maxime Tonnerre |
58
| Mai 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

‎components/indicator/badge/badge/figma/badge_overview.md‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
## Definition
22

3-
The Badge is a small UI element used to highlight status, notifications, or categorization within an interface. It is often displayed as a label or indicator with a distinct background color and text.
4-
5-
**Usage:**
6-
• Renders as a static label without a number.
7-
Used for status indicators (e.g., "New", "Pending", "Success").
8-
The size remains unchanged despite the increase in the interface size.
3+
Badge is a UI element that emphasizes system notifications, status, or the categorization of an information. Badge is rendered as a coloured shape and its chosen size remains unchanged regardless of the changes of the interface size.
94

105
---
116

@@ -51,3 +46,39 @@ Often used for errors, restrictions, or urgent messages, but not exclusively for
5146
**`Large`** A prominent badge for drawing more attention, often used in dashboards or highlighted sections.
5247

5348
---
49+
50+
## User zoom and responsiveness
51+
52+
**Max-width vs full-width**
53+
This component have a max-width.
54+
It is not possible to set this component to use the full available width (of the screen or the container).
55+
56+
**User zoom in/out**
57+
- Componet must always scale proportionally with user zoom.
58+
- In order to preserve the minimun interactive area during user zoom out, this component have:
59+
- Large size: a min-width and a min-height **of 20px**
60+
- Medium size: a min-width and a min-height **of 16px**
61+
- Small size: a min-width and a min-height **of 12px**
62+
- Xsmall size: a min-width and a min-height **of 8px**
63+
- Even if, the component has a max-height or a max-width for resizing control purposes, technically, during user zoom in, these limitations are not fixed but must be scalable in order to adapt to the user's zoom level.
64+
65+
---
66+
67+
## Context of Color Usage
68+
69+
A color-only badge should not be used as the only way to show fonctional information.
70+
It needs to be clearly visible on its background, with enough contrast and a readable size, especially for people with low vision or color blindness.
71+
72+
**Status context (badge + label)**
73+
74+
- Color alone doesn't explain meaning. It can support the interface visually, but it shouldn't be the only way to show a status or state. If multiple badge colors are used within the same interface, each color must have an accessible equivalent (e.g. visible text).
75+
- In this example, the badge is used together with an Extra label that clearly conveys the status (positive and negative). The badge only reinforces this meaning visually, allowing multiple statuses to coexist within the same interface.
76+
77+
**Non-status context (badge only)**
78+
79+
- If it is not possible to provide an accessible alternative (text or label), the badge must be considered decorative and must not be used to convey information or differentiate states.
80+
- In this context, the red badge is not used to indicate an error or negative status, but rather as a visual accent to draw attention. No other badge colors are used in the interface to avoid interpreting color as a carrier of meaning.
81+
82+
⚠️ Within a single interface, either a decorative or a functional color context should be used, but not both at the same time. This distinction ensures consistency and aligns with accessible design principles.
83+
84+
---

‎components/indicator/badge/badge/history/2026-06-22.md‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
# Badge — delta update 2026-06-22
2+
3+
Figma: `VS5phMPUiA3a98RATzsqUe`
4+
- Overview: node `10843:4486`
5+
- Guidelines asset frame: `10580:482` (`Guidelines: Badge`)
6+
- Specs asset frame: `10593:14390` (`Specs`)
7+
8+
Anchor: repo `dsm/changelog.md` top row = **Jan 6, 2026** (Definition update). Figma adds two newer rows.
9+
10+
---
11+
12+
## Changelog diff
13+
14+
| Date | Number | Notes | Designer | dsm | figma mirror |
15+
|------|--------|-------|----------|-----|--------------|
16+
| Apr 7, 2026 | - | Documentation writing: Context of Color Usage (badge without icon) | Anton Astafev | ADD | ADD |
17+
| Mar 16, 2026 | - | Documentation writing: User zoom and responsiveness | Maxime Tonnerre | ADD | ADD |
18+
| Jan 6, 2026 | - | Documentation writing: Definition update | Cyriaque Billard | present | BACKFILL |
19+
| Oct 14, 2025 | 1.2.0 | … | Anton Astafev | present | present |
20+
21+
- `dsm/changelog.md` has no Designer column → add 2 rows without it.
22+
- `figma/badge_changelog.md` has Designer column but is missing Apr 7 / Mar 16 / Jan 6 → backfill all 3.
23+
24+
---
25+
26+
## Section diff (Overview → repo)
27+
28+
| # | Overview frame | H2 (visible) | Repo target | Action |
29+
|---|---|---|---|---|
30+
| 1 | 10843:4556 | Definition | `dsm/guideline/definition.md` | ⚠️ text drift — see decision |
31+
| 2 | 10843:4732 | Badge without icon user zoom and responsiveness | `dsm/guideline/user_zoom_and_responsiveness.md` | NEW |
32+
| 3 | 10843:4747 | Context of Color Usage | `dsm/guideline/context_of_color_usage.md` | NEW |
33+
| 4 | 10843:4774 | Behaviour and accessibility | — | 🔴 EXCLUDED (standing rule) |
34+
35+
Existing sections State / Status / Size unchanged (no design-change changelog row).
36+
37+
### Definition drift (decision)
38+
- Current Figma (10843:4560): *"Badge is a UI element that emphasizes system notifications, status, or the categorization of an information. Badge is rendered as a coloured shape and its chosen size remains unchanged regardless of the changes of the interface size."*
39+
- Repo `dsm/guideline/definition.md` (richer): *"…the categorization of an information, **throughout colour only**. Badge is rendered as a coloured shape, **without icon, text or number**; and its chosen size…"*
40+
- `figma/badge_overview.md` mirror Definition = **stale/old** (mentions label/text/number) regardless → must be refreshed to whichever wording is chosen.
41+
- No changelog row in scope covers a definition wording change beyond the already-applied Jan 6 row.
42+
43+
---
44+
45+
## New section content (verbatim from Figma)
46+
47+
### user_zoom_and_responsiveness.md (H2: "Badge without icon user zoom and responsiveness")
48+
- **Max-width vs full-width** — component has a max-width; cannot be set to full available width.
49+
- **User zoom in/out**
50+
- Component must always scale proportionally with user zoom.
51+
- To preserve minimum interactive area during zoom-out, min-width/min-height:
52+
- Large: 20px · Medium: 16px · Small: 12px · Xsmall: 8px
53+
- Max-height/max-width limits are scalable (not fixed) during zoom-in.
54+
- Image: `badge@user_zoom_and_responsiveness_img` (Overview node 10843:4739).
55+
56+
### context_of_color_usage.md (H2: "Context of Color Usage")
57+
- Intro: color-only badge must not be the only way to show functional info; needs contrast + readable size.
58+
- **Status context (badge + label)** — bullets + image (badge + Extra label, positive/negative).
59+
- **Non-status context (badge only)** — bullets + image (decorative red accent, single color).
60+
- ⚠️ Closing: within one interface use decorative OR functional color context, not both.
61+
62+
---
63+
64+
## Image delta
65+
66+
### Guidelines asset frame `10580:482` (legacy 468px content frames)
67+
Existing: `badge@status_non_functional_img` (10580:510), `badge@status_functional_img` (10580:526), `badge@size_img` (10580:556), `Badge Anatomy` (10597:1441 → repo `badge@anatomy_img.png`).
68+
69+
### Specs asset frame `10593:14390`
70+
Existing: `badge@spec_layout_spacing` (10593:14398), `badge@state_img` (10593:15095).
71+
72+
### New images
73+
| Frame | Overview node | Status |
74+
|---|---|---|
75+
| `badge@user_zoom_and_responsiveness_img` | 10843:4739 (600px) | CREATE in Guidelines (Phase B), then export |
76+
| `badge@context_of_color_usage_img` | 10843:4757 | 🔴 BLOCKED — frame mis-named `badge@user_zoom_and_responsiveness_img` in Figma |
77+
| `badge@context_of_color_usage_img2` | 10843:4767 | 🔴 BLOCKED — frame mis-named `badge@user_zoom_and_responsiveness_img` in Figma |
78+
79+
🔴 **Designer follow-up:** the two image frames inside *Context of Color Usage* (10843:4757, 10843:4767) are both named `badge@user_zoom_and_responsiveness_img` — copy-paste leftover. They must be renamed (suggest `badge@context_of_color_usage_img` / `…_img2`) before they can be created in Guidelines and exported.
80+
81+
---
82+
83+
## Actions checklist
84+
85+
### Phase A — text 🤖
86+
- [ ] dsm/changelog.md — prepend Apr 7 + Mar 16 rows
87+
- [ ] figma/badge_changelog.md — backfill Apr 7 + Mar 16 + Jan 6 rows (Designer column)
88+
- [ ] dsm/guideline/user_zoom_and_responsiveness.md — create (body only, no H2)
89+
- [ ] dsm/guideline/context_of_color_usage.md — create (body only, no H2)
90+
- [ ] figma/badge_overview.md — add both new sections (with H2) in Figma order; refresh stale Definition
91+
- [ ] Definition reconcile — pending user decision
92+
- [ ] Behaviour and accessibility — excluded (no file)
93+
94+
### Phase B — Figma frame prep 🤝 (verbatim copy; user restyles)
95+
- [ ] Copy `badge@user_zoom_and_responsiveness_img` (10843:4739) verbatim into Guidelines `10580:482`
96+
- [ ] Context-of-Color-Usage images — BLOCKED on designer rename
97+
- [ ] Verify `badge@spec_layout_spacing` (10593:14398) has white bg; fill if transparent
98+
99+
### Phase C — image export (2×, full refresh) 🤝
100+
- [ ] Export all asset images via `scripts/figma-export.sh` (overwrite existing + new)
101+
- [ ] Create `.md` for each new PNG
102+
- [ ] Verify 2× dimensions
103+
104+
### Phase D — close-out
105+
- [ ] Tick checklist, record node map + designer follow-ups
106+
- [ ] Update maintenance tracker
107+
- [ ] Safety sweep (master untouched; scope dsm/images/figma/history)
108+
109+
---
110+
111+
## Safety
112+
- 🔴 Do NOT touch `badge.md` (master → triggers auto-slice rebuild).
113+
- dsm slices carry NO H2.
114+
115+
---
116+
117+
## Execution log — done 2026-06-22
118+
119+
### Phase A ✅
120+
- dsm/changelog.md +2 rows (Apr 7, Mar 16).
121+
- figma/badge_changelog.md backfilled 3 rows (Apr 7, Mar 16, Jan 6) with Designer column.
122+
- dsm/guideline/definition.md synced to Figma's current (shorter) wording (user decision).
123+
- dsm/guideline/user_zoom_and_responsiveness.md created (body only).
124+
- dsm/guideline/context_of_color_usage.md created (body only).
125+
- figma/badge_overview.md: refreshed stale Definition + added both new sections (H2 "User zoom and responsiveness", "Context of Color Usage") in Figma order.
126+
- "Behaviour and accessibility" excluded by standing rule.
127+
128+
### Phase B ✅
129+
- Cloned `badge@user_zoom_and_responsiveness_img` (Overview 10843:4739) → Guidelines `10580:482` after `badge@size_img`. New node `10961:300`.
130+
- Cloned both Context frames → Guidelines after the user-zoom frame:
131+
- `badge@context_of_color_usage_img` → new node `10965:435`
132+
- `badge@context_of_color_usage_img2` → new node `10965:440`
133+
- Normalized stray name `badge@context_of_color_usage_img1` → `…_img` on Overview frame 10843:4757.
134+
- Filled `badge@spec_layout_spacing` (10593:14398) solid white (was `fills: []`).
135+
- User manually restyled all 3 new frames to 468px wide (final: user_zoom 468×180, context_img 468×276, context_img2 468×260).
136+
137+
### Phase C ✅ (3 new images only — no existing visuals changed this round)
138+
Exported at 2× via `scripts/figma-export.sh`; created matching `.md` sidecars.
139+
- badge@user_zoom_and_responsiveness_img.png — 936×360
140+
- badge@context_of_color_usage_img.png — 936×552
141+
- badge@context_of_color_usage_img2.png — 936×520
142+
143+
Existing PNGs (anatomy, size, state, status_functional, status_non_functional, spec_layout_spacing, hero) **not** re-exported — deliberate clean-diff scope (no design-change changelog rows).
144+
145+
---
146+
147+
## Node map (for next full refresh)
148+
```json
149+
{
150+
"10580:510": "badge@status_non_functional_img.png",
151+
"10580:526": "badge@status_functional_img.png",
152+
"10580:556": "badge@size_img.png",
153+
"10597:1441": "badge@anatomy_img.png",
154+
"10593:14398": "badge@spec_layout_spacing.png",
155+
"10593:15095": "badge@state_img.png",
156+
"10961:300": "badge@user_zoom_and_responsiveness_img.png",
157+
"10965:435": "badge@context_of_color_usage_img.png",
158+
"10965:440": "badge@context_of_color_usage_img2.png"
159+
}
160+
```
161+
Asset frames: Guidelines `10580:482` (page `📎 Zeroheight assets` 10574:2609) · Specs `10593:14390`.
162+
Overview `10843:4486` (page `👁️ Overview` 4112:658). Hero `hero_image_badge.png` = designer-maintained, node id unknown (excluded).
163+
164+
## Designer follow-ups
165+
- ✅ Resolved this round: the two *Context of Color Usage* Overview frames (10843:4757/4767) were renamed (user) and normalized to `badge@context_of_color_usage_img` / `…_img2`.
166+
- Definition wording drift: Figma Overview (10843:4560) is shorter than the prior repo text; repo synced **to Figma** per user. If the richer "colour only / without icon, text or number" phrasing was intentional, designer should restore it in Figma.

‎components/indicator/badge/badge/images/badge@context_of_color_usage_img.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
![badge@context_of_color_usage_img](./badge@context_of_color_usage_img.png)

‎components/indicator/badge/badge/images/badge@context_of_color_usage_img.png‎

23.9 KB
Loading

‎components/indicator/badge/badge/images/badge@context_of_color_usage_img2.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
![badge@context_of_color_usage_img2](./badge@context_of_color_usage_img2.png)

0 commit comments

Comments
 (0)