test(text-field): create tests for text field

src/dev/pages/text-field/text-field.ejs

@@ -23,6 +23,13 @@
       <input type="text" />
     </forge-text-field>
   </div>
+
+  <div>
+    <h3 class="forge-typography--heading2">Label aware</h3>
+    <forge-text-field>
+      <forge-label>First name</forge-label>
+      <input type="text" />
+    </forge-text-field>
 </div>
 
 

src/lib/field-next/_core.slotted.scss

@@ -38,6 +38,10 @@
   text-overflow: ellipsis;
 }
 
+@mixin slotted-forge-label {
+  font: inherit;
+}
+
 @mixin default-slot-disabled {
   cursor: not-allowed;
 }

src/lib/field-next/base/base-field-adapter.ts

@@ -1,4 +1,4 @@
-import { BaseAdapter, IBaseAdapter } from '@tylertech/forge/core';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IFieldComponent } from '../field';
 import { IBaseField } from './base-field';
 

src/lib/field-next/base/base-field.ts

@@ -1,6 +1,6 @@
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { BaseComponent } from '@tylertech/forge/core';
-import { IWithLabelAwareness, WithLabelAwareness } from '@tylertech/forge/core/mixins/label/with-label-aware';
+import { BaseComponent } from '../../core/base/base-component';
+import { IWithLabelAwareness, WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
 import { IBaseFieldAdapter } from './base-field-adapter';
 import { BASE_FIELD_CONSTANTS, FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base-field-constants';
 import { BaseFieldFoundation } from './base-field-foundation';

src/lib/field-next/field.scss

@@ -660,6 +660,12 @@ $variants: (
     }
   }
 
+  .label {
+    ::slotted(forge-label) {
+      @include core.slotted-forge-label;
+    }
+  }
+
   &--has-start {
     @include core.main-content-padding-inline(start, start);
   }

src/lib/label/label-foundation.ts

@@ -17,6 +17,7 @@ export class LabelFoundation implements ILabelFoundation {
   // State
   private _for: string | null | undefined;
   private _forElement: HTMLElement | null | undefined;
+  private _clickTarget: HTMLElement | null | undefined;
   private _dynamic = false;
   private _nonInteractive = false;
   private _legend = false;
@@ -74,7 +75,7 @@ export class LabelFoundation implements ILabelFoundation {
   private _handleClick(evt: PointerEvent): void {
     // Prevent duplicate clicks from a nested target element or if the event originates
     // from within the target element
-    const targetEl = this._adapter.getTargetElement();
+    const targetEl = this._clickTarget ?? this._adapter.getTargetElement();
     if (evt.target === targetEl || targetEl?.contains(evt.target as Node)) {
       return;
     }
@@ -140,6 +141,15 @@ export class LabelFoundation implements ILabelFoundation {
     }
   }
 
+  public get clickTarget(): HTMLElement | null | undefined {
+    return this._clickTarget;
+  }
+  public set clickTarget(value: HTMLElement | null | undefined) {
+    if (this._clickTarget !== value) {
+      this._clickTarget = value;
+    }
+  }
+
   public get dynamic(): boolean {
     return this._dynamic;
   }

src/lib/label/label.ts

@@ -30,6 +30,7 @@ declare global {
  * 
  * @property {string | null | undefined} for - The id of the associated element.
  * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {HTMLElement | null | undefined} clickTarget - The element that a click should be simulated on. If not defined clicks act on the associated element.
  * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
  * @property {boolean} nonInteractive - Removes click handling from the label.
  * @property {boolean} legend - Whether or not the label should be associated with an ancestor element.
@@ -90,6 +91,9 @@ export class LabelComponent extends BaseComponent implements ILabelComponent {
   @FoundationProperty()
   public declare forElement: HTMLElement | null | undefined;
 
+  @FoundationProperty()
+  public declare clickTarget: HTMLElement | null | undefined;
+
   @FoundationProperty()
   public declare dynamic: boolean;
 

src/lib/text-field/text-field-adapter.ts

@@ -143,14 +143,15 @@ export class TextFieldAdapter extends BaseFieldAdapter implements ITextFieldAdap
     const elements = slot.assignedElements({ flatten: true });
 
     // Attempt to find and connect a `<forge-label>` element
-    const forgeLabel = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.selectors.FORGE_LABEL) as LabelComponent | undefined;
+    const forgeLabel = elements.find(el => el.matches(TEXT_FIELD_CONSTANTS.selectors.FORGE_LABEL)) as LabelComponent | undefined;
     if (forgeLabel) {
-      forgeLabel.forElement = inputElement;
+      forgeLabel.forElement = this._component;
+      forgeLabel.clickTarget = inputElement;
       return;
     }
 
     // Attempt to find and connect a `<label>` element
-    const label = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.selectors.LABEL) as HTMLLabelElement | undefined;
+    const label = elements.find(el => el.tagName === TEXT_FIELD_CONSTANTS.tagNames.LABEL) as HTMLLabelElement | undefined;
     if (!label || label.control) {
       return;
     }

src/lib/text-field/text-field-constants.ts

@@ -14,7 +14,6 @@ const attributes = {
 const selectors = {
   FIELD: '#field',
   CLEAR_BUTTON_SLOT: 'slot[name=clear-button]',
-  LABEL: 'label',
   FORGE_LABEL: LABEL_CONSTANTS.elementName,
   INPUT: ':where(input:not([type=button], [type=checkbox], [type=color], [type=hidden], [type=image], [type=radio], [type=range], [type=reset], [type=submit]), textarea)'
 };
@@ -32,6 +31,7 @@ const events = {
 
 export const TEXT_FIELD_CONSTANTS = {
   elementName,
+  observedAttributes,
   attributes,
   selectors,
   observedInputAttributes,

src/lib/text-field/text-field-foundation.ts

@@ -1,4 +1,4 @@
-import { FieldLabelPosition } from '../field-next';
+import { FieldLabelPosition, FIELD_CONSTANTS } from '../field-next';
 import { BaseFieldFoundation, IBaseFieldFoundation } from '../field-next/base/base-field-foundation';
 import { ITextFieldAdapter, TextFieldAdapter } from './text-field-adapter';
 import { TextFieldInputAttributeObserver, TextFieldValueChangeListener, TEXT_FIELD_CONSTANTS } from './text-field-constants';
@@ -72,6 +72,7 @@ export class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter>
   public set showClear(value: boolean) {
     if (this._showClear !== value) {
       this._showClear = value;
+      this._adapter.toggleHostAttribute(TEXT_FIELD_CONSTANTS.attributes.SHOW_CLEAR, value);
 
       if (value) {
         this._adapter.connectClearButton(this._clearButtonClickListener);
@@ -88,6 +89,7 @@ export class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter>
   public override set disabled(value: boolean) {
     if (this._disabled !== value) {
       this._disabled = value;
+      this._adapter.toggleHostAttribute(FIELD_CONSTANTS.attributes.DISABLED, value);
       this._adapter.setFieldProperty('disabled', value);
       this._adapter.disableInput(value);
       this._toggleClearButtonVisibility();
@@ -100,6 +102,7 @@ export class TextFieldFoundation extends BaseFieldFoundation<ITextFieldAdapter>
   public override set labelPosition(value: FieldLabelPosition) {
     if (this._labelPosition !== value) {
       this._labelPosition = value;
+      this._adapter.toggleHostAttribute(FIELD_CONSTANTS.attributes.LABEL_POSITION, true, value);
       this._adapter.setFieldProperty('labelPosition', value);
       this._tryFloatLabel();
     }