Honeycomb 13.0 migration guide

• Package upgrade
  • Upgrading with npm
  • Upgrading from CDN
• Breaking changes
  • Colors
    • Flix
    • Flix Dark
    • Neptune
    • Neptune Dark
    • Kamil
    • Kamil Dark
  • Button line breaks
  • Select
  • Form row
  • Flag assets

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

Breaking changes

Colors

Colors across themes were updated. Bellow is the list of design tokens changed their value per theme.

Flix

Flix Dark

Neptune

Neptune Dark

Kamil

Kamil Dark

Button line breaks

Button components with very long text content will break line instead of cropping the text.

Select

In order to support custom icons and inline labels for select components we were forced to slightly adjust its HTML markup. In ver. 13 flix-select__field element need to be place inside of flix-select__container, similarly to how things are don for the text inputs.

Before:

<div class="flix-select">
    <label class="flix-select__label flix-label" for="select-simple">Countries</label>
    <select id="select-simple" class="flix-select__field">
        <option value="1">Germany</option>
        <option value="2">France</option>
        <option value="3">Austria</option>
        <option value="4">The Netherlands</option>
    </select>
</div>

Version 13:

<div class="flix-select">
    <label class="flix-select__label flix-label" for="select-simple">Countries</label>
    
    <div class="flix-select__container">
        <select id="select-simple" class="flix-select__field">
            <option value="1">Germany</option>
            <option value="2">France</option>
            <option value="3">Austria</option>
            <option value="4">The Netherlands</option>
        </select>
    </div>
</div>

Form row

Default bottom margin for this component has changed from spacing-4 to spacing-2. Also flix-form-row components will now preserve margins when used within the grid columns or other wrappers. Please make sure to apply flix-form-row--spase-flush for the elements that do not need these margins, e.g. last form fields in the forms.

Flag assets

Honeycomb ver. 13 removes all flag assets from its CDN, as a replacement since ver. 12 we're offering dedicated flag libraries, please follow these links for more info:

• Honeycomb Flags - Static
• Honeycomb Flags - Web Components

If you still require using old flag assets you should stick to CDN links for older versions (12 and bellow).