Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update AddressField, IdentityBadge, TokenBadge, and TransactionBadge to new styles #557

Merged
merged 14 commits into from Sep 3, 2019

Conversation

@sohkai
Copy link
Member

commented Sep 2, 2019

As seen in Figma.

AddressBadge:

Screen Shot 2019-09-02 at 3 07 08 PM

IdentityBadge:

Screen Shot 2019-09-02 at 3 07 31 PM

Screen Shot 2019-09-02 at 3 07 36 PM

TokenBadge:

Screen Shot 2019-09-02 at 3 06 59 PM

Screen Shot 2019-09-02 at 3 07 02 PM

sohkai added 10 commits Sep 2, 2019
IdentityBadge: update to new styles
Also replaces the unused theme.badge colour with the new one for
IdentityBadges.

@sohkai sohkai requested a review from bpierre Sep 2, 2019

src/utils/css.js Show resolved Hide resolved
src/components/IdentityBadge/IdentityBadge.js Outdated Show resolved Hide resolved
const handleCopy = useCallback(() => {
if (inputRef.current) {
inputRef.current.focus()
inputRef.current.select()

This comment has been minimized.

Copy link
@bpierre

bpierre Sep 2, 2019

Member

Just as a note for later (better not touch it now), I’m wondering if focus() is needed since select() probably always implies the focus being moved at the selection level 🤔

sohkai added 2 commits Sep 2, 2019
lineHeight: 1.5,
monospace: true,
},
address2: {

This comment has been minimized.

Copy link
@sohkai

sohkai Sep 2, 2019

Author Member

@bpierre @dizzypaty I've added address2 for the AddressField's input text size. Unfortunately the text grows quite long when it's 16px, and 14 was the closest other value that we use (designs have this at 15px).

sohkai added 2 commits Sep 2, 2019
@@ -103,8 +105,8 @@ const IdentityBadge = React.memo(function IdentityBadge({
text-overflow: ellipsis;
overflow: hidden;
${textStyle(!customLabel && address ? 'address1' : 'body2')}
${labelStyle}

This comment has been minimized.

Copy link
@sohkai

sohkai Sep 2, 2019

Author Member

@bpierre Honestly not sure if this is the right way to do this, do we have other patterns or other ways of solving this (styling an inner component)?

This comment has been minimized.

Copy link
@bpierre

bpierre Sep 2, 2019

Member

Nope, it’s something I try to avoid as much as possible, bu when needed, it doesn’t seem too bad to do it like that.

Another solution could be to export this as a component and let authors extend it + pass it, but it’s more verbose:

<IdentityBadge
  label={
    <IdentityBadge.Label css="color: tomato">
      0xcafe
    </IdentityBadge.Label>
  }
/>

This comment has been minimized.

Copy link
@sohkai

sohkai Sep 2, 2019

Author Member

Mmm yeah, what do you think about keeping this as-is? I think the only thing that people will override is the text style (to be similar to the old fontSize API).

This comment has been minimized.

Copy link
@bpierre

bpierre Sep 2, 2019

Member

Yes agreed, let’s keep it this way 👍

@sohkai sohkai changed the title Update AddressField, IdentityBadge, and TokenBadge to new styles Update AddressField, IdentityBadge, TokenBadge, and TransactionBadge to new styles Sep 2, 2019

@bpierre
bpierre approved these changes Sep 3, 2019

@sohkai sohkai merged commit 7ea426e into newstyle Sep 3, 2019

5 checks passed

License Compliance All checks passed.
Details
WIP Ready for review
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
license/cla Contributor License Agreement is signed.
Details

@sohkai sohkai deleted the newstyle-identitybadge branch Sep 3, 2019

@sohkai sohkai referenced this pull request Sep 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.