search

qwikifiers / qwik-ui

Qwik's official Headless and styled component library
https://qwikui.com
MIT License
570 stars 116 forks source link

feat: progress bar headless and styled #667

Closed ditadi closed 2 months ago

ditadi commented 2 months ago

What is it?

Why is it needed?

This PR adds a headless and styled progress bar component. This is a basic component in UI libraries.

Checklist:

changeset-bot[bot] commented 2 months ago

⚠️ No Changeset found

Latest commit: 24df74b722f2f573b5591b14ab0b9deddc0d9f56

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

thejackshelton commented 2 months ago

If you haven't already, I would go through the contributing section.

For the progress component to hit beta it needs:

side note: I like to look and see what do these headless component API's have in common and keep the API as minimal as possible. This is something we've done in the select component.

For example, is there anything Radix UI and Kobalte have that are the same API wise? What about functionality? Anything interesting?

What about kobalte and melt ui? etc.

Awesome job so far!

ditadi commented 2 months ago

If you haven't already, I would go through the contributing section.

For the progress component to hit beta it needs:

  • Tests (see the select)
  • Docs (I noticed parts of the docs are still copied from the accordion)

side note: I like to look and see what do these headless component API's have in common and keep the API as minimal as possible. This is something we've done in the select component.

For example, is there anything Radix UI and Kobalte have that are the same API wise? What about functionality? Anything interesting?

What about kobalte and melt ui? etc.

Awesome job so far!

I looked at other libraries like Kobalte, MeltUI, and React-Aria. Radix-UI and MeltUI go in a simple approach only handling with the Bar and Indicator. (as I did)

Kobalte and React-Aria go deeper, the Bar and Indicator belong to a bigger component which also handles with Label, Positioning, Size, and more. Can be an evolution, but not a must-have in my opinion.

thejackshelton commented 2 months ago

If you haven't already, I would go through the contributing section. For the progress component to hit beta it needs:

  • Tests (see the select)
  • Docs (I noticed parts of the docs are still copied from the accordion)

side note: I like to look and see what do these headless component API's have in common and keep the API as minimal as possible. This is something we've done in the select component.

For example, is there anything Radix UI and Kobalte have that are the same API wise? What about functionality? Anything interesting?

What about kobalte and melt ui? etc.

Awesome job so far!

I looked at other libraries like Kobalte, MeltUI, and React-Aria. Radix-UI and MeltUI go in a simple approach only handling with the Bar and Indicator. (as I did)

Kobalte and React-Aria go deeper, the Bar and Indicator belong to a bigger component which also handles with Label, Positioning, Size, and more. Can be an evolution, but not a must-have in my opinion.

Yeah keeping the API simple is great. I'd be curious to know what use cases where React Aria and Kobalte had to use a more complex approach though, and whether there was some actual demand for those use cases.

thejackshelton commented 2 months ago

Happy to merge this initial PR once the comments above have been changed. To recap:

To hit beta:

Also happy to help and pair if you have any questions 👍

ditadi commented 2 months ago

Happy to merge this initial PR once the comments above have been changed. To recap:

  • Remove duplicate docs
  • Remove the visible task
  • Change the component name to match the library convention
  • Change data-state to data-progress

To hit beta:

  • Can be used for most basic use cases
  • Add docs
  • Add tests

Also happy to help and pair if you have any questions 👍

All changes were made, and I also added some simple tests.

thejackshelton commented 2 months ago

Looks good! Merging this initial pr.

thejackshelton commented 2 months ago

Also side note: marking a PR as ready for review will run the CI. Checks if all the tests are passing, any TS errors etc.