Voting: Custom Labels / Local Identities

[2color]

What

• Local Identities (aka Custom Labels) in the Voting App.

Dependencies in other repos

• @aragon/ui latest master with updated IdentityBadge
• Aragon client - Local identities client#656
• Functionality in @aragon/wrapper and @aragon/api Implement IdentityProvider aragon.js#253

Nomenclature

• For consistency I tried to use the term identity
• Only in the badge do I name things with label to reflect its actual use in the UI toolkit (the IdentityBadge component expects a customLabel prop)

Todo before merging

• Bump minor version of @aragon/ui once released with updated IdentityBadge
• Bump version of @aragon/api once released with identities functionality

[AquiGorka]

❤️ I like your naming conventions (mine was arbitrary ideas in the moment) so I'll update the other PRs for consistency.

[coveralls]

Coverage remained the same at 96.734% when pulling ba68612 on feature/custom-labels-voting into a7413ff on master.

[coveralls]

Coverage remained the same at 96.734% when pulling a801346 on feature/custom-labels-voting into 3c3db0d on master.

[sohkai]

❤️ 😲💫

A few notes on the implementation, but this looks really good!

[sohkai]

Wondering how you feel about this @bpierre; I think I'd generally recommend putting <Main /> as the very first component that's rendered.

[bpierre]

Yes let’s do this 👍

The only one that really need to be outside is the <div css="min-width: 320px">, so it applies to the elements rendered at the root level.

[2color]

Two questions:

• Is css a valid prop? Why is it used over style
• Can we add min-width: 320px to the Main element?

[bpierre]

Is css a valid prop? Why is it used over style

It is being transformed by the styled-components babel plugin.

It transforms this:

import React from 'react'

const App = () => <div css="min-width: 320px" />

Into this:

import React from 'react'
import styled from 'styled-components'

const App = () => <A />

const A = styled.div`
  min-width: 320px
`

And it also works if you do this:

import React from 'react'

const items = ['apple', 'orange', 'banana']

const App = () => (
  <ul>
    {items.map(item => (
      // Only one styled component will be extracted by the babel transform.
      <li css="color: tomato">{item}</li>
    ))}
  </ul>
)

It is basically style, but without the downsides :-)

Can we add min-width: 320px to the Main element?

That’s something I keep wondering… We used to have AragonApp, which was defining some default styles, and it was causing too many issues. Main replaced it, and it was decided that it would not set anything styles, and only providing context. We can imagine a website widget using aragonUI, and being smaller than 320px, so it would be a problem to have it by default.

But on the other hand, developing a fullscreen app with aragonUI is quite a common use case… maybe we could have it as a prop, like minWidth, that would be either 0 or 320 by default?

[2color]

Thanks for the clarification.

Can we add min-width: 320px to the Main element?

On that note, I actually meant to have it inline: <Main assetsUrl="./aragon-ui" css="min-width: 320px"> rather than a separate element.

Update: I did try this but it didn't work.

But on the other hand, developing a fullscreen app with aragonUI is quite a common use case… maybe we could have it as a prop, like minWidth, that would be either 0 or 320 by default?

I don't have an opinion on that.

[bpierre]

Oh I see, no it wouldn’t directly work because Main doesn’t render any DOM element. We could redirect styling props (style and className) to Root, but I would like to not encourage doing this, and prefer the minWidth solution for now.

@sohkai @AquiGorka any thoughts on that?

[AquiGorka]

html, body { min-width: 320px; }?

[sohkai]

Seems a little bit unnecessary to use grid here 😄

[AquiGorka]

I don't see using grid as overkill over flex and I tend to use the first one before the latter by default. Let me know if you strongly think we'd need to use flex here.

[sohkai]

I'm not as familiar with the grid "language" as I am with the older layout ones, so that's partly why I'm not as comfortable using it everywhere.

But in general, my impression is that grid is so powerful you could probably build a spaceship with it, but it doesn't mean it's the best or easiest to maintain method of doing it :).

[AquiGorka]

Consider the verbosity levels here: if I were to use flex, I'd have to set the display on the container and then set flex-grow in one of the children with grid I get the same result with two rules on the container.