Skip to content

v2.0.0
Compare
Choose a tag to compare
@github-actions github-actions released this 30 Jul 16:29
· 2064 commits to canary since this release
v2.0.0
80e94a0

2.0.0 (2020-07-30)

After months of work, we're excited to release Circuit UI v2. Thank you to @robinmetral, @lucent1090, @marielakas, @dmitri-suvorov-sumup, @larimaza, @voronianski, @robbdimitrov, @fernandofleury, @nicosommi, @hleote, @justman00, @hris27, @amelako, @jmaslate, @AlineLee, @connor-baer and everyone else who has contributed to Circuit UI in the past months. This release wouldn't be possible without you.

👉 Upgrading from v1? Read the migration guide.

Consistent component APIs

A big theme of this release is consistency. We've renamed some props to make them more predictable and intuitive to use.

Any additional props that are passed to a component are now spread on their outermost child element (#553). This is useful for test ids, data attributes, and custom styles using Emotion's styled function or css prop.

React refs allow you to access the underlying DOM node of a component. All Circuit UI components now forward refs to the underlying DOM node (for single node components such as a Button) or to the main interactive DOM node (for composite components such as an Input) (#592). (Contributed by @nicosommi)

⚠️ The ability to pass custom styles and refs is meant as an escape hatch. We strongly recommend avoiding using them as we cannot guarantee that they will be compatible with future changes. Please consider opening an issue or PR to suggest the improvement in Circuit UI instead.

Renamed & removed components

The credit card related components have been replaced by SumUp's card widget, so we've removed those from Circuit UI. We found a number of components that were rarely used and could be easily replaced, so we've removed those as well. And continuing the theme of consistency, we've renamed some components.

Modular packages

Some of the functionality of Circuit UI has been extracted into new packages so they can be maintained separately and shared across platforms.

@sumup/icons

We finally have an icon library! All SVG icons from Circuit UI have been moved to @sumup/icons and a lot of new ones have been added. You can use them in your application independently of Circuit UI. Have a look at the full, searchable list.

@sumup/design-tokens

Design tokens are visual primitives such as typography, color, and spacing that are shared across platforms. In other words, they are the Circuit UI theme. Eventually, the tokens will be used by other platforms as well (such as the mobile apps) and there are rumors of a dark theme...

@sumup/intl

Circuit UI is a library of UI components — logic should be kept to a minimum. That's why the functions to format numbers and currency values have moved to a new package. They've been rewritten in TypeScript and make use of the ECMAScript Internationalization API.

Improved accessibility

Colors have higher contrast ratios. Interactive components now have consistent visual hover, focus, and active states. More components support keyboard navigation. It's a start, but there's still a lot of room for improvement. Contributions welcome!

Event tracking

Collector, SumUp's library for contextual user-interaction tracking, is now integrated into Circuit UI. Pass the tracking prop to any actionable component to dispatch an event when a user interacts with it. Refer to the Collector docs for the full setup guide. (Contributed by @lucent1090)

Design changes

The SumUp Design System is evolving and we've begun to tweak some components to have a flatter, crisp, more rounded look. The most notable changes are in the Button, Badge, Input, and ProgressBar components.

TypeScript

Most components and utilities have been migrated to TypeScript. In addition to type safety, this enables autocomplete and in-editor documentation in VS Code.

New components & utils

Anchor

The Anchor component replaces the flat Button variant. It looks like a traditional hyperlink and should be used when you want to render a link or button inline in some text.

Carousel + Step

The Carousel component is a slideshow for cycling through a series of content. The prebuild variant renders the slides and controls. Alternatively, you can use the state-only Step component to build highly custom carousels. (contributed by @voronianski)

Style helpers

In addition to the existing clearfix and disableVisually style helpers, the following new ones have been added:

  • hideVisually: Visually hides an element while keeping it accessible to users who rely on a screen reader.
  • hideScrollbar: Hide the browser scrollbar on a scrollable element, e.g. one with overflow.
  • focusOutline: Visually communicates to the user that an element is focused.
  • inputOutline: Visually communicates to the user that an input is hovered, focused, or active.

Raw changelog

Bug Fixes

  • cli: log error when enum prop is dynamic (80e94a0)
  • cli: rename formatAmountToLocale to format for currency-utils codemod (#644) (7bc5ad4)
  • cli: rename intl-js import to intl for currency-utils codemod (#643) (271f1d9)
  • components: align close button in CardHeader (025f12f)
  • components: align validation icon for Inputs (33696bd)
  • components: apply custom Tag styles to wrapper (c04db1b)
  • components: display Notification content full-width (cf9b379)
  • components: enable css prop on TableRow (947cc44)
  • components: fix cross browser inconsistencies (#639) (d982098)
  • components: fix type error in story (c32026a)
  • components: fix visual regressions (#650) (a83f6d3)
  • components: improve compatibility with IE11 (#648) (31cea3f)
  • components: pass styles to Selector and RadioButton label (#652) (a3f807e)
  • components: refine ModalFooter styles on mobile (a9cb1c6)
  • components: remove default margin on Buttons (b48f3ec)
  • components: remove Input focus outline (#634) (53099d8)
  • components: render clickable Tag as button (ca85f4d)
  • components: replace Tab component selector (#616) (045b297), closes #613
  • components: show focus outline around TableRow (#649) (4f22e1a)
  • components: span Tabs to full width (59085bc)
  • components: use custom JSX pragma from Emotion (#647) (ba6aeb5)
  • configs: exclude scripts from TS output (5a3302f)
  • configs: restore IE11 compatibility (#640) (183b33a)
  • configs: run release on all branches (e4abe37)

Features

  • migrate Heading to TypeScript (#594) (4675ef1)
  • remove deprecated code (#529) (e75dc44)
  • update dependencies (#538) (f763106)
  • cli: add prop codemods (#600) (f9cbb24)
  • Update, cleanup and move necessary dependencies to peerDependencies (#485) (6d77b04)
  • cli: add Button codemods (#596) (0a6454f)
  • cli: add button-size-tera codemod (74eb48e)
  • cli: add codemod for styles prop (ca3a948)
  • cli: add codemods for theme changes (#641) (977846b)
  • cli: add component codemods (#608) (d3d77f8)
  • cli: write codemod for currency utils (#642) (f80b3c0)
  • components: add Anchor component (#583) (eeec0de)
  • components: add focus styles to all relevant components (#586) (ad371b1)
  • components: add subtle animations (#623) (d5d63ba)
  • components: add tracking to Carousel component (#638) (46e8215)
  • components: Carousel and Step components (#482) (979a36f)
  • components: Combine label with form input components (#587) (57893ff)
  • components: enhance Modal and migrate to TypeScript (#610) (1668614)
  • components: extract icons to separate package (#571) (3344f46)
  • components: forward custom props on all components (#553) (c21311e)
  • components: Migrate Badge component to typescript (#624) (f90c47d)
  • components: migrate Blockquote to TypeScript (#617) (5e5d93d)
  • components: migrate Button to TypeScript (#582) (306e4d0)
  • components: migrate Hamburger to TypeScript (#588) (85fc81d)
  • components: migrate Hr to TypeScript (#620) (d74e55a)
  • components: migrate IconButton to TypeScript (#585) (ea40688)
  • components: migrate image component to typescript (#619) (3e9f57e)
  • components: migrate Input components to TypeScript (#615) (2effeea)
  • components: migrate List to TypeScript (#593) (9444fb0)
  • components: migrate LoadingButton to TypeScript (#584) (c96c851)
  • components: migrate Notification components to TypeScript (#637) (b5fc361)
  • components: migrate RadioButton to TypeScript (#636) (d64fd6e)
  • components: migrate Select to TypeScript (#611) (389ea7d)
  • components: migrate Selector to TypeScript (#622) (04774eb)
  • components: migrate SubHeading to TypeScript (#612) (36a4bb5)
  • components: migrate Tag to TypeScript (#654) (3fed6ef)
  • components: migrate Text to TypeScript (#581) (86f73dd)
  • components: migrate Toggle to TypeScript (#628) (2fb627c)
  • components: polish Button components (#605) (7769285)
  • components: remove AutoCompleteInput and AutoCompleteTags components (#591) (06e3ee9), closes #589 #568
  • components: remove deprecated props (1f2badb)
  • components: remove ref types for SSR compatibility (08e604e)
  • components: remove static properties from components (#607) (23eb9e8)
  • components: rename notification components (#541) (6b39169)
  • components: rewrite Pagination from scratch (#618) (82daf30)
  • components: rewrite Selector components (#560) (aa13889), closes #544 #544
  • components: standardize ref API (#592) (20e61fc)
  • components: tweak components (#606) (f14269d)
  • components: update Badge design (#633) (105fe1b)
  • components: update design of ProgressBar (#602) (6625699)
  • components: use smaller icons (#604) (67fc95c)
  • configs: configure TypeScript build system (#563) (db9d865)
  • configs: improve Jest config for TypeScript (#580) (301414d)
  • configs: move @sumup/collector to peer dependencies (#651) (d0052e1)
  • deps: upgrade all dependencies (#635) (2ca1f1c)
  • styles: load custom fonts (#603) (ee8c402)
  • theme: extract design tokens to separate package (#572) (984fbb4), closes #511
  • utils: extract number utils to a separate package (#590) (58d3674)
  • utils: migrate style helpers to TypeScript (#576) (477568d)

Performance Improvements

BREAKING CHANGES

  • components: The NotificationIcon and NotificationButton components have been removed. Use the Notification component's icon and children props instead.
  • Upgraded minimum React version to v16.8.6
  • components: The Badge component's color prop has been renamed to variant (🤖 badge-variant-enum)
  • components: The Toggle component's on, labelOn, and labelOff props have been renamed to checked,
    labelChecked, and labelUnchecked (🤖 toggle-checked-prop).
  • components: The Pagination component's props have radically changed. Please refer to the component documentation.
  • components: The Input component's wrapperStyles prop has been renamed to labelStyles.
  • components: The optional Input state has been removed. Add "(optional)" to the label instead.
  • components: The default size for Blockquote changed from kilo to mega.
  • components: The SubHeading component doesn't export sizes anymore. Instead of writing size={SubHeading.KILO}, write size="kilo".
  • components: All static properties on components have been removed. Use plain, lowercase strings instead.
  • components: The styleConstants export has been removed. Use plain, lowercase strings instead.
  • components: The Button's giga size has been removed. Use the mega size (default) instead.
  • The Heading component doesn't export sizes anymore. Instead of writing size={Heading.GIGA}, write size="giga".
  • components: The ordered prop of the List component has been replaced by the variant enum prop. The default
    size of the List component is now mega to match the Text component.
  • utils: The currencyUtils and currencyAmountUtils have been removed. Use
    @sumup/intl instead.
  • components: The AutoCompleteInput and AutoCompleteTags components have been removed. You can build them yourself using the SearchInput, Card, Tag, and Downshift components.
  • components: The shadowBorder style helper has been removed. Use the box-shadow CSS property instead.
  • components: The Hamburger's light prop has been removed. Set the color through CSS instead.
  • components: The LoadingButton's exit animations have been removed. An action's success or error result should be communicated outside the button.
  • components: The flat Button variant has been removed.
  • components: The plain Button prop has been removed. Use the new Anchor component or the tertiary Button variant instead.
  • components: The primary and secondary Button props have been removed. Use the variant prop instead.
  • utils: The shadowGround and textTera style helpers have been removed.
  • utils: The unit style helpers have been removed. Use the CSS calc function instead.
  • theme: The theme has been moved to @sumup/design-tokens which has been added as a peer-dependency.
  • components: The InlineMessage component's type prop has been renamed to variant (🤖 inline-message-variant-enum)
  • theme: The grid.afterTera theme value has been renamed to theme.tera.
  • components: The AutoCompleteInput's defaultSelectedItem prop has been renamed to initialSelectedItem to match Downshift's API.
  • components: The CardSchemes and PaymentMethodIcon components have been removed. Use
    @sumup/icons instead.
  • components: The @sumup/icons package was added as a required peer dependency.
  • components: The AutoCompleteInput's defaultSelectedItem prop has been renamed to initialSelectedItem to
    match Downshift's API.
  • configs: Compile code with TypeScript. The compiler targets ES2020 syntax, so users need to transpile the Circuit UI code themselves.
  • components: The Selector component now accepts the onChange, value, name, and checked props. The onClick and
    selected props have been removed.
  • components: The label property of the options prop of the RadioButtonGroup component has been renamed to
    children.
  • components: The Message component has been renamed to Notification.
  • components: The InlineNotification component has been renamed to InlineMessage.
  • The RestrictedInput has been removed.
  • The State component has been removed. Use React's useState hook instead.
  • The RadioButton and Switch components no longer accept the onToggle prop. Use the onChange prop instead.
  • The Input and Textarea components no longer accept *ClassName props. Emotion 10 uses style objects instead of class names. Use the *Styles props instead.
  • The Heading, SubHeading, Text, and Input components no longer accept the element prop. Emotion 10 introduced the ability to change the HTML element. Use the as prop instead.
  • The SvgButton component has been renamed to IconButton.
  • The SideNav component has been removed. Use the Sidebar component instead.
  • The Picture component has been removed.
  • The MaskedInput component has been removed. Use react-text-mask directly instead.
  • The Markdown component has been removed. Use markdown-to-jsx directly instead.
  • The CreditCardDetails, CardNumberInput, NameOnCardInput, SecurityCodeInput, ExpiryDateInput, and the credit card utils have been removed. Use SumUp's card widget instead.
  • The ListView component has been renamed to CardList.
  • The GlobalStyles component has been renamed to BaseStyles. It no longer accepts a custom prop. Use Emotion's Global component instead.
  • theme: The iconSizes.byte theme value has been removed.
Assets 2
Loading