Skip to main contentSkip to site search
Honeycomb

Honeycomb 8.0 migration guide

Package upgrade

Upgrading with npm

That's a one command story in here:

npm update @flixbus/honeycomb@latest --save

Upgrading from 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/8.4.0/css/honeycomb.min.css"/>

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

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

Breaking changes

Connection

The old markup of connection that used table captions for the headings is no longer supported.

Before:

<table class="flix-connection"><caption class="flix-connection__title">
    Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
  </caption><tbody><tr><td>
        <div class="flix-connection__station">
          Berlin Alexanderplatz
        </div>
      </td></tr><tr><td>
        <div class="flix-connection__station">
          München Fröttmanning
        </div>
      </td></tr></tbody></table>

Now:

  • If you were using the deprecated markup, wrap the connection table with a div and move the connection class name to that div;
  • Change the connection title to be a heading element (h1, h2, h3 or h4) (you are not allowed to use captions for tables with role="presentation");
  • Add role="presentation" to the table element so screen readers interpret it as plain text;

Fri 17 Oct 2016, 23:00 - 09:30+1

Berlin Alexanderplatz
München Fröttmanning 
<div class="flix-connection">
  <h3 class="flix-connection__title">
    Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
  </h3>
  <table role="presentation"><tbody><tr><td>
        <div class="flix-connection__station">
          Berlin Alexanderplatz
        </div>
      </td></tr><tr><td>
        <div class="flix-connection__station">
          München Fröttmanning
        </div>
      </td></tr></tbody></table>
</div>

Connection

The old markup of connection that used table captions for the headings is no longer supported.

Before:

<table class="flix-connection"><caption class="flix-connection__title">
    Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
  </caption><tbody><tr><td>
        <div class="flix-connection__station">
          Berlin Alexanderplatz
        </div>
      </td></tr><tr><td>
        <div class="flix-connection__station">
          München Fröttmanning
        </div>
      </td></tr></tbody></table>

Now you have to wrap the connection table with a div and use a heading element (h1, h2, h3 or h4) for the heading, since you are not allowed to use captions for tables with role="presentation".

Now:

Fri 17 Oct 2016, 23:00 - 09:30+1

Berlin Alexanderplatz
München Fröttmanning 
<div class="flix-connection">
  <h3 class="flix-connection__title">
    Fri 17 Oct 2016, 23:00 - <span class="flix-connection__title-arrival">09:30<span class="flix-connection__day">+1</span></span>
  </h3>
  <table role="presentation"><tbody><tr><td>
        <div class="flix-connection__station">
          Berlin Alexanderplatz
        </div>
      </td></tr><tr><td>
        <div class="flix-connection__station">
          München Fröttmanning
        </div>
      </td></tr></tbody></table>
</div>

Progress tracker

The progress tracker has been redesigned and refactored.

Before:

<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Get Honeycomb</span>
  </li>
  <li class="flix-progress-tracker__item" aria-current="step">
    <span class="flix-progress-tracker__text">Use it</span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Enjoy</span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Spread the word</span>
  </li>
</ol>

Now:

  • The flix-progress-tracker__link element is now always required, even if it's a span.
  • The current item has a more prominent style.
  • For clickable items you no longer need the flix-progress-tracker--linked modifier, so you can can safely remove that from your code.
  1. Get Honeycomb
  2. Use it
  3. Enjoy
  4. Spread the word 
<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Get Honeycomb</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item" aria-current="step">
    <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>