Skip to main content

Update Tangram version

This guide is to teach you on how to update tangram in your project

info

The package @resultadosdigitais/tangram-components alreay downloads @resultadosdigitais/tangram-design-tokens and @resultadosdigitais/tangram-react-icons, so you don't need to manage these dependencies. They can be removed from the package.json and the imports continue to be the same.

Versioning​

Tangram maintains its versioning in accordance with SemVer, which is a set of guidelines outlining the process for allocating and growing version numbers.

They are the number after the package name. Example:"@resultadosdigitais/tangram-components": "8.9.0"

Each position represets a change type:

  • First postion: Major version, is modified when an API has a compatibility issue (Also know as breaking changes)
  • Secodn postion: Minor version, is modified whenever a new feature is added, keeping the API compatible with earlier versions
  • Third postion: Patch version, is modified when fixes are made, keeping the API compatible with earlier versions

They might also have the following symbols adjacent to the version numbers:

  • The tilde (~) makes sure that the package is always loaded with the Minor version, number in the middle. Example: ~8.9.0 will never upgrade to 8.10.x, but it will always load the most recent package from version 8.9.x.
  • The caret (^) makes sure that the first version number of the package is always respected while loading the package. Example: ^8.9.0 will never upgrade to 9.x, but it will always load the most recent package from version 8.x
  • The symbols > , >=, <, and <= ensure that the version will be within the given bounds. Example: <=8.9.0 the version must be less than or equal to 8.9.0 and never higher than, for instance.

Upgrading tangram-components​

1. Identify the current version​

Find the dependency @resultadosdigitais/tangram-components in the project's package.json.

  "other-dependency": "^0.3.22",
  "@resultadosdigitais/tangram-components": "^8.9.0",
  "any-deps": "^2.1.3",

2. Check what is the next version​

tip

You may better assess potential code changes by updating one version at a time, we always advise doing so.

Visit Github to get Tangram Releases. All the modifications made in each version are listed on this page.

Look for tangram-components in the search field to only see results for this package's releases.

Locate the next official version greater than your current version.

There is a list of everything that has been done in addition to the version. This list will aid you in making any necessary changes to the code, along with the documentation.

Red: Here is an illustration of a change that breaks the API. It is strictly necessary to alter the code for this kind of change. In this case, create a Resize Observer in your global test file and rename the Auto component to Autocomplete.

Blue: This section deals with bugs and doesn't always require action. Additionally, is where you will find out about new features.

3. Download the new version​

You can edit it directly in package.json or through the command line, among other options.

Via package.json​

Change @resultadosdigitais/tangram-components version in the project's package.json. If you don't know the next version, see the previous step.

  "other-dependency": "^0.3.22",
  "@resultadosdigitais/tangram-components": "^8.10.0",
  "any-deps": "^2.1.3",

Change the version and run the command yarn install from the project root. In case you are in a monorepo, run the yarn lerna bootstrap command.

Run the command rm - rf node-modules to remove the node_modules folder if you discover that the modifications are not being reflected. In case you are in a monorepo, run the yarn lerna clean command from the project root.

Check the modifications made to the release you are installing, and change your code as necessary.

Via command line​

Run the command yarn upgrade @resultadosdigitais/tangram-components@x.x.x from the project root

Run the command yarn lerna exec yarn add @resultadosdigitais/tangram-components@x.x.x --scope=@nomeDoPacote from the project root if you are in a monorepo.

The package name is found in the name property of package.json.

Check the modifications made to the release you are installing, and change your code as necessary.

Feedback​

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.