Honeycomb 5.0 migration guide

This guide lets you upgrade to Honeycomb 5.0 fairly quick and easy.

Step 1: Package upgrade

Upgrading with npm

That's a one command story in here:

npm update @flixbus/honeycomb@latest

Upgrading with a CDN

If Honeycomb is served to your application through the CDN you'll need to update the url providing the proper version part, like so:

<link rel="stylesheet" href="https://honeycomb.flixbus.com/dist/5.0.0/css/honeycomb.min.css"/>

Same applies to any partials you fetch from our CDN, e.g. if you need the icons only this would be:

<link rel="stylesheet" href="https://honeycomb.flixbus.com/dist/5.0.0/css/honeycomb-icons.min.css"/>

Step 2: Breaking changes

The only breaking change in Honeycomb 5.0 is updated typography styles that are now included out of the box with default theme. Honeycomb now comes with Roboto font as standard, to find out more on why this change is introduced click here.

To fetch the new font you'll need to require Roboto font on your page (starting from ver. 6.0 Honeycomb hosts Roboto font on its own CDN due to legal requirements):

<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/5.0.0/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/5.0.0/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin=""/>

If your custom components and styles were using theme variables from Honeycomb you should see your components updated automatically, still keep in mind that new typography is more prominent and occupies a bit more size, so some fine grain tuning might be needed in order for your components to adapt to the change.

We still have "old" theme from 4.0 included, it's called "mfb". In case you need some time to adapt your application and custom components to the new default you can force your app to use this theme by adding a flix-theme-mfb CSS class to the root HTML element of your page layout.

Checkout Themes and Layout sections of our documentation to find out more on how to use themes and build your layouts.

That's mostly it!

If you're interested in all the changes Honeycomb 5.0 brings checkout our Changelog.