-
Notifications
You must be signed in to change notification settings - Fork 55
feat(Avatar): added image&label shorthands #270
Conversation
-fixed the variables and styles slots to be consistent with the other usages
Codecov Report
@@ Coverage Diff @@
## master #270 +/- ##
==========================================
+ Coverage 92.36% 92.44% +0.08%
==========================================
Files 63 63
Lines 1152 1151 -1
Branches 152 172 +20
==========================================
Hits 1064 1064
Misses 84 84
+ Partials 4 3 -1
Continue to review full report at Codecov.
|
import { Avatar, Icon } from '@stardust-ui/react' | ||
|
||
const iconAsImage = (Image, props, children) => { | ||
return <Icon name={'user'} circular variables={{ color: 'blue' }} styles={{ fontSize: '16px' }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems that the expression for name
prop could be safely simplified to use just quotes
src/components/Avatar/Avatar.tsx
Outdated
}, | ||
})} | ||
{!image && | ||
Label.create(label || {}, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
currently it is possible to use component in the following way:
<Avatar name='John Doe' label={{ content: 'A' }} />
In that case the name
's value will be completely ignored. Could we consider name
to be a shorthand slot (with Label
being a default component)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The name and label are two different things. The name is used as a title for the Label and Image components inside the Avatar, but the content of the Label is actually the result of getInitials method (prop), that uses the names for generating the initials. The use can however override the content of the Label using the shorthand, and the name can still reflects the actual user's name.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
frankly, a bit unsure whether we do need both label
and name
at the same time - it seems that for almost all cases it would be sufficient to have just one prop. Let's please, discuss this tomorrow
statusBorderColor: 'white', | ||
statusBorderWidth: 2, | ||
label: { padding: '0px' }, | ||
status: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would rather suggest to refrain from utilizing this pattern of nested (child) variables for now, as we are not completely sure if it is a way to go for us (couple of pending prototypes are under review currently). It seems that we might consider to hardcode these styles for now (in avatarStyles
file) - although I do understand that we will lose a bit in terms of customization capabilities for the examples, at the same time we
- won't restrict the functionality for Teams as a consumer
- would be at much safer spot in terms of using only the approaches that we have agreed upon
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay, will try to replace then all the variables that are referring some components slots with the slot's inside the styles.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I reverted the changes I introduced for the status slot, and removed the label's variables. I wasn't able to get rid of the variables for the status, as these variables are used in multiple places for different calculation inside the statusStyles.
# Conflicts: # CHANGELOG.md
Avatar
Introducing Avatar's image and label shorthands. Introduced some improvements in the styles and variables definition of the component.
TODO
API Proposal
image: ItemShorthand
Shorthand for image inside the Avatar component. Provided examples about how this shorthand can be used for generating Icon instead of Image.
label: ItemShorthand
Shorthand for label inside the Avatar component.