feat(field): add test harness

PiperOrigin-RevId: 404673321

Author: asyncliz

components/field/lib/_filled-field-theme.scss

@@ -41,8 +41,8 @@ $light-theme: map.merge(
     disabled-stroke-color: color-palette.$grey-700,
     disabled-stroke-opacity: 0.38,
     error-hover-stroke-color: $_error-state-content,
-    error-stroke-color: error,
-    focus-stroke-color: primary,
+    error-stroke-color: theme-color.$error,
+    focus-stroke-color: theme-color.$primary,
     focus-stroke-width: 2px,
     hover-state-layer-color: color-palette.$grey-800,
     hover-state-layer-opacity: 0.08,
@@ -209,7 +209,7 @@ $light-theme: map.merge(
 @mixin _shape($shape) {
   .mdc-field__container {
     border-start-start-radius: $shape;
-    broder-start-end-radius: $shape;
+    border-start-end-radius: $shape;
   }
 }
 

components/field/lib/_outlined-field-theme.scss

@@ -54,7 +54,7 @@ $light-theme: map.merge(
     outlined-field
   );
 
-  @include theme.emit-theme-vars($theme, outlined-field);
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme) {
@@ -126,18 +126,18 @@ $light-theme: map.merge(
 
   .mdc-field__outline-notch {
     padding: 0 $padding;
-    margin-inline-start: calc(-1 * $padding);
+    margin-inline-start: calc(-1 * #{$padding});
     margin-inline-end: $padding;
   }
 
   .mdc-field__outline-end {
-    margin-inline-start: calc(-1 * $padding);
+    margin-inline-start: calc(-1 * #{$padding});
   }
 }
 
 @mixin _outline-notch-max-width($container-padding-horizontal) {
   .mdc-field__outline-notch {
-    max-width: calc(100% - 2 * $container-padding-horizontal);
+    max-width: calc(100% - 2 * #{$container-padding-horizontal});
   }
 }
 
@@ -207,7 +207,7 @@ $light-theme: map.merge(
 
   .mdc-field__label--floating {
     // Center the label within the outline stroke
-    transform: translateY(calc(-50% + $width / 2));
+    transform: translateY(calc(-50% + #{$width} / 2));
   }
 }
 

components/field/lib/_outlined-field.scss

@@ -50,6 +50,10 @@ $_animation-duration: 150ms;
 
   .mdc-field__outline-notch {
     @include outline-notch;
+
+    .mdc-field--no-label & {
+      @include outline-notch-no-label;
+    }
   }
 
   .mdc-field__outline-panel-inactive,
@@ -165,6 +169,10 @@ $_animation-duration: 150ms;
   position: relative;
 }
 
+@mixin outline-notch-no-label() {
+  display: none;
+}
+
 @mixin outline-panel() {
   border: inherit;
   border-bottom-style: solid;

components/field/lib/field.ts

@@ -41,9 +41,10 @@ export class Field extends LitElement implements FieldState {
     return {
       'mdc-field--disabled': this.disabled,
       'mdc-field--error': this.error,
-      'mdc-field--focused': this.focused,
+      'mdc-field--focus': this.focused,
       'mdc-field--populated': this.populated,
       'mdc-field--required': this.required,
+      'mdc-field--no-label': !this.label,
     };
   }
 

components/field/test/harness.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Harness} from '../../testing/harness';
+import {Field} from '../lib/field';
+
+/**
+ * Test harness for field elements.
+ */
+export class FieldHarness extends Harness<Field> {
+  override async focusWithKeyboard() {
+    this.element.focused = true;
+  }
+
+  override async focusWithPointer() {
+    await this.hoverEnter();
+    this.element.focused = true;
+  }
+
+  override async blur() {
+    await this.hoverLeave();
+    this.element.focused = false;
+  }
+
+  protected override async getInteractiveElement() {
+    await this.element.updateComplete;
+    return this.element.renderRoot.querySelector('.mdc-field') as HTMLElement;
+  }
+}

components/field/test/md-field.test.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// TODO(b/201431473): add unit tests

components/sass/_theme.scss

@@ -86,8 +86,6 @@
 /// @param {Map} $theme - The theme Map to emit custom property declarations
 ///     for.
 @mixin emit-theme-vars($theme) {
-  $theme: create-theme-properties($theme, $prefix);
-
   @each $token, $value in $theme {
     @if meta.type-of($value) == 'map' {
       @include emit-theme-vars($value);
@@ -119,7 +117,9 @@
 /// @param {Map} $theme - User-provided theme Map to validate.
 /// @return {Map} The validated user-provided theme Map.
 @function validate-theme($reference-theme, $theme) {
-  @return _validate-theme-values(validate-theme-keys($reference-theme, $theme));
+  @return _validate-theme-values(
+    validate-theme-tokens($reference-theme, $theme)
+  );
 }
 
 /// Validates a theme's tokens and throws an error if incorrect tokens are