Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Progressbar not clear label usage #468

Closed
rluders opened this issue Dec 4, 2022 · 0 comments · Fixed by #547
Closed

Progressbar not clear label usage #468

rluders opened this issue Dec 4, 2022 · 0 comments · Fixed by #547
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers

Comments

@rluders
Copy link
Collaborator

rluders commented Dec 4, 2022

Describe the bug

The current way that we enable and change progressbar label isn't very clear:

flowbite-react com_storybook__path=_story_components-button--default-button args=outline_true;fullSized_true;color_purple (2)

For example, in the case of the screenshot:

  • labelPosition: "none"
  • labelProgress: true

What is the expected result here? Should it display the label or not? What does none mean for the position?

To Reproduce
Steps to reproduce the behavior:

Check the storybook

Expected behavior

I would like to have more flexible labeling for the progressbar. I think that we should have two labels:

  • textLabel, which could handle any custom text.
  • progressLabel, which would handle the percent number of the progress bar.

I also would like to play with both positions and enable/disable them.

Screenshots

N/A

System information:

N/A

Project information:

  • Tailwind: 3.0.0
  • Flowbite: 1.4.7
  • Flowbite React: 0.3.5
  • Type: CRA

Additional context

N/A
@rluders rluders added 🐛 bug Something isn't working good first issue Good for newcomers confirmed This bug was confirmed labels Dec 4, 2022
@rluders rluders added this to the 0.4.0 milestone Dec 4, 2022
revnandi added a commit to revnandi/flowbite-react that referenced this issue Jan 18, 2023
@revnandi
fix(progressbar): fix unclear label usage (themesberg#468)
bcbf309
@rluders rluders mentioned this issue Jan 18, 2023
Merged
14 tasks
@tulup-conner tulup-conner removed this from the 0.4.0 milestone Mar 1, 2023
tulup-conner added a commit that referenced this issue Mar 5, 2023
@revnandi @rluders @tulup-conner
feat(/src/components/progress): fix unclear label usage (#468) (#547)
f9cad02 
Clarifies confusing behavior for `<Progress>`.

## Breaking Changes

- `<Progress label={}>` -> `<Progress textLabel={}>`
- `<Progress labelPosition={}>` -> `<Progress progressLabelPosition={} textLabelPosition={}>`

* fix(progressbar): fix unclear label usage (#468)

* fix: add spacing to labels

* add percentage symbol to inside progress label

* add unit tests

* fix code formatting

* add unit tests

---------

Co-authored-by: Ricardo Lüders <[email protected]>
Co-authored-by: Conner Davis <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(progressbar): fix unclear label usage (#468) revnandi/flowbite-react
2 participants
@rluders @tulup-conner