feat(user card) - Update User card to new SHINE design (part 1) #2092
Conversation
🦋 Changeset detectedLatest commit: e9a4286 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for stacks-svelte ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Hey @ttaylor-stack , I did a quick glance through the code and it overall looked good to me. Looking at the UI elements I noticed an issue with gaps, though: Here's what I see in the designs: |
There was a problem hiding this comment.
Base should be using the 24x24 avatar size.
The padding in between the bling and the badge/rep number is created with a space character before the number. Should this be done with padding/gutter spacing instead? Would be 2px.
Is there any way to have 4px spacing in between badges when the count is showing vs 2px spacing when the count number isn't?
For responsive, when we need to wrap, I think we should keep certain blocks of info together (so the whole block wraps when the screen size is too short)
Got confused by my own section title — can we change this to "with user badges"?
OR — I'm wondering if we should also have a "with Bling" section OR should both of those just be in the Base section?
Should / could the Sizes be in the same section? Maybe in a table to get both descriptions or just the descriptions above separate by a paragraph and both sizes in the same code box?
This reverts commit 6bfd3e2.
…/StackExchange/Stacks into spark-85/update-user-card-part-1
giamir
left a comment
giamir
left a comment
There was a problem hiding this comment.
Thanks @ttaylor-stack for making a lot of progress on the review comments. Personally I think we are almost ready to merge. I left few more comments but I think the largest point is about getting the unit tests in a good enough state. I left a suggestion to look at how we do things in the Popover that has similar subcomponents.
Thanks and let me know if you would like to sync. 🙂
packages/stacks-svelte/src/components/UserCard/UserCardTime.svelte
Outdated
Show resolved
Hide resolved
packages/stacks-svelte/src/components/UserCard/UserCardTime.svelte
Outdated
Show resolved
Hide resolved
packages/stacks-svelte/src/components/UserCard/UserCard.test.ts
Outdated
Show resolved
Hide resolved
packages/stacks-svelte/src/components/UserCard/UserCardTime.svelte
Outdated
Show resolved
Hide resolved
…/StackExchange/Stacks into spark-85/update-user-card-part-1
giamir
left a comment
giamir
left a comment
There was a problem hiding this comment.
I think we are good to go. Thanks @ttaylor-stack for adding few more unit tests.
We can merge I believe. 🚀
This ticket cover part 1 of the user card updates.
The following things will be updated in Part 2:
Ticket
Figma
notes:
I decided to keep the Usercard as one Svelte component instead of dividing it up even though the large and sm/default sizes have different markup. I thought it would be more user friendly to have 1 components users interact with.
I decided split the different parts of the Usercard into different Svelte subcomponents