Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.5.2
@intility/bifrost-react@6.12.0
@intility/bifrost-react-datepicker@6.2.4
@intility/bifrost-react-select@6.1.0
/
/
/
/
Upgrade to Bifrost 5.0

Upgrade to Bifrost 5.0

This migration guide should help you upgrade @intility/bifrost-react from 4.x to 5.x. If you're currently on 3.x (or older) please see upgrade to 4 first.

Installation

Update the packages used in your project:

npm i @intility/bifrost-react@latest
npm i @intility/bifrost-react-select@latest
npm i @intility/bifrost-react-datepicker@latest

Like the version number suggests, there are some breaking changes you'll need to address:

Components

Previously we depended on the @tippyjs/reactpackage, but it has since been abandoned and does not support react>18. We've rewritten the dropdown component to internally use @floating-ui/react instead, which means any prop forwarded to the old <Tippy> will no longer work. This includes (but is not limited to):

onClickOutside prop

// old
<Dropdown visible={visibleState} onClickOutside={() => setVisibleState(false)} ... />
// new
<Dropdown visible={visibleState} onHide={() => setVisibleState(false)} ... />

Popover API and DOM structure

The new <Dropdown> and <Tooltip> components use the Popover Web API to render in the top layer stack. If multiple popovers are open, the last one opened will be on top.

This means we no longer need to worry about z-index or its stacking context. The <Tooltip> in 4.x attached its DOM node at the root of <body> to work around these issues, but the new implementation place them wherever you put the <Tooltip> component in your react tree, as you would expect.

A side-effect is that <Tooltip> content will now inherit styling from parent element. For text-only tooltips this should be fine, but if you have tooltips with more complex content, make sure to test after updating and tweak your styling accordingly.

The old implementation of <Dropdown> only allowed one dropdown to be open at a time, but the new implementation allows nested dropdowns.

variant prop removed from <Dropdown>

Does nothing, only a single variant since 4.5

<Spinner> component removed

Deprecated since 4.15. Use <Icon.Spinner> instead.

The new default size follows current font-size just like any other <Icon>, while the old spinner had a default size of 64.

<Icon.Spinner size={64} /> // equivalent to `<Spinner />`
<Icon.Spinner /> // equivalent to `<Spinner size="1em" />`

If you need a fullscreen overlay, look at our <Modal> loading spinner examples

theme prop removed from <Bifrost>

The <Bifrost theme> prop was deprecated in 4.x and has now been removed. Use color mode css class names instead.

<html class="bf-darkmode">

<Button> props changed

icon and iconRight removed

Deprecated since 4.7 - place <Icon> as child element instead:

// old
<Button icon={faHome}>Left icon</Button>
<Button icon={faHome} rightIcon>Right icon</Button>
// new
<Button><Icon icon={faHome} marginRight />Left icon</Button>
<Button>Right icon<Icon icon={faHome} marginLeft /></Button>

"outline" value removed for variant prop

Does nothing, deprecated since 4.7

hideCircle prop removed from <Nav.Item>

Does nothing, deprecated since 4.2

Multiple props removed from <Nav>

Removed appName, collapsedAppName, logoHref and logoOnClick from <Nav>, which have been deprecated since 4.2. Same goes for <Nav.Side> and <Nav.Top> as well.

Use logo instead, which covers all the use cases for the above props.

To get a default logo graphic, with no link:

<Nav logo="App Name" />
// -- or --
<Nav logo={<Nav.Logo>App Name</Nav.Logo>} />

Or better; a clickable link with a custom logo. You probably want to use <Link> from your router library in place of <a> in this example:

<Nav
  logo={
    <a href="/" className="bf-neutral-link">
      <Nav.Logo logo="customLogo.svg">App Name</Nav.Logo>
    </a>
  }
/>

Minor <FloatingMessage> refactor

<FloatingMessage> has been refactored to use Popover Web API. This means we no longer need to manage z-index, so we've removed the extra <div>.

No action is needed unless you're using forwarded props like ref, className or style or otherwise rely on your layout to work with the element. If so, you can reintroduce your own wrapper:

// no change needed
<FloatingMessage>

// no change needed
<FloatingMessage timeout={10000} max={1} top left>

// className has been removed
<FloatingMessage className="my-class">
  // your app content
</FloatingMessage>
// move it to a wrapper div
<FloatingMessage>
  <div className="my-class">
    // your app content
  </div>
</FloatingMessage>

<SlideDown> content rendering

<SlideDown> no longer renders its children if open is false (and is not mid-animation). This should not affect most use-cases, but if the height of its children rely on fetching some data, you may want to preload the data before toggling it open.

This change also affects components that use <SlideDown> internally:

  • <Accordion.Item>
  • <Nav.Group> when used in sidebar (non-collapsed)
  • <Message expandable> expandable message
  • <Table.Row content> expandable table row

If you need to render the content even when the <SlideDown> is closed, use the new eager prop:

<SlideDown eager isOpen={false}>
  <p>Content that is always rendered even when visually hidden</p>
</SlideDown>

<DatePicker> dependency updated

We've bumped the react-datepicker dependency for @intility/bifrost-react-datepicker from 6.9.0 to 8.1.0, which includes a typescript overhaul and some breaking changes. Hopefully you won't notice any difference, but if you do, please refer to the react-datepicker release notes

Hooks

useTheme hook removed

useTheme() hook has been removed. It was a legacy hook that isn't used in any of our examples or documentation.

Also see CSS color docs
Dark and light mode CSS classes
usePrefersColorMode()
Detect user preferred color mode

useApplyTheme hook renamed

useApplyTheme(theme: Theme) hook renamed to useApplyColorMode(mode: ColorMode)

In order to avoid confusion between color mode (light/dark) and color theme (teal/purple/pink/yellow). Otherwise works exactly the same as before.

If you want to apply a theme you can use the color theme class names, or <Box theme>

useFloatingMessage hook export moved

The useFloatingMessage hook is no longer exported from @intility/bifrost-react/FloatingMessage file, instead use:

import useFloatingMessage from "@intility/bifrost-react/hooks/useFloatingMessage";

Formatting utilities

dateFormat() and timeFormat() functions have been deprecated since 4.0, and are removed in 5.0.

Use the <FormatDate> component or the useDateTimeFormatter() hook instead.

TypeScript

Theme renamed to ColorMode for clarity. Equivalent to "light" | "dark" | "system".

CSS

Removed external-bundle.css

The @intility/bifrost-react/external-bundle.css file has been removed. Previously contained styling from tippy, which we no longer use.

If you have any references to it, remove them and you're good! :)

Removed css variables

  • --bfc-theme-c-base-3
  • --bfc-theme-gradient and --bfc-theme-grad
    • use linear-gradient(90deg, var(--bfc-theme-3), var(--bfc-theme-1))
  • --bfc-theme-hs (internal)
  • --bfc-base-hs (internal)

Removed css classes

Removed deprecated class names:

  • .bf-button-left-icon
  • .bf-button-right-icon
  • .bf-small-it-logo
  • .bf-full-intility-logo
  • .bf-nav-top-appname
  • .bf-nav-side-appname
  • .bf-nav-group-item-circle-wrapper
  • .bf-nav-group-item-circle
  • .bf-nav-group-item-dot-circle
  • .bf-spinner-container
  • .bf-spinner-color
  • .bf-spinner-label
  • .bf-overlay (used by <Spinner>)

See CSS docs for the relevant components for correct usage.

Spacing variables

(soft breaking) --bfs* variables are now defined in px instead of rem. This shouldn't have any impact unless people use a custom font-size setting in their browser.

Light/dark mode picker

"Light mode" has been moved to the first option (previously "Dark mode" was first) in our examples. Ideally all apps should have the same order of options:

  1. Light
  2. Dark
  3. System
Also see /react/examples/colorModePicker
Color mode picker
Also see /react/examples/profilePicture
User profile dropdown