Skip to main contentSkip to site searchSkip to component search
Honeycomb

Honeycomb React 10 migration guide

Upgrade package

First upgrade to the latest version of Honeycomb-React:

npm install @flixbus/honeycomb-react@latest

Uprgade fonts

You need to update the fonts in your app, since a new font weight (500) has been introduced.

  • If you're using honeycomb-fonts.css included on the head, update it to the latest version:
<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/12.0.2/css/honeycomb-fonts.css" crossorigin=""/>
<link href="//honeycomb.flixbus.com/dist/12.0.2/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin=""/>
  • If you're using fontsource, include the variant 500 on the configuration:
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

Then proceed to take care of the breaking changes.

Breaking Changes

Button appearances change and appearance="tertiary" removed

The button appearances hierarchy has changed and as a consequence the tertiary option has been removed.

The secondary button now looks like the previous tertiary button.

In short:

  1. Replace all secondary buttons with primary buttons, as the primary appearance is now the only colored option.
  2. Replace all tertiary buttons with secondary as the tertiary appearance is now secondary in the hierarchy.

By following these steps you will have all your primary buttons looking green, and secondary buttons replacing the tertiary and looking the same.

And please check the migration guide on Honeycomb static for details on choosing the right button for your use case and also for the reasoning behind this change and a link to AB Test results on this subject.

Honeycomb React 9:

<Button appearance="primary">My orange button</Button>
<Button appearance="secondary">My green button</Button>
<Button appearance="tertiary">My white button with green borders</Button>

Honeycomb React 10:

<Button appearance="primary">My green button</Button>
<Button appearance="secondary">My white button with green borders</Button>

The link is an appearance because it overrides other button appearances, so they were combined to avoid confusion.

Honeycomb React 9:

<Button link>My link button</Button>

Honeycomb React 10:

<Button appearance="link">My link button</Button>

For a very long time the Dropdown component couldn't be controlled. The active prop would merely set the initial state and then internally the useVisibilityToggle hook would take over the state management.

That was not intended, as the other components (e.g.: Tooltip, NavItem) allow you to control the active state manually when needed.

There are no changes you need to do to use the active prop to control the state of the Dropdown, but be aware that it's a breaking change if you were relying on the previous behavior as it's no longer supported.

Until now the NavTabBarItem would forward the href prop to RouterLink to when you were using a router.

This was not happening anymore on many other navigation components since version 9 and now, since NavTabBarItem is using Button component under the hood, it does not do it automatically anymore.

Honeycomb React 9:

<BrowserRouter>
  <NavTabBar aria-label='Main Menu'>
    <NavTabBarItem href="/search" RouterLink={NavLink} InlineIcon={IconMagnifier} InlineIconActive={IconMagnifierSolid}>
      Search
    </NavTabBarItem>
    <NavTabBarItem href="/offers" RouterLink={NavLink} InlineIcon={IconOffer} InlineIconActive={IconOfferSolid}>
      Offers
    </NavTabBarItem>
    <NavTabBarItem href="/my-rides" RouterLink={NavLink} InlineIcon={IconCar} InlineIconActive={IconCarSolid}>
      My rides
    </NavTabBarItem>
    <NavTabBarItem href="/more" RouterLink={NavLink} InlineIcon={IconInfo} InlineIconActive={IconInfoSolid}>
      More
    </NavTabBarItem>
  </NavTabBar>
</BrowserRouter>

Honeycomb React 10:

In this example we would be using react-router-dom@6 NavLink as RouterLink, and it accepts "to" route prop.

Some other libraries might have different props, so check your chosen library documentation for that.

<BrowserRouter>
  <NavTabBar aria-label='Main Menu' style={{ position: 'relative' }}>
    <NavTabBarItem to="/search" RouterLink={NavLink} InlineIcon={IconMagnifier} InlineIconActive={IconMagnifierSolid}>
      Search
    </NavTabBarItem>
    <NavTabBarItem to="/offers" RouterLink={NavLink} InlineIcon={IconOffer} InlineIconActive={IconOfferSolid}>
      Offers
    </NavTabBarItem>
    <NavTabBarItem to="/my-rides" RouterLink={NavLink} InlineIcon={IconCar} InlineIconActive={IconCarSolid}>
      My rides
    </NavTabBarItem>
    <NavTabBarItem to="/more" RouterLink={NavLink} InlineIcon={IconInfo} InlineIconActive={IconInfoSolid}>
      More
    </NavTabBarItem>
  </NavTabBar>
</BrowserRouter>

Quantity props minusBtnTitle and plusBtnTitle removed

You should pass the aria-label and/or title props via the minusBtnProps and plusBtnProps rest props.

The rest props no longer set a default value in english for these labels, making them required props from now on.

Honeycomb React 9:

<Quantity
  label="Passengers "
  id="quantity-passenger"
  name="quantity-passenger"
  value={15}
  min={10}
  max={20}
  info="min 10 / max 20"
  minusBtnTitle="Remove passenger"
  plusBtnTitle="Add passenger"
/>

Honeycomb React 10:

<Quantity
  label="Passengers "
  id="quantity-passenger"
  name="quantity-passenger"
  value={15}
  min={10}
  max={20}
  info="min 10 / max 20"
  minusBtnProps={{ 'aria-label': 'Remove passenger' }}
  plusBtnProps={{ 'aria-label': 'Add passenger' }}
/>

Tag outlined prop removed

The outlined prop is now a Tag display option.

Honeycomb React 9:

<Tag outlined>My outlined tag</Tag>

Honeycomb React 10:

<Tag display="outlined">My outliend tag</Tag>

Renamed themes

The default and dark themes were renamed and you will need to adjust them on the ThemeWrapper, HeaderBrand and SidebarBrand components, as well as anywhere else you refer to them.

The themeDefault file is renamed to themeFlix and the theme name is flix.

The themeDark file is renamed to themeFlixDark and its theme name is flix-dark.

Honeycomb React 9:

import { ThemeWrapper, themeDefault, themeDark } from '@flixbus/honeycomb-react';

const [theme, setTheme] = React.useState('default');

<ThemeWrapper theme={theme} themes={{ default: themeDefault, dark: themeDark }}>
  <Header>
    <HeaderBrand
      alt="Logo"
      href="/"
      src={[
        { theme: 'default', src: "light-logo.svg" },
        { theme: 'dark', src: "dark-logo.svg" },
      ]}
      theme={theme}
    />
  </Header>
</ThemeWrapper>

Honeycomb React 10:

import { ThemeWrapper, themeFlix, themeFlixDark } from '@flixbus/honeycomb-react';

const [theme, setTheme] = React.useState('flix');

<ThemeWrapper theme={theme} themes={{ 'flix': themeFlix, 'flix-dark': themeFlixDark }}>
  <Header>
    <HeaderBrand
      alt="Logo"
      href="/"
      src={[
        { theme: 'flix', src: "light-logo.svg" },
        { theme: 'flix-dark', src: "dark-logo.svg" },
      ]}
      theme={theme}
    />
  </Header>
</ThemeWrapper>

Final considerations

If you're interested in the full list of changes check the 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 9. We'll gladly assist you as promptly as possible.

Happy coding! 🍯