From 05a3330636bf11a760a406735cc5c445983ed68b Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Thu, 25 Apr 2024 11:44:46 -0700
Subject: [PATCH 1/3] implement ElementInternals in text-input component
---
packages/web-components/docs/api-report.md | 86 +-
.../web-components/src/text-input/README.md | 276 +++--
.../web-components/src/text-input/index.ts | 9 +-
.../text-input/text-field.form-associated.ts | 13 -
.../src/text-input/text-input.definition.ts | 5 +-
.../src/text-input/text-input.options.ts | 67 +-
.../src/text-input/text-input.spec.ts | 939 ++++++++++--------
.../src/text-input/text-input.stories.ts | 190 ++--
.../src/text-input/text-input.styles.ts | 9 +-
.../src/text-input/text-input.template.ts | 48 +-
.../src/text-input/text-input.ts | 549 +++++++---
11 files changed, 1288 insertions(+), 903 deletions(-)
delete mode 100644 packages/web-components/src/text-input/text-field.form-associated.ts
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index b649cdccfda40c..bc66af12eb3c71 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -4,6 +4,8 @@
```ts
+///
+
import type { Constructable } from '@microsoft/fast-element';
import { CSSDirective } from '@microsoft/fast-element';
import { Direction } from '@microsoft/fast-web-utilities';
@@ -2942,61 +2944,71 @@ export const TextFont: {
// @public
export type TextFont = ValuesOf;
-// Warning: (ae-forgotten-export) The symbol "FormAssociatedTextField" needs to be exported by the entry point index.d.ts
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TextInput" because one of its declarations is marked as @internal
//
-// @public (undocumented)
-export class TextInput extends FormAssociatedTextField {
+// @public
+export class TextInput extends FASTElement {
+ constructor();
appearance?: TextInputAppearance;
+ autocomplete?: string;
autofocus: boolean;
+ // @internal
+ changeHandler(e: InputEvent): void;
// (undocumented)
- protected autofocusChanged(): void;
- // @internal (undocumented)
connectedCallback(): void;
// @internal
control: HTMLInputElement;
controlSize?: TextInputControlSize;
- // @internal (undocumented)
+ // @internal
defaultSlottedNodes: Node[];
+ dirname?: string;
+ disabled?: boolean;
+ // (undocumented)
+ disconnectedCallback(): void;
+ // @internal
+ protected elementInternals: ElementInternals;
+ get form(): HTMLFormElement | null;
+ static readonly formAssociated = true;
+ formAttribute?: string;
+ // @internal
+ formResetCallback(): void;
+ initialValue: string;
// @internal
- handleChange(): void;
+ initialValueChanged(): void;
// @internal
- handleTextInput(): void;
+ inputHandler(e: InputEvent): boolean | void;
+ // @internal
+ keypressHandler(e: KeyboardEvent): boolean | void;
list: string;
- // (undocumented)
- protected listChanged(): void;
maxlength: number;
- // (undocumented)
- protected maxlengthChanged(): void;
minlength: number;
- // (undocumented)
- protected minlengthChanged(): void;
+ multiple: boolean;
+ name: string;
pattern: string;
- // (undocumented)
- protected patternChanged(): void;
placeholder: string;
- // (undocumented)
- protected placeholderChanged(): void;
- readOnly: boolean;
- // (undocumented)
- protected readOnlyChanged(): void;
+ readonly?: boolean;
+ // @internal
+ readonlyChanged(): void;
+ required: boolean;
+ // @internal
+ requiredChanged(previous: boolean, next: boolean): void;
select(): void;
+ // @internal
+ setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+ // @internal
+ setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
size: number;
- // (undocumented)
- protected sizeChanged(): void;
spellcheck: boolean;
- // (undocumented)
- protected spellcheckChanged(): void;
type: TextInputType;
- // Warning: (ae-unresolved-inheritdoc-reference) The @inheritDoc reference could not be resolved: The package "@fluentui/web-components" does not have an export "FormAssociated"
- //
- // (undocumented)
- validate(): void;
+ get validationMessage(): string;
+ get validity(): ValidityState;
+ get value(): string;
+ set value(value: string);
+ get willValidate(): boolean;
}
-// Warning: (ae-forgotten-export) The symbol "DelegatesARIATextbox" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export interface TextInput extends StartEnd, DelegatesARIATextbox {
+// @internal (undocumented)
+export interface TextInput extends StartEnd {
}
// @public
@@ -3007,7 +3019,7 @@ export const TextInputAppearance: {
readonly filledDarker: "filled-darker";
};
-// @public
+// @public (undocumented)
export type TextInputAppearance = ValuesOf;
// @public
@@ -3017,13 +3029,13 @@ export const TextInputControlSize: {
readonly large: "large";
};
-// @public
+// @public (undocumented)
export type TextInputControlSize = ValuesOf;
// @public
export const TextInputDefinition: FASTElementDefinition;
-// @public (undocumented)
+// @public
export type TextInputOptions = StartEndOptions;
// @public
@@ -3043,7 +3055,7 @@ export const TextInputType: {
readonly url: "url";
};
-// @public
+// @public (undocumented)
export type TextInputType = ValuesOf;
// @public
diff --git a/packages/web-components/src/text-input/README.md b/packages/web-components/src/text-input/README.md
index f7b1f5b08945e7..3cdb61261a7dde 100644
--- a/packages/web-components/src/text-input/README.md
+++ b/packages/web-components/src/text-input/README.md
@@ -1,155 +1,149 @@
-# TextInput
+# The `TextInput` Custom Element
+
+A partial implementation of an [``](https://w3c.github.io/html-reference/input.text.html) as a form-associated custom element.
+
+The `` is intended to match feature parity with the Fluent UI React 9 `` component. However, due to the nature of web components there will not be 100% parity between the two.
+
+[View the Text Input Design Spec in Figma](https://www.figma.com/file/TvHmWjZYxwtI9Tz6v5BT7E/Input?node-id=2366-657&t=UNSOfCD3St9ffppx-0)
+
+## API
+
+### Class: `TextInput`
+
+#### Definition
+
+| Detail | Description |
+| ---------- | --------------------- |
+| Tag Name | `` |
+| Superclass | `FASTElement` |
+
+#### Static Fields
+
+| Name | Privacy | Type | Default | Description | Inherited From |
+| ---------------- | ------- | --------- | ------- | ------------------------- | -------------- |
+| `formAssociated` | public | `boolean` | `true` | The form-associated flag. | |
+
+#### Fields
+
+| Name | Privacy | Type | Default | Description |
+| ------------------- | ------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `appearance` | public | `TextInputAppearance` | `'outline'` | Indicates the styled appearance of the element. |
+| `autocomplete` | public | `string \| undefined` | | Indicates the element's autocomplete state. |
+| `autofocus` | public | `boolean` | | Indicates that the element should get focus after the page finishes loading. |
+| `controlSize` | public | `TextInputControlSize \| undefined` | `'medium'` | Sets the size of the control. |
+| `dirname` | public | `string \| undefined` | | Sets the directionality of the element to be submitted with form data. |
+| `disabled` | public | `boolean \| undefined` | | Sets the element's disabled state. |
+| `formAttribute` | public | `string \| undefined` | | The id of a form to associate the element to. |
+| `initialValue` | public | `string` | | The initial value of the input. |
+| `list` | public | `string` | | Allows associating a `REPLACELTdatalistREPLACEGT` to the element by ID. |
+| `maxlength` | public | `number` | | The maximum number of characters a user can enter. |
+| `minlength` | public | `number` | | The minimum number of characters a user can enter. |
+| `multiple` | public | `boolean` | | Indicates that a comma-separated list of email addresses can be entered. This attribute is only valid when `type="email"`. |
+| `name` | public | `string` | | The name of the element. This element's value will be surfaced during form submission under the provided name. |
+| `pattern` | public | `string` | | A regular expression that the value must match to pass validation. |
+| `placeholder` | public | `string` | | Sets the placeholder value of the element, generally used to provide a hint to the user. |
+| `readonly` | public | `boolean \| undefined` | | When true, the control will be immutable by user interaction. |
+| `required` | public | `boolean` | | The element's required attribute. |
+| `size` | public | `number` | | Sets the width of the element to a specified number of characters. |
+| `spellcheck` | public | `boolean` | | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used. |
+| `type` | public | `TextInputType` | | Allows setting a type or mode of text. |
+| `validity` | public | `ValidityState` | | The element's validity state. |
+| `validationMessage` | public | `string` | | The validation message. |
+| `value` | public | `string` | | The current value of the input. |
+| `willValidate` | public | `boolean` | | Determines if the control can be submitted for constraint validation. |
+| `form` | public | `HTMLFormElement \| null` | | The associated form element. |
+| `role` | | `string` | `'textbox'` | |
+
+#### Methods
+
+| Name | Privacy | Description | Parameters | Return |
+| ------------- | ------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------ |
+| `select` | public | Selects all the text in the text field. | | `void` |
+| `setValidity` | public | Sets the validity of the control. |