Skip to main contentSkip to site search
Honeycomb

Honeycomb 7.0 migration guide

Package upgrade

Upgrading with npm

That's a one command story in here:

npm update @flixbus/honeycomb@latest --save

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/7.3.1/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/7.3.1/css/honeycomb-themes.min.css"/>

Breakpoints

We added a new breakpoint at 390px that now is called $breakpoint-xs or xs.

The xs breakpoint used to be 0, which is now called $breakpoint-zero or zero.

If you used $breakpoint-xs anywhere, it is safe to assume that you should rename it to $breakpoint-zero in order to have your code work the same as before.

If you has on-bp(xs) or on-range(xs, ...) it is also safe to assume you should rename xs to zero to keep it working the same way.

Components

Buttons

Button "link" variation no longer has "primary", "secondary", "tertiary" or "danger" styling options.

Using any of them in combination with link buttons no longer has any effect and should be cleaned up.

Before:

<button type="button" class="flix-btn flix-btn--link flix-btn--primary">Pimary link button</button>

After:

<button type="button" class="flix-btn flix-btn--link">Pimary link button</button>

The header (.flix-header)has been refactored focusing mostly on its accessibility and stability.

Header skip links should always be the first header child, if they are present

Before we had a button to open the header burger menu first, and now this button will give place to the header skip links.

Simply move your skip links container up in the document so they are the first interactive items of the page.

Before:

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <button aria-label="Open main site navigation" class="flix-header-nav-toggle" title="Toggle menu" data-toggle="flix-header-nav-wrapper" data-toggle-class="flix-header-nav-wrapper--visible"></button>
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" src="/img/logos/svg/honeycomb-white.svg" alt="Flix visual"/>
      </a>
    </div>
    <div class="flix-header-skip-links">
      <a class="flix-skip-link" href="#booking-details">
        Skip to booking details
      </a>
      <a class="flix-skip-link" href="#language-selection">
        Skip to language selection
      </a>
    </div>
    
  </div>
</header>

Also notice that is considered good practice to offer width and height for any images you have on the code to avoid layout flickering and improve performance.

Now:

Skip to booking details Skip to language selection
Honeycomb home page 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-skip-links">
      <a class="flix-skip-link" href="#booking-details">
        Skip to booking details
      </a>
      <a class="flix-skip-link" href="#language-selection">
        Skip to language selection
      </a>
    </div>
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb home page" width="36" height="36"/>
      </a>
    </div>
    
  </div>
</header>

The header main navigation component now includes the nav element as integral part of it and class name changes.

  • The .flix-header-nav class name should move up and be placed on the nav element instead of the list element;
  • The list element class name should be changed to .flix-header-nav__list now;
  • The __item elements remain the same, but sub menu controls are different, more on that in the next section;

Before:

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <nav aria-label="Main site">
      <ul class="flix-header-nav">
        <li class="flix-header-nav__item">
          <a class="flix-header-nav__link" href="#">My Bookings</a>
        </li>
        
      </ul>
    </nav>
  </div>
</header>

Now:

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <nav class="flix-header-nav" aria-label="Main site">
      <ul class="flix-header-nav__list">
        <li class="flix-header-nav__item">
          <a class="flix-header-nav__link" href="#">My Bookings</a>
        </li>
        
      </ul>
    </nav>
  </div>
</header>

The navigation sub menus now expand and hide based on aria-expanded and hidden values and requires a plugin since they no longer rely on CSS to work.

Previously we relied on CSS alone to expand and hide the sub menu dropdowns, that was convenient but proved to be hard to enforce proper accessibility features that way. So now we rely on ARIA attributes to control the visibility of the sub menu dropdowns.

You are encouraged to use the dropdown.js plugin to manage the dropdown toggle ARIA and sub menu hidden attributes, or you can manage them o your own. Please check the header nav documentation page for more details.

In addition to that:

  • You no longer need to add the --has-subnav modifier to navigation items that contain sub navigation;
  • You also don't need the flix-header-subnav-trigger element wrapping the sub menu and the dropdown toggle element;
  • The submenu class name changed from .flix-header-subnav to .flix-header-nav-subnav and all of its children items and links too;
  • The flix-header-nav__text wrapper around the link text is only necessary if you use icons on the side, but we keep them on the code anyways to keep in sync with the react library code and we suggest you do the same, for consistency.

Before:

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <nav class="flix-header-nav" aria-label="Main site">
      <ul class="flix-header-nav__list">
        <li class="flix-header-nav__item flix-header-nav__item--has-subnav">
          <div class="flix-header-subnav-trigger">
            <button class="flix-header-nav__link" aria-haspopup="menu">Plan Trip</button>
            <ul class="flix-header-subnav">
              <li class="flix-header-subnav__item">
                <a class="flix-header-subnav__link" href="#">Route Network</a>
              </li>
              <li class="flix-header-subnav__item">
                <a class="flix-header-subnav__link" href="#">Coach destination</a>
              </li>
              <li class="flix-header-subnav__item">
                <a class="flix-header-subnav__link" href="#">Night buses</a>
              </li>
            </ul>
          </div>
        </li>
        
      </ul>
    </nav>
  </div>
</header>

Now:

  • The dropdown toggle element should be a button;
  • It should have the following attributes:
    • aria-haspopup="menu"
    • aria-controls="{THE SUBNAV ID}"
    • aria-expanded="false" or aria-expanded="false" according to the state
  • The sub menu should have
    • id="{THE SUBNAV ID}
    • hidden attribute present or not according to the state

All of the mentioned attributes are managed by the dropdown.js plugin, so if you don't want to crack your head to manage them we strongly suggest you use our plugin from our CDN.

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <nav class="flix-header-nav" aria-label="Main site">
      <ul class="flix-header-nav__list">
        <li class="flix-header-nav__item">
          <button class="flix-header-nav__link" data-dropdown="flix-header-nav-subnav">
            <span class="flix-header-nav__text">Plan trip</span>
          </button>
          <ul id="flix-header-nav-subnav" class="flix-header-nav-subnav" hidden="">
            <li class="flix-header-nav-subnav__item">
              <a class="flix-header-nav-subnav__link" aria-current="page" href="/">
                <span class="flix-header-nav__text">Route Network</span>
              </a>
            </li>
            <li class="flix-header-nav-subnav__item">
              <a class="flix-header-nav-subnav__link" href="/">
                <span class="flix-header-nav__text">Coach destination</span>
              </a>
            </li>
            <li class="flix-header-nav-subnav__item">
              <a class="flix-header-nav-subnav__link" href="/">
                <span class="flix-header-nav__text">Night buses</span>
              </a>
            </li>
          </ul>
        </li>
        
      </ul>
    </nav>
  </div>
</header>

The burger menu is now a separate component (no longer a navigation breakpoint) and should be added independently with it's own accessible controls.

Previously we had many issues with maintaining the burger menu as a breakpoint from the main navigation (both stability and accessibility support were lacking). So in order to better accommodate it we turned it into a separate component, with it's own documentation, styles and toggling mechanics similar to the navigation dropdowns.

That means you will have to keep double sections of navigation markup and to make it accessible it will be very important to properly toggle the hidden attribute of the menus that should not be visible since this attribute is respected by assistive technologies and will also hide the component from keyboard focus as well.

So before you only added a button (that was only visible on mobile screens) at the very beginning of the header that would toggle the navigation "visible" modifier. As we know, that is not very accessible as it does not communicate that state to screen reade users at all.

Before:

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <button aria-label="Open main site navigation" class="flix-header-nav-toggle" title="Toggle menu" data-toggle="flix-header-nav-wrapper" data-toggle-class="flix-header-nav-wrapper--visible"></button>
    
    <div class="flix-header-navbar">
      <div class="flix-header-nav-wrapper">
        <button aria-label="Close main site navigation" class="flix-header-nav-close" title="Close menu" data-toggle="flix-header-nav-wrapper" data-toggle-class="flix-header-nav-wrapper--visible"></button>
        <nav aria-label="Main site navigation">
          <ul class="flix-header-nav">
            
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

Now:

  • The header burger menu is a new, separate component flix-header-burger-menu;
  • It should contain the toggle button, the panel container and the overlay;
  • The component should be a direct child to the flix-header__inner container, ideally before or after the header navigation;
  • Inside of the panel (.flix-header-burger-menu__panel) you should include another toggle button to close the panel, and the navigation component (.flix-header-burger-menu__nav);
    • The navigation markup is identical to the regular header navigation;
    • It uses the same HTML tags and bem identifiers;
    • But the class names are .flix-header-burger-menu__ instead of .flix-header-nav__.
  • Toggles:
    • Both toggle buttons should implement the correct ARIA attributes;
    • The panel open and closed states depend on the aria-expanded value of the burger toggle;
    • You should toggle the hidden attribute of the panel element when the panel is hidden to also make it unreachable by keyboard navigation (in addition to make it invisible).
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    
    <div class="flix-header-burger-menu">
      <button aria-label="Open main site navigation" class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md" aria-controls="menu-panel" aria-expanded="false"></button>
      <div id="menu-panel" class="flix-header-burger-menu__panel" hidden="">
        <button aria-label="Close main site navigation" class="flix-header-burger-menu__toggle flix-btn flix-btn--link flix-btn--square flix-btn--md" aria-controls="menu-panel" aria-expanded="true"></button>
        <nav class="flix-header-burger-menu" aria-label="Main site">
          <ul class="flix-header-burger-menu__list">
            <li class="flix-header-burger-menu__item">
              <a class="flix-header-burger-menu__link" aria-current="page" href="/">
                <span class="flix-header-burger-menu__text">Route Network</span>
              </a>
            </li>
            <li class="flix-header-burger-menu__item">
              <a class="flix-header-burger-menu__link" href="/">
                <span class="flix-header-burger-menu__text">Coach destination</span>
              </a>
            </li>
            <li class="flix-header-burger-menu__item">
              <a class="flix-header-burger-menu__link" href="/">
                <span class="flix-header-burger-menu__text">Night buses</span>
              </a>
            </li>
            
          </ul>
        </nav>
      </div>
      <div class="flix-header-burger-menu__overlay flix-overlay"></div>
    </div>
    <nav class="flix-header-nav" aria-label="Main site">
      <ul class="flix-header-nav__list">
        <li class="flix-header-nav__item">
          <a class="flix-header-nav__link" aria-current="page" href="/">
            <span class="flix-header-nav__text">Route Network</span>
          </a>
        </li>
        <li class="flix-header-nav__item">
          <a class="flix-header-nav__link" href="/">
            <span class="flix-header-nav__text">Coach destination</span>
          </a>
        </li>
        <li class="flix-header-nav__item">
          <a class="flix-header-nav__link" href="/">
            <span class="flix-header-nav__text">Night buses</span>
          </a>
        </li>
        
      </ul>
    </nav>
  </div>
</header>

Header widgets --unfixed modifier renamed to --no-responsive-rendering to more clearly reflect what the modifier does.

Before if you wanted to stop the header widgets from hiding on mobile screens you would add the --unfixed modifier to it.

We thought that was misleading and unclear name for the modifier and decided it was a nice time to rename it.

If you don't want the header widgets container to be hidden on mobile screens, add the .flix-header-widgets--no-responsive-rendering class name instead.

Header user widget no longer relies on old header CSS control, simplified markdown and accessible controls.

Previously the header user widget was an extension of the header navigation, it relied on the same old CSS way of showing and hiding the sub menu, which caused the markup to be too convoluted and offered no support for assistive technology users. That combined to the fact that it relied on double nested lists caused a lot of confusion for screen readers. The markup was simplified and the showing and hiding of the user menu now relies on the aria-expanded value of the menu toggle, exactly like in the new dropdown sub menus of the header navigation.

Before:

<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    
    <div class="flix-header-widgets flix-header-widgets--sticky">
      <div class="flix-header-user-widget">
        <a class="flix-avatar flix-header-user-widget__avatar" href="/">
          <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
        </a>
        <div class="flix-header-user-widget__content">
          <nav aria-label="Profile navigation">
            <ul class="flix-header-nav">
              <li class="flix-header-nav__item flix-header-nav__item--has-subnav">
                <div class="flix-header-subnav-trigger">
                  <button class="flix-header-nav__link" aria-haspopup="menu">John Doe</button>
                  <ul class="flix-header-subnav">
                    <li class="flix-header-subnav__item">
                      <a class="flix-header-subnav__link" href="#">Profile</a>
                    </li>
                    <li class="flix-header-subnav__item">
                      <a class="flix-header-subnav__link" href="#">Log out</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Now:

  • The nav element should wrap the entire component and contain the .flix-header-user-widget class name, it must also have an aria-label to identify this navigation landmark;
  • The user name that toggles the sub menu should be a button and should not be inside of the list;
  • The dropdown list should have only 1 level and should reuse the header navigation subnav class names to maintain a coherent style with the header menu;
  • One more time, we highly encourage you to use the dropdown.js plugin to control the user widget dropdown;
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    
    <div class="flix-header-widgets">
      <nav aria-label="John Doe" class="flix-header-user-widget">
        <a class="flix-avatar" href="#">
          <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
        </a>
        <button aria-label="Open user menu" class="flix-header-user-widget__toggle" data-dropdown="user-menu">
          John Doe
        </button>
        <ul id="user-menu" class="flix-header-nav-subnav" hidden="">
          <li class="flix-header-nav-subnav__item">
            <a class="flix-header-nav-subnav__link" href="/">
              <span class="flix-header-nav__text">Profile</span>
            </a>
          </li>
          <li class="flix-header-nav-subnav__item">
            <a class="flix-header-nav-subnav__link" href="/">
              <span class="flix-header-nav__text">Logout</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Input

The input (.flix-input) component has been refactored in order to provide more flexibility over the numerous internal elements it can have (namely: input icons, inline labels and feedback icons).

For all cases you will need to add a container (.flix-input__container) around the input field, like so:

<div class="flix-input">
  <label class="flix-label flix-input__label" for="first-name-0">
    Name
  </label>
  <div class="flix-input__container">
    <input type="text" id="first-name-0" class="flix-input__field"/>
    <span class="flix-input__feedback-icon" aria-hidden="true"></span>
  </div>
</div>

Icons .flix-input__icon

Before it was like this:

<div class="flix-input flix-input--has-icon">
  <label class="flix-label flix-input__label" for="location-0">
    Location
  </label>
  <input type="text" id="location-0" class="flix-input__field" value="Berlin"/>
  <i class="flix-input__icon flix-icon flix-icon-pin" aria-hidden="true"></i>
</div>

Now when using input icons you should put them inside of the container element. The icon position relative to the input is controlled by wether it comes before or after the input field inside of the code.

The modifier --has-icon is no longer needed and you can remove that.

With an icon to the left:

<div class="flix-input">
  <label class="flix-label flix-input__label" for="location-1">
    Location
  </label>
  <div class="flix-input__container">
    <i class="flix-input__icon flix-icon flix-icon-pin" aria-hidden="true"></i>
    <input type="text" id="location-1" class="flix-input__field" value="Berlin"/>
    <span class="flix-input__feedback-icon" aria-hidden="true"></span>
  </div>
</div>

But you still need the --has-icon-right modifier when you want to show an icon to the right so we can apply the correct paddings to the input field.

Move the icon to after the field and add the --has-icon-right modifier to fix the paddings.

The icon modifier flix-input__icon--right is no longer needed and you can remove that, the position will be dictated by the order in the document.

When using icons with functionality you should now use the button with icon, adding the input__icon class to the button.

Don't forget that when using buttons for the icon element you should provide an accessible label that describes the button functionality.

<form>
  <div class="flix-input flix-input--has-icon-right">
    <label class="flix-label flix-input__label" for="location-2">
      Location
    </label>
    <div class="flix-input__container">
      <input type="text" id="location-2" class="flix-input__field"/>
      <span class="flix-input__feedback-icon" aria-hidden="true"></span>
      <button type="reset" aria-label="Clear input field." class="flix-input__icon flix-btn flix-btn--link flix-btn--square flix-btn--sm">
        <i class="flix-btn__icon flix-icon flix-icon-close" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</form>

Inline labels .flix-input__inline-label

Before:

<div class="flix-input flix-input--has-inline-label">
  <label class="flix-label flix-input__label" for="budget-0">
    Budget
  </label>
  <input type="text" id="budget-0" class="flix-input__field" aria-describedby="budget-0-inline-label" value="20,50"/>
  <span class="flix-input__inline-label" id="budget-0-inline-label">
    EUR
  </span>
</div>

Same as with the icons, now the input inline labels should be moved inside of the container element, and their position relative to the input field will be set by the order it appears in the document.

With inline label to the left:

EUR 
<div class="flix-input">
  <label class="flix-label flix-input__label" for="budget-1">
    Budget
  </label>
  <div class="flix-input__container">
    <span class="flix-input__inline-label" id="budget-1-inline-label">
      EUR
    </span>
    <input type="text" id="budget-1" class="flix-input__field" aria-describedby="budget-1-inline-label" value="20,50"/>
    <span class="flix-input__feedback-icon" aria-hidden="true"></span>
  </div>
</div>

And if you want to show the inline label to the right, just move it:

Kilometers 
<div class="flix-input">
  <label class="flix-label flix-input__label" for="distance-0">
    Distance
  </label>
  <div class="flix-input__container">
    <input type="text" id="distance-0" class="flix-input__field" aria-describedby="distance-0-inline-label" value="100"/>
    <span class="flix-input__feedback-icon" aria-hidden="true"></span>
    <span class="flix-input__inline-label" id="distance-0-inline-label">
      Kilometers
    </span>
  </div>
</div>

Feedback, validation info and error messages

On this major we changed the way we deal with feedback icons (error, valid and loading states). Now you will need to add an extra element to show the state icons.

This element should always come directly after the input field, inside of the container.

You don't have to worry about adding it or removing it from the DOM, as it will only be visible if the input has one of the following modifiers:

  • .flix-input--error
  • .flix-input--valid
  • .flix-input--loading

As for the info and error messages, they should be outside of the container.

Before:

<div class="flix-input flix-input--error">
  <label class="flix-label flix-input__label" for="first-name-1">
    Name
  </label>
  <input type="text" id="first-name-1" class="flix-input__field" aria-invalid="true" aria-errormessage="firs-name-error" aria-describedby="first-name-info" value="1234 5667 900"/>
  <span class="flix-input__info" id="firs-name-error" aria-live="assertive">
    This field is required
  </span>
  <span class="flix-input__info" id="first-name-info">
    Only letters and some special characters are allowed
  </span>
</div>

Now you need to add the flix-input__feedback-icon element right after the input and make sure the info messages are outside of the container:

This field is required Only letters and some special characters are allowed 
<div class="flix-input flix-input--error">
  <label class="flix-label flix-input__label" for="first-name-2">
    Name
  </label>
  <div class="flix-input__container">
      <input type="text" id="first-name-2" class="flix-input__field" aria-invalid="true" aria-errormessage="firs-name-error" aria-describedby="first-name-info" value="1234 5667 900"/>
      <span class="flix-input__feedback-icon"></span>
  </div>
  <span class="flix-input__info" id="firs-name-error" aria-live="assertive">
    This field is required
  </span>
  <span class="flix-input__info" id="first-name-info">
    Only letters and some special characters are allowed
  </span>
</div>

Changing the modifier from --error to --valid or --loading will change the icon and input styles accordingly. Please bear in mind that these state modifiers are mutually exclusive and can't exist at the same time.

All navigation components changed the way the "active item" styles are applied. We no longer offer the --active class modifiers for that. Instead, with the intent of enforcing the usage of semantic and accessible attributes, we apply the "active" styles on the navigation item that has an aria-current attribute. If you were already using the recommended aria-current before, you can simply remove the --active modifier from your code as it won't have any effect from now on.

Here are all affected components and how to update them:

Breadcrumbs item

Before:

<li class="flix-breadcrumbs__item">
  <span class="flix-breadcrumbs__link flix-breadcrumbs__link--active">
    Munich
  </span>
</li>

Now:

<li class="flix-breadcrumbs__item">
  <span class="flix-breadcrumbs__link" aria-current="page">
    Munich
  </span>
</li>

Dropdown item

Before:

<li class="flix-dropdown-item">
  <a class="flix-dropdown-item__link flix-dropdown-item__link--active" href="#">
    <i class="flix-icon flix-icon-edit-solid" aria-hidden="true"></i>
    <span class="flix-dropdown-item__text">Edit</span>
  </a>
</li>

Now:

<li class="flix-dropdown-item">
  <a class="flix-dropdown-item__link" aria-current="true" href="#">
    <i class="flix-icon flix-icon-edit-solid" aria-hidden="true"></i>
    <span class="flix-dropdown-item__text">Edit</span>
  </a>
</li>

Header item

Before:

<li class="flix-header-nav__item">
  <a class="flix-header-nav__link flix-header-nav__link--active" href="#">
    My bookings
  </a>
</li>

Now:

<li class="flix-header-nav__item">
  <a class="flix-header-nav__link" aria-current="page" href="#">
    My bookings
  </a>
</li>

Nav horizontal item

Before:

<li class="flix-nav-horizontal__item">
  <a class="flix-nav-horizontal__link flix-nav-horizontal__link--active">
    <span class="flix-nav-horizontal__text">Sightseeing</span>
  </a>
</li>

Now:

<li class="flix-nav-horizontal__item">
  <a class="flix-nav-horizontal__link" aria-current="page">
    <span class="flix-nav-horizontal__text">Sightseeing</span>
  </a>
</li>

Nav side item

Before:

<li class="flix-nav-side__item">
  <a class="flix-nav-side__link flix-nav-side__link--active">
    <span class="flix-nav-side__text">Partner</span>
  </a>
</li>

Now:

<li class="flix-nav-side__item">
  <a class="flix-nav-side__link" aria-current="page">
    <span class="flix-nav-side__text">Partner</span>
  </a>
</li>

Nav tab bar item

Before:

<a class="flix-nav-tab-bar__tab flix-nav-tab-bar__tab--active" href="#">
  <i class="flix-nav-tab-bar__icon flix-icon flix-icon-magnifier-solid"></i>
  <span class="flix-nav-tab-bar__label">Search</span>
</a>

Now:

<a class="flix-nav-tab-bar__tab" aria-current="page" href="#">
  <i class="flix-nav-tab-bar__icon flix-icon flix-icon-magnifier-solid"></i>
  <span class="flix-nav-tab-bar__label">Search</span>
</a>

Pager item

Before:

<li class="flix-pager__item">
  <a class="flix-pager__link flix-pager__link--active" href="#">
    1
  </a>
</li>

Now:

<li class="flix-pager__item">
  <a class="flix-pager__link" href="#" aria-current="page">
    1
  </a>
</li>

Progress tracker items

Before:

<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item flix-progress-tracker__item--active">
    <span class="flix-progress-tracker__text">Get Honeycomb</span>
    <span class="flix-sr-only">Completed</span>
  </li>
  <li class="flix-progress-tracker__item flix-progress-tracker__item--active">
    <span class="flix-progress-tracker__text">Use it</span>
    <span class="flix-sr-only">Completed</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: Remove all --active modifiers from completed steps and add aria-current="step" on the current item. CSS will take care to apply the correct colors on items before and after the current item.

Add the visually hidden (but internationalized) <span class="flix-sr-only">Completed</span> on completed steps, for extra accessibility points and better screen reader user experience.

<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Get Honeycomb</span>
    <span class="flix-sr-only">Completed</span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__text">Use it</span>
    <span class="flix-sr-only">Completed</span>
  </li>
  <li class="flix-progress-tracker__item" aria-current="step">
    <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>

Tags

Default tag changed it's appearance to match other solid color variations.

Applying --outlined modifier makes it look like the one from ver. 6.*.

Dedicated "close" element for Tag component has been removed, please use link button with icon instead, like so:

I can haz a close button 
<span class="flix-tag">
  <span class="flix-tag__text">I can haz a close button</span>
  <button type="button" aria-label="Remove" class="flix-tag__icon flix-btn flix-btn--sm flix-btn--square flix-btn--link">
    <i class="flix-btn__icon flix-icon flix-icon-close" aria-hidden="true"></i>
  </button>
</span>

Design tokens

Honeycomb 7.0 introduces minor corrections to the set of design tokens. These changes allow us to clean up redundant tokens and to create better and more accessible themes in the future. Please see the table bellow for the whole list of changes:

Honeycomb 6.0Honeycomb 7.0
--flix-secondary-ui-colorremoved (use --flix-primary-ui-color or --flix-button-primary-color)
--flix-secondary-ui-light-colorremoved (use --flix-primary-ui-light-color)
--flix-secondary-ui-dark-colorremoved (use --flix-primary-ui-dark-color)
--flix-primary-content-color--flix-content-primary-color
--flix-secondary-content-color--flix-content-secondary-color
--flix-danger-content-color--flix-danger-dark-color
--flix-danger-content-color--flix-danger-dark-color
--flix-button-primary-color (new)
--flix-button-secondary-color (new)
--flix-button-label-color (new)
--flix-header-bottom-border-colorremoved
--flix-icon-header-closeremoved (use --flix-icon-close)
--flix-icon-panel-close--flix-icon-close-white

Logos

We've updated the logos and their variations while also including the ones for neptune and kamil themes. This lead to changing the naming schema for the logo files if you use our CDN to serve logo assets.

The variations are "kebab" cased and combined with the logo brand, e.g. for Flixtrain:

So you might need to change the CDN link from:

to: