Upgrading to Instructure UI 6.0

Instructure UI 6 has been released. This release will focus solely on deprecations. Nearly all of the changes necessary to move to InstUI 6 can be done before you upgrade. Please look for warnings in your browser and read through this document.

Packages

The entire ui-core package was deprecated in InstUI 5.0. Before upgrading to InstUI 6, use the codemods to move away from the ui-core package.

We recently released ui-test-utils as a robust, cross-browser solution for testing InstUI components. (Documentation is on its way!) As a result, ui-testbed is now deprecated and will be removed in InstUI 6. If you are relying on ui-testbed, you can continue using it, but it will not work with React 16.

Components

NumberInput

In InstUI 5.35, <NumberInput/> was deprecated from the ui-forms package. The ui-number-input package features <NumberInputControlled/>, a controlled component that does not maintain state. In InstUI 6, the original <NumberInput/> will be removed, and <NumberInputControlled/> will be renamed <NumberInput/>. If you are using <NumberInput/>, we recommend moving to <NumberInputControlled/> before the InstUI 6 upgrade so that the codemod that ships with InstUI 6 will work correctly.

Other Breaking Component Changes

• <Container/> was replaced with <View/> in InstUI 5.4. <Container/> will no longer be available in InstUI 6.
• <ContextBox/> was replaced with <ContextView/> in InstUI 5.4. <ContextBox/> will no longer be available in InstUI 6.
• <FormField/> and moved to the ui-form-field package in InstUI 5.35. The <FormField/> in the ui-forms package will be removed in InstUI 6.
• <MenuItemFlyout/> was deprecated in InstUI 5.1. Instead, simply nest another <Menu/> component.
• Decimal has moved to the ui-i18n package and will be removed from the ui-utils package

Props

Tooltip

The variants of tooltip are switching. Currently, in the default Canvas themes, variant="default" has a white background and variant="inverse" has a dark background. Starting in InstUI 6, these definitions are reversed. Because this is a swap, it’s not something we can easily write a codemod for. The good news is this change is only visual; no features will break.

<Tooltip/>	variant="default"	variant="inverse"
InstUI 5
InstUI 6

Also, the size prop in Tooltip was deprecated in 5.42 and will be removed. Tooltips will all render as what is currently called large.

Link

The ellipsis prop for adding a "…" to long text will be removed. Instead, use the <TruncateText/> component:

{/* Before */}
<Link ellipsis>[Long Text]</Link>

{/* After */}
<Link>
  <TruncateText>[Long Text]</TruncateText>
</Link>

InstUI 5 Deprecations

A number of component props were deprecated in InstUI 5 and will be removed in InstUI 6. The table below lists those deprecated props and what changes you should make in your code before upgrading:

Component	Deprecated Props	How to Update
<SVGIcon/> (from which all <Icon*/> components are derived)	width, height	Use size. size takes one of several predefined values. If you need a size that is not offered via the size prop, adjust the font-size on the icon’s parent element.
<Tray/>	applicationElement	This prop is no longer necessary and can be safely removed.
	closeButtonLabel, closeButtonRef, closeButtonVariant	A <CloseButton/> should be composed into your <Tray/> and receive an onClick event.
<Popover/>	applicationElement	This prop is no longer necessary and can be safely removed.
	closeButtonLabel, closeButtonRef	A <CloseButton/> should be composed into your <Popover/> and receive an onClick event.
<Modal/>	applicationElement	This prop is no longer necessary and can be safely removed.
	closeButtonLabel, closeButtonRef	A <CloseButton/> should be composed into your <Modal/> and receive an onClick event.
	shouldCloseOnOverlayClick	Use shouldCloseOnDocumentClick
<Mask/>	fullScreen	Use fullscreen (all lowercase)
<MenuItem/>	active	Use selected
<Menu/>	title	Use label
<Dialog/>	applicationElement	This prop is no longer necessary and can be safely removed.
	controls	Use aria-controls
	labelledBy	Use aria-labelledby
	<CodeEditor/>	code
<View/>	size	Use maxWidth

What’s a “codemod”?

Many of these changes can be fixed by running our codemods. These scripts will run through your code and make whatever changes it can. Moving to new packages or changing props are pretty easy to fix with a codemod. Nevertheless, It’s important that you check your code against this document for other potential changes you need to make before upgrading for those instances that a codemod does not suffice.