Design system 2.0 coded component update

[chrisolsen]

Overview

• Relates to DS evolution component design updates #2997 (as the design is completed for specific components, they can go through the "coded component update"
• Check the component off the list as it is completed

Pre-launch

Tokens

• update token values
• add any new token values
  • Since the new tokens will be immediately referenced within the components, we must create a backported value for the newly added token
• publish a v2 version of the token library to npm
  • Teams will then be able to manually include this token library to preview the 2.0 designed components

Web components

• The v1 tokens will remain embedded within the web-components and will not be removed until after the LTS period
  • To use the v2 tokens the design-tokens library will need to be installed separately and an @import statement will need to be added to one the project's top-level stylesheets.
• No breaking changes allowed
• New properties can be added
• Existing properties can non-destructively have their union types altered
  • i.e. Size: "small" | "large" => Size: "small" | "medium" | "large"
• New version property added export const version: "1" | "2" = "1", which will default to "1"
• Any css styling that is exclusive to v1 will need it's scoping changed to .v1 ..., the same is true for v2.
• If any change within the code is required, conditional statements will need to be added using the version prop.

Common types

• Duplicate the currently defined types in the common lib into a v2 folder to allow for import { ... } from "@abgov/common/v2/types" to be used in the React and Angular experimental components
• Update any of the existing types to match the v2 styling
• Add any new types to the v2 file
• Modify andy existing type within the v2 file
• The types can keep the existing Goab naming prefix

React / Angular

• New components will be created with a 1:1 to the existing React/Angular components in an experimental folder
• Ensure that all types references within these components is from the v2 folder.
• Change the existing Goab/goab prefix to Goabx/goabx

Launch

React / Angular

• Replace the v1 components with the v2 components from the experimental folder
• Keep the existing @import of the v1 design-tokens vars within the web-component's index.css file
  • This will allow teams to update the React/Angular libraries without any changes being seen
• Trigger breaking change with a commit containing BREAKING CHANGE (React v6->v7 Angular v4->5)

Common types

• Replace the existing types with the new types
• Trigger breaking change with a commit containing BREAKING CHANGE (ui-components-common v1->v2)

Team instructions

• Update the React/Angular and common libs to the next major version
• Install design-tokens v2
• @import the v2 design tokens

6 months post-launch

Web components

• Remove the design token @import within the index.css file
• Remove all version conditionals within the component's typescript code
• Remove all .v1 scoped css styling
• Un-scope any of the v2 styling (Keep for any future requirements...)
• Create a breaking change commit to trigger a major version bump

Component Status

• Block
• Button
• Button group
• Container
• Date picker
• Drawer
• Details
• Divider
• Dropdown
• File uploader
• Footer
• Form item
• Form stepper
• Grid
• Header
• Hero banner
• Icons
• List
• Microsite header
• Modal
• Pagination
• Popover
• Progress indicator
• Side menu
• Skeleton loading
• Spacer
• Table