Skip to main contentSkip to site searchSkip to component search
Honeycomb

Honeycomb React 13 migration guide

Upgrade package

First upgrade to the latest version of Honeycomb-React:

npm install @flixbus/honeycomb-react@latest

Then proceed to the breaking changes.

Breaking Changes

DescriptionList and children components renamed

The DescriptionList component and related children components have been renamed to align them with other components naming pattern:

  • DescriptionList -> ListDescription
  • DescriptionTerm -> ListDescriptionTerm
  • DescriptionDetails -> ListDescriptionDetails

Simply rename them and they should continue working as in previous versions.

Before:

import { DescriptionList, DescriptionTerm, DescriptionDetails } from '@flixbus/honeycomb-react';

<DescriptionList>
  <DescriptionTerm>
    Beastman of Farum Azula
  </DescriptionTerm>
  <DescriptionDetails>
    The Beastman of Farum Azula is a boss that can be found at the Groveside Cave and Dragonbarrow Cave.
  </DescriptionDetails>
  <DescriptionTerm>
    Bell Bearing Hunter
  </DescriptionTerm>
  <DescriptionDetails>
    Bell Bearing Hunter is a slow-paced creature with a menacing prescence and long distance melee attacks.
  </DescriptionDetails>
  <DescriptionTerm>
    Crucible Knight
  </DescriptionTerm>
  <DescriptionDetails>
    Crucible Knight is a big warrior with a large shield and a greatsword guarding the other realm and can be found in Stormhill Evergaol when players interact with the center of the platform and cross to an Arena where Bossfights take place.
  </DescriptionDetails>
</DescriptionList>

Now, simply rename the components as previously specified:

import { ListDescription, ListDescriptionTerm, ListDescriptionDetails } from '@flixbus/honeycomb-react';

<ListDescription>
  <ListDescriptionTerm>
    Beastman of Farum Azula
  </ListDescriptionTerm>
  <ListDescriptionDetails>
    The Beastman of Farum Azula is a boss that can be found at the Groveside Cave and Dragonbarrow Cave.
  </ListDescriptionDetails>
  <ListDescriptionTerm>
    Bell Bearing Hunter
  </ListDescriptionTerm>
  <ListDescriptionDetails>
    Bell Bearing Hunter is a slow-paced creature with a menacing prescence and long distance melee attacks.
  </ListDescriptionDetails>
  <ListDescriptionTerm>
    Crucible Knight
  </ListDescriptionTerm>
  <ListDescriptionDetails>
    Crucible Knight is a big warrior with a large shield and a greatsword guarding the other realm and can be found in Stormhill Evergaol when players interact with the center of the platform and cross to an Arena where Bossfights take place.
  </ListDescriptionDetails>
</ListDescription>

ProgressTrackerItem prop role is now changing the role of the outer li element

Before any role assigned to the ProgressTrackerItem was used on the inner a element. Now it's being used on the outer li element. If you still want to assign a role to the ProgressTrackerItem inner a element, you need to use the new prop linkRole.

For example, if before you had assigned a role to the ProgressTrackerItem like this:

<ProgressTrackerItem role="button" ... />

Now, you you have to specify that the role should be assigned to the link element:

<ProgressTrackerItem linkRole="button" ... />

This is to ensure that the role prop is correctly applied to the outer li element, the same way as for NavItem.

Breaking changes for contributors

Node.js version required upgraded from 18 to 22

If you use nvm, when you clone the project make sure to run the following command before installing dependencies:

nvm use

If you already had the project configured, we recommend you uninstall the dependencies, upgrade Node version and then install dependencies again, to avoid any weird conflicts.