test: Allow toggling color API back compat CSS in the demo app

angular · Feb 1, 2024 · 130aa17 · 130aa17
1 parent fdb6608
commit 130aa17
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 10 deletions.
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
@@ -1,5 +1,5 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
-load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary", "sass_library")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -105,10 +105,19 @@ devmode_esbuild(
     ],
 )
 
+sass_library(
+    name = "color-api-back-compat",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material:sass_lib",
+    ],
+)
+
 sass_binary(
     name = "theme",
     src = "theme.scss",
     deps = [
+        ":color-api-back-compat",
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",
         "//src/material/core:theming_scss_lib",

diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
@@ -45,6 +45,14 @@
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
         <div class="demo-config-buttons">
+          @if (state.m3Enabled) {
+            <button
+                mat-icon-button
+                (click)="toggleColorApiBackCompat()"
+                matTooltip="{{state.colorApiBackCompat ? 'Disable' : 'Enable'}} color API back-compat">
+              <mat-icon>colorize</mat-icon>
+            </button>
+          }
           <button
             mat-icon-button
             (click)="toggleFullscreen()"

diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
@@ -118,6 +118,7 @@ export class DevAppLayout {
     this.toggleRippleDisabled(this.state.rippleDisabled);
     this.toggleDirection(this.state.direction);
     this.toggleM3(this.state.m3Enabled);
+    this.toggleColorApiBackCompat(this.state.colorApiBackCompat);
   }
 
   toggleTheme(value = !this.state.darkTheme) {
@@ -179,6 +180,12 @@ export class DevAppLayout {
     setAppState(this.state);
   }
 
+  toggleColorApiBackCompat(value = !this.state.colorApiBackCompat) {
+    this.state.colorApiBackCompat = value;
+    this._document.body.classList.toggle('demo-color-api-back-compat', value);
+    setAppState(this.state);
+  }
+
   getDensityClass() {
     return `demo-density-${this.state.density}`;
   }

diff --git a/src/dev-app/dev-app/dev-app-state.ts b/src/dev-app/dev-app/dev-app-state.ts
@@ -19,6 +19,7 @@ export interface DevAppState {
   strongFocusEnabled: boolean;
   m3Enabled: boolean;
   direction: Direction;
+  colorApiBackCompat: boolean;
 }
 
 /** Gets the current appearance state of the dev app. */
@@ -43,6 +44,7 @@ export function getAppState(): DevAppState {
       strongFocusEnabled: false,
       m3Enabled: false,
       direction: 'ltr',
+      colorApiBackCompat: true,
     };
 
     saveToStorage(value);

diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html
@@ -11,7 +11,7 @@
                       [class.demo-drinks-width-large]="drinksWidth === '400px'">
         <mat-label>Drink</mat-label>
         <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
-          [disabled]="drinksDisabled" #drinkControl="ngModel" [panelClass]="m3ForceSecondary ? 'demo-force-secondary' : ''">
+          [disabled]="drinksDisabled" #drinkControl="ngModel">
           <mat-option [disabled]="drinksOptionsDisabled === 'all'">None</mat-option>
           @for (drink of drinks; track drink; let index = $index) {
             <mat-option [value]="drink.value"
@@ -59,9 +59,6 @@
           <option value="all">Disable All Options</option>
         </select>
       </p>
-      <p>
-        <mat-checkbox [(ngModel)]="m3ForceSecondary">Force secondary color for options in M3</mat-checkbox>
-      </p>
 
       <button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
       <button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>

diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
@@ -71,7 +71,6 @@ export class SelectDemo {
   pokemonTheme: ThemePalette = 'primary';
   compareByValue = true;
   selectFormControl = new FormControl('', Validators.required);
-  m3ForceSecondary = true;
 
   sandwichBread = '';
   sandwichMeat = '';

diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@angular/material' as mat;
 @use '@angular/material-experimental' as matx;
 @use './color-api-back-compat';
@@ -79,8 +78,16 @@ $density-scales: (-1, -2, -3, -4, minimum, maximum);
   }
 }
 
-@include color-api-back-compat.color-variants-back-compat($light-theme);
+// Enable back-compat CSS for color="..." API.
+.demo-color-api-back-compat {
+  @include color-api-back-compat.color-variants-back-compat($light-theme);
 
-.demo-unicorn-dark-theme {
-  @include color-api-back-compat.color-variants-back-compat($dark-theme);
+  &.demo-unicorn-dark-theme {
+    @include color-api-back-compat.color-variants-back-compat($dark-theme);
+  }
+}
+
+// In M3 buttons are smaller than their touch target at zero-density.
+.demo-config-buttons button {
+  margin: 4px;
 }