Team discussion about Design tokens usage and UI library

[ArogeG]

Describe the task Team discussion on which UI library we should use for FAM.

Acceptance Criteria

• [ ] A decision on which UI library we should use for FAM.

Additional context

• see Catherine's discussion items below.

[MCatherine1994]

Discussion items for fingerprint team:

• UI library options:

  • Bootstrap library options, they both built on top of bootstrap 5 with vue3, support typescript: Pros:
    • farmiliar with bootstrap
    • widely used
      • bootstrap-vue-next Cons:
        • in alpha version, not officially published, but managed by the same team that builds BootstrapVue
        • documentation link not works anymore, not stable
        • missing component, date picker and tree
      • mdb-vue-ui-kit Pros:
        • officially support vue3
        • can meet most of our needs Cons: some features are not free, for example tree, no code example
      • PrimeVue (good option) Pros:
        • very high download weekly number, looks popular
        • has all the components we need
        • could select to use bootstrap theme (currently only support bootstrap v4)
        • could check their bootstrap theme file to get all classname for their components: https://github.com/primefaces/primevue/blob/master/public/themes/bootstrap4-light-blue/theme.css
        • it can support React with PrimeReact, Angular with PrimeAngular
        • meet accessibility requirement: WCAG 2.1 AA level compliancy Cons:
        • new to this, might need some learning
        • not sure if it supports change class prefix
  • Ant design (good option) Pros:
    • has all the components we need date picker, tree view, validation, table filter and sort, powerful
    • officially support vue3 and typescript
    • lot of code example in the offical documentation
    • support both React, Vue and Angular Cons:
    • new to this, might need some learning
    • not clear about the accessibility level
  • Carbon vue3, alpha version published 8 days ago on Mar 27,2023 Pros: could use the same stylesheet SPAR is using Cons:
    • miss a lot of components
    • no installation documentation, and official documentation is short, not a lot of examples
    • no types yet, got typescript warning
  • Carbon web component Pros:
    • could share the same component overrides style sheet with Spar Cons:
    • v1 is currently read only, v2 is coming but not sure when
    • not support prefix change, the class name for carbon web component has prefix "bx-"
    • need manually implement a lot of features, for example table filter and sort, no tree, feels like we're writing vue3 wrapper by ourselves for the carbon components
    • some component not works correctly, for example the multiple select
  • Other UI library options: https://www.ui-themes.com/vue-component-libraries-free-open-source/

• How to apply the common style sheet

  • Get theme design token from common theme repo: https://github.com/bcgov/nr-fsa-theme
  • For simple component, like button, input, create generate class names in the common repo, for example "bcgov-fsa-button-primary", and add this custom class name to the button component, so it can get custom style, and it can apply to all UI libraries
  • For complex component, find the classname based on the UI library, and change the style using the design token. For example, for the table header, go to Figma and find what design token is used for color, and import that from theme files

• How we get update when changes happen in common repo We might need help from Derek, to see if we could open a pull request for project repo automatically when there is a change happened in the common repo

[basilv]

My comments from Discord: I've been thinking overnight about the design system challenge. I think a variant option that would be worth exploring is to see what's involved to use Carbon web components in Vue3. Based on my quick scan, it should be possible in theory, the main question is how easy or difficult this would be. Rather than starting with basic components like buttons, I'd propose starting with things like DatePicker that aren't in bootstrap anyway.

There is a vue3 library under active development for integrating with Carbon, while it hasn't integrated all carbon components it is likely the best starting point: https://github.com/carbon-design-system/carbon-components-vue/blob/vNext/package.json. Another promising option is to leverage the Carbon Web Components library directly, but it appears its going to have a major new version soon so timing could be a bit better there: https://medium.com/carbondesign/coming-soon-carbon-web-components-v2-7decc1749f5d. (See https://github.com/carbon-design-system/issue-tracking/issues/121 on origins of using web components in Carbon, and see https://web-components.carbondesignsystem.com/ for list of carbon components available (in v1).

[gormless87]

Meeting scheduled for Wed@2pm

https://teams.microsoft.com/l/meetup-join/19%3ameeting_ZDkzMDI4YTktZDYxNC00NzRiLWIxZmQtYjk4ZmUxN2M0YmNh%40thread.v2/0?context=%7b%22Tid%22%3a%226fdb5200-3d0d-4a8a-b036-d3685e359adc%22%2c%22Oid%22%3a%22b0436f68-5c2e-4bff-901a-b9b4b3596002%22%7d