Add <Avatar> to display an image along with the text #208
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
Fix the proptypes of Avatar
zhusee2
reviewed
Apr 29, 2019
packages/core/src/styles/Avatar.scss
Outdated
| // ---------------------- | ||
| // Inner image | ||
| // ---------------------- | ||
| > img { |
There was a problem hiding this comment.
You probably need a & here?
Suggested change
| > img { | |
| & > img { |
zhusee2
reviewed
Apr 29, 2019
packages/form/src/SelectRow.js
Outdated
| * @param {array} fromOptions | ||
| * @return {Map} | ||
| */ | ||
| function getValueAvatarMap(fromChildren = []) { |
There was a problem hiding this comment.
Can this be merged with getValueLabelMap so we don't need to iterate the Array twice, only for deriving different data?
There was a problem hiding this comment.
Nice suggestion. Thanks!
zhusee2
reviewed
Apr 29, 2019
| import DebugBox from 'utils/DebugBox'; | ||
|
|
||
| function BasicCheckboxExample() { | ||
| const rdAvatar = <Avatar type="square" alt="Avatar of RD" src="https://api.adorable.io/avatars/285/rd@ichef.tw" />; |
There was a problem hiding this comment.
Can we change the email here to more generic one, maybe johndoe@example.com?
zhusee2
reviewed
Apr 29, 2019
| @@ -17,6 +17,7 @@ export const TYPE_SYMBOL = Symbol('SelectOption'); | |||
| function SelectOption({ | |||
| label, | |||
| value, | |||
| avatar, | |||
|
@zhusee2 The code has been refined. You may take a look at it when you're free 😃 |
Merged
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.
Purpose
In our project in development, there is a need to add users' avatars alongside the text of
<ListRow>,<SelectRow>, and<SelectOption>.With this in mind, we add the following three types (square, rounded, and circle) of
<Avatar>s to display an image along with the text, and change related components to accommodate the avatars.Screenshots
<Avatar><ListRow><Checkbox><SelectRow>Changes
<Avatar>rowComp()to allow the appearance of<Avatar>alongside the text<SelectRow>and<Checkbox>to display<Avatar>Risks
The change of
rowComp()allows any components wrapped with it to integrate<Avatar>on its left. However, since<Avatar>is an experimental feature in a project, components except<ListRow>and<SelectRow>have not been tested and documented.