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