Honeycomb 10.0 migration guide

• Package upgrade
  • Upgrading with npm
  • Upgrading from CDN
• Breaking changes
  • Component SCSS partials
  • Baloon and Tooltip modifiers
  • Page container with fixed header no longer adds extra space
  • Bottom margins on box-like components removed
  • Time input component removed
  • Design tokens renamed
  • Panel title
• Final considerations

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

Breaking changes

Component SCSS partials

Honeycomb 10 exposes SCSS partials through the dist folder. If you happen to fetch partials from the assets folder previously you'll need to update your code to point to dist folder. assets folder has been removed and won't be exposed in npm package.

Still, the structure of the SCSS partials remain similar, but we've moved some things.

All the component partials now reside in the dist/components folder (layouts folder was deprecated). Here is the description of the new structure:

• dist/scss/common - configuration files, SASS mixins and base styles;
• dist/scss/components - contains component specific SCSS partials that are named according to component class names but without a flix prefix.
• dist/scss/helpers - contains individual helpers styles, every file is named according to respective helper purpose;
• dist/scss/icons - contains icon related styles, you won't need it in most of the cases, please use our icons libraries for everything around icons;
• dist/scss/themes - contains individual themes and their CSS variables. Please use honeycomb-theme-{theme_name}.scss files instead;
• dist/scss/honeycomb-*.scss files contain different pre-builds of honeycomb, e.g. individual themes, components only, helpers only etc.

Baloon and Tooltip modifiers

Two changes happened to these components:

• The --small modifier has been removed, update to --content-fit instead.
• The --error modifier has been removed so you should update to --danger instead.

Page container with fixed header no longer adds extra space

Previously the page-container component added an extra space between header and content, now this has been removed.

The reason is that we have many cases where the content should start right after the header (e.g.: hero image in the home page), and overriding that extra space depending on screen breakpoint and wether the header had or no navigation was very problematic.

So we removed it and the page container should be "glued" to the sticky header now.

If you need to add extra space between the content and the header we recommend you use the spacing-2 helpers in your inner elements.

Bottom margins on box-like components removed

The following components had their bottom margins removed only when they are the last child.

• box
• image-box
• infobox
• notification
• text
• form-row
• fieldset

This means you don't need to add space-flush modifiers to the last items anymore.

Also, the --is-last modifier from the form-row has been removed for the same reason.

Time input component removed

The time-input component has been completely removed.

If you still relied on this component we suggest you use either one of the alternatives:

• select if you need to offer a limited amount of time choices
• input with type="time" if a free field is allowed

Please reach out if you need any help on migrating.

Design tokens renamed

Honeycomb 10.0 introduces minor corrections to the set of design tokens. These changes enable us to align with a common naming pattern, making it easier for you to memorize and maintain the tokens.

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

Panel title

The Panel title used to require to be a Heading level 3, but now it has become a "slot" that will accept any content. Some minor CSS adjustments were required to make this possible, so you will need to update the markup to have the heading inside of a div the __title class name:

Before:

{rest of panel code}
<div class="flix-panel__header">
  <h3 class="flix-panel__title flix-h3 flix-h3--space-flush" id="panel-title">
    Panel title
  </h3>
  <button class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel"></button>
</div>
{rest of panel code}
...

Now:

<div class="flix-panel__header">
  <div id="panel-title" class="flix-panel__title">
    <h3 class="flix-h3 flix-h3--space-flush">
      Panel title
    </h3>
    <span class="flix-text--small">
      Panel subtitle
    </span>
  </div>
  <button class="flix-panel__close flix-btn flix-btn--square flix-btn--link" aria-label="Close panel"></button>
</div>

Final considerations

That's mostly it!

If you're interested in all smaller changes Honeycomb 10 brings, check our full Changelog page.

And please don't hesitate to contact us in case you face any issues or find any nasty bugs when updating to version 10. We'll gladly assist you as promptly as possible.

Happy coding! 🍯