microsoft / microsoft/hve-core

Enhance maturity badges with icons and extend to collection detail pages

Open
#1,318 0 comments 0 reactions 1 assignee Claimed by @WilliamBerryiii View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.