themesberg / themesberg/flowbite-react
Avatar Dot indicator does't follow figma spec
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Steps to reproduce
- Go to https://storybook.flowbite-react.com/?path=/story/components-avatar--default-avatar&args=status:online;rounded:!true
- Set the controls as screenshot
- rounded: true
- size: "lg" or "xl"
- status: one of the statuses
- statusPosition: "top-right"
- You can see the dot indicator with incorrect position
Current behavior
Expected behavior
Context
The statusPosition does not change when the size changed
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Avatar component's Storybook entry at the linked default-avatar story and reproduce the top-right status position with rounded large and extra-large avatars. Compare the rendered dot with the linked Figma design and adjust the size-dependent positioning so each status remains correctly placed; verify the affected Avatar variants in Storybook.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, storybook, tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100