Honeycomb 12.0 migration guide
- Package upgrade
- Breaking changes
Package upgrade
Upgrading with npm
That's a one command story in here:
npm update @flixbus/honeycomb@latest --saveUpgrading 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/12.6.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/12.6.0/css/honeycomb-themes.min.css"/>Upgrade fonts
You will also need to update the fonts endpoint since it is changed to include new semibold variants:
<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/12.6.0/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/12.6.0/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin=""/>If you're including roboto via fontsource, please add the 500 variant to your font setup.
Breaking changes
Button
Buttons no longer set sibling margins and btn-group is required to configure groups of buttons
Buttons will no longer add margins between siblings. This behavior has been deprecated on version 8 and is now officially removed.
The space between buttons will be controlled by the button group (btn-group) component, that you can use to configure the space between buttons and also their alignment behavior.
Honeycomb 11.0:
<button class="flix-btn flix-btn--primary">Primary</button>
<button class="flix-btn flix-btn--secondary">Secondary</button>Honeycomb 12.0:
With the button group you can control the space between buttons using the --half-gap and --1-gap modifiers.
<div class="flix-btn-group">
<button class="flix-btn flix-btn--primary">Primary</button>
<button class="flix-btn flix-btn--secondary">Secondary</button>
</div>Changed hierarchy, color changes and removed tertiary variant
Flix is getting rid of orange as a brand color and Honeycomb 12.0 is updating the button hierarchy to keep in sync with the new color scheme. This change affects all themes.
The --primary button variant as well as the button-primary-color token have changed and are now what was previously the secondary color. If you are already using primary button variants as the primary action of the page or app, you don't have to change anything, just be mindful that these buttons will change color and you should update any regression tests to match that.
The --secondary variant has the biggest change and deserves more attention. Now they look like the previous --tertiary variant (white background and brand colored borders), and the button-secondary-color token no longer exists. If you were using secondary buttons as primary actions because they were green then it's safe to replace all with the --primary modifier if you wish them to stay green.
The --tertiary button variant has been removed, and the visuals now belong to the --secondary variant. So you can safely replace all tertiary buttons with the --secondary modifier if you wish them to keep the same appearance, otherwise they will just look like neutral buttons.
Honeycomb 11.0:
<div class="flix-btn-group">
<button class="flix-btn flix-btn--primary">My orange button</button>
<button class="flix-btn flix-btn--secondary">My green button</button>
<button class="flix-btn flix-btn--tertiary">My white button with green borders</button>
</div>Honeycomb 12.0:
<div class="flix-btn-group">
<button class="flix-btn flix-btn--primary">My green button</button>
<button class="flix-btn flix-btn--secondary">My white button with green borders</button>
</div>You can read all about the reasoning and motivation behind these changes, as well as links to AB Tests on the 2024/04/09 New Button Hierarchy - Confluence article, make sure to read through it and discuss with your team about the best approach to these changes.
Design tokens
Honeycomb 12 has some breaking changes in the design tokens including naming corrections and token deletion.
These changes enable us to align with a common naming pattern, making it easier for you to memorize and maintain the tokens in the future.
Please refer to the table below for the complete list of token changes:
| Honeycomb 11.0 | Honeycomb 12.0 |
|---|---|
| --flix-primary-brand-color | --flix-brand-primary-color |
| --flix-secondary-brand-color | --flix-brand-secondary-color |
| --flix-button-secondary-color | deleted, use button-primary-color instead |
Flags endpoints are deprecated
The flags endpoints in honeycomb static are deprecated and will continue working until the next major release.
So you should consider updating your code to include the flags from the new assets library honeycomb-flags-static.
All component examples were updated with the new urls and you can find more details on including the new library on the flags assets page.
Footer requires .flix-footer__illustration wrapper around images
To proper support illustrations web components on the footer it is now required to add .flix-footer__illustration wrapper around the illustrations.
Honeycomb 11.0:
<footer class="flix-footer">
<img class="flix-footer__img" src="//honeycomb.flixbus.com/dist/11.7.0/img/footer-bus-and-train-mobile.svg" aria-hidden="true" alt=""/>
<img class="flix-footer__img flix-footer__img--desktop" src="//honeycomb.flixbus.com/dist/11.7.0/img/footer-bus-and-train.svg" aria-hidden="true" alt=""/>
</footer>Honeycomb 12.0:
With the following markup you can also use web components to add illustrations to the footer. Check the component docs for more examples.
<footer class="flix-footer">
<div class="flix-footer__illustration">
<img class="flix-footer__img" src="//honeycomb.flixbus.com/dist/12.6.0/img/footer-bus-and-train-mobile.svg" aria-hidden="true" alt=""/>
<img class="flix-footer__img flix-footer__img--desktop" src="//honeycomb.flixbus.com/dist/12.6.0/img/footer-bus-and-train.svg" aria-hidden="true" alt=""/>
</div>
</footer>honeycomb-tools file
Helper CSS classes and styles were removed from honeycomb-tools in ver. 12.
This SCSS endpoint mainly meant to be used for SASS mixins and functions, if you need helper classes, please use the dedicated honeycomb-helpers.scss file instead.
Icon mask icon mixins renamed to add flix prefix
If you were using the mask icon sass mixins in your project you need to renamed them to add flix prefix.
All mixins were renamed to follow the example below:
Honeycomb 11.0:
@include icon-arrow-down;
@include icon-arrow-right;
@include icon-attention;
// etc...Honeycomb 12.0:
@include flix-icon-arrow-down;
@include flix-icon-arrow-right;
@include flix-icon-attention;
// etc...Nav Tab Bar items are now specialized buttons
The Nav Tab Bar items are now buttons with stacked and link modifiers, and adds only a little bit of styling to make them look good in the context of the nav tab bar.
This means we are no longer replicating the button styles for the nav tab bar items, resulting in smaller file size and all of the updates and improvements added to button component will be automatically applied to nav tab bar items.
But this also means you need to update the markup of the tabs:
Honeycomb 11.0:
<nav class="flix-nav-tab-bar" aria-label="Main navigation" style="position:relative">
<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>
<a class="flix-nav-tab-bar__tab" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-offer"></i>
<span class="flix-nav-tab-bar__label">Offer</span>
</a>
<a class="flix-nav-tab-bar__tab" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-car"></i>
<span class="flix-nav-tab-bar__label">My rides</span>
</a>
</nav>Honeycomb 12.0:
Noticed the added flix-btn flix-btn--link flix-btn--stacked class names for the items.
Also the icons are part of button styles now, so you need to the flix-btn__icon class in the markup.
And since they are now specialized buttons, they also support icon web components (that would previously be misaligned).
<nav class="flix-nav-tab-bar" aria-label="Main navigation" style="position:relative">
<a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#" aria-current="page">
<flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="magnifier" solid=""></flix-icon>
<span class="flix-nav-tab-bar__label">Search</span>
</a>
<a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#">
<flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="offer"></flix-icon>
<span class="flix-nav-tab-bar__label">Offer</span>
</a>
<a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#">
<flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="car"></flix-icon>
<span class="flix-nav-tab-bar__label">My rides</span>
</a>
</nav>Popup
Scrollable content
Previously the entire popup body would have a scroll bar when the content was big enough, this caused the actions to be invisible when the content was too long, forcing the user to scroll down to the end to see them.
Now, only the __content section of the popup will scroll. And while you can choose if the icon and title are fixed or not, the actions will always be visible at the bottom of the popup body.
If you like the default behavior (fixed icon, title and actions), you don't need to change anything on the popup markup.
But if you do wish the icon and title sections to scroll with the content, you should move them inside of the __content div.
Honeycomb 11.0:
Everything scrolled together
<div id="old-popup" class="flix-popup" role="dialog" aria-modal="true" aria-labelledby="old-popup-title">
<div class="flix-popup__body">
<div class="flix-popup__icon">
<flix-icon name="time" size="12" aria-label="Clock" role="img"></flix-icon>
</div>
<h2 class="flix-popup__title" id="old-popup-title">
Your time is up!
</h2>
<div class="flix-popup__content">
Everything is lost, there is no chance you can fix this mess!
Be honest with yourself and surrender!
</div>
<div class="flix-popup__actions">
<button type="button" id="last-focusable-item-2" class="flix-btn flix-btn--primary">
Keep trying
</button>
</div>
</div>
<div class="flix-overlay"></div>
</div>Honeycomb 12.0:
Icon and title are fixed, you can choose if they scroll with the content by moving them inside of the __content div.
<div id="new-popup" class="flix-popup" role="dialog" aria-modal="true" aria-labelledby="new-popup-title">
<div class="flix-popup__body">
<div class="flix-popup__content">
<div class="flix-popup__icon">
<flix-icon name="time" size="12" aria-label="Clock" role="img"></flix-icon>
</div>
<h2 class="flix-popup__title" id="new-popup-title">
Your time is up!
</h2>
Everything is lost, there is no chance you can fix this mess!
Be honest with yourself and surrender!
</div>
<div class="flix-popup__actions">
<button type="button" id="last-focusable-item-2" class="flix-btn flix-btn--primary">
Keep trying
</button>
</div>
</div>
<div class="flix-overlay"></div>
</div>Hidden attribute required
Before the popup would have display: none when it didn't have the --active modifier.
Now, the modifier is being used only to control the transition, and the hidden attribute is required to effectively hide the popup.
If you are using the popup.js plugin, there's no need to do anything because the plugin already toggles the hidden attribute and class modifier since it's released.
If you are handling the popup toggling on your own, please refer to the component documentation for details on how to properly handle showing and hiding popups in an accessible way.
Themes default and dark renamed
The default and dark themes were renamed and you need to update their corresponding class names and css file names.
-
Theme class name:
flix-theme-default->flix-theme-flix -
Theme sass file:
scss/themes/theme-default.scss->scss/themes/theme-flix.scss -
Theme css file:
css/honeycomb-theme-default.css->css/honeycomb-theme-flix.css -
Dark theme class name:
flix-theme-dark->flix-theme-flix-dark -
Dark theme sass file:
scss/themes/theme-dark.scss->scss/themes/theme-flix-dark.scss -
Dark theme css file: Dark themes do not have standalone css files but can be found in
css/honeycomb-theme-flix-full.css