Skip to content

Latest commit

 

History

History
147 lines (111 loc) · 4.2 KB

MIGRATION_GUIDES.md

File metadata and controls

147 lines (111 loc) · 4.2 KB
Raw

Migration Guides

v2 to v3

In version 3 we have taken the opportunity to make several important breaking changes to the library. Please take care to read the following migration guide before upgrading.

Breaking Changes

  • ArcContainer now renders an ArcNavbar component within its 'nav' slot by default.
  • ArcBottombar now renders an ArcIconButton component by default to open the ArcAccessibility panel and emits an arc-accessibility-open event when clicked.
  • ArcIcon has been replaced with generated components.
  • ArcButton color property has been updated from primary to default.
  • Cerry-picking components from the @arc-web/components package has changed from importing from the /dist/src directory to importing from the /src directory.
  • React component wrappers have been moved from the @arc-web/components package to the @arc-web/react package.
  • Auto theme now tracks system preference. It responds in real-time to changes in system preference (i.e. even after the page loads) and ignores the time of day.
  • Dark and light theme styles have been moved to index.css, and dark.css and light.css have been deleted.
  • The primary color in the default ARC theme has been updated from --arc-red-050 to --arc-blue-060 in light mode and from --arc-grey-000 to --arc-blue-050 in dark mode.

Upgrade Steps

  • Replace all instances of ArcIcon with the new phosphor icons:
- import '@arc-web/components/src/components/icon/arc-icon';
- <arc-icon name="home"></arc-icon>

+ import '@arc-web/components/src/components/ph-icon/house/ph-icon-house';
+ <ph-icon-house></ph-icon-house>
  • Update all cherry-picked components from the @arc-web/components package to import from the /src directory.
- import '@arc-web/components/dist/src/components/button/arc-button';
+ import '@arc-web/components/src/components/button/arc-button';
React Only
  • Install the new @arc-web/react package.
npm i @arc-web/components@latest @arc-web/react@latest
  1. Update all imports from the @arc-web/components package to the @arc-web/react package.
- import { ArcButton } from '@arc-web/components/react';
+ import { ArcButton } from '@arc-web/react';
  • Update all ArcButton components with no color property set to primary if you wish to maintain the same appearance.
- <arc-button>Click Me</arc-button>
+ <arc-button color="primary">Click Me</arc-button>

Important

ARC had updated the primary color in the default theme from --arc-red-050 to --arc-blue-060 in light mode and from --arc-grey-000 to --arc-blue-050 in dark mode. This change should be adopted by all Arup branded applications.

  • Remove references to separate dark and light theme stylesheets.
Build Script 
  cp -r node_modules/@arc-web/components/themes <public directory>

Load the stylesheet in your application:

  <html>
    <head>
    ...
    <link rel="stylesheet" href="<public directory>/themes/index.css" />
-   <link rel="stylesheet" href="<public directory>/themes/light.css" />
-   <link rel="stylesheet" href="<public directory>/themes/dark.css" />
    ...
    </head>
  </html>
Angular CLI 
  {
    ...
    "styles": [
      "node_modules/@arc-web/components/themes/index.css",
-     "node_modules/@arc-web/components/themes/light.css",
-     "node_modules/@arc-web/components/themes/dark.css",
      ...
    ]
    ...
  }
CSS Imports 
  import '@arc-web/components/themes/index.css';
- import '@arc-web/components/themes/light.css';
- import '@arc-web/components/themes/dark.css';
  • Adjust dark or light theme overrides.
- :root,
- :host,
- arc-container[theme='light'] {
-   --arc-color-primary: var(--arc-green-060);
- }
-
- :root,
- :host,
- arc-container[theme='dark'] {
-   --arc-color-primary: var(--arc-green-040);
- }

+ :root {
+   --arc-light-color-primary: var(--arc-green-060);
+   --arc-dark-color-primary: var(--arc-green-040);
+ }
  • Remove setting base path
- import { setBasePath } from '@arc-web/components';
- setBasePath('');