From fe4b9c436349b43129c04f62c5febdbb6e89d0f0 Mon Sep 17 00:00:00 2001 From: Jeff Smith <37851214+eljefe223@users.noreply.github.com> Date: Wed, 24 Jul 2024 09:02:58 -0700 Subject: [PATCH] [chore]: create base class for text input and remove style and layout specific api (#32080) --- ...-9f5b2454-7f3e-45fc-90f2-c8b18aaefa4a.json | 7 + packages/web-components/docs/api-report.md | 132 +++++++++--------- packages/web-components/src/index.ts | 1 + .../web-components/src/text-input/index.ts | 2 +- .../src/text-input/text-input.ts | 106 +++++++------- 5 files changed, 134 insertions(+), 114 deletions(-) create mode 100644 change/@fluentui-web-components-9f5b2454-7f3e-45fc-90f2-c8b18aaefa4a.json diff --git a/change/@fluentui-web-components-9f5b2454-7f3e-45fc-90f2-c8b18aaefa4a.json b/change/@fluentui-web-components-9f5b2454-7f3e-45fc-90f2-c8b18aaefa4a.json new file mode 100644 index 0000000000000..c58334c62266a --- /dev/null +++ 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": "jes@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 559e656021545..3b7f7f9d7749c 100644 --- 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, 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; // 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, 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 index 2974a1e499f8b..e867b6f1fa04e 100644 --- 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 index f616a0a52b3ce..4330e57e94b2a 100644 --- 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 index 770d5d174d86a..67ef92d8fe7d0 100644 --- 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 `` 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