Honeycomb 15.0 migration guide
Package upgrade
Upgrading with npm
Run the following script to install the latest honeycomb version:
npm update @flixbus/honeycomb@latest --save
While this is not a requirement, we recommend you to install the latest icons and illustrations packages as well, if you use them.
Upgrading from CDN
If Honeycomb is served to your application via our CDN, you'll need to update the url providing the proper version part, like so:
<link rel="stylesheet" href="https://honeycomb.flixbus.com/dist/15.0.0/css/honeycomb.min.css"/>
Same applies to any partials you fetch from our CDN, e.g. if you need the honeycomb fonts this will be:
<link rel="stylesheet" href="https://honeycomb.flixbus.com/dist/15.0.0/css/honeycomb-fonts.min.css"/>
Breaking changes
Progress tracker current steps should have aria-current="step"
on the link instead of the list item
The aria-current="step"
attribute should be added to the link element instead of the item list element.
This change was made in order to follow best practice suggestions (aria-current attribute on MDN) and also to allow us to use the progress tracker component with the tabs plugin, aligning it with the plugin's requirement of adding the aria-selected on the link, not the list item.
Before:
<ol class="flix-progress-tracker">
<li class="flix-progress-tracker__item" aria-current="step">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Get Honeycomb</span>
</span>
</li>
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Use it</span>
</span>
</li>
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Enjoy</span>
</span>
</li>
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Spread the word</span>
</span>
</li>
</ol>
Now:
Simply move the aria-current="step"
attribute from the list item to the __link
element and the
component styles will work as .
<ol class="flix-progress-tracker">
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link" aria-current="step">
<span class="flix-progress-tracker__text">Get Honeycomb</span>
</span>
</li>
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Use it</span>
</span>
</li>
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Enjoy</span>
</span>
</li>
<li class="flix-progress-tracker__item">
<span class="flix-progress-tracker__link">
<span class="flix-progress-tracker__text">Spread the word</span>
</span>
</li>
</ol>
tooltip.js
plugin now only supports Honeycomb tooltips
If you don't create custom tooltips and use Honeycomb's tooltip.js
plugin to manage such custom tooltips, this does not apply to your use-case.
Prior to this major version, the Tooltip plugin had minimal interaction with the component's class names, but now, in order to support recent addition to Tooltips (fixed positioning), this is no longer the case, and the Tooltip plugin now also has the responsibility of managing flix-tooltip
related class names, making the plugin not suitable for being used custom tooltips other than the ones provided by Honeycomb.
Breaking changes for contributors
Node.js version required upgraded from 18 to 22
If you use nvm
, when you clone the project make sure to run the following command before installing dependencies:
nvm use
If you already had the project configured, we recommend you uninstall the dependencies, upgrade Node version and then install dependencies again, to avoid any weird conflicts.