Uploaded image for project: 'Compass '
  1. Compass
  2. COMPASS-5428

Use leafygreen or vscode styles on a single form

    • Type: Icon: Investigation Investigation
    • Resolution: Done
    • Priority: Icon: Major - P3 Major - P3
    • No version
    • Affects Version/s: None
    • Component/s: None
    • None
    • Not Needed
    • Iteration Seoul, Iteration Tokyo

      Compass mostly uses Leafygreen UI Kit with support for lite and dark mode, whereas VSCode currently uses Compass styles adapted to the user's color theme selected in VSCode. It means that VSCode has not only a light and dark mode, but many other supported color themes. Another thing that we should take into consideration is the recent release of Webview UI Toolkit for Visual Studio Code, using of which is recommended by VSCode authors and allows the extension to look, feel, and act like the editor itself.

      We could consider the following options how to address it:

      • Pass color values to the form, that would allow us to support more color themes in VSCode that Compass needs.
      • Pass the components to the form that would allow us to have differently styled (from different UI Kits) components in Compass and VSCode.
      • Have separate forms but use the same middle layer with form handlers. In this case, we still have to maintain UIs but at least form actions and functional tests can be unified.

        1. Screenshot 2022-01-25 at 17.18.05.png
          1.34 MB
          Alena Khineika
        2. Screenshot 2022-01-25 at 17.19.23.png
          1.47 MB
          Alena Khineika

            Assignee:
            alena.khineika@mongodb.com Alena Khineika
            Reporter:
            alena.khineika@mongodb.com Alena Khineika
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: