Upgrading deprecated components

We regularly update our components with more functionality. Over time, we release new versions of components that we've rebuilt to provide additional features, such as accessibility improvements and deeper customization options. Whenever we publish a new version of a component, we deprecate the existing one.

You can continue to use deprecated components, but we recommend upgrading them. You can automatically upgrade deprecated components individually or select multiple components to upgrade at the same time. All configuration settings (event handlers, tooltips, etc.) transfer to the new component.

Upgrading individual components

If a selected component in your app has been deprecated and a new version is available, click Upgrade in the Inspector.

Upgrading multiple components

Click the ... button on the upper-right of the editor to open the App actions menu. Select Upgrade components to view a list of all deprecated components to upgrade. If there are no components to upgrade, this menu item is disabled.

Select the components you want to upgrade and click Upgrade.

Handling refactored fields

We sometimes rename fields in new component versions to improve clarity and consistency. For example, the suffix field of a deprecated component becomes textAfter in the new version. Upgrading a component automatically updates any direct references to refactored fields.


Check JavaScript queries and scripts

Review any JavaScript queries and custom scripts after upgrading a component to ensure they continue to work as expected.

We also make a best-effort attempt to update fields in JavaScript queries or custom scripts used in event handlers. We do not alter any indirect references to component fields, however, so you must update these manually.

// Before

const newVariable = textInput1;

// After
console.log(textInput1.textAfter); // RENAMED

const newVariable = textInput1;
console.log(newVariable.suffix); // NOT RENAMED