VCC UI is deprecated and has been replaced by Design System

Find out more
Volvo
DocsStorybookPlayroom
All posts
Jacob Rask
Jacob Rask

Volvo Cars Online Engineering

Ali Zeaiter
Ali Zeaiter

Volvo Cars Online Engineering

Introducing VCC UI 3.0 and Volvo Cars Web UI

Published

During the last year, the team behind Web UI has created a number of components released separately from the main vcc-ui package. These packages, together with vcc-ui, are what makes up the Volvo Cars Web UI.

We created these components outside of the vcc-ui npm package to avoid increasing the API surface area of vcc-ui, which is also used to distribute the themes of the Volvo Cars Design System. The aim is to keep the effort required to stay up to date with the Design System to a minimum – allowing you to update other components gradually instead of all at once.

A couple of core components have recently been added or significantly updated in vcc-ui itself, however:

Thanks to a renewed focus on the project and streamlining of our release process, we have been able to publish updates to Web UI packages almost every week during the last year. To release this frequently without disrupting the product teams requires an emphasis on backwards compatibility and a robust versioning strategy.

The details of our versioning strategy is described in Releases and versioning, but the gist is that major versions of vcc-ui mostly contain removals of deprecated features, while minor releases include new features. This means that updating to 3.0.0 should be uneventful for most teams.

How do I update?

  • Install the latest 2.x version of vcc-ui
  • Make sure that there are no deprecation warnings or prop-type warnings from vcc-ui

If all is good, updating to 3.0 should require no further changes. There are some caveats if you are using undocumented behaviour or vcc-ui internals.

What has been changed?

  • Browser support has been updated to use the @volvo-cars/browserslist-config configuration. This means dropping support for IE11 and Safari 12.
  • At least Node 14.15 is now required when doing server side rendering.
  • The files inside the package were moved, there are no lib/ or es/ folders. In an upcoming version you will not be able to import individual files from within vcc-ui at all - update your imports to import { ... } from 'vcc-ui' instead of from 'vcc-ui/lib/...'
  • Themes are no longer exposed as separate files. For most use cases, you should prefer ThemePicker over ThemeProvider, meaning you don't need to import the theme directly. If needed, you can still access a theme with getTheme (import { getTheme } from 'vcc-ui').
  • The action color in dark mode has been changed to #1F78D1.
  • Longhand CSS properties will get higher CSS specificity than shorthand properties

Icon changes

  • The media- icons have been renamed mediacircled-, in preparation for deprecating them in favor of IconButton. media-play and media-pause now do not have an outline.
  • All icons of size 96 have been removed.
  • navigation-search was removed in favor of search.
  • A few duplicate office- icons were cleaned up.
  • IconButton variant=filled has been replaced with IconButton variant=media and intent=secondary has been removed.
  • A positive icon color was added.
  • Added the bleed property to IconButton to allow the icon visually with other elements.

Minor changes

The following changes produce deprecation or prop-type warnings in the latest 2.x version. If you have no console warnings, you are not affected by these changes.

  • The Arrow component has been removed. Any usage should be replaced with the Icon component.
  • Deprecated Icon types and sizes have been removed from TypeScript types and prop-types.
  • The unused Toggle isValid property was removed from TypeScript types.
  • Spinner width property was removed from TypeScript types.
  • The label property has been made required in Checkbox, Radio, SelectInput, TextInput and TextArea. Checkbox and Radio labels accept React nodes.
  • The square type of Logo is no longer available and should be replaced with spreadmark.
  • Custom component styles through theme.styles.componentName are no longer applied. Only default styles should be used.
  • Colors in theme.colors were removed after having been deprecated for a long time. Use the colors from theme.color instead.

See the full changelog on GitHub.

If you're running into any issues or have feedback

We are available in GitHub Discussions or in #vcc-ui on Slack - feedback is always welcome!