aragon / ui Goto Github PK

aragon-ui has the most updated config, so we can go off of this.

We should replace springConf with a springs object that contains each of the configurations.

A consumer of this package could want to use their own instance (or version) of styled-components. It'd be nice if they could install and provide their own instance of styled-components.

Circular border-radius:

Different bg:

Header:

Location: src/Badge/BadgeText.js

Could probably be integrated with the current BadgeNumber?

Opening an issue after having discussed this with @izqui.

Our icon set is composed of actions (notifications, wallet, …) and app icons (tokens, fundraising, …). Some icons used for apps are also used to represent actions. At the moment, their name is describing the app they represent.

This is the Identity app icon, which is named IconIdentity:

You can see it being used in the Aragon menu:

And this same icon is also used as a “Transfer token” action in the Tokens app:

• Icons names should describe what they represent in the most generic way, rather than the app they happen to represent (in the example above, it could be “user-add”).
• If an app is using an icon from the Aragon UI icon set, this app is free to duplicate it.

There's a lot of components we more or less reuse across all the aragon-apps (e.g. the app's layout, an app provider, top-level connector) that could live here :).

Location: src/Accordion/AccordionBox.js

Location: src/Form/TextArea.js

The SidePanel scroll need to take over the app scroll when opened.

These components still need their READMEs and gallery pages:

• AppBar
• EmptyStateCard and Card
• Field
• SidePanel
• Tables

Some full-width components are now responsive and should be rendered in an iframe to make the media queries work properly.

Location: src/Input/TimeInput.js
Potential component: rc-time-picker

(Actually this is a ThresholdBar; see #45):

See https://github.com/aragon/aragon-ui/pull/66#issue-281204033

See most app side panels.

Location: src/Form/Form.js

It could be cool if we had a provider-like component (think react-redux) to connect components more easily to Aragon.js.

We could explore what Truffle did in drizzle-react.

This is a tomorrow issue.

Location: src/Radio/RadioGroup.js, src/Radio/RadioButton.js
Example: react-radio-group

We need to define the kind of animations we want to apply to different cases, and expose their parameters in Aragon UI.

We could split them in two groups:

• Normal transitions: exposed as a set of predefined spring animations [1] (using react-motion).
• Super fast transitions (< 150ms): when immediate feedback is needed for an interaction. Could be on hover, press, etc. These can be easing based (the spring() CSS timing function is still at the proposal stage) and will mostly consist of guidelines about when and how to use them. We could also decide to not use any transition at all in these cases, depending on the kind of feeling we want to express.

[1] If you are not familiar with spring based animations, I recommend reading “Creating Animations and Interactions with Physical Models” and/or watching this talk by Cheng Lou (author of React Motion) to understand why they are awesome ✨

Note: we will likely want to include a two-panel DateInput as well.

Normal:

Expanded:

Range:

Location: src/Form/DateInput.js
Potential components: react-datepicker, react-dates, react-day-picker

Add https://github.com/gajus/create-index and autogenerate index.js files for each component folder.

@bpierre and I were also discussing what we should do when we need to use "internal" components in more than one place. One idea would be to allow named exports (i.e. export { ... }) from a component so that internal components could access them, but then to not export them to consumers by only re-exporting the default export from each component.

An example, for better clarity:

// in component.js
const InternalComponent = {}
const Component = {} // requires InternalComponent

export { InternalComponent } // this export would be accessible to components inside the library, in case they wanted to restyle it slightly or reuse it
export default Component // this export would be the only component available to outside consumers of the library

// in index.js
export { default as Component } from "component.js"

Location: src/Text/TimeText.js

See discussion: https://github.com/aragon/aragon-ui/pull/34#issue-278579277

I recommend:

• Removing the ":" from all field labels (this colon is not really necessary - there seems to be inconsistency of where a ':' is used - for example, look at the New Vote panel)
• Moving the asterisk for required fields closer to the label (easier for readability)

Example of before & after

There seems to be a ton of flow errors right now. Not sure how difficult they are to fix (maybe just updating some typings for most of them?), but it'd be nice to investigate.

According to https://github.com/aragon/aragon-ui/blob/master/LICENSE , the license area in package.json should be MIT

Location: src/Form/CheckBox.js

• The DropDown component should move when possible to stay in the viewport.
• It should also be scrollable when there is not enough space vertically.

shared-utils and math-utils should live under a utils/ directory.

It would also be nice to move some of the related code in shared-utils to their own file, e.g. a utils/styled/breakpoints.js.

ThresholdBar:

Source: src/Donut/Donut.js
Similar examples: rebass/donut

Number:

Text:

Disabled:

Location: src/Form/Input.js

Location: src/Text/InfoBlock.js

Modify existing Field to support inlining multiple Fields together with their labels.

The default Field should also be inline-block, to allow for multiple non-inlined Fields to live beside each other.

Should show a highlighted * if the child has required.

We need to design / implement focus, disabled and pressed states for these components:

• Button (in every mode)
  • Pressed
  • Focus
  • Disabled
• ContextMenu
• DropDown
• Input
  • Focus
  • Disabled
• Field
  • Pressed
  • Focus
  • Disabled
• Link
  • Pressed
  • Focus
  • Disabled
• Radio
  • Pressed
  • Focus
  • Disabled
• Checkbox
  • Pressed
  • Focus
  • Disabled

Question: do we want hover effects?

This seems to be due to flexbox not giving flex containers the full width of their children when the viewport is small (and the content is larger than the viewport; i.e. a horizontal scrollbar is needed). I've noticed this while working on the wrapper as well.

@bpierre Do you know of a good solution? I've only been able to mitigate this by using relatively unsupported width values (fit-content and min-content).

E.g. SidePanel could pass down opened via a render prop, most HOCs should have a render prop equivalent exposed.

It should be possible to switch between multiple organizations in the Electron client, much like on Slack. The switcher should approximately look the same too, where the badge on the organization icon is the number of unread notifications in that organization.

Related to aragon/client#47.

Could probably be done by adding a new prop to DropDown and applying some more styling.

Wide:

Expanded (with search capability):

Location: src/Form/Select.js
Example: react-select

The normal and wide options may be serviceable via the DropDown component, but we'd have to figure out if it'll work with the form.

See discussion here: https://github.com/aragon/aragon-ui/pull/89/files/8024413238e18db7478e97994bc18f0df02ef2da#r163332307

It would be nice to have an autocomplete feature for e.g. address fields, displaying different entities and apps in and outside your organisation.

I imagine something like this (excuse the non-jpg):

╔══════════════════════════════════╗
║ 0xdeadbeef                       ║ <- What you type
╞══════════════════════════════════╡
│ 0xdeadbeef                       │ <- Autocomplete of what you type
├──────────────────────────────────┤
│ APPS                             │ <- Label
│ Permissions (0xddadbeef)         │ <- Apps in DAO
├──────────────────────────────────┤
│ ENTITIES                         │ <- Label
│ satoshi.aragonid.eth (0xdddbeef) │ <- Interesting entities in DAO
└──────────────────────────────────┘

Location: src/Tooltip/Tooltip.js

• AragonApp
• Button modes (primary/secondary, compact, wide)
• Card
• AppBar
• EmptyStateCard
• Field
• SidePanel
• Tables

Discussion started in this PR: aragon/client#68 (comment)

@sohkai What do you think?

Location: src/Accordion/AccordionInfo.js

Maybe allow the hiding ability via a prop, so other information panels can also reuse the same component, e.g.: