cloudflare / cloudflare/kumo

Component request- ProgressIndicator

Open
#334 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.9k
Forks
177
Avg merge
1d 5h
Merged PRs (30d)
48

Description

## Overview
Request to add a `ProgressIndicator` (or `ProgressCircle`) component to the Kumo design system, migrating the current local implementation from Magic Networks.

---

## 1. Usage Context

**Primary Use Case:** Onboarding progress indicator

**Location:** [Magic Networks Overview page (`OverviewMain.tsx:77-113`)
](https://gitlab.cfdata.org/cloudflare/fe/stratus/-/merge_requests/33221/diffs#501a4ed3b86d8039274a52cc0000fd5d237d6fbf)

**Component Hierarchy:**
```
OverviewMain
└── "Get started with Magic Transit" card
└── OverviewProgressLabel component
├── Conditional icon rendering:
│ ├── All completed → CheckCircleIcon (filled)
│ ├── Not started → CircleDashedIcon (empty)
│ └── In progress → ProgressCircleIcon (partial)
└── Text counter: "X / Y" completed steps
```

**Behavior:**
- Progress calculated as `completedCount / totalCount`
- Shows 6 segments that progressively fill based on completion percentage
- Used to track Magic Transit onboarding checklist (IP prefixes, tunnels, etc.)

---

## 2. Screenshots/GIF

![Image](https://github.com/user-attachments/assets/120305aa-c5e9-4998-a235-dbdfcf53af23)
![Image](https://github.com/user-attachments/assets/672997ad-b64d-419e-80c0-8833fff471c4)

---

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.