Migration Guide Chroma React (v10)

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 Tailwind 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">.

// v10
<Button primary>

// New
<Button variant="primary">

Convert the margin prop to the equivalent Tailwind classes.

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

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

Convert maxWidth and maxWidth="xs" props to className="w-full" and className="w-full sm:w-fit" respectively.

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

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

Convert loading prop to use the "Button Loading State" example.

Checkbox

Convert the values prop to options.

// v10
<Checkbox
  name="checkbox"
  values={[
    { label: 'Yes', value: 'Yes' },
    { label: 'No', value: 'No' },
  ]}
  value={value}
  onChange={onChange}
/>

// New
<Checkbox
  name="checkbox"
  options={[
    { label: "Yes", value: "Yes" },
    { label: "No", value: "No" },
  ]}
  value={value}
  onChange={onChange}
/>

Convert boolean inline prop to variant="inline".

// v10
<Checkbox
  name="checkbox"
  inline
  values={[
    { label: 'Yes', value: 'Yes' },
    { label: 'No', value: 'No' },
  ]}
  value={value}
  onChange={onChange}
/>

// New
<Checkbox
  name="checkbox"
  variant="inline"
  options={[
    { label: "Yes", value: "Yes" },
    { label: "No", value: "No" },
  ]}
  value={value}
  onChange={onChange}
/>

Divider

Remove color prop and use className instead.

// v10
<Divider color="white" />

// New
<Divider className="border-white" />

Convert the margin prop to the equivalent Tailwind classes.

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

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

Convert type prop to variant, this is literally a prop name change as the values are identical.

// v10
<Divider type="dotted" />

// New
<Button variant="dotted" />

Fieldset

Has been deprecated and instead use the <fieldset> element.

Flex Props

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

flexGrow = className="grow" or "grow-0"
flexDirection = className="flex-col" or "flex-row"
flexWrap = className="flex-wrap"
justifyContent = https://tailwindcss.com/docs/justify-content
alignContent = https://tailwindcss.com/docs/align-content
alignItems = https://tailwindcss.com/docs/align-items
Convert the margin prop to the equivalent Tailwind classes
Convert height prop from u-height-- to a spacing var, eg. h-300

Form

Convert to dom element <form>.

// v10
<Form>

// New
<form>

Convert noMargin prop to Tailwind class mb-0.

// v10
<Form noMargin>

// New
<form className="mb-0">

Heading

The heading component has been deprecated.

Convert the margin prop to the equivalent Tailwind classes.

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

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

Convert color prop to Tailwind classes, eg. color="primary" to className="text-primary".

// v10
<Heading color="primary">

// New
<h1 className="text-primary">

Convert fontSize prop to Tailwind classes, eg. fontSize="24" to className="text-[24px]" however, there may be some font sizes that do not correspond to new sizing and may have to map to other sizes.

// v10
<Heading fontSize={24}>

// New
<h1 className="text-[24px]">

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

// v10
<Heading textAlign="center">

// New
<h1 className="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"> would become <h2>.

// v10
<Heading size="1">
<Heading size="2">
<Heading size="3">

// New
<h1>
<h2>
<h3>

Convert alignItems to Tailwind class eg, alignItems="center" to className="items-center".

// v10
<Heading alignItems="center">

// New
<h1 className="items-center">

Convert hidden prop which is used per breakpoint to Tailwind classes, hidden="sm" to sm:hidden.

// v10
<Heading hidden="sm">

// New
<h1 className="sm:hidden">

Convert visible prop again per breakpoint, visible="sm" to hidden sm:visible.

// v10
<Heading visible="sm">

// New
<h1 className="sm:visible">

Icon

Convert ariaLabel to proper dom attribute aria-label="".

// v10
<Icon ariaLabel="">

// New
<Icon aria-label="">

Convert color, fontSize, margin, hidden props to Tailwind classes.

// v10
<Icon color="primary" margin={{ bottom: 3}} hidden="sm">

// New
<Icon className="text-primary mb-3 sm:hidden">

Remove ariaHidden.

// v10
<Icon ariaHidden>

// New
<Icon>

Remove tabIndex.

// v10
<Icon tabIndex>

// New
<Icon>

Image

The <Image /> component has been deprecated.

Convert to dom element <img>

// v10
<Image src="">

// New
<img src="">

Convert the margin prop to the equivalent Tailwind classes.

// v10
<Image src="" margin={{ bottom: 3 }}>

// New
<img src="" className="mb-3">

Convert maxHeight to <img className="max-h-[200px]">.

// v10
<Image src="" maxHeight="200">

// New
<img src="" className="max-h-[200px]">

Convert fluid prop to Tailwind classes: max-w-full h-auto".

// v10
<Image src="" fluid>

// New
<img src="" className="max-w-full h-auto">

Convert print="none" to Tailwind class className="print:hidden".

// v10
<Image src="" print="none">

// New
<img src="" className="print:hidden">

Convert print="visible" to className="visible".

// v10
<Image src="" print="visible">

// New
<img src="" className="visible">

Input

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

// v10
<Input ariaLabel="" ariaControls="">

// New
<Input aria-label="" aria-controls="">

InputGroup

Convert ariaLabel prop to native dom attribute aria-label.

// v10
<InputGroup ariaLabel="">

// New
<InputGroup aria-label="">

Remove loading prop, use the Button Loading State example.

// v10
<InputGroup loading>

LicencePlate

Use the Number Plate example

Label/Legend

Convert the margin prop to the equivalent Tailwind classes.

// v10
<Label margin={{ bottom: 3 }}>
<Legend margin={{ bottom: 3 }}>

// New
<Label className="mb-3">
<Legend className="mb-3">

Convert the hidden prop to Tailwind class className="sr-only".

// v10
<Label hidden>
<Legend hidden>

// New
<Label className="sr-only">
<Legend className="sr-only">

Link

Convert boolean variants such as 'primary' to the variant prop equivalent eg. variant="primary".

// v10
<Link primary>
<Link secondary>

// New
<Link variant="primary">
<Link variant="secondary">

Convert button prop to variant equivalents eg. button="primary" becomes variant="buttonPrimary".

// v10
<Link button="primary">
<Link button="secondary">

// New
<Link variant="buttonPrimary">
<Link variant="buttonSecondary">

Convert alignTop to Tailwind class: className="items-start".

// v10
<Link alignTop>

// New
<Link className="items-start">

Convert white prop to variant="inverse".

// v10
<Link white>

// New
<Link variant="inverse">

Convert noWrap prop to Tailwind class: className="whitespace-nowrap".

// v10
<Link noWrap>

// New
<Link className="whitespace-nowrap">

Convert maxWidth prop to Tailwind classes like className="w-full".

// v10
<Link maxWidth>

// New
<Link className="w-full">

List

The <List /> component has been deprecated.

Convert <List> to <ul> with appropriate Tailwind classes.

// v10
<List>

// New
<ul>

Convert <ListItem> to <li> with appropriate Tailwind classes.

// v10
<List>
  <ListItem></ListItem>
</List>

// New
<ul>
  <li></li>
</ul>

Convert <ListItemContent> to <div> with appropriate Tailwind classes.

// v10
<List>
  <ListItem>
    <ListItemContent></ListItemContent>
  </ListItem>
</List>

// New
<ul>
  <li>
    <div></div>
  </li>
</ul>

Convert <List> props to Tailwind classes:

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

Convert <ListItem> props to Tailwind classes:

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

Convert <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

// v10
<Main>

// New
<main>

Convert the margin prop to the equivalent Tailwind classes

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

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

Convert the padding prop to the equivalent Tailwind classes

// v10
<Main padding={{ bottom: 3 }}>

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

Convert maxHeight to Tailwind classes: className="flex grow"

// v10
<Main maxHeight>

// New
<main className="flex grow">

Convert column to Tailwind: className="flex flex-col"

// v10
<Main column>

// New
<main className="flex flex-col">

Price

Convert fontSize prop to Tailwind classes, eg. fontSize="24" to className="!text-[24px]"

// v10
<Price fontSize={24}>

// New
<Price className="!text-[24px]">

Convert the margin prop to the equivalent Tailwind classes

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

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

Remove ignoreDecimals, roundAmount and hideDecimals props, new component simply displays the amount value

// v10
<Price ignoreDecimals roundAmount hideDecimals>

// New
<Price>

Radio

Convert values prop name to options

// v10
<Radio
  values={[{
    label: 'Yes',
    value: 'Yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

// New
<Radio
  options={[{
    label: 'Yes',
    value: 'Yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

RadioBlock

Convert values prop name to options

// v10
<RadioBlock
  values={[{
    label: 'Yes',
    value: 'Yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

// New
<RadioBlock
  options={[{
    label: 'Yes',
    value: 'Yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

Convert the margin prop to the equivalent Tailwind classes

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

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

Convert column prop to Tailwind 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

// v10
<RadioBlock columns={{ xs: 6, md: 6 , lg: 12 }}>

// New
<RadioBlock cols={6}>

// v10
<RadioBlock columns={{ xs: 6, md: 6 , lg: 12 }}>

// New
<RadioBlock cols="6">

SegmentedControl

Convert values prop name to options

// v10
<SegmentedControl
  values={[{
    label: 'Yes',
    value: 'yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

// New
<SegmentedControl
  options={[{
    label: 'Yes',
    value: 'yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
  />

Message

Convert boolean variants to the variant prop, eg. info to variant="information"

// v10
<Message info>

// New
<Message variant="information">

Convert the margin prop to the equivalent Tailwind classes

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

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

Select

Convert values prop name to options

// v10
<Select
  values={[{
    label: 'Yes',
    value: 'yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

// New
<Select
  options={[{
    label: 'Yes',
    value: 'yes'
  }, {
    label: 'No',
    value: 'No'
  }]}
/>

Spinner

Convert the margin prop to the equivalent Tailwind classes

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

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

Convert white prop to variant="inverse"

// v10
<Spinner white>

// New
<Spinner variant="inverse">

Remove brand prop

// v10
<Spinner brand="chroma">

// New
<Spinner>

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

// v10
<Text>

// New
<p>

Convert color prop to Tailwind classes, eg. color="primary" to className="text-primary"

// v10
<Text color="primary">

// New
<p className="text-primary">

Convert fontSize prop to Tailwind classes, eg. fontSize="24" to className="font-[24px]" however, there may be some font sizes that do not correspond to new sizing and may have to map to other sizes

// v10
<Text fontSize={24}>

// New
<p className="font-[24px]">

Convert weight prop to corresponding Tailwind classes, eg. weight={700} to font-700

// v10
<Text weight={600}>

// New
<p className="font-bold">

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:

// v10
<Text textAlign={{ xs: 'center', sm: 'left' }}>

// New
<p className="text-center sm:text-left">

Convert boolean inline prop to Tailwind class className="inline"

// v10
<Text inline>

// New
<p className="inline">

Convert the margin prop to the equivalent Tailwind classes

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

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

Migration Guide Chroma React (v10)

Components​

Alert​

Badge​

Box​

Button Group​

Button​

Checkbox​

Divider​

Fieldset​

Flex Props​

Form​

Heading​

Icon​

Image​

Input​

InputGroup​

LicencePlate​

Label/Legend​

Link​

List​

Main​

Price​

Radio​

RadioBlock​

SegmentedControl​

Message​

Select​

Spinner​

Text​

Components

Alert

Badge

Box

Button Group

Button

Checkbox

Divider

Fieldset

Flex Props

Form

Heading

Icon

Image

Input

InputGroup

LicencePlate

Label/Legend

Link

List

Main

Price

Radio

RadioBlock

SegmentedControl

Message

Select

Spinner

Text