Honeycomb 11.0 migration guide

• Package upgrade
  • Upgrading with npm
  • Upgrading from CDN
• Breaking changes

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

Breaking changes

Spacing helpers

The spacing helpers now have !important to them, so they will always override the current space that is being applied by the component.

With that we aim to remove component-specific helpers such as .form-row--space-N or .fieldset__item--space-N, for example.

If you're using these specific helpers in the form-row or the fieldset component, you may want to replace them with the generic spacing helpers now, as they should be removed in the future.

Also, if you do use the spacing helpers around your project please double check thay the styles are as intended, since the addition to !important might affect your styles in the end.

Switch

For consistency reasons the switch component no longer supports implicit label markup (it was the last component that still had it).

So if you still create switch with implicit labels you should update it as follows.

Before:

<label class="flix-switch" for="flix-switch-old">
  <input class="flix-switch__input" id="flix-switch-old" type="checkbox" name="flixSwitch" aria-describedby="flix-switch-old-info"/>
  <div class="flix-switch__label">Switch</div>
  <span class="flix-switch__info" id="flix-switch-old-info">Additional info text</span>
</label>

Now:

<div class="flix-switch">
  <input class="flix-switch__input" id="flix-switch" type="checkbox" name="flixSwitch" aria-describedby="flix-switch-info"/>
  <label class="flix-switch__label" for="flix-switch">Switch</label>
  <span class="flix-switch__info" id="flix-switch-info">Additional info text</span>
</div>

"Close" buttons in the panel, tooltip, language switcher and notification

The size of the close buttons among components was adjusted to be 36px, a larger clickable area makes it easier to interact with the elements. To adjust your code to the new sizes you'll need to change the sizing modifier of the "close" buttons.

For example here is how it should be done for notifications.

Notification, before:

<section class="flix-notification" role="alert" aria-live="polite">
    <div class="flix-notification__content">
      I am Groot!
    </div>
    <button class="flix-notification__close flix-btn flix-btn--square flix-btn--sm flix-btn--link">
      <span class="flix-sr-only">Close</span>
    </button>
  </section>

Notification, now:

<section class="flix-notification" role="alert" aria-live="polite">
    <div class="flix-notification__content">
      I am Groot!
    </div>
    <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
      <span class="flix-sr-only">Close</span>
    </button>
  </section>

Note the size modifier of the button changed from flix-btn--sm to flix-btn--md.

Similar change need to be performed for Balloon, Language switcher, Panel and Tooltip.

Design tokens removed or renamed

Honeycomb 11.0 introduces minor corrections to the set of design tokens.

Icon tokens

All icon tokens were removed since the icons were refactored internally with reusable SVG path mixins that can be colored and resized. This gives us more freedom to work with icons inside of honeycomb as well as greatly reduce the size of our themes (from aprox. 66 KB to aprox. 18 KB)

We advuse you to use honeycomb-icons library for icons instead of theme tokens. If you relied on icon tokens and are not able to reliably replace a given icon with one from the lib, please reach out to us so we can work out on a solution.

Please refer to the table below for the complete list of token changes: