1.0.0

Announcement post: https://blog.aragon.org/announcing-aragon-ui-1-0/

0.40.0

For this release, three new components have been added.

LoadingRing (#379)

The loading ring is an animated ring that can be used when the progress of a loading state is unknown.

FloatIndicator (#380)

The FloatIndicator component can be used to express that something is busy.

SyncIndicator (#381)

SyncIndicator is a specialized FloatIndicator that can be used when Aragon apps are syncing their state with the chain.

Internal changes

• Move from date-fns to Day.js. (#383)

0.39.0

Changes

• IdentityBadge: fix the props warning message. (#373)
• useImageExists(): optimize initial state to save an extra rendering. (#375)
• Timer: add the maxUnits prop, which allows to set the maximum of units to be displayed. (#377)

Internal changes

• Update babel-plugin-styled-components. (#376)
• Add Jest (and a first set of tests for the difference() utility). (#377)
• Remove the inline-json-import dependency to make npm test work with Travis. (#378)

0.38.1

Fix a spacing issue with IdentityBadge introduced in 0.38.0.

0.38.0

Special thanks

• 💕 @rperez89 for the new TokenBadge and adding new formats to the Timer component.
• 💝 @delfipolito and @dizzypaty for the compact mode of IdentityBadge.
• 💗 @sohkai for his thorough code reviews and for making IdentityBadge work with any network.

IdentityBadge compact mode (https://github.com/aragon/aragon-ui/pull/366)

The IdentityBadge now features a gorgeous compact mode that can be used when the badge need to be displayed as textual content.

Usage

To enable the compact mode, set the compact prop to true.

<IdentityBadge address="0xbeef…" compact />

TokenBadge (https://github.com/aragon/aragon-ui/pull/334)

There is now a TokenBadge component. It can be used to provide information related to a token, such as its name, symbol, icon and Etherscan link.

Usage

import { Main, TokenBadge } from '@aragon/ui'

const App = () => (
  <Main>
    <TokenBadge address="0xcafe…" name="Cafe Token" symbol="CAFE" />
  </Main>
)

The icons are fetched automatically using the Trust Wallet tokens list. It will soon be possible to override this behavior by a custom one (see https://github.com/aragon/aragon-ui/issues/364).

Timer formats (https://github.com/aragon/aragon-ui/pull/345)

The Timer component now supports the following formats: yMdhms, yMdhm, yMdh, yMd, yM, Mdhms, Mdhm, Mdh, Md, dhms, dhm, hms, hm, ms, m, s.

useImageExists() (https://github.com/aragon/aragon-ui/pull/334)

The useImageExists() hook (and its corresponding render prop component, ), can be used to know if an image exist before displaying it.

Usage

Hook:

function App() {
  const { exists, loading, src } = useImageExists("http://example.com/image.png")

  if (!exists) return "No image."
  if (loading) return "Loading…"

  return <img src={src} alt="" />
}

Render prop:

const App = () => (
  <ImageExists src="http://example.com/image.png">
    {({ exists, loading, src }) => {
      if (!exists) return "No image."
      if (loading) return "Loading…"
      return <img src={src} alt="" />
    })
  </ImageExists>
)

Other changes:

• Redraw is now synced on the specified interval. For example, if the interval is set to 1000, it will be synced as close as possible to the tick of each second. (https://github.com/aragon/aragon-ui/pull/345)
• AddressField: allow the icon to be replaced. (https://github.com/aragon/aragon-ui/pull/345)
• Add a tokenIconUrl() utility. (https://github.com/aragon/aragon-ui/pull/345)
• IdentityBadge: add a badgeOnly prop to make the badge non interactive. (https://github.com/aragon/aragon-ui/pull/366)
• IdentityBadge: avoid displaying etherscan link if none could be made. (https://github.com/aragon/aragon-ui/pull/368)
• blockExplorerUrl(): support goerli testnet and avoid throwing errors on private networks. (https://github.com/aragon/aragon-ui/pull/368)

Internal changes:

• Add a cachedMap() utility (internal). (https://github.com/aragon/aragon-ui/pull/334)
• devbox: auto generate the apps index. (#362)
• Fix the Modal route in the gallery. (https://github.com/aragon/aragon-ui/pull/363)

0.37.0

• Move to [email protected].
• Main performances: skip unnecessary renderings of ToastHub. (https://github.com/aragon/aragon-ui/pull/359)
• ProgressBar (https://github.com/aragon/aragon-ui/pull/358)
  • The progress prop has been renamed value. progress is still supported but will emit a warning. It will be removed in a future release.
  • Add a new indeterminate state (omit value or set it to -1 to enable it).
  • Other improvements and optimizations.

0.36.0

• Add useViewport() hook. (https://github.com/aragon/aragon-ui/pull/341)
• Fix Popover positioning. (https://github.com/aragon/aragon-ui/pull/354).
• Fix “document is undefined” being displayed in lieu of normal errors. (https://github.com/aragon/aragon-ui/pull/353)

0.32.0

Here is the list of changes since 0.31.0.

Special thanks 💗

Thanks to @AquiGorka 🤙🤙🤙 for his excellent contributions to AppBar, NavigationBar and others.

Thanks to @owisixseven, who is behind the super smooth new identity. ✨

And thanks to @sohkai, for his numerous and super high quality code reviews 💯.

Hello aragonUI!

Aragon UI won’t be used anymore: aragonUI is the new name of the library, and it comes with a new branding (by @owisixseven 💕) that is aligned with the other Aragon products. See #330.

AppBar tabs

Some changes to AppBar have been added in this release, and the most obvious one is the possibility to use tabs! The new tabs prop, which also exists on AppView, allows to pass a TabBar, which will then be nicely integrated into it. The transition is triggered automatically by setting the prop, making it easy to alternate between different states. See #323.

Usage example

import { useState } from 'react'
import { AppView } from '@aragon/ui'

const tabs = ['Tab 1', 'Tab 2']

const App = () => {
  const [tabIndex, setTabIndex] = useState(0)
  return (
    <AppView
      title="My App"
      tabs={
        <TabBar
          items={tabs}
          selected={tabIndex}
          onChange={setTabIndex}
        />
      }
    />
  )
}

Related changes

A padding prop has been added to AppBar, to let users change its internal spacing. This is useful to implement specific layouts, like a more compact version for small screens. See #321.

Another change happened in NavigationBar, whose transition between navigation items has been refined. The initial transition after mounting the component has been removed, and the animation between items should be smoother. See #325.

Lastly, NavigationBar now also support a compact mode. This will make the spacing around the arrow more compact, which is useful on smaller screens. See #322.

IconPlus, IconArrowRight, IconMenu

Fresh new icons! See #318 and #319.

TabBar: onSelect() is now onChange()

In an effort to name our props in a way that is as little surprising as possible, we renamed the onSelect prop of TabBar to onChange. onSelect is still supported but emits a warning and will be removed in a future release. See #317.

Table: better full screen support

It is now possible to remove the side borders on the table, which is useful to make it full screen (e.g. on a layout for small screens). See #320 and #324.

Assets path

The default assets URL set by Main is now relative, and the same directory name is now used by default when using copy-aragon-ui-assets. See copy-aragon-ui-assets -n aragon-ui-assets if you want to keep using the previous name. See #329.

Other changes and fixes

• The IdentityBadge component was misaligned under certain conditions: this should now be fixed. See #326.
• ButtonIcon now requires a label prop to be set, to enforce its accessibility. See #312 and #328.
• Slider was emitting a warning in the console, this has been fixed. See #316.

Internal changes

• Various tweaks on the gallery. See #315.
• Various README and documentation improvements. See #329, #330 and #331.

0.31.0

Changes since 0.30.1:

Viewport (#303)

<Viewport /> is a component that helps build responsive app layouts based on the viewport dimensions. It provides a set of tools and values that lets authors adapt their layouts to the space available, allowing any level of flexibility. It provides a render prop that provides a set of values and utilities.

Usage

// The window width and height can be used directly if needed.

<Viewport>
  {({ width, height }) => (
    <div>Dimensions: {width}x{height}</div>
  )}
</Viewport>

// A set of utilities (`above()`, `below()`, `within()`) allow to handle the most
// common use cases in a concise manner. They are also taking care of excluding
// the ending value of a range, ensuring that two breakpoints ranges don’t overlap
// on their starting / ending values.

<Viewport>
  {({ above }) => (
    <App largeMode={above('medium')} />
  )}
</Viewport>


<Viewport>
  {({ below }) => (
    <TextInput wide={below('small')} />
  )}
</Viewport>

<Viewport>
  {({ above }) => (
    <TextInput wide={!above('small')} />
  )}
</Viewport>

// Custom numbers are supported too:
<Viewport>
  {({ above }) => (
    <TextInput wide={below(500)} />
  )}
</Viewport>

// It still allows for conditional rendering of components.

<Viewport>
  {({ within }) => (
    <div>
      {below('medium') && <SmallVariant />}
      {within('medium', 'large') && <MediumVariant />}
      {above('large') && <LargeVariant />}
    </div>
  )}
</Viewport>

// Breakpoint values can be used directly too.

<Viewport>
  {({ width, breakpoints }) => (
    <div css={`min-width: ${breakpoints.min}`}>
      <App largeMode={width >= breakpoints.medium} />
    </div>
  )}
</Viewport>

Remarks

Width-first API

As with <BreakPoint /> and breakpoint(), its API is focused on the width rather than the height, as it is the main axis used to adapt layouts. height is available if needed, but everything else (breakpoints and utilities) is related to the viewport width.

Rendering frequency

Getting live updates (rather than matchMedia) is powerful, but costly: the render function gets called every time the viewport dimensions are updated. It is not a huge performance issue as animations are unlikely to happen during a resize and they don’t happen often, but two solutions can mitigate it.

The first one is to throttle the updates, which Viewport does internally: updates only happen every 100ms (by default, can be changed using throttleWait).

The second one is that when using Viewport, authors should be particularly careful of skipping renders when applicable (using the usual shouldComponentUpdate() / React.PureComponent / memo()) on the immediate children of <Viewport>.

Main

<Main /> is a new component that replaces <AragonApp />. It contains all the providers required by other components, and its API is designed to not require any props in most of the cases. Unlike <AragonApp />, it doesn’t have any styles itself.

<AragonApp /> is now deprecated and will be removed in a future release.

At the time of release, the following components are set by Main:

• <Root.Provider />
• <Viewport.Provider />
• <PublicUrl.Provider />
• <BaseStyles />
• <ToastHub />

Usage

import { Main } from '@aragon/ui'

const App = () => (
  <Main>
    {/* aragonUI components can be used now */}
  </Main>
)

Other changes and fixes

• Fix the layout of EthIdenticon that was breaking under certain conditions. (#307)

Internal changes

• devbox: add an empty app for temporary things. (#313)
• scripts: replace release:minor with prepublishOnly. (#314)
• Various gallery tweaks. (#309)
• devbox: fix the RadioList demo. (#308)

0.30.1

This version contains two fixes:

• SidePanel: add horizontal padding constant by @sohkai (#301)
• ESLint fixes (#302)