Skip to content

Conversation

JExcellence
Copy link
Contributor

feat(components): add customizable ProgressRing component

  • Implement SVG-based circular progress indicator with dynamic rendering
  • Add size variants (s/m/l) and tone options (primary/warning/success)
  • Include optional text label display with responsive positioning
  • Support accessibility through ARIA attribute calculations
  • Add smooth transition animations for value changes
  • Create CSS module styles for maintainable theming
  • Export component with TypeScript interface for type safety

How it works:

     <ProgressRing
           value={tech.expertise}
           label={`${tech.expertise}%`}
           size="m"
    />

 - TechCarousel.tsx
 - TechCarousel.module.scss

 Display different Tech/Specs including icons through icons.ts

 usage example:

 	const techStack= ["Java", "React", "Java", "Spring", "Hibernate", "Vue", "MySQL", "Docker", "Git", "Angular", "Javascript"]

 				<TechCarousel
 					items={techStack}
 					center
 					gap="xs"
 				/>
- Implement SVG-based circular progress indicator with dynamic rendering
- Add size variants (s/m/l) and tone options (primary/warning/success)
- Include optional text label display with responsive positioning
- Support accessibility through ARIA attribute calculations
- Add smooth transition animations for value changes
- Create CSS module styles for maintainable theming
- Export component with TypeScript interface for type safety
Copy link

vercel bot commented May 15, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
once-ui-starter ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 19, 2025 6:45pm

lightyfr and others added 26 commits May 19, 2025 20:36
…refact UI

# Conflicts:
#	src/once-ui/modules/data/BarGraph.tsx
…ent styling and layout adjustments; add data-viz attribute to MultiBarGraph
…or improved consistency; update styles and add data-viz attributes
lorant-one and others added 7 commits May 19, 2025 20:36
…nce, and consistency

- Refactored SVG.tsx for better syntax, consistent code style, named export, and forwardRef support; improved merge of className/style and removed over-abstraction.
- Updated ProgressRing.tsx to use new SVG API, modern classNames usage, explicit displayName, and improved label structure.
- Simplified ProgressRing.module.scss by flattening size and tone selectors, fixing animated stroke transition timing, and correcting .progress fill for proper rendering.
@JExcellence
Copy link
Contributor Author

refactor: improve ProgressRing and SVG components for style, performance, and consistency

  • Refactored SVG.tsx for better syntax, consistent code style, named export, and forwardRef support; improved merge of className/style and removed over-abstraction.
  • Updated ProgressRing.tsx to use new SVG API, modern classNames usage, explicit displayName, and improved label structure.
  • Simplified ProgressRing.module.scss by flattening size and tone selectors, fixing animated stroke transition timing, and correcting .progress fill for proper rendering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants