Skip to main content

v10 Migration Guide

The new components available are a complete rewrite and therefore some of the props have changed.

You will need to reference the docs for each component to see how best to migrate each component

info

The new components are less opinionated and gives you better flexibility but this means that you will now be required to use tailwind and add your own className to your components to get the required styling.

Components​

Where possible a guide for each component is included below to ease the transition from v10

Alert​

Convert boolean props to variant, eg. info should convert to variant="information"

// v10
<Alert info />

// New
<Alert variant="information" />

Convert the margin prop to the equivalent Tailwind classes

// v10
<Alert margin={{ bottom: 3 }} />

// New
<Alert className="mb-3" />

Remove heading prop use the value inside a new <h2> element inside the <Alert>. Set heading classes with Tailwind.

// v10
<Alert heading="heading" />

// New
<Alert>
  <h2 className="mb-3">Heading</h2>
</Alert>

Badge​

Convert boolean props to variant, eg. info should convert to variant="information".

// v10
<Badge info />

// New
<Badge variant="information" />

numbered prop should convert to rounded prop

// v10
<Badge numbered />

// New
<Badge rounded />

ariaLabel prop should use the native DOM attribute aria-label

// v10
<Badge ariaLabel="Message" />

// New
<Badge aria-label="Message" />

Convert u-font-- classes to Tailwind font size equivalent classes

// v10
<Badge className="u-font--22" />

// New
<Badge className="text-[22px]" />

noRole prop can be removed, role in the new component is flipped so that you have to define it to add it

// v10
<Badge noRole />

// New
<Badge />

Box​

Convert to a <div> with classes replacing the component

// v10
<Box></Box>

// New
<div></div>

Convert the margin prop to the equivalent Tailwind classes

// v10
<Box margin={{ bottom: 3 }}

// New
<div className="mb-3">

Convert the padding prop to the equivalent Tailwind classes

// v10
<Box padding={{ bottom: 3 }}

// New
<div className="pb-3">

Convert textAlign prop to corresponding Tailwind classes, eg. textAlign="center" to text-center

// v10
<Box textAlign="center" />

// New
<div className="text-center">

Convert alignSelf to corresponding Tailwind classes, eg. alignSelf="center" to self-center

// v10
<Box alignSelf="center" />

// New
<div className="self-center">

Convert width prop, this is responsive so will need multiple TW classes:

// v10
<Box width={{ xs: 100, sm: 50 }}>

// New
<div className="w-full sm:w-1/4">

Button Group​

Convert the margin prop to the equivalent Tailwind classes

// v10
<ButtonGroup margin={{ bottom: 3 }} />

// New
<ButtonGroup className="mb-3" />

Convert boolean maxWidth prop to the Tailwind class flex-wrap and for the maxWidth="xs" use flex-wrap sm:flex-nowrap

// v10
<ButtonGroup maxWidth="xs" />

// New
<ButtonGroup className="flex-wrap sm:flex-nowrap" />

Boolean equalWidth and equalWidth="xs" needs to remove the prop and update the classes of the containing buttons with Tailwind classes to w-1/2 and w-1/2 sm:w-auto respectively to each Button

// v10
<ButtonGroup equalWidth="xs" />

// New
<ButtonGroup className="w-1/2 sm:w-auto" />

prev/next style example is achieved by reversing the order for mobile with css classes, convert the className="u-flex--column-reverse u-flex-sm--row" to className="flex-col-reverse justify-end flex-wrap md:flex-row md:justify-start"

// v10
<ButtonGroup className="u-flex--column-reverse u-flex-sm--row" />

// New
<ButtonGroup className="flex-col-reverse justify-end flex-wrap md:flex-row md:justify-start" />

Button​

  • Convert the old boolean props to equivalent variant props eg. <Button primary> to <Button variant="primary">
  • Convert the margin prop to the equivalent Tailwind classes
  • Convert maxWidth and maxWidth="xs" props to className="w-full" and className="w-full sm:w-fit" respectively
  • Convert loading prop to use the "Button Loading State" example

Checkbox​

  • Convert the values prop to options
  • Convert boolean inline prop to variant="inline"

Divider​

  • Remove color prop
  • Convert the margin prop to the equivalent Tailwind classes
  • Convert type prop to variant, this is literally a prop name change as the values are identical

Fieldset​

  • Convert to <fieldset> and insert a <legend> using the <Fieldset legend> prop value.
  • Use the id prop on the <fieldset id="...">
  • Convert labelHidden prop to TW class on the legend , eg. <fieldset><legend className="sr-only">

Flex​

Easy to convert using Tailwind classes for all of the props:

Form​

  • Convert to dom element <form>
  • Convert noMargin prop to TW class mar-0

Heading​

  • Convert the margin prop to the equivalent Tailwind classes
  • Convert color prop to Tailwind classes, eg. color="primary" to className="text-primary"
  • Convert fontSize prop to Tailwind classes, eg. fontSize="24" to className="text-600" however, there may be some font sizes that do not correspond to new sizing and may have to map to other sizes
  • Convert textAlign prop to corresponding Tailwind classes, eg. textAlign="center" to text-center
  • Convert size prop, this is used to set the Heading level so can be used to create the correct element, eg. <Heading size="2" fontSize="18"> would become <h2 className="text-500">
  • Convert alignItems to Tailwind class eg, alignItems="center" to className="items-center"
  • Convert hidden prop which is used per breakpoint to Tailwind classes, hidden="sm" to sm:max-md:hidden
  • Convert visible prop again per breakpoint, visible="sm" to hidden sm:max-md:visible

Icon​

  • Convert ariaLabel to proper dom attribute aria-label=""
  • Convert color, fontSize, margin, hidden and visible props as above
  • Remove ariaHidden
  • Remove tabIndex

Image​

  • Convert to dom element <img>
  • Convert the margin prop to the equivalent Tailwind classes
  • Convert height & width props to <img height="Ypx" width="Xpx">
  • Convert maxHeight to <img style="max-height: Ypx">
  • Convert fluid prop to TW classes: max-w-full h-auto"
  • Convert print="none" to TW class className="print:hidden"
  • Convert print="visible" to className="visible"

Input​

  • Convert ariaLabel and ariaControls props to native attributes aria-label and aria-controls

InputGroup​

  • Convert ariaLabel prop to native dom attribute aria-label
  • Remove loading prop, use the Button Loading State example

LicencePlate​

Use the Number Plate example

Label/Legend​

  • Convert the margin prop to the equivalent Tailwind classes
  • Convert the hidden prop to TW class className="sr-only"
  • Convert boolean variants such as 'primary' to the variant prop equivalent eg. variant="primary"
  • Convert button prop to variant equivalents eg. button="primaryOutline" becomes variant="buttonPrimaryOutline"
  • Convert alignTop to TW class: className="items-start"
  • Convert white prop to variant="inverse"
  • Convert noWrap prop to TW class: className="whitespace-nowrap"
  • Convert maxWidth prop to TW classes, maxWidth === className="w-full", maxWidth="xs" === className="xs:max-sm:w-full" (just xs as per v10 prop)

List​

This may need a multi-component approach eg:

  • Convert <List> to <ul> with appropriate TW classes
  • Convert <ListItem> to <li> with appropriate TW classes
  • Convert <ListItemContent> to <div> with appropriate TW classes

<List> props to TW classes:

  • inline to className="flex"
  • bullet to className="list-disc"
  • numbered to className="list-decimal"
  • border to className="divide-y"

<ListItem> props to TW classes:

  • Convert the margin prop to the equivalent Tailwind classes
  • Convert the padding prop to the equivalent Tailwind classes

<ListItemContent> props to classes:

  • spaceBetween to justify-between
  • column to flex-col
  • alignItems="start|center|end" to items-start|items-center|items-end
  • verticalCenter to items-center

Main​

  • Convert to native <main> dom element
  • Convert the margin prop to the equivalent Tailwind classes
  • Convert the padding prop to the equivalent Tailwind classes
  • Convert maxHeight to TW classes: className="flex grow"
  • Convert column to TW: className="flex flex-col"

Price​

  • Convert fontSize prop to Tailwind classes, eg. fontSize="24" to className="text-600"
  • Convert the margin prop to the equivalent Tailwind classes
  • Remove ignoreDecimals, roundAmount and hideDecimals props, new component simply displays the amount value

Radio​

  • Convert values prop name to options

RadioBlock​

  • Convert values prop name to options
  • Convert the margin prop to the equivalent Tailwind classes
  • Convert column prop to TW classes, note the new version only allows for columns to display in a small and up breakpoint, xs will stack. The only options available are 2 - 6 so if the largest breakpoint value is > 6, use 6
<RadioBlock columns={{ xs: 6, md: 6 , lg: 12 }}>

// becomes

<RadioBlock cols="6">

SegmentedControl​

  • Convert values prop name to options

Message​

  • Convert boolean variants to the variant prop, eg. info to variant="information"
  • Convert the margin prop to the equivalent Tailwind classes

Select​

  • Convert values prop name to options

Spinner​

  • Convert the margin prop to the equivalent Tailwind classes
  • Convert white prop to variant="inverse"
  • Remove brand prop

Text​

  • The <Text> component does not exist in the new Chroma components and need to be convert to a <p> however there are a number of helper props that will need to be converted into the equivalent Tailwind classes
  • Convert color prop to Tailwind classes, eg. color="primary" to className="text-primary"
  • Convert fontSize prop to Tailwind classes, eg. fontSize="24" to className="text-600" however, there may be some font sizes that do not correspond to new sizing and may have to map to other sizes
  • Convert weight prop to corresponding Tailwind classes, eg. weight={700} to font-700
  • Convert textAlign prop to corresponding Tailwind classes, eg. textAlign="center" to text-center however, this prop is responsive so will also need to be able to convert the following:
<Text textAlign={{ xs: 'center', sm: 'left' }}>

// to

<p className="text-center sm:text-left">
  • Convert boolean inline prop to Tailwind class className="inline"
  • Convert the margin prop to the equivalent Tailwind classes