Skip to content

feat(UProgress): add circular variant #4120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 17 commits into
base: v3
Choose a base branch
from

Conversation

Achraf931
Copy link

@Achraf931 Achraf931 commented May 11, 2025

✨ feat(UProgress): add circular variant and statusPosition props

πŸ”— Linked issue

Resolves #3728

❓ Type of change

  • ✨ New feature (a non-breaking change that adds functionality)

πŸ“š Description

This PR introduces:

  • A new circular variant for the UProgress component, allowing a circular visual representation of progress.
  • A new statusPosition prop with the following options:
    • "inside": displays the status (label or percent) in the center of the circle
    • "outside": displays the status outside the circular progress (similar to the linear variant)

These changes provide more flexibility for visualizing progress in various use cases.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.
  • I have written unit or snapshot tests (if applicable).
  • I have manually tested the component with both variants.

Copy link

pkg-pr-new bot commented May 11, 2025

npm i https://pkg.pr.new/@nuxt/ui@4120

commit: 78a2d18

@Achraf931 Achraf931 changed the title feat(Progress): add circular variant feat(UProgress): add circular variant May 11, 2025
Copy link
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm aware it's still a draft, was just looking around 😊

@@ -71,6 +85,22 @@ props:
---
::

### Status Position

Use the `statusPosition` prop to define where the status text is displayed. Defaults to `outside`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Use the `statusPosition` prop to define where the status text is displayed. Defaults to `outside`.
Use the `status-position` prop to define where the status text is displayed. Defaults to `outside`.

@@ -109,6 +139,25 @@ props:
---
::

### Variant
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You've added Variant twice.

@@ -746,6 +746,7 @@ This is how the `@theme` is generated for each design token:
--outline-color-default: var(--ui-border);
--outline-color-inverted: var(--ui-border-inverted);
--stroke-color-default: var(--ui-border);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need this one, let's add them all for stroke and fill. So you can add --stroke-color-muted, --fill-color-muted and --fill-color-accented I guess.

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.

[UProgress]: Add variant and status-position props
2 participants