Skip to content

breaking: modernize LinearProgressBar API from deprecated enums to string unions#3272

Open
rivka-ungar wants to merge 2 commits intovibe4from
breaking-change/linear-progress-bar-api-modernization
Open

breaking: modernize LinearProgressBar API from deprecated enums to string unions#3272
rivka-ungar wants to merge 2 commits intovibe4from
breaking-change/linear-progress-bar-api-modernization

Conversation

@rivka-ungar
Copy link
Contributor

@rivka-ungar rivka-ungar commented Feb 26, 2026

User description

Summary

• Deprecate ProgressBarType and ProgressBarStyle enums in favor of type-safe string unions
• Replace enum-based API with modern string literal types: "primary" | "secondary" | "positive" | "negative" | "warning" | "none"
• Update all component interfaces, tests, and documentation to use string literals
• Maintain backward compatibility through preserved static properties

Breaking Changes

  • ProgressBarType enum → deprecated (no direct replacement - type removed from interface)
  • ProgressBarStyle enum → ProgressBarStyle string union type

Task Link

Monday.com Task

Test Plan

  • All LinearProgressBar component tests pass (17/17)
  • Component interfaces updated to use string union types
  • Static properties preserved for backward compatibility
  • Documentation updated with string literal usage
  • Snapshot tests updated and passing
  • No breaking impact on existing consumers (already using string literals)

🤖 Generated with Claude Code


PR Type

Enhancement, Other


Description

  • Rename LinearProgressBar component to ProgressBar for consistency

  • Update all type names from LinearProgressBar* to ProgressBar*

  • Migrate file structure from LinearProgressBar directory to ProgressBar

  • Update test IDs and component identifiers across test constants

  • Refactor all imports, exports and documentation references


Diagram Walkthrough

flowchart LR
  A["LinearProgressBar<br/>Component & Files"] -->|"Rename to"| B["ProgressBar<br/>Component & Files"]
  C["LinearProgressBar*<br/>Type Names"] -->|"Rename to"| D["ProgressBar*<br/>Type Names"]
  E["Test Constants<br/>LINEAR_PROGRESS_BAR"] -->|"Update to"| F["PROGRESS_BAR"]
  G["Documentation &<br/>Stories"] -->|"Update References"| H["ProgressBar<br/>Documentation"]
Loading

File Walkthrough

Relevant files
Refactoring
6 files
LinearProgressBar.types.ts
Delete old LinearProgressBar types file                                   
+0/-5     
ProgressBar.types.ts
Create new ProgressBar types with renamed exports               
+5/-0     
ProgressBarHelpers.ts
Update import path to ProgressBar stylesheet                         
+1/-1     
index.ts
Update exports from LinearProgressBar to ProgressBar         
+2/-2     
Bar.tsx
Update imports and type references to ProgressBar               
+3/-3     
ProgressBar.tsx
Rename component and interface from LinearProgressBar to ProgressBar
+13/-13 
Configuration changes
2 files
constants.ts
Update test IDs and component identifiers                               
+2/-2     
constants.ts
Update test IDs and component identifiers                               
+2/-2     
Tests
2 files
ProgressBar.snapshot.test.tsx
Update test imports and component references                         
+11/-11 
ProgressBar.test.jsx
Update test imports and component references                         
+12/-12 
Documentation
5 files
component-description-map.tsx
Update component description import and mapping                   
+2/-2     
linear-progress-bar-description.tsx
Rename component and update documentation references         
+4/-4     
LinearProgressBar.mdx
Update documentation title and import statements                 
+11/-11 
LinearProgressBar.stories.helpers.tsx
Update component imports and usage in helpers                       
+5/-5     
LinearProgressBar.stories.tsx
Update component imports, types and story metadata             
+14/-14 
Additional files
3 files
Bar.module.scss [link]   
ProgressBar.module.scss [link]   
ProgressBarConstants.ts [link]   

…ring unions

- Deprecate ProgressBarType and ProgressBarStyle enums in LinearProgressBarConstants
- Replace with type-safe string union types: ProgressBarStyle
- Update all component interfaces to use string union types
- Maintain backward compatibility via static properties
- Update tests and documentation to use string literals

BREAKING CHANGE: ProgressBarType and ProgressBarStyle enums are deprecated.
Use string literal values instead: "primary", "secondary", "positive", "negative", "warning", "none".

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@qodo-free-for-open-source-projects
Copy link
Contributor

qodo-free-for-open-source-projects bot commented Feb 26, 2026

PR Reviewer Guide 🔍

(Review updated until commit 3edf7b9)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

⚠️ Title violates Conventional Commits
The PR title uses breaking: which is not a valid Conventional Commits type. Consider using a valid type (e.g., feat!: / refactor!:) and/or the ! breaking-change marker to comply with the spec.

Import Consistency

The SIZES import path differs from other ProgressBar files (this file imports from ../../../constants while helpers import from ../../../constants/sizes). Ensure the import source is consistent and correct so the type stays aligned with the actual exported constant and avoids accidental type drift.

import { type SIZES } from "../../../constants";

export type ProgressBarStyle = "primary" | "secondary" | "positive" | "negative" | "warning" | "none";

export type ProgressBarSize = (typeof SIZES)[keyof typeof SIZES];
Docs Routing

The related component entry is renamed to ProgressBar, but the href still points to the LinearProgressBar docs path. Validate that the Storybook route is correct after renaming, otherwise the related-component link may be broken or misleading.

import { ProgressBar } from "@vibe/core";

export const ProgressBarDescription = () => {
  const component = useMemo(() => {
    const style = {
      width: "80%"
    };
    return (
      <div style={style}>
        <ProgressBar value={50} />
      </div>
    );
  }, []);
  return (
    <RelatedComponent
      component={component}
      title="ProgressBar"
      href="/?path=/docs/components-linearprogressbar--docs"
      description="Progress bars show continuous progress through a process, such as a percentage value."
    />

@rivka-ungar rivka-ungar changed the base branch from master to vibe4 February 26, 2026 08:22
- Rename LinearProgressBar directory to ProgressBar
- Rename all LinearProgressBar.* files to ProgressBar.*
- Update all import paths to reference new file names
- Maintain component functionality and test coverage

This aligns file names with the actual component name ProgressBar
for better consistency in the codebase.
@github-actions
Copy link
Contributor

github-actions bot commented Feb 26, 2026

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components
Component Base PR Diff
@vibe/button 17.74KB 17.71KB -32B 🟢
@vibe/clickable 6.07KB 6.05KB -16B 🟢
@vibe/dialog 53.85KB 53.81KB -42B 🟢
@vibe/icon-button 68.09KB 68.07KB -12B 🟢
@vibe/icon 13.01KB 13KB -11B 🟢
@vibe/layer 2.96KB 2.96KB 0B ➖
@vibe/layout 10.56KB 10.55KB -16B 🟢
@vibe/loader 5.8KB 5.81KB +9B 🔺
@vibe/tooltip 62.98KB 62.96KB -21B 🟢
@vibe/typography 65.4KB 65.41KB +6B 🔺
Accordion 6.35KB 6.33KB -27B 🟢
AccordionItem 68.13KB 68.17KB +41B 🔺
AlertBanner 72.93KB 72.83KB -100B 🟢
AlertBannerButton 19.23KB 19.23KB +5B 🔺
AlertBannerLink 15.56KB 15.55KB -15B 🟢
AlertBannerText 65.53KB 65.49KB -34B 🟢
AttentionBox 74.53KB 74.45KB -74B 🟢
AttentionBoxLink 15.41KB 15.38KB -34B 🟢
Avatar 68.36KB 68.26KB -103B 🟢
AvatarGroup 96.04KB 96.13KB +87B 🔺
Badge 43.53KB 43.55KB +21B 🔺
BreadcrumbItem 66.26KB 66.16KB -104B 🟢
BreadcrumbMenu 70.3KB 70.24KB -65B 🟢
BreadcrumbMenuItem 79.45KB 79.33KB -127B 🟢
BreadcrumbsBar 5.81KB 5.78KB -26B 🟢
ButtonGroup 70.25KB 70.29KB +48B 🔺
Checkbox 68.43KB 68.46KB +28B 🔺
Chips 77.18KB 77.01KB -172B 🟢
ColorPicker 76.35KB 76.34KB -11B 🟢
ColorPickerContent 75.57KB 75.5KB -64B 🟢
Combobox 86.37KB 86.34KB -26B 🟢
Counter 42.49KB 42.46KB -28B 🟢
DatePicker 134.59KB 134.47KB -122B 🟢
Divider 5.56KB 5.54KB -21B 🟢
Dropdown 125.94KB 125.81KB -129B 🟢
menu 59.95KB 59.94KB -13B 🟢
option 93.15KB 93.15KB 0B ➖
singleValue 93.09KB 93.1KB +18B 🔺
EditableHeading 68.35KB 68.31KB -34B 🟢
EditableText 68.26KB 68.24KB -22B 🟢
EmptyState 72.75KB 72.71KB -37B 🟢
ExpandCollapse 68KB 67.98KB -13B 🟢
FormattedNumber 5.91KB 5.9KB -14B 🟢
GridKeyboardNavigationContext 4.66KB 4.65KB -5B 🟢
HiddenText 5.45KB 5.44KB -18B 🟢
Info 74.34KB 74.32KB -25B 🟢
Label 70.43KB 70.44KB +2B 🔺
LegacyModal 76.89KB 76.78KB -119B 🟢
LegacyModalContent 66.82KB 66.84KB +27B 🔺
LegacyModalFooter 3.45KB 3.45KB 0B ➖
LegacyModalFooterButtons 20.68KB 20.63KB -50B 🟢
LegacyModalHeader 72.97KB 72.88KB -92B 🟢
Link 15.23KB 15.22KB -11B 🟢
List 74.99KB 74.87KB -125B 🟢
ListItem 67.34KB 67.3KB -41B 🟢
ListItemAvatar 68.57KB 68.58KB +16B 🔺
ListItemIcon 14.21KB 14.21KB -1B 🟢
ListTitle 66.75KB 66.7KB -58B 🟢
Menu 8.71KB 8.71KB -3B 🟢
MenuDivider 5.65KB 5.64KB -4B 🟢
MenuGridItem 7.24KB 7.22KB -16B 🟢
MenuItem 79.22KB 79.23KB +14B 🔺
MenuItemButton 72.2KB 72.29KB +87B 🔺
MenuTitle 67.21KB 67.14KB -74B 🟢
MenuButton 67.8KB 67.75KB -52B 🟢
Modal 111.93KB 111.85KB -81B 🟢
ModalContent 4.77KB 4.76KB -5B 🟢
ModalHeader 67.64KB 67.54KB -93B 🟢
ModalMedia 7.77KB 7.75KB -15B 🟢
ModalFooter 69.48KB 69.48KB +6B 🔺
ModalFooterWizard 70.48KB 70.5KB +19B 🔺
ModalBasicLayout 9.25KB 9.22KB -30B 🟢
ModalMediaLayout 8.32KB 8.29KB -30B 🟢
ModalSideBySideLayout 6.36KB 6.36KB +2B 🔺
MultiStepIndicator 53.31KB 53.32KB +12B 🔺
NumberField 74.87KB 74.88KB +13B 🔺
ProgressBar 7.5KB 7.48KB -20B 🟢
RadioButton 67.59KB 67.57KB -19B 🟢
Search 72.45KB 72.4KB -48B 🟢
Skeleton 6.18KB 6.18KB +1B 🔺
Slider 75.97KB 75.9KB -71B 🟢
SplitButton 68.83KB 68.85KB +22B 🔺
SplitButtonMenu 8.89KB 8.85KB -38B 🟢
Steps 73.52KB 73.45KB -75B 🟢
Table 7.33KB 7.32KB -3B 🟢
TableBody 68.67KB 68.63KB -39B 🟢
TableCell 66.9KB 66.93KB +26B 🔺
TableContainer 5.36KB 5.38KB +22B 🔺
TableHeader 5.69KB 5.7KB +12B 🔺
TableHeaderCell 74.24KB 74.14KB -102B 🟢
TableRow 5.63KB 5.61KB -16B 🟢
TableRowMenu 70.62KB 70.62KB -3B 🟢
TableVirtualizedBody 73.42KB 73.3KB -115B 🟢
Tab 65.54KB 65.53KB -13B 🟢
TabList 8.97KB 8.91KB -61B 🟢
TabPanel 5.34KB 5.34KB -7B 🟢
TabPanels 5.97KB 5.92KB -50B 🟢
TabsContext 5.55KB 5.51KB -34B 🟢
TextArea 68.08KB 68.08KB +2B 🔺
TextField 71.36KB 71.36KB 0B ➖
TextWithHighlight 65.86KB 65.84KB -22B 🟢
ThemeProvider 4.68KB 4.69KB +7B 🔺
Tipseen 73.16KB 73.21KB +56B 🔺
TipseenContent 73.65KB 73.68KB +27B 🔺
TipseenImage 73.49KB 73.51KB +20B 🔺
TipseenMedia 73.39KB 73.45KB +64B 🔺
TipseenWizard 76KB 75.95KB -54B 🟢
Toast 76.19KB 76.24KB +57B 🔺
ToastButton 19.07KB 19.09KB +15B 🔺
ToastLink 15.37KB 15.37KB -1B 🟢
Toggle 68.3KB 68.37KB +71B 🔺
TransitionView 37.69KB 37.69KB -2B 🟢
VirtualizedGrid 12.63KB 12.6KB -40B 🟢
VirtualizedList 12.42KB 12.37KB -51B 🟢
AttentionBox (Next) 76.41KB 76.39KB -19B 🟢
DatePicker (Next) 114.46KB 114.56KB +96B 🔺
Dialog (Next) 52.71KB 52.71KB -1B 🟢
Dropdown (Next) 97.57KB 97.47KB -103B 🟢
List (Next) 8.2KB 8.22KB +19B 🔺
ListItem (Next) 71.66KB 71.62KB -44B 🟢
ListTitle (Next) 67.08KB 67.09KB +16B 🔺

📊 Summary:

  • Total Base Size: 5.88MB
  • Total PR Size: 5.88MB
  • Total Difference: 2.51KB

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants