All posts
Daniel stocks
Daniel stocks

Staff Software UI Engineer

VCC UI 2.0 has landed

Published

We're happy to announce that a new major version has just been published. The focus for 2.x has been to clean up a lot of the old deprecated APIs as well as introducing new design for some components.

Thanks to the cleanup efforts being made possible by moving to a new major release we've managed to make to overall bundle size of VCC UI a lot smaller.

Notable changes

  • Redesign: Link Component #387
  • Redesign: Buttons #383
  • Bug Fix: Click touch action #389
  • Deprecation: unlabelled inputs #380
  • Remove deprecations #374

New Button Design

API breaking changes

Even though this is a new major release we've tried to break as little as possible this time, and if you've followed along with the deprecation warnings in 1.x you should be fine to upgrade without making any further code changes.

To help you upgrade, here's a list of the APIs that were deprecated in 1.x and have now been removed as part of the 2.x release:

Removed deprecated text styles

The jemison, ride, armstrong text styles have been removed as they are no longer in the design system. Note: The Volvo Serif Pro font is still accessible through the theme and shipped with VCC UI, should you need it to create your own style.

Removed Polestar theme

The Polestar theme has been discontinued as we had neither the resource, knowledge or support to keep it maintained. The themeability of VCC UI still remains intact and it would be technically possible to keep using the polestar theme, but you'll have to copy it from 1.x and maintain it locally in your project.

Removed innerRef prop on core components

The innerRef prop is now simply ref in Flex, Inline, Block, Click components.

Removed arrow, primary-light, iconAfter, iconBefore on Button

The <Button> component no longer has any animate arrows inside of it. The intent="primary-light" was also removed in favour of intent="primary" rendered with the dark theme.

Removed wordmark, wordmark-black logo types

The "wordmark" and "wordmark-black" logo types have been removed in favor of "spreadmark". Use the dark theme if you need the white logo on the black background

Removed altText from Logo component

Use alt="" instead of altText=""

Remove intent="primary-light" in favour of rendering <Link> using dark theme.

Removed options prop from SelectInput component.

You can now pass options to SelectInput by passing multiple <option> as children as you would do in HTML.

Removed variant prop for TabNav component

Remove variant="dark" in favour of rendering TabNav using the dark theme.

Removed TEXT_INPUT_TYPES for TextInput component.

Just pass a type as string eg: <input type="text"> as you would do in HTML

Removed isRtl option from styleRenderer function.

You can now set the "theme.direction" property before passing a theme to <ThemeProvider>.

Removed Box component

The <Box> component was removed in favour of <Flex>

Trouble upgrading?

As always: If you have trouble upgrading don't hesitate to reach out to us on Slack (#vcc-ui) or create an issue on our GitHub repository.