Honeycomb 15.0 migration guide

• Package upgrade
  • Upgrading with npm
  • Upgrading from CDN
• Breaking changes
  • Progress tracker current steps should have aria-current="step" on the link instead of the list item
  • tooltip.js plugin now only supports Honeycomb tooltips
• Breaking changes for contributors
  • Node.js version required upgraded from 18 to 22

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.2.1/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.2.1/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.