-
Notifications
You must be signed in to change notification settings - Fork 45
Migrating from v11.x to v12.x
Every component follows a more flat and simple look, it might require some refactoring of your existing custom CSS to make sure everything fits.
The new layout code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport" content="width=device-width"/>
<meta name="ts-app-title" content="My App"/>
<link rel="ts-app-icon" href="my-icon.svg"/>
</head>
<body>
<div data-ts="App">
<div data-ts="Main">
<div data-ts="Content">
<div data-ts="Panel">
<em>Start building your app here!</em>
</div>
</div>
</div>
</div>
</body>
</html>compared to the old one:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<header data-ts="TopBar"></header>
<main data-ts="Main">
<div data-ts="MainContent">
<h1>Main content</h1>
</div>
</main>
</body>
</html>We've introduced new colors, and instead of @ts-black, now you need to reference them as @ts-color-black.
They've also changed a lot, so it's worth the time to go through your code and make sure that all the colors line up with your expectations.
The new Header component is baked into <div data-ts="App"> and can't be inserted via HTML anymore, only modified using attributes for the App component or ts.ui.Header.title(title).icon(iconUrl).color(colorName).
Instead of having tabs both in the TopBar/Header and an attached page-level TabBar, now you have to specify your tabs in the Header or specify multiples of Mains components to automatically generate them.
As a workaround for having multiple levels of page-level tabs, you can wrap your content inside a Board, and add tabs to it, effectively enabling a second level of tabs.
import '@tradeshift/tradeshift-ui-v12' from src/v4apps/ui/12/nodemodules- Add
"manualLayout": true,in the manifest.json. - Add
data-ts="Main", data-ts="Content",data-ts="Panel"as new layout in your main page. - Change the
TopbartoHeaderand put an icon in theHeader. - If you have
panel appswhich usetradeshift-ui-v11, You have to usets.ioto isolate thepanel app - Sit down with designer and fix style to fit the new look of your app.
As always, don't forget to check the Issues and Releases pages for the most up-to-date info.
| The Docs | Issues Page | Releases Page | Repo Readme | Check out the Milestones |
|---|