Upgrading from V1 to V2

​

Provider theme

In V2, we have a fully-fledged theming system that allows you to customize every token in our design system. If you used V1’s theme colors, you can convert them to V2 like so:

// V1
<FrigadeProvider
  config={{
    defaultAppearance: {
      theme: {
        colorText: '#3d3d3d',
        colorTextSecondary: '#494949',
        colorTextOnPrimaryBackground: '#fff',
        colorPrimary: '#2956B5',
        colorBorder: '#E2E2E2',
      }
    }
  }}
>

// V2
<Frigade.Provider
  theme={{
    colors: {
      neutral: {
        // Replaces colorBorder
        border: '#E2E2E2',

        // Replaces colorText
        foreground: '#3d3d3d'
      },
      primary: {
        // Replaces colorTextOnPrimaryBackground
        foreground: '#fff',

        // Replaces colorPrimary
        surface: '#2956B5'
      }
    }
  }}
>

Note that colorTextSecondary was deprecated and doesn’t have a V2 equivalent.

​

Global style overrides

We no longer wrap descendents of the Frigade Provider in a container element, as we found that for most users adding an extra wrapper to the DOM at (or near) the top was more disruptive than helpful.

As a result, we no longer support the config.defaultAppearance.styleOverrides property that existed on FrigadeProvider in V1.

We now recommend that you author global styles using your existing CSS workflow.

​

Component style overrides

We use Emotion’s CSS prop in V2, so you can write any CSS that Emotion supports directly on any component:

// V1
<FrigadeAnnouncement
  appearance={{
    styleOverrides: {
      'button': {
        backgroundColor: 'fuchsia'
      }
    }
  }}
/>

// V2
<Frigade.Announcement
  css={{
    '.fr-button-primary': {
      backgroundColor: 'fuchsia',

      '&:hover': {
        backgroundColor: 'lilac'
      }
    },
  }}
/>

​

Important difference between V1 styleOverrides and V2 css props:

The V2 css prop accepts a style object, which means that if you’re using V1’s styleOverrides prop to pass Tailwind classNames through to sub-components, you’ll need to update your code to pass Tailwind’s arbitrary variants, e.g.:

// V1
<FrigadeAnnouncement
  appearance={{
    styleOverrides: {
      'button': 'w-full'
    }
  }}
/>

// V2
<Frigade.Announcement
  className="[&_button]:w-full"
/>

​

Navigation

The navigate prop is now a top-level prop on Provider, it is no longer nested inside config:

// V1
<FrigadeProvider
  config={{
    navigate: (url, target): void => {
      if (target === "_blank") {
        window.open(url, "_blank");
      } else {
        router.push(url);
      }
    },
  }}
>

// V2
<Frigade.Provider
  navigate={(url, target) => {
    if (target === "_blank") {
      window.open(url, "_blank");
    } else {
      router.push(url);
    }
  }}
>

​

Event handlers

The catch-all onButtonClick prop has been replaced with individual handlers for onPrimary, onSecondary, onDismiss, and onComplete.

Full definitions of each handler are available in our component docs

​

Hooks

Our SDK hooks now expose objects from our JS SDK directly, for example useFlow returns an instance of Flow, which you can operate directly on as you would in the JS SDK.