Migration

When you are migration from the original WFP UI-Kit to Bridge you will need to consider the following breaking changes:

Strategies for Migration

1. Full migration to Bridge 💨

This approach is recommended for new projects or projects that are in the early stages of development.

2. Incremental migration to Bridge 🐌

Recommended for existing projects that are already using the original WFP UI-Kit. It allows you to migrate to Bridge incrementally, one component at a time and allows you to use the original WFP UI-Kit and Bridge together in the same project.

Example in Code Sandbox

Breaking Changes 💥

Design changes

Packages renamed

The @wfp/ui package has been split up into multiple packages like @wfp/react and @wfp/styles.

// Before
import { Component } from "@wfp/ui";

// After: Replace @wfp/ui with @wfp/react for React components
import { Component } from "@wfp/react";

// Before
@import '@wfp/react/scss/globals/scss/styles.scss';

// After: importing styles
becomes `@import '@wfp/styles';

More information about importing styles can be found here.

Icon component (also affects Pictograms)

//Before
<Icon icon={iconName} />;

// After: Each Icon is now a separate component and can be imported directly from the package:
import { IconName } from "@wfp/icons-react";
<IconName />;

Make sure to look at the usage Icons documentation.

Renamed variables

• Multiple variables have been renamed. We are now using a Token system. $ui-01 becomes $layer to provide better readability. A full list can be found here.

React components inputRef

• inputRef is deprecated. Use ref instead.

// Before
<Input inputRef={yourRef} />

// After
<Input ref={yourRef} />

Missing components

Some components are not yet available in Bridge.

• ContentSwitcher

Components with breaking changes

Button

Does no longer accept kind = danger--primary, danger--secondary or tertiary.

// Before
<Button kind="danger--primary" />

// After
<Button kind="danger" />

// Before
<Button kind="tertiary" />

// After
<Button kind="secondary" />

MainNavigation

Does no longer accept a function inside <MainNavigation /> to handle the click event. Instead, use the useMainNavigation hook instead. This is to make the component more flexible and to allow for better customization.

// Before
<MainNavigation>
  {({ onClick }) => (
    <a onClick={toggleMenu}>Toogle Menu</a>
  )}
</MainNavigation>

// After
<MainNavigation>
<YourComponent />
</MainNavigation>

// Inside YourComponent
function YourComponent() {
    const { toggleMenu } = useMainNavigation();
    return (
        <a onClick={toggleMenu}>Toogle Menu</a>
    )
}

Footer

TODO: Add breaking changes