feat(workbench): rework tab design and styling of the SCION Workbench

SCION Workbench has a new tab design for improved user experience and a modern and consistent look. Applications can define a custom theme to change the default look of the SCION Workbench. Multiple themes are supported. A theme is a collection of design tokens, defining specific design aspects. A design token can have a different value per theme. closes #110 BREAKING CHANGE: The new tab design and theming of the SCION Workbench has introduced a breaking change. To migrate: - update @scion/components to version 16.2.0 or higher - The workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens. - The tab height has changed from two to one line, not displaying the heading anymore. You can change the tab height back to two lines by setting the `--sci-workbench-tab-height` design token to `3.5rem`. ```scss :root { --sci-workbench-tab-height: 3.5rem; } ``` - Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry. ## Before: @use '@scion/workbench' with ( $theme: ( icon-font: ( filename: 'custom-workbench-icons', version: '1.0.0' ) ) ); ## After: @use '@scion/workbench' with ( icon-font: ( filename: 'custom-workbench-icons', version: '1.0.0' ) ); - Contribution of custom tab component has changed: - Close button is now rendered separately and can be removed from the custom tab component. - Custom tab component should add a right margin if rendered in the context of a tab or drag image to not overlap the close button. - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
SchweizerischeBundesbahnen · Oct 10, 2023 · 2d8e45a · 2d8e45a
1 parent 6963378
commit 2d8e45a
Show file tree

Hide file tree

Showing 157 changed files with 2,248 additions and 1,101 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -107,7 +107,10 @@
         "rxjs/no-unsafe-takeuntil": [
           "error",
           {
-            "alias": ["takeUntil", "takeUntilDestroyed"]
+            "alias": [
+              "takeUntil",
+              "takeUntilDestroyed"
+            ]
           }
         ]
       }
@@ -120,7 +123,17 @@
         "plugin:@angular-eslint/template/recommended",
         "plugin:@angular-eslint/template/accessibility"
       ],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/label-has-associated-control": [
+          "error",
+          {
+            "controlComponents": [
+              "sci-checkbox",
+              "sci-toggle-button"
+            ]
+          }
+        ]
+      }
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -16,13 +16,7 @@ SCION Workbench enables the creation of Angular web applications that require a
 - [**Getting Started**][link-getting-started]\
   Follow these steps to install the SCION Workbench in your project and start with a basic introduction to the SCION Workbench.
 
-- [**How To Guides**][link-howto]\
-  Get answers to the most common questions when developing an application with the SCION Workbench.
-
-#### Workbench Applications
-
-- [**SCION Workbench Demo**][link-demo-app]\
-  See a live demo of the SCION Workbench.
+#### Workbench Demo Applications
 
 - [**SCION Workbench Testing App**][link-testing-app]\
   Visit our technical testing application to explore the workbench and experiment with its features.
@@ -35,6 +29,9 @@ SCION Workbench enables the creation of Angular web applications that require a
 - [**About SCION Workbench**][link-overview]\
   Learn more about the SCION Workbench.
 
+- [**How To Guides**][link-howto]\
+  Get answers to the most common questions when developing an application with the SCION Workbench.
+
 - [**Workbench and Microfrontends**][link-microfrontend-integration]\
   Consider adopting a microfrontend architecture with SCION Workbench.
 

diff --git a/apps/workbench-client-testing-app/src/app/app.component.html b/apps/workbench-client-testing-app/src/app/app.component.html
@@ -3,8 +3,8 @@
     <router-outlet></router-outlet>
   </sci-viewport>
   <section class="metadata">
-    <span class="chip has-focus e2e-has-focus" *ngIf="focusMonitor.focus$ | async">has-focus</span>
-    <span class="chip app-symbolic-name">{{appSymbolicName}}</span>
+    <span class="chip has-focus e2e-has-focus" *ngIf="focusMonitor!.focus$ | async">has-focus</span>
+    <span class="chip app-symbolic-name" [class.has-focus]="focusMonitor!.focus$ | async">{{appSymbolicName}}</span>
   </section>
 </ng-container>
 

diff --git a/apps/workbench-client-testing-app/src/app/app.component.scss b/apps/workbench-client-testing-app/src/app/app.component.scss
@@ -1,4 +1,4 @@
-@use '@scion/components.internal' as sci-ɵcomponents;
+@use '@scion/components.internal/design' as sci-design;
 
 :host {
   display: grid;
@@ -16,11 +16,15 @@
     padding: .25em;
 
     > span.chip.has-focus {
-      @include sci-ɵcomponents.theme-chip(var(--sci-color-primary-darker), var(--sci-color-background), var(--sci-color-P900));
+      @include sci-design.style-chip(var(--sci-color-accent), var(--sci-color-background-primary), var(--sci-color-accent));
     }
 
     > span.chip.app-symbolic-name {
-      @include sci-ɵcomponents.theme-chip(var(--app-color), var(--app-color), var(--sci-color-background));
+      @include sci-design.style-chip(var(--sci-color-text), var(--sci-color-background-primary), var(--sci-color-text));
+
+      &.has-focus {
+        @include sci-design.style-chip(var(--sci-color-accent), var(--sci-color-background-primary), var(--sci-color-accent));
+      }
     }
   }
 

diff --git a/apps/workbench-client-testing-app/src/app/app.component.ts b/apps/workbench-client-testing-app/src/app/app.component.ts
@@ -8,12 +8,14 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import {Component, HostBinding, Inject, Optional} from '@angular/core';
-import {APP_IDENTITY, FocusMonitor, MicrofrontendPlatformClient, PlatformPropertyService} from '@scion/microfrontend-platform';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {Component, inject, Inject, Optional} from '@angular/core';
+import {APP_IDENTITY, FocusMonitor, MicrofrontendPlatformClient} from '@scion/microfrontend-platform';
+import {AsyncPipe, DOCUMENT, NgIf} from '@angular/common';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {RouterOutlet} from '@angular/router';
 import {A11yModule} from '@angular/cdk/a11y';
+import {WorkbenchThemeMonitor} from '@scion/workbench-client';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-root',
@@ -30,17 +32,27 @@ import {A11yModule} from '@angular/cdk/a11y';
 })
 export class AppComponent {
 
+  public readonly focusMonitor = inject(FocusMonitor, {optional: true}); // only available if running in the workbench context
   public readonly workbenchContextActive = MicrofrontendPlatformClient.isConnected();
 
   public appSymbolicName: string;
 
-  @HostBinding('style.--app-color')
-  public appColor: string;
-
-  constructor(@Inject(APP_IDENTITY) @Optional() symbolicName: string, // not available if not running in the workbench context
-              @Optional() propertyService: PlatformPropertyService,  // not available if not running in the workbench context
-              @Optional() public focusMonitor: FocusMonitor) { // not available if not running in the workbench context
+  constructor(@Inject(APP_IDENTITY) @Optional() symbolicName: string) { // only available if running in the workbench context
     this.appSymbolicName = symbolicName;
-    this.appColor = propertyService?.get<any>(symbolicName).color;
+    this.installWorkbenchThemeSwitcher();
+  }
+
+  private installWorkbenchThemeSwitcher(): void {
+    const documentRoot = inject<Document>(DOCUMENT).documentElement;
+    inject(WorkbenchThemeMonitor, {optional: true})?.theme$ // only available if running in the workbench context
+      .pipe(takeUntilDestroyed())
+      .subscribe(theme => {
+        if (theme) {
+          documentRoot.setAttribute('sci-theme', theme);
+        }
+        else {
+          documentRoot.removeAttribute('sci-theme');
+        }
+      });
   }
 }
diff --git a/...client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.html b/...client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.html
@@ -55,7 +55,7 @@
   </section>
 </form>
 
-<button (click)="onMessageBoxOpen()" class="e2e-open" [disabled]="form.invalid">
+<button (click)="onMessageBoxOpen()" class="e2e-open" [disabled]="form.invalid" sci-primary>
   Open message box
 </button>
 

diff --git a/...client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.scss b/...client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.scss
@@ -13,23 +13,27 @@
       display: flex;
       flex-direction: column;
       gap: .5em;
-      border: 1px solid var(--sci-color-P400);
-      border-radius: 5px;
+      border: 1px solid var(--sci-color-border);
+      border-radius: var(--sci-corner);
       padding: 1em;
     }
   }
 
   > output.close-action {
-    border: 1px solid var(--sci-color-accent);
-    background-color: var(--sci-color-A100);
-    border-radius: 3px;
+    border: 1px solid var(--sci-color-positive);
+    background-color: var(--sci-color-background-positive);
+    color: var(--sci-color-positive);
+    border-radius: var(--sci-corner);
     padding: 1em;
+    font-family: monospace;
   }
 
   > output.open-error {
-    border: 1px solid var(--sci-color-warn);
-    background-color: var(--sci-color-W100);
-    border-radius: 3px;
+    border: 1px solid var(--sci-color-negative);
+    background-color: var(--sci-color-background-negative);
+    color: var(--sci-color-negative);
+    border-radius: var(--sci-corner);
     padding: 1em;
+    font-family: monospace;
   }
 }
diff --git a/...ient-testing-app/src/app/notification-opener-page/notification-opener-page.component.html b/...ient-testing-app/src/app/notification-opener-page/notification-opener-page.component.html
@@ -48,7 +48,7 @@
   </section>
 </form>
 
-<button (click)="onNotificationShow()" class="e2e-show" [disabled]="form.invalid">
+<button (click)="onNotificationShow()" class="e2e-show" [disabled]="form.invalid" sci-primary>
   Show notification
 </button>
 

diff --git a/...ient-testing-app/src/app/notification-opener-page/notification-opener-page.component.scss b/...ient-testing-app/src/app/notification-opener-page/notification-opener-page.component.scss
@@ -12,16 +12,18 @@
     > section {
       display: grid;
       grid-row-gap: .5em;
-      border: 1px solid var(--sci-color-P400);
-      border-radius: 5px;
+      border: 1px solid var(--sci-color-border);
+      border-radius: var(--sci-corner);
       padding: 1em;
     }
   }
 
   > output.error {
-    border: 1px solid var(--sci-color-warn);
-    background-color: var(--sci-color-W100);
-    border-radius: 3px;
+    border: 1px solid var(--sci-color-negative);
+    background-color: var(--sci-color-background-negative);
+    color: var(--sci-color-negative);
+    border-radius: var(--sci-corner);
     padding: 1em;
+    font-family: monospace;
   }
 }
diff --git a/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.html b/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.html
@@ -74,7 +74,7 @@
   </sci-accordion>
 </form>
 
-<button (click)="onPopupOpen()" class="open e2e-open" [disabled]="form.invalid" #open_button>
+<button (click)="onPopupOpen()" class="open e2e-open" [disabled]="form.invalid" #open_button sci-primary>
   Open popup
 </button>
 

diff --git a/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.scss b/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.scss
@@ -12,8 +12,8 @@
     > section {
       display: grid;
       grid-row-gap: .5em;
-      border: 1px solid var(--sci-color-P400);
-      border-radius: 5px;
+      border: 1px solid var(--sci-color-border);
+      border-radius: var(--sci-corner);
       padding: 1em;
     }
 
@@ -27,16 +27,20 @@
   }
 
   > output.return-value {
-    border: 1px solid var(--sci-color-accent);
-    background-color: var(--sci-color-A100);
-    border-radius: 3px;
+    border: 1px solid var(--sci-color-positive);
+    background-color: var(--sci-color-background-positive);
+    color: var(--sci-color-positive);
+    border-radius: var(--sci-corner);
     padding: 1em;
+    font-family: monospace;
   }
 
   > output.popup-error {
-    border: 1px solid var(--sci-color-warn);
-    background-color: var(--sci-color-W100);
-    border-radius: 3px;
+    border: 1px solid var(--sci-color-negative);
+    background-color: var(--sci-color-background-negative);
+    color: var(--sci-color-negative);
+    border-radius: var(--sci-corner);
     padding: 1em;
+    font-family: monospace;
   }
 }
diff --git a/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.html b/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.html
@@ -123,6 +123,6 @@
 </sci-viewport>
 
 <div class="buttons">
-  <button (click)="onClose()" class="e2e-close">Close</button>
+  <button (click)="onClose()" class="e2e-close" sci-primary>Close</button>
   <button (click)="onCloseWithError()" class="e2e-close-with-error">Close (with error)</button>
 </div>
diff --git a/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.scss b/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.scss
@@ -1,4 +1,4 @@
-@use '@scion/components.internal' as sci-ɵcomponents;
+@use '@scion/components.internal/design' as sci-design;
 
 :host {
   display: flex;
@@ -22,8 +22,8 @@
         display: flex;
         flex-direction: column;
         gap: .5em;
-        border: 1px solid var(--sci-color-P400);
-        border-radius: 5px;
+        border: 1px solid var(--sci-color-border);
+        border-radius: var(--sci-corner);
         padding: 1em;
 
         > header {
@@ -73,7 +73,7 @@
         }
 
         &.return-value input {
-          @include sci-ɵcomponents.theme-input-field();
+          @include sci-design.style-input-field();
         }
       }
     }

diff --git a/.../app/register-workbench-capability-page/register-workbench-capability-page.component.scss b/.../app/register-workbench-capability-page/register-workbench-capability-page.component.scss
@@ -11,8 +11,8 @@
       display: flex;
       flex-direction: column;
       gap: .5em;
-      border: 1px solid var(--sci-color-P400);
-      border-radius: 5px;
+      border: 1px solid var(--sci-color-border);
+      border-radius: var(--sci-corner);
       padding: 1em;
 
       > header {
@@ -22,19 +22,21 @@
     }
 
     > output.register-response {
-      border: 1px solid var(--sci-color-accent);
-      background-color: var(--sci-color-A100);
-      border-radius: 3px;
+      border: 1px solid var(--sci-color-positive);
+      background-color: var(--sci-color-background-positive);
+      color: var(--sci-color-positive);
+      border-radius: var(--sci-corner);
       padding: 1em;
-      white-space: pre;
       font-family: monospace;
     }
 
     > output.register-error {
-      border: 1px solid var(--sci-color-warn);
-      background-color: var(--sci-color-W100);
-      border-radius: 3px;
+      border: 1px solid var(--sci-color-negative);
+      background-color: var(--sci-color-background-negative);
+      color: var(--sci-color-negative);
+      border-radius: var(--sci-corner);
       padding: 1em;
+      font-family: monospace;
     }
   }
 }
diff --git a/...rc/app/register-workbench-intention-page/register-workbench-intention-page.component.scss b/...rc/app/register-workbench-intention-page/register-workbench-intention-page.component.scss
@@ -12,8 +12,8 @@
       display: flex;
       flex-direction: column;
       gap: .5em;
-      border: 1px solid var(--sci-color-P400);
-      border-radius: 5px;
+      border: 1px solid var(--sci-color-border);
+      border-radius: var(--sci-corner);
       padding: 1em;
 
       > header {
@@ -23,17 +23,21 @@
     }
 
     > output.intention-id {
-      border: 1px solid var(--sci-color-accent);
-      background-color: var(--sci-color-A100);
-      border-radius: 3px;
+      border: 1px solid var(--sci-color-positive);
+      background-color: var(--sci-color-background-positive);
+      color: var(--sci-color-positive);
+      border-radius: var(--sci-corner);
       padding: 1em;
+      font-family: monospace;
     }
 
     > output.register-error {
-      border: 1px solid var(--sci-color-warn);
-      background-color: var(--sci-color-W100);
-      border-radius: 3px;
+      border: 1px solid var(--sci-color-negative);
+      background-color: var(--sci-color-background-negative);
+      color: var(--sci-color-negative);
+      border-radius: var(--sci-corner);
       padding: 1em;
+      font-family: monospace;
     }
   }
 }
diff --git a/apps/workbench-client-testing-app/src/app/router-page/router-page.component.html b/apps/workbench-client-testing-app/src/app/router-page/router-page.component.html
@@ -43,7 +43,7 @@
     </sci-form-field>
   </section>
 
-  <button (click)="onNavigate()" class="e2e-navigate" [disabled]="form.invalid">Navigate</button>
+  <button (click)="onNavigate()" class="e2e-navigate" [disabled]="form.invalid" sci-primary>Navigate</button>
 
   <output class="navigate-error e2e-navigate-error" *ngIf="navigateError">
     {{navigateError}}