Skip to main contentSkip to site search
Honeycomb

Honeycomb 14.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 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/14.1.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/14.1.0/css/honeycomb-fonts.min.css"/>

Breaking changes

Replaced Sass @import with @use or @forward

All of our Sass imports were replaced with @use or @forward rules instead of @import. This change is breaking if you were importing any of our Sass files in your application code. The new rules are better as they allow you to control which parts of the imported module are made available to your code.

For example, if you were importing a component like this:

@import '@flixbus/honeycomb/dist/scss/honeycomb-tools';
@import '@flixbus/honeycomb/dist/scss/honeycomb-themes';
@import "@flixbus/honeycomb/dist/scss/honeycomb-base";

.example {
  color: cssvar(danger-color);
}

You should now do this:

@use '@flixbus/honeycomb/dist/scss/honeycomb-tools';
@use '@flixbus/honeycomb/dist/scss/honeycomb-themes';
@use "@flixbus/honeycomb/dist/scss/honeycomb-base";

.example {
  color: honeycomb-tool.cssvar(danger-color);
}

Or if you don't want to be bothered with scoped names you can use as * on the modules, like so:

@use '@flixbus/honeycomb/dist/scss/honeycomb-tools' as *;

.example {
  color: cssvar(danger-color);
}

For more information on this change, please refer to: Sass: Breaking Change: @import and global built-in functions

For more information on how @use works and how to configure namespaces, please refer to: Sass: @use

Removed config mixins and variables

The following SASS mixins and variables have been removed because we no longer have need for them in our components and helpers. If you were using them on your application for whatever reason, you should now provide an alternative implementation on your side.

Removed generic mixins: @include exports and @include svg-url-encode; Removed configuration variables: $header-expand-feature, $modules;

These removals should not impact any regular use cases of Honeycomb and we don't provide any replacements because they were either a. not exported nor documented or b. not used in any internal file and had no consequences at all.

But in the unlikely event that you were using these variables or mixins, please let us know so we can work something out together.

The following SASS mixins and variables were no longer being used by Honeycomb.

If you were relying on them on your own application we recommend you to replace them with one of the dedicated icon libraries.

  • @include flix-icon
  • @include flix-icon-abstract
  • @include flix-svg-icon
  • @include flix-icon-large
  • @include flix-icon-small
  • $icon-font-family
  • $icon-base-font-size

The recommended library for Honeycomb Static users is the Web Components Icons library.

The one that closest matches the original icon-font functionality is the Icon Font library.

Icons mixins moved to utils folder

The original scss/icons/icons.scss file has been moved to the utils folder.

It can now be found in scss/common/utils/icons.scss and is included within the common/all import.

So if you were already importing the utils file, you can simply remove the icons import.

Also, since the icons mixins are part of the utils, they are available from the following common endpoints:

  • common/all
  • honeycomb-tools
  • honeycomb-helpers

Removed support for flix-dropdown-item and flix-dropdown-item__link class names

These class names were deprecated in version 12.1 and are now removed. You should name your dropdown items with flix-dropdown__item and flix-dropdown__link instead.

Before:

<ul id="dropdown-example" class="flix-dropdown__items" role="menu">
  <li class="flix-dropdown-item" role="presentation">
    <a class="flix-dropdown-item__link" aria-current="true" href="#" role="menuitem">
      Dropdown item
    </a>
  </li>
  <li class="flix-dropdown-item" role="presentation">
    <hr class="flix-divider"/>
  </li>
  <li class="flix-dropdown-item" role="presentation">
    <span class="flix-dropdown-item__link">
      Dropdown item
    </span>
  </li>
  <li class="flix-dropdown-item" role="presentation">
    <button class="flix-dropdown-item__link" type="button" role="menuitem">
      Dropdown item
    </button>
  </li>
</ul>

Version 14:

<ul id="dropdown-example" class="flix-dropdown__items" role="menu">
  <li class="flix-dropdown__item" role="presentation">
    <a class="flix-dropdown__link" aria-current="true" href="#" role="menuitem">
      Dropdown item
    </a>
  </li>
  <li class="flix-dropdown__item" role="presentation">
    <hr class="flix-divider"/>
  </li>
  <li class="flix-dropdown__item" role="presentation">
    <span class="flix-dropdown__link">
      Dropdown item
    </span>
  </li>
  <li class="flix-dropdown__item" role="presentation">
    <button class="flix-dropdown__link" type="button" role="menuitem">
      Dropdown item
    </button>
  </li>
</ul>