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

Missing avatar with placeholder initials #357

Closed
tiagossa1 opened this issue Sep 18, 2022 · 2 comments · Fixed by #375
Closed

Missing avatar with placeholder initials #357

tiagossa1 opened this issue Sep 18, 2022 · 2 comments · Fixed by #375
Labels
good first issue Good for newcomers help wanted Extra attention is needed 🚀 enhancement New feature or request

Comments

@tiagossa1
Copy link
Contributor

tiagossa1 commented Sep 18, 2022 •
edited
Loading

Describe the solution you'd like

Flowbite React's Avatar component does not provide an avatar that has placeholder initials, unlike flowbite. E.g. https://flowbite.com/docs/components/avatar/ - see "Placeholder Initials".
The solution could be: instead of passing an image URL, Avatar could have another prop called "placeholderInitials" or similar where the developer passes the initials as a string.
Internally:

  • If "img" props was provided, display the avatar with an image.
  • If "placeholderIntitials" was provided, display the the initials only.

An suggestion: both should not be filled. If they are, avatar with an image should be display or just throw an error.
@rluders rluders added the 🚀 enhancement New feature or request label Sep 19, 2022
@rluders rluders added help wanted Extra attention is needed good first issue Good for newcomers labels Oct 4, 2022
@iamargentum
Copy link
Contributor

hi @rluders !
can i work on this issue?

@rluders
Copy link
Collaborator

rluders commented Oct 8, 2022

@iamargentum go ahead.

iamargentum added a commit to iamargentum/flowbite-react that referenced this issue Oct 9, 2022
@iamargentum
feat: allow using initials as Avatar placeholder
b9ef720 
Add new prop, `placeholderInitials`, to the `Avatar` component.
String passed in this prop will be displayed as `Avatar`'s placeholder, if image is not provided.

Refs: themesberg#357
iamargentum added a commit to iamargentum/flowbite-react that referenced this issue Oct 9, 2022
@iamargentum
docs(avatar): update docs with Placeholder Initials for Avatar
3eb6454 
Update the docs with newly added feature, that allows usage of initials as a placeholder for
`Avatar` component

themesberg#357
@iamargentum iamargentum mentioned this issue Oct 9, 2022
Merged
13 tasks
iamargentum added a commit to iamargentum/flowbite-react that referenced this issue Oct 11, 2022
@iamargentum
refactor(avatar): move styles to Theme
744042e 
themesberg#357
iamargentum added a commit to iamargentum/flowbite-react that referenced this issue Oct 11, 2022
@iamargentum
test(avatar): add test for initials placeholder
922eb83 
themesberg#357
rluders pushed a commit that referenced this issue Oct 11, 2022
@iamargentum
feat: allow using initials as Avatar placeholder (#375)
e349d82 
* feat: allow using initials as `Avatar` placeholder

Add new prop, `placeholderInitials`, to the `Avatar` component.
String passed in this prop will be displayed as `Avatar`'s placeholder, if image is not provided.

Refs: #357

* docs(avatar): update docs with `Placeholder Initials` for `Avatar`

Update the docs with newly added feature, that allows usage of initials as a placeholder for
`Avatar` component

#357

* refactor(avatar): move styles to Theme

#357

* test(avatar): add test for initials placeholder

#357
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers help wanted Extra attention is needed 🚀 enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: allow using initials as Avatar placeholder iamargentum/flowbite-react
3 participants
@rluders @tiagossa1 @iamargentum