#373 Avatar component #375
Conversation
| @@ -0,0 +1,16 @@ | |||
| import { getContrast } from 'polished'; | |||
|
|
|||
| export function getInitials(name = '', count = 2): string { | |||
There was a problem hiding this comment.
At this moment it does not support diacritics or emojis.
sgraczyk
requested review from
MichalPaszowski,
TomaszRatajczyk,
kstvsko,
marcinsawicki and
martagranisz
…e rim width for larger Avatars.
|
I've added updated avatars, also with status indicators, that are now scaled and positioned at the same place at every size. I've added also the scale for the avatars with rims. :) Rims: https://www.figma.com/file/2pFu80PXO5A2tfyrAGnx91/Product-Components?node-id=8167%3A31183 |
|
Something not pykło here https://monosnap.com/file/1aOi1ZZ2lR00rwnWGF2JmDl9Ks13r3 |
Should be fixed within 99b29a1 |
Status indicators are implemented as proposed, however, I'd like to wait before introducing changes designed for rims. It looks that now the size of the image is adjusted so the rim fits into the original size of the avatar. It'll probably introduce a flickering effect, especially that the rim is a UI element that may appear and disappear when a specific condition changes. Can we move the work around rims to another issue, and accept the current state for now? |
| 'xxxsmall', | ||
| 'xxsmall', | ||
| 'xsmall', | ||
| ]; |
There was a problem hiding this comment.
missing space - perhaps it should be put up top of the file?
| 'xlarge', | ||
| 'xxlarge', | ||
| ]; | ||
| it.each(smallAndAboveSizes)( |
Resolves: #373
Description
Implements the
Avatarcomponent from scratch. During the development phase I made some decisions to be confirmed by the rest of the team:kind: 'person' | 'group'I've usedshape: 'circle' : 'rounded-square'. A similar change was for the status, as not all products are chat-focused, so I avoided theaccepts chatsname.rounded-square, nevertheless, I implemented it.Storybook
Checklist
Obligatory:
Optional: