0.30.0

Changes since 0.29.0:

IdentityBadge Popover (#293)

• The badge now opens a popover containing more information when clicked.
• The popover contains:
  • The full address already selected (so that it can be copied).
  • The “you” badge if the address corresponds to the connected account.
  • A link to the account on Etherscan.
  • A button to copy the address in the clipboard.
• Pressing the Escape key or focusing anything else outside of the popover will close it.
• If ToastHub is present, it will be used to display the copy confirmation.
• Also adds keyboard support for the badge itself (using ButtonBase).

Keyboard navigation

Small width (mobile)

Usage examples

<IdentityBadge
  entity="0x2c9341a52cfa3f2c2554ca1803134137b9366b3c"
/>

Indicate that it is the connected account:

<IdentityBadge
  entity="0x2c9341a52cfa3f2c2554ca1803134137b9366b3c"
  connectedAccount
/>

Disable the toast notification:

<IdentityBadge
  entity="0x2c9341a52cfa3f2c2554ca1803134137b9366b3c"
  onCopy={null}
/>

Change the network type:

<IdentityBadge
  entity="0x2c9341a52cfa3f2c2554ca1803134137b9366b3c"
  networkType="rinkeby"
/>

AddressField (#292) 🆕✨

• Displays an Ethereum identicon alongside an Ethereum address.
• Automatically selects the input content when focused.
• Provides a button to copy the address.
• Uses the Toast component, if available, to confirm that the address has been copied.

Usage examples

<AddressField address="0x09ABDb7947D780FBa0807e401da812fcE3F165a7" />

Custom onCopy handler (disables the Toast message):

<AddressField
  onCopy={() => alert('Copied')}
  address="0x09ABDb7947D780FBa0807e401da812fcE3F165a7"
/>

Popover: focus handling, centering, API changes (#290)

• Supports a “center” placement.
• Opening + closing transition (rather than opening only).
• Throws an error if the component is not wrapped in <Root.Provider>.
• The component closing behavior is now based on the focus rather than
  the click events outside, allowing to close it e.g. when a sandboxed iframe
  is clicked.

API changes:

• openerRef becomes opener (to better reflect that it’s a DOM
  element and not a React ref)
• left and right were not playing nicely with Popper.js and have been
  removed.
• A new prop, visible allows to declare the Popover element without
  condition, and to let the component handle its opening / close transitions.
• A new placement, center, has been added, and centers the Popover on
  the opener element.

ButtonBase (#284) 🆕✨

This is a basic button component that does nothing except displaying a focus ring. It is useful as a base to build other button types.

ButtonIcon (#285) 🆕✨

A simple component to be used when having an icon acting as a button. Provides an active and a focus state.

IconCopy (#288) 🆕✨

Used to represent the action of copying in the clipboard.

Other changes and fixes

• The Button now forwards refs to the HTML element. (#289)
• TextInput now has a fixed weight (40px), to align it with other components like Button and DropDown. (#287)
• Root now doesn’t render until the root element is ready (easier to manage from the consumer side). (#291)
• A selection style has been added. (#286)
• Fix a bug preventing to use Toast / ToastHub without having @babel/polyfill in the project. (#283)
• Fix a warning being displayed when a styled component was passed to TableCell’s contentContainer prop, which was also the default. (#296)

Internal changes

• Remove styled-components from the dev dependencies. styled-components is a peer dependency and shouldn’t be a dependency. Doing so can be problematic when using npm link @aragon/ui in a project, causing two versions of styled-components to be included. (#297)
• Add a custom proptype to validate components. (#296)
• Remove circular dependencies. (#298)
• Rollup: don’t analyze the bundle size in dev mode. (#299)

0.29.0

EthIdenticon (https://github.com/aragon/aragon-ui/pull/282)

• Follows and abstract the exact settings that Etherscan and Mist are using: number of pixels, color settings.
• Use a simplified scale prop to change its size, rather than a scale + size combination. The reason why the size is not expressed in pixels is because the canvas algorithm doesn’t render well in intermediate sizes. It is therefore recommended to use integers (.5 increments are working well too).
• Adapts to the screen resolution.

Usage examples

Default (24x24px):

<EthIdenticon address="0x09ABDb7947D780FBa0807e401da812fcE3F165a7" />

With a size doubled (2 = 48 x 48px) and a radius in px:

<EthIdenticon
  scale={2}
  radius={5}
  address="0x09ABDb7947D780FBa0807e401da812fcE3F165a7"
/>

Other changes

• SidePanel: the panel is now responsive (https://github.com/aragon/aragon-ui/pull/280) by @AquiGorka
• Partitionbar: the color is now passed to the caption callback as expected (https://github.com/aragon/aragon-ui/pull/278)

0.28.0

Contributors

Thank you @AquiGorka, @deamme, @drcmda, @2color, @sohkai, @macor161, @josx and @lmcorbalan, for your excellent contributions!

🙏 × ❤️ × 💯

Changes since 0.27.0

Breaking

• Migrate to styled components v4 (#208 + #250). This requires apps using Aragon UI to upgrade to styled-component v4.
• The API of RadioGroup has changed: it now accepts two props, selected and a onChange. When a Radio is nested in a RadioGroup, it gets managed by it. See details on https://github.com/aragon/aragon-ui/commit/98f083b196d2192da39eff11c71ac3871fc2e0e0 and https://github.com/aragon/aragon-ui/pull/267.

New components

• Added Popover and TransactionProgress components (#225) by @deamme
• Add ToastHub component (#249) by @drcmda
• Add FocusVisible: private component to emulate :focus-visible (#269)
• Add a Checkbox component (#257) by @macor161
• Add Timer component (#264) by @josx
• Add LineChart component (#273) by @lmcorbalan
• Add TransactionBadge component (#276) by @josx
• Add PartitionBar component (#270) by @lmc

Other changes

• Upgrade to react-spring 6 (#244)
• The dev environment app (in devbox/) now has an index with all the available demos.
• Countdown: fix flickering when counting down (#241) by @AquiGorka
• AragonApp: make publicUrl a required prop (#255) by @2color
• Fix the “Context.Consumer.Provider is not supported” warnings (#258)
• Fix linting + cosmetic changes (#248) by @sohkai
• Field: use flex to position the asterisk indicating that it’s a required field (#275) by @sohkai
• BaseStyles: it is now possible to change the font (#261)
• BaseStyles: add inertia scrolling for ios devices (#259) by @AquiGorka
• Updated Radio + RadioGroup implementation (#267)
• Move the license to Aragon Association (#268) by @sohkai

v0.17.0-alpha1

0.17.0-alpha1

0.16.0

This release introduces react-spring, which will progressively replace react-motion in Aragon UI.

The main reason is to improve the speed: react-spring is able to either animate React props (slow) or DOM styles directly (fast), while react-motion could only animate React props. Another reason for the move is that react-motion doesn’t seem much active anymore, making it uncertain that the library will follow the latest features provided by React updates.

The first component to use react-spring is SidePanel, and animating its styles directly made the sliding animation much faster. 🏎✨ ✨    ✨          ✨

Changes:

• Fix an bug breaking the Button appearance when extending its styles (#183)
• Slider: fix flickering / painting issues on Chrome (#182)
• Remove flow (replaced by prop-types) (#191)
• SidePanel: move to react-spring (#181)

0.14.0

Fix a positioning issue on the Slider component.

0.13.0

This is a small release, containing two additions:

• The copy-aragon-ui-assets command, to facilitate the installation of Aragon UI in a project. (#178)
• A devbox/ directory, which makes it easier to contribute to the project by providing a simple project to develop components in isolation. (#177)

Also, the README has been updated to reflect these changes and improve its clarity.

0.12.0

Changes since the last release:

• Remove website components. The components that were used on the websites only have been moved to a dedicated toolkit: @aragon/web. (#153)
• Update peer dependencies to react / react-dom ^16.3.2 and styled-components ^3.2.6 (remember to update your dependencies if needed!) (#157)
• New component: Slider. (#171)
• New component: AppView. This component gives you the base layout to get started with a standard Aragon apps. (#164)
• RadioButton: styling tweaks. (#175)
• Text / font(): do not set defaults if size, weight or color are not set (allows style inheritance). (#152)
• Add TextInput.Multiline (textarea element). (#168)
• Move the “providers” components to src/providers, and use the new Context API with render props. High order components are still available as they are needed in some contexts (e.g. to wrap a styled component). (#158)
• Add a .prettierrc file. (#161)
• Various other improvements, full list: https://github.com/aragon/aragon-ui/compare/v0.11.0...v0.12.0

v0.4.0

Our previous release was made in November, right after the move from Vue.js to React, which is an eternity in Aragon time!

Special thanks to 👍 the 🎉 awesome 💖 people 🥇 that 🦅 contributed 💯 to ✨ this 🙌 version:

• Juwan Wheatley (@fiber-god), for documenting everything! 📚🤓
• @monokh, for refactoring the Aragon UI internal utilities ⚙️
• Konstantin Dichev (@kdichev), for having implemented a way to resize the demos in the gallery, which make it possible to test how they behave when the screen size changes. Konstantin also contributed to the Field component. 💯/💯

It is also the first release since Brett (@sohkai) joined Aragon as an EVM Engineer. His involvement these last months has massively improved the quality and pace of development of Aragon UI. Thank you Brett 👌 💕 🎊

New components:

• AragonApp
• Card
• DropDown
• AppBar (#21)
• Field (#23)
• Table, TableCell, TableHeader, and TableRow (#25)
• EmptyStateCard (#22)
• SidePanel (#24)
• SidePanelSeparator and SidePanelSplit (#93)
• TextInput (and TextInput.Number) (#67)
• CircleGraph (#73)
• ContextMenu (#99)
• Countdown (#90)
• Info (#97)
• Icon* components (#30)

Changes:

• Button:
  • Hover / active / focused states
  • wide prop
  • Variants: compact / positive / negative
  • Button.Anchor (#65)
  • Add secondary mode (#78)
  • Support for emphasis + strong mode (#91)
• Text: refactor to always render as (#16)
• Refactor utils structure (#82)

Other notable changes:

• Gallery: resizable demos (#95)
• Gallery Navigation Groups + Homepage illustration (#109)
• Moved from webpack to rollup

v0.3.0

With this release, we are moving from Vue.js to React.

Other changes:

• A color system has been added. Even if we mostly have a light theme for now (theme), some components (footer, pre-footer) are locally using a dark theme (themeDark), that’s why it has been included.
• A documentation page for every component.
• A refreshed gallery, with a better handling of pages loading.