[chore]: create base class for text input and remove style and layout…

… specific api (#32080)
microsoft · Jul 24, 2024 · fe4b9c4 · fe4b9c4
1 parent c75e237
commit fe4b9c4
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 114 deletions.
diff --git a/change/@fluentui-web-components-9f5b2454-7f3e-45fc-90f2-c8b18aaefa4a.json b/change/@fluentui-web-components-9f5b2454-7f3e-45fc-90f2-c8b18aaefa4a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: create base class for textinput and remove style and layout specific api",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -536,6 +536,73 @@ export class BaseSpinner extends FASTElement {
     elementInternals: ElementInternals;
 }
 
+// @public
+export class BaseTextInput extends FASTElement {
+    autocomplete?: string;
+    autofocus: boolean;
+    // @internal
+    beforeinputHandler(e: InputEvent): boolean | void;
+    // @internal
+    changeHandler(e: InputEvent): boolean | void;
+    checkValidity(): boolean;
+    clickHandler(e: MouseEvent): boolean | void;
+    // (undocumented)
+    connectedCallback(): void;
+    // @internal
+    control: HTMLInputElement;
+    // @internal
+    controlLabel: HTMLLabelElement;
+    // @internal
+    defaultSlottedNodes: Node[];
+    // @internal
+    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    dirname?: string;
+    disabled?: boolean;
+    // @internal
+    elementInternals: ElementInternals;
+    focusinHandler(e: FocusEvent): boolean | void;
+    get form(): HTMLFormElement | null;
+    static readonly formAssociated = true;
+    formAttribute?: string;
+    // @internal
+    formResetCallback(): void;
+    initialValue: string;
+    // @internal
+    initialValueChanged(): void;
+    // @internal
+    inputHandler(e: InputEvent): boolean | void;
+    // @internal
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    list: string;
+    maxlength: number;
+    minlength: number;
+    multiple: boolean;
+    name: string;
+    pattern: string;
+    placeholder: string;
+    readOnly?: boolean;
+    // @internal
+    readOnlyChanged(): void;
+    reportValidity(): boolean;
+    required: boolean;
+    // @internal
+    requiredChanged(previous: boolean, next: boolean): void;
+    select(): void;
+    setCustomValidity(message: string): void;
+    // @internal
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    // @internal
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    size: number;
+    spellcheck: boolean;
+    type: TextInputType;
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get value(): string;
+    set value(value: string);
+    get willValidate(): boolean;
+}
+
 // @public
 export const borderRadiusCircular = "var(--borderRadiusCircular)";
 
@@ -3377,74 +3444,11 @@ export type TextFont = ValuesOf<typeof TextFont>;
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TextInput" because one of its declarations is marked as @internal
 //
 // @public
-export class TextInput extends FASTElement {
+export class TextInput extends BaseTextInput {
     appearance?: TextInputAppearance;
     appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined): void;
-    autocomplete?: string;
-    autofocus: boolean;
-    // @internal
-    beforeinputHandler(e: InputEvent): boolean | void;
-    // @internal
-    changeHandler(e: InputEvent): boolean | void;
-    checkValidity(): boolean;
-    clickHandler(e: MouseEvent): boolean | void;
-    // (undocumented)
-    connectedCallback(): void;
-    // @internal
-    control: HTMLInputElement;
-    // @internal
-    controlLabel: HTMLLabelElement;
     controlSize?: TextInputControlSize;
     controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined): void;
-    // @internal
-    defaultSlottedNodes: Node[];
-    // @internal
-    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
-    dirname?: string;
-    disabled?: boolean;
-    // @internal
-    elementInternals: ElementInternals;
-    focusinHandler(e: FocusEvent): boolean | void;
-    get form(): HTMLFormElement | null;
-    static readonly formAssociated = true;
-    formAttribute?: string;
-    // @internal
-    formResetCallback(): void;
-    initialValue: string;
-    // @internal
-    initialValueChanged(): void;
-    // @internal
-    inputHandler(e: InputEvent): boolean | void;
-    // @internal
-    keydownHandler(e: KeyboardEvent): boolean | void;
-    list: string;
-    maxlength: number;
-    minlength: number;
-    multiple: boolean;
-    name: string;
-    pattern: string;
-    placeholder: string;
-    readOnly?: boolean;
-    // @internal
-    readOnlyChanged(): void;
-    reportValidity(): boolean;
-    required: boolean;
-    // @internal
-    requiredChanged(previous: boolean, next: boolean): void;
-    select(): void;
-    setCustomValidity(message: string): void;
-    // @internal
-    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
-    // @internal
-    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
-    size: number;
-    spellcheck: boolean;
-    type: TextInputType;
-    get validationMessage(): string;
-    get validity(): ValidityState;
-    get value(): string;
-    set value(value: string);
-    get willValidate(): boolean;
 }
 
 // @internal (undocumented)

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -224,6 +224,7 @@ export {
 } from './tabs/index.js';
 export type { TabsOptions } from './tabs/index.js';
 export {
+  BaseTextInput,
   TextInput,
   TextInputAppearance,
   TextInputControlSize,

diff --git a/packages/web-components/src/text-input/index.ts b/packages/web-components/src/text-input/index.ts
@@ -1,5 +1,5 @@
 export { definition as TextInputDefinition } from './text-input.definition.js';
-export { TextInput } from './text-input.js';
+export { BaseTextInput, TextInput } from './text-input.js';
 export { TextInputAppearance, TextInputControlSize, TextInputType } from './text-input.options.js';
 export type { TextInputOptions } from './text-input.options.js';
 export { styles as TextInputStyles } from './text-input.styles.js';

diff --git a/packages/web-components/src/text-input/text-input.ts b/packages/web-components/src/text-input/text-input.ts
@@ -17,31 +17,7 @@ import { ImplicitSubmissionBlockingTypes, TextInputAppearance, TextInputType } f
  * @csspart control - The internal `<input>` control
  * @public
  */
-export class TextInput extends FASTElement {
-  /**
-   * Indicates the styled appearance of the element.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `appearance`
-   */
-  @attr
-  public appearance?: TextInputAppearance;
-
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  public appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-
+export class BaseTextInput extends FASTElement {
   /**
    * Indicates the element's autocomplete state.
    * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
@@ -64,30 +40,6 @@ export class TextInput extends FASTElement {
   @attr({ mode: 'boolean' })
   public autofocus!: boolean;
 
-  /**
-   * Sets the size of the control.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `control-size`
-   */
-  @attr({ attribute: 'control-size' })
-  public controlSize?: TextInputControlSize;
-
-  /**
-   * Handles changes to `control-size` attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  public controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-
   /**
    * The default slotted content. This is the content that appears in the text field label.
    *
@@ -643,6 +595,62 @@ export class TextInput extends FASTElement {
   }
 }
 
+/**
+ * A Text Input Custom HTML Element.
+ * Based on BaseTextInput and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class TextInput extends BaseTextInput {
+  /**
+   * Indicates the styled appearance of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `appearance`
+   */
+  @attr
+  public appearance?: TextInputAppearance;
+
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
+  /**
+   * Sets the size of the control.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `control-size`
+   */
+  @attr({ attribute: 'control-size' })
+  public controlSize?: TextInputControlSize;
+
+  /**
+   * Handles changes to `control-size` attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+}
+
 /**
  * @internal
  * @privateRemarks