Skip to content

Update Progress Bar component to match Figma design specifications

Summary

This MR updates the Progress Bar component to align with the Figma design specifications as outlined in #2565.

Changes Made

  • Border radius: Updated to 9999px for fully rounded corners (matching Figma design)
  • Size variants: Added three standardized sizes:
    • xs: 4px height
    • sm: 8px height
    • md: 16px height (default)
  • Vue component: Added size prop with proper validation
  • Backward compatibility: Maintained existing height prop for custom heights

Implementation Details

  • Updated progress_bar.scss with new size classes and border-radius values
  • Enhanced progress_bar.vue with size prop and computed classes
  • All size specifications match the Figma UI Kit exactly
  • Tested successfully in Storybook with all size variants working

Testing

  • Verified rounded corners display correctly
  • Confirmed all size variants (xs, sm, md) render with correct heights
  • Tested in Storybook - component controls work properly
  • Backward compatibility maintained for existing height prop usage

Screenshots

The component now displays with fully rounded corners and supports three standardized sizes as per the Figma design.

Closes #2565

Merge request reports

Loading