microsoft / microsoft/hve-core
Enhance maturity badges with icons and extend to collection detail pages
- Dominant language
- Python
- Stars
- 1.5k
- Forks
- 301
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 92
Description
## Summary
Enhance the existing maturity badge system with icon support and extend badge rendering to individual collection detail pages, not just the overview card grid.
## Current State
The Docusaurus site already renders color-coded text badges for three maturity levels on the collection card grid:
- **Stable** — green badge (`--ifm-color-success`)
- **Preview** — yellow badge (`--ifm-color-warning`)
- **Experimental** — blue badge (`--ifm-color-info`)
Relevant files:
- `docs/docusaurus/src/components/CollectionCards/index.tsx` — renders `` badges with maturity text
- `docs/docusaurus/src/components/CollectionCards/styles.module.css` — CSS classes for `.maturityBadge`, `.maturityStable`, `.maturityPreview`, `.maturityExperimental`
- `docs/docusaurus/src/data/collectionCards.ts` — hard-coded `maturity: 'Stable' | 'Preview' | 'Experimental'` values
## Proposed Enhancements
### 1. Add icons alongside maturity text
Add a small SVG or emoji icon next to each badge label to improve scannability:
| Level | Suggested Icon | Rationale |
|--------------|----------------|---------------------------------|
| Stable | ✅ or 🟢 | Universally understood as "good to go" |
| Preview | 🔶 or ⚠️ | Signals caution without alarm |
| Experimental | 🧪 or 🔬 | Clearly conveys "lab / early stage" |
### 2. Extend badges to collection detail pages
When Issue #1317 generates individual Docusaurus collection pages from YAML manifests, each detail page should display its maturity badge prominently (e.g., in the page header or alongside the collection title).
### 3. Reconcile maturity value casing
Collection YAML manifests use lowercase (`maturity: experimental`), while the Docusaurus component expects title-case (`Experimental`). Normalize during data ingestion so the badge component receives consistent values.
### 4. Add tooltips or legend
Consider adding a tooltip on hover or a small legend section explaining what each maturity level means for consumers of the collection.
## Relationship to Other Issues
- Depends on or enhances #1317 (Dynamically generate Docusaurus collection pages from YAML manifests)
- The data-driven badge rendering in #1317 Phase 1 provides the foundation; this issue covers the visual and UX improvements on top of that foundation
## Acceptance Criteria
- [ ] Maturity badges include an icon (SVG or emoji) alongside the text label
- [ ] Collection detail pages (from #1317) display maturity badges
- [ ] YAML lowercase maturity values map correctly to Docusaurus badge rendering
- [ ] Badge rendering is consistent across card grid and detail pages
- [ ] Optional: tooltip or legend explains maturity levels to users
Contributor guide
Assessment
This issue has not been assessed yet.