Skip to content

feat: add linear variant to ProgressGauge component #836

@Aureliolo

Description

@Aureliolo

Context

Issue #775 specifies "ProgressGauge -- circular or linear gauge for budget/utilization". PR #833 implemented a semi-circular (half-arc) gauge with sm and md size variants, but no linear variant.

Scope

Add a variant prop to ProgressGauge:

  • variant: 'circular' | 'linear' (default: 'circular')
  • Linear variant: horizontal bar gauge with the same color thresholds, percentage display, and accessibility attributes
  • Both variants should share the same getHealthColor color logic

Acceptance criteria

  • ProgressGauge accepts variant prop
  • Linear variant renders a horizontal bar with percentage label
  • Linear variant has proper role="meter" and aria attributes
  • Storybook stories for both variants
  • Unit tests for linear variant (clamping, colors, accessibility)

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope:smallLess than 1 day of worktype:featureNew feature implementationv0.5Minor version v0.5v0.5.1Patch release v0.5.1

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions