This guide is only applicable for migrating existing UI Kit apps on @forge/react major version 9 to the latest version of UI Kit.
The latest version of UI Kit is now generally available. This version comes with a new major version of @forge/react containing 37 updated components.
While updating from @forge/react version 9 to version 10 (UI Kit latest) will provide you with more features and capabilities, it may also contain breaking changes for the apps that are using @forge/react version 9.
Changes to the components - including which components have breaking changes - are outlined below.
To upgrade your app to the latest version, run npm install --save @forge/react@latest in your terminal.
The most significant changes are to the Form, Tabs and Table components. The capabilities of these components have been enhanced; however, this does mean there are breaking changes between the two versions.
If your app is heavily reliant on these three components, we recommend you review the updated documentation to understand the differences and the effort required to migrate your app.
Breaking changes
Badge has a new max prop that defaults to the value of 99. It will render badge content as 99+ for values greater than 99.Breaking changes
disabled prop has been renamed to isDisabled.icon and iconPosition have been updated to iconBefore and iconAfter. iconBefore and iconAfter take the same values as icon and will position before and after the button children contents accordingly.Breaking changes
ButtonSet component has been replaced by ButtonGroup. There are no other breaking changes outside of the component name change.No breaking changes
Breaking changes
children, description and label props have been removed. The options prop, HelperMessage component, and Label component can be used instead.1 2<Label labelFor="products">Products</Label> <CheckboxGroup name="products" options={[ { label: 'Jira', value: 'jira' }, { label: 'Confluence', value: 'confluence' }, ]} /> <HelperMessage>Pick a product</HelperMessage>
Breaking changes
Code should now only be used for inline code.Breaking changes
DateLozenge has been removed and can be replaced by using Lozenge.Breaking changes
description and label props have been removed. Use the HelperMessage and Label components instead.1 2<Label labelFor="start-date">Start date</Label> <DatePicker id="start-date" /> <HelperMessage>Enter a start date</HelperMessage>
Breaking changes
submitButtonText and actionButtons props have been removed. A Button component with the type="submit" prop must be used within your Form component to allow for form submissions.Form component should now be used with the useForm hook for state management. See example usage.Breaking changes
size prop has been removed. The as prop is now required instead. Heading accessibility guidelines should be followed.No breaking changes
Breaking changes
grow prop is temporarily removed and will be re-added in the future. hug and fill behaviour can be replaced by setting the desired width on the xcss prop on a Box component.1 2<Inline> <Box xcss={{backgroundColor: 'color.background.discovery'}}>hugged</Box> <Box xcss={{backgroundColor: 'color.background.information', width:'100%'}}>filled</Box> </Inline>
No breaking changes
Breaking changes
closeButtonText and header props have been removed.
Button component will need to be rendered to close Modal.header prop has been replaced by ModalTitle.Breaking changes
defaultChecked prop has been removed. Use isChecked instead.Breaking changes
children prop has been replaced by options.description and label props have been removed. The options prop, HelperMessage component, and Label component can be used instead.1 2<Label labelFor="color">Color</Label> <RadioGroup id="color" options={[ { name: 'color', value: 'red', label: 'Red' }, { name: 'color', value: 'blue', label: 'Blue' }, { name: 'color', value: 'yellow', label: 'Yellow' }, ]} /> <HelperMessage>Pick a color</HelperMessage>
Breaking changes
label prop has been removed. The Label component can be used instead.1 2<Label labelFor="range">Range</Label> <Range id="range" />
Breaking changes
appearance prop now takes different values.
information replaces info.success replaces confirmation.discovery replaces change.Breaking changes
children prop has been replaced by options.description and label props have been removed. Use the HelperMessage and Label components instead.1 2<Label labelFor="fruit">Favourite fruit</Label> <Select inputId="fruit" options={[ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, ]} /> <HelperMessage>Pick a fruit</HelperMessage>
No breaking changes
Breaking changes
StatusLozenge component has been replaced by Lozenge. There are no other breaking changes outside of the component name change.Breaking changes
Table component has been replaced by DynamicTable.Head, Row and Cell components have been removed in favour of data being passed in via arrays and objects.Breaking changes
Tabs has been updated. See an example of the new Tabs component.No breaking changes
Breaking changes
greyLight replaces grey-light.children is now replaced by the text prop.Breaking changes
description and label props have been removed. Use the HelperMessage and Label components instead.1 2<Label labelFor="message">Message</Label> <TextArea id="message" /> <HelperMessage>Enter a message</HelperMessage>
Breaking changes
TextField to Textfield.description and label props have been removed. Use the HelperMessage and Label components instead.1 2<Label labelFor="email">Email</Label> <Textfield id="email" /> <HelperMessage>Enter an email</HelperMessage>
No breaking changes
Breaking changes
label prop has been removed. Use the Label component instead.1 2<Toggle id="toggle" /> <Label labelFor="toggle">Toggle</Label>
Breaking changes
text prop has been replaced by content.No breaking changes
No breaking changes
Breaking changes
Rate this page: