Foundation: Update Number field, Search, Switch, Text area, and Text field

change/@microsoft-fast-foundation-69119fce-3da9-46bf-a21b-c645b441fcab.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Foundation: Update Number field, Search, Switch, Text area, and Text field templates (https://github.com/microsoft/fast/pull/6798)",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/docs/api-report.md

@@ -1481,10 +1481,10 @@ export class FASTNumberField extends FormAssociatedNumberField {
     // @internal
     connectedCallback(): void;
     // @internal
-    control: HTMLInputElement;
-    // @internal
     defaultSlottedNodes: Node[];
     // @internal
+    field: HTMLInputElement;
+    // @internal
     handleBlur(): void;
     // @internal
     handleChange(): void;
@@ -1738,11 +1738,11 @@ export class FASTSearch extends FormAssociatedSearch {
     protected autofocusChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
-    // @internal
-    control: HTMLInputElement;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
     // @internal
+    field: HTMLInputElement;
+    // @internal
     handleChange(): void;
     handleClearInput(): void;
     // @internal
@@ -1765,8 +1765,6 @@ export class FASTSearch extends FormAssociatedSearch {
     readOnly: boolean;
     // (undocumented)
     protected readOnlyChanged(): void;
-    // @internal
-    root: HTMLDivElement;
     size: number;
     // (undocumented)
     protected sizeChanged(): void;
@@ -2009,10 +2007,10 @@ export class FASTTextArea extends FormAssociatedTextArea {
     // (undocumented)
     protected autofocusChanged(): void;
     cols: number;
-    // @internal
-    control: HTMLTextAreaElement;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
+    // @internal
+    field: HTMLTextAreaElement;
     formId: string;
     // @internal
     handleChange(): void;
@@ -2042,7 +2040,7 @@ export class FASTTextArea extends FormAssociatedTextArea {
 }
 
 // @internal
-export interface FASTTextArea extends DelegatesARIATextbox {
+export interface FASTTextArea extends StartEnd, DelegatesARIATextbox {
 }
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
@@ -2056,11 +2054,11 @@ export class FASTTextField extends FormAssociatedTextField {
     protected autofocusChanged(): void;
     // @internal (undocumented)
     connectedCallback(): void;
-    // @internal
-    control: HTMLInputElement;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
     // @internal
+    field: HTMLInputElement;
+    // @internal
     handleChange(): void;
     // @internal
     handleTextInput(): void;
@@ -2508,8 +2506,8 @@ export function noninteractiveCalendarTemplate<T extends FASTCalendar>(options:
 
 // @public
 export type NumberFieldOptions = StartEndOptions<FASTNumberField> & {
-    stepDownGlyph?: StaticallyComposableHTML<FASTNumberField>;
-    stepUpGlyph?: StaticallyComposableHTML<FASTNumberField>;
+    stepDownIcon?: StaticallyComposableHTML<FASTNumberField>;
+    stepUpIcon?: StaticallyComposableHTML<FASTNumberField>;
 };
 
 // @public
@@ -2632,7 +2630,9 @@ export const ScrollEasing: {
 export type ScrollEasing = ValuesOf<typeof ScrollEasing>;
 
 // @public
-export type SearchOptions = StartEndOptions<FASTSearch>;
+export type SearchOptions = StartEndOptions<FASTSearch> & {
+    clearIcon?: StaticallyComposableHTML<FASTSearch>;
+};
 
 // @public
 export function searchTemplate<T extends FASTSearch>(options?: SearchOptions): ElementViewTemplate<T>;
@@ -2732,7 +2732,7 @@ export const supportsElementInternals: boolean;
 
 // @public
 export type SwitchOptions = {
-    switch?: StaticallyComposableHTML<FASTSwitch>;
+    thumb?: StaticallyComposableHTML<FASTSwitch>;
 };
 
 // @public
@@ -2768,6 +2768,9 @@ export function tagFor(dependency: TemplateElementDependency): string;
 // @beta
 export type TemplateElementDependency = string | FASTElementDefinition | Constructable<FASTElement>;
 
+// @public
+export type TextAreaOptions = StartEndOptions;
+
 // @public
 export const TextAreaResize: {
     readonly none: "none";
@@ -2780,7 +2783,7 @@ export const TextAreaResize: {
 export type TextAreaResize = ValuesOf<typeof TextAreaResize>;
 
 // @public
-export function textAreaTemplate<T extends FASTTextArea>(): ElementViewTemplate<T>;
+export function textAreaTemplate<T extends FASTTextArea>(options?: TextAreaOptions): ElementViewTemplate<T>;
 
 // @public
 export type TextFieldOptions = StartEndOptions<FASTTextField>;

packages/web-components/fast-foundation/src/number-field/README.md

@@ -161,24 +161,24 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### CSS Parts
 
-| Name        | Description                                                     |
-| ----------- | --------------------------------------------------------------- |
-| `label`     | The label                                                       |
-| `root`      | The element wrapping the control, including start and end slots |
-| `control`   | The element representing the input                              |
-| `controls`  | The step up and step down controls                              |
-| `step-up`   | The step up control                                             |
-| `step-down` | The step down control                                           |
+| Name           | Description                                                                              |
+| -------------- | ---------------------------------------------------------------------------------------- |
+| `label`        | The label                                                                                |
+| `control`      | The logical control, the element wrapping the input field, including start and end slots |
+| `field`        | The element representing the input field                                                 |
+| `step-buttons` | The step up and step down controls                                                       |
+| `step-up`      | The step up control                                                                      |
+| `step-down`    | The step down control                                                                    |
 
 #### Slots
 
-| Name              | Description                                                 |
-| ----------------- | ----------------------------------------------------------- |
-| `start`           | Content which can be provided before the number field input |
-| `end`             | Content which can be provided after the number field input  |
-|                   | The default slot for the label                              |
-| `step-up-glyph`   | The glyph for the step up control                           |
-| `step-down-glyph` | The glyph for the step down control                         |
+| Name             | Description                                                 |
+| ---------------- | ----------------------------------------------------------- |
+| `start`          | Content which can be provided before the number field input |
+| `end`            | Content which can be provided after the number field input  |
+|                  | The default slot for the label                              |
+| `step-up-icon`   | The icon for the step up control                            |
+| `step-down-icon` | The icon for the step down control                          |
 
 <hr/>
 

packages/web-components/fast-foundation/src/number-field/number-field.pw.spec.ts

@@ -17,7 +17,7 @@ test.describe("NumberField", () => {
 
         root = page.locator("#root");
 
-        control = element.locator(".control");
+        control = element.locator(".field");
 
         await page.goto(fixtureURL("number-field--number-field"));
     });

packages/web-components/fast-foundation/src/number-field/number-field.spec.md

@@ -52,9 +52,10 @@ Extends FAST Element
 <!-- shadow root -->
 <label part="label"><slot></slot></label>
 <div part="root">
-  <slot name="before-content" part="before-content"></slot>
+  <slot name="start" part="start"></slot>
   <input part="control" />
-  <slot name="after-content" part="after-content"></slot>
+  <div part="step-buttons"></div>
+  <slot name="end" part="end"></slot>
 </div>
 <!-- end shadow root -->
 ```
@@ -67,8 +68,8 @@ Extends FAST Element
 
 *Slot Names*
 - default - the label content
-- before-content - often times a glyph, icon, or button precedes input
-- after-content - often times a glyph, icon, or button follows the input
+- start - often times a glyph, icon, or button precedes input
+- end - often times a glyph, icon, or button follows the input
 
 *Host Classes*
 - disabled
@@ -78,9 +79,10 @@ Extends FAST Element
 *CSS Parts*
 - label
 - root
-- before-content
-- after-content
+- start
+- end
 - control
+- step-buttons
 
 ---
 

packages/web-components/fast-foundation/src/number-field/number-field.template.ts

@@ -13,20 +13,20 @@ export function numberFieldTemplate<T extends FASTNumberField>(
     return html<T>`
         <label
             part="label"
-            for="control"
+            for="field"
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
                     : "label label__hidden"}"
         >
             <slot ${slotted("defaultSlottedNodes")}></slot>
         </label>
-        <div class="root" part="root">
+        <div class="control" part="control">
             ${startSlotTemplate(options)}
             <input
-                class="control"
-                part="control"
-                id="control"
+                class="field"
+                part="field"
+                id="field"
                 @input="${x => x.handleTextInput()}"
                 @change="${x => x.handleChange()}"
                 @keydown="${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}"
@@ -64,24 +64,24 @@ export function numberFieldTemplate<T extends FASTNumberField>(
                 aria-owns="${x => x.ariaOwns}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
-                ${ref("control")}
+                ${ref("field")}
             />
             ${when(
                 x => !x.hideStep && !x.readOnly && !x.disabled,
                 html<T>`
-                    <div class="controls" part="controls">
+                    <div class="step-buttons" part="step-buttons">
                         <div class="step-up" part="step-up" @click="${x => x.stepUp()}">
-                            <slot name="step-up-glyph">
-                                ${staticallyCompose(options.stepUpGlyph)}
+                            <slot name="step-up-icon">
+                                ${staticallyCompose(options.stepUpIcon)}
                             </slot>
                         </div>
                         <div
                             class="step-down"
                             part="step-down"
                             @click="${x => x.stepDown()}"
                         >
-                            <slot name="step-down-glyph">
-                                ${staticallyCompose(options.stepDownGlyph)}
+                            <slot name="step-down-icon">
+                                ${staticallyCompose(options.stepDownIcon)}
                             </slot>
                         </div>
                     </div>

packages/web-components/fast-foundation/src/number-field/number-field.ts

@@ -17,8 +17,8 @@ import { FormAssociatedNumberField } from "./number-field.form-associated.js";
  * @public
  */
 export type NumberFieldOptions = StartEndOptions<FASTNumberField> & {
-    stepDownGlyph?: StaticallyComposableHTML<FASTNumberField>;
-    stepUpGlyph?: StaticallyComposableHTML<FASTNumberField>;
+    stepDownIcon?: StaticallyComposableHTML<FASTNumberField>;
+    stepUpIcon?: StaticallyComposableHTML<FASTNumberField>;
 };
 
 /**
@@ -28,12 +28,12 @@ export type NumberFieldOptions = StartEndOptions<FASTNumberField> & {
  * @slot start - Content which can be provided before the number field input
  * @slot end - Content which can be provided after the number field input
  * @slot - The default slot for the label
- * @slot step-up-glyph - The glyph for the step up control
- * @slot step-down-glyph - The glyph for the step down control
+ * @slot step-up-icon - The icon for the step up control
+ * @slot step-down-icon - The icon for the step down control
  * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The element representing the input
- * @csspart controls - The step up and step down controls
+ * @csspart control - The logical control, the element wrapping the input field, including start and end slots
+ * @csspart field - The element representing the input field
+ * @csspart step-buttons - The step up and step down controls
  * @csspart step-up - The step up control
  * @csspart step-down - The step down control
  * @fires input - Fires a custom 'input' event when the value has changed
@@ -184,10 +184,10 @@ export class FASTNumberField extends FormAssociatedNumberField {
     public defaultSlottedNodes: Node[];
 
     /**
-     * A reference to the internal input element
+     * A reference to the internal field element
      * @internal
      */
-    public control: HTMLInputElement;
+    public field: HTMLInputElement;
 
     /**
      * Flag to indicate that the value change is from the user input
@@ -212,7 +212,6 @@ export class FASTNumberField extends FormAssociatedNumberField {
      * Validates that the value is a number between the min and max
      * @param previous - previous stored value
      * @param next - value being updated
-     * @param updateControl - should the text field be updated with value, defaults to true
      * @internal
      */
     public valueChanged(previous: string, next: string): void {
@@ -223,8 +222,8 @@ export class FASTNumberField extends FormAssociatedNumberField {
             return;
         }
 
-        if (this.$fastController.isConnected && this.control?.value !== value) {
-            this.control.value = this.value;
+        if (this.$fastController.isConnected && this.field?.value !== value) {
+            this.field.value = this.value;
         }
 
         super.valueChanged(previous, this.value);
@@ -239,7 +238,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
 
     /** {@inheritDoc (FormAssociated:interface).validate} */
     public validate(): void {
-        super.validate(this.control);
+        super.validate(this.field);
     }
 
     /**
@@ -309,7 +308,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
 
         this.proxy.setAttribute("type", "number");
         this.validate();
-        this.control.value = this.value;
+        this.field.value = this.value;
 
         if (this.autofocus) {
             Updates.enqueue(() => {
@@ -324,7 +323,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
      * @public
      */
     public select(): void {
-        this.control.select();
+        this.field.select();
 
         /**
          * The select event does not permeate the shadow DOM boundary.
@@ -336,13 +335,13 @@ export class FASTNumberField extends FormAssociatedNumberField {
     }
 
     /**
-     * Handles the internal control's `input` event
+     * Handles the internal input field's `input` event
      * @internal
      */
     public handleTextInput(): void {
-        this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
+        this.field.value = this.field.value.replace(/[^0-9\-+e.]/g, "");
         this.isUserInput = true;
-        this.value = this.control.value;
+        this.value = this.field.value;
     }
 
     /**
@@ -383,11 +382,11 @@ export class FASTNumberField extends FormAssociatedNumberField {
 
     /**
      * Handles populating the input field with a validated value when
-     *  leaving the input field.
+     * leaving the input field.
      * @internal
      */
     public handleBlur(): void {
-        this.control.value = this.value;
+        this.field.value = this.value;
     }
 }