This migration guide focuses on the process of migrating from Orbit v6.4 to v7.0, as some breaking changes were introduced. With this guide we aim to walkthrough all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortless.

The createToastPromise function now receives three arguments. The first argument is the promise. The second one is an object with the different possible states (loading, success or error) and their corresponding messages. The third one is optional and controls the icon that is displayed on the toast of each state (or all). In fact, the icon property was not working at all in the past. The breaking change was introduced to allow the icon to work. If no icon was intended to be displayed in the past, this change is actually not a breaking change, as the third argument is optional and the function will work just the same with just two arguments.

Before:

createPromiseToast(promise, {
  icon: <Notification />,
  loading: "...Loading",
  success: "Got the data",
  error: "Error when fetching",
});

Now:

// This will display the icon Notification on the success toast
createPromiseToast(
  promise,
  {
    loading: "...Loading",
    success: "Got the data",
    error: "Error when fetching",
  },
  {
    success: {
      icon: <Notification />,
    },
  },
);
// This will display the icon Notification on all toasts
createPromiseToast(
  promise,
  {
    loading: "...Loading",
    success: "Got the data",
    error: "Error when fetching",
  },
  {
    icon: <Notification />,
  },
);

The borderColor prop was removed. The badge is no longer expected to have any border. No action is required, but the prop won’t have any effect if it is still used.

The values accepted by the type prop have changed. The previous -Inverted variant of a color is now the default variant of the same color. The previous default variant of one color is now the -Subtle variant of the same color.

Before

<Badge type="neutral">neutral (default)</Badge>
<Badge type="infoInverted">infoInverted</Badge>
<Badge type="info">info</Badge>
<Badge type="successInverted">success</Badge>
<Badge type="success">success</Badge>
<Badge type="warningInverted">warning</Badge>
<Badge type="warning">warning</Badge>
<Badge type="criticalInverted">critical</Badge>
<Badge type="critical">critical</Badge>
<Badge type="dark">dark</Badge>
<Badge type="white">white</Badge>

Now

<Badge type="neutral">neutral (default)</Badge>
<Badge type="info">info</Badge>
<Badge type="infoSubtle">infoSubtle</Badge>
<Badge type="success">success</Badge>
<Badge type="successSubtle">successSubtle</Badge>
<Badge type="warning">warning</Badge>
<Badge type="warningSubtle">warningSubtle</Badge>
<Badge type="critical">critical</Badge>
<Badge type="criticalSubtle">criticalSubtle</Badge>
<Badge type="dark">dark</Badge>
<Badge type="white">white</Badge>

On devices bigger than largeMobile, the property flex: none was applied. A wrapper may now be needed in some usages.

Before

<ModalFooter flex={flex}>
  <Button fullWidth>Continue to Payment</Button>
</ModalFooter>

Now

<ModalFooter flex={flex}>
  <Box justify="end" display="flex">
    <Button>Continue to Payment</Button>
  </Box>
</ModalFooter>

The size prop was removed. The previous size="normal" size is now the only one available.

The size prop was removed. The previous size="normal" size is now the only one available.

Some tokens were removed: marginButtonIconSmall, marginButtonIconNormal and marginButtonIconLarge. They were all replaced by a new single token (marginButtonIcon), with a single value, since it is no longer expected to change with the button size.

Orbit no longer maintains any dictionary nor translations. This means that components that were providing translated strings will now require those strings to be provided and translated on the app side. Components Translate and Dictionary were removed, as well as the hooks useTranslate and useDictionary. The OrbitProvider component no longer accepts the dictionary prop. Codemods are available and should automate the affected components to use the correct translation keys. There are two codemods available: one using the Translate component from nitro and other that uses the react-intl library for translations.

The following components were affected:

New props were added: labelPrev, labelNext and labelProgress. They are all required and expect the translated labels for the previous and next buttons, as well as the label that presents the progress of the pages.

New prop added: labelClose. It expects the translated value of the button used to close the Popover on mobile. It has a default value for English ("Close").

New prop added: labelClose. It expects the translated value of the button used to close the Tooltip on mobile. It has a default value for English ("Close").

New prop added: labelClose. It is required and expects the translated value of the button used to close the MobileDialogPrimitive. It has a default value for English ("Close").

New props were added: firstSectionLabel, firstActionLabel and feedbackLabel. They expect the translated values of the texts on the select elements and button. They have default values for English ("Jump to section", "Common actions" and "Send feedback", respectively).

New prop added: labelHide. It expects the translated value of the title attribute that is present on the close button of the Drawer. It has a default value for English ("Hide").

New prop added: labelClose. It expects the translated value of the title attribute that is present on the close button, when the Alert is closable.

New prop added: labelClose. It expects the translated value of the title attribute that is present on the close button, when the Card is closable. It has a default value for English ("Close").

New prop added: labelClose. It expects the translated value of the title attribute that is present on the close button of the Modal. It has a default value for English ("Close").

The goBackTitle now accepts a ReactNode element. It expects the translated value for the Back button that is displayed on smaller viewports. It has a default value for English ("Back").

New prop added: openTitle. It expects the translated value of the title attribute that is present on the open menu button of the NavigationBar, placed on the right. It has a default value for English ("Open navigation menu").

New props were added: labelClose and labelProgress. They expect the translated labels for the previous and next buttons, as well as the label that presents the progress of the pages. labelClose has a default value for English ("Close").

The icon prop is now deprecated. If needed, the icon can still be used, but it should be part of the content of the card (part of the children prop).