feat(organizations): Add isEmpty to avatar component and use it for members table TASK-1420 #5457
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pauloamorimbr
requested review from
jamesrkiger and
magicznyleszek
as code owners
pauloamorimbr
commented
Jan 28, 2025
| </div> | ||
| {isGhost ? ( | ||
| <div className={cx(styles.initials, styles.ghost)}> | ||
| <svg width='100%' viewBox='0 0 24 24'> |
There was a problem hiding this comment.
Decided to use SVG so we could have control over the dash offset and size
jamesrkiger
reviewed
Jan 29, 2025
jamesrkiger
reviewed
Jan 29, 2025
jamesrkiger
reviewed
Jan 29, 2025
pauloamorimbr
changed the title
|
Thanks for the inputs, @jamesrkiger. Did some changes to adjust based on them. |
jamesrkiger
requested changes
Jan 30, 2025
There was a problem hiding this comment.
Sorry, I've got one last issue for you:
If you use storybook and toggle the isEmpty control on a small avatar component, you will notice the component's alignment shifting (by a very small amount, but visible nonetheless). It looks like the size of the circle changes. It's not noticeable when the size is 'm', but the size changes there, too. It's like a 1 pixel difference, but still probably better to just fix it now rather than later.
pauloamorimbr
deleted the
pamorim/task-1420-add-ghost-variant-to-avatar
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🗒️ Checklist
<type>(<scope>)<!>: <title> TASK-1234frontendorbackendunless it's global📣 Summary
Ghost variant was added to display a "ghost" state in members table when user is invited but still not active
📖 Description
isEmptyprop for our existentAvatarcomponent for it to render the empty-dashed circle.👀 Preview steps
One can check the implementation result in Avatar's storybook story
For reference, I'm adding a screenshot of the property in use: