UI and storybook updates #15071
UI and storybook updates #15071
Conversation
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
| 'collectible-default__clickable': handleImageClick, | ||
| className={classnames('collectible-default', { | ||
| 'collectible-default--clickable': handleImageClick, | ||
| })} |
There was a problem hiding this comment.
Updating classes here to follow BEM naming convention
| })} | ||
| onClick={handleImageClick} | ||
| > | ||
| <Typography variant={TYPOGRAPHY.H7} className="collectible-default__text"> |
There was a problem hiding this comment.
Removing click handler from text as unneeded. Clicking text still fires event
click.mov
| handleImageClick.args = { | ||
| // eslint-disable-next-line no-alert | ||
| handleImageClick: () => window.alert('CollectibleDefaultImage clicked!'), | ||
| }; |
There was a problem hiding this comment.
Adding story for empty image card
| overflowWrap={OVERFLOW_WRAP.BREAK_WORD} | ||
| boxProps={{ margin: 0, marginBottom: 4 }} | ||
| > | ||
| {description} |
There was a problem hiding this comment.
When there is a long word or id in the description the layout breaks. This fixes that.
| ...collectible, | ||
| image: undefined, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Adding another story to display the collectible details story when there is no image
| padding={0} | ||
| justifyContent={JUSTIFY_CONTENT.CENTER} | ||
| className="collectibles-items__item-wrapper__card" | ||
| > |
There was a problem hiding this comment.
Adding overflow hidden to the card so the image being contained doesn't overlap the border.
adonesky1
left a comment
adonesky1
left a comment
There was a problem hiding this comment.
LGTM, the only thing I think we ought to do is line break the collection name -> tokenId so that you can atleast see the beginning of the tokenId in the card:
Builds ready [8048cdd]Page Load Metrics (1885 ± 72 ms)
highlights:storybook
|
|
@adonesky1 I have added a
|
Explanation
Some UI updates
Screenshots
Before
After
Also updating and adding some stories
