[chore]: abstracts layout api from field class (#32203)

microsoft · Aug 1, 2024 · 449457b · 449457b
1 parent 6336863
commit 449457b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 43 deletions.
diff --git a/change/@fluentui-web-components-c3806260-df2c-412f-bfb5-51398d51025e.json b/change/@fluentui-web-components-c3806260-df2c-412f-bfb5-51398d51025e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: abstracts layout api from field class",
+  "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
@@ -515,6 +515,40 @@ export class BaseDivider extends FASTElement {
     roleChanged(previous: string | null, next: string | null): void;
 }
 
+// @public
+export class BaseField extends FASTElement {
+    constructor();
+    // @internal
+    changeHandler(e: Event): boolean | void;
+    // @internal
+    clickHandler(e: MouseEvent): boolean | void;
+    // @internal
+    elementInternals: ElementInternals;
+    // @internal
+    focusinHandler(e: FocusEvent): boolean | void;
+    // @internal
+    focusoutHandler(e: FocusEvent): boolean | void;
+    input: SlottableInput;
+    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
+    // @internal
+    invalidHandler(e: Event): boolean | void;
+    // @internal
+    labelSlot: Node[];
+    protected labelSlotChanged(prev: Node[], next: Node[]): void;
+    // @internal
+    messageSlot: Element[];
+    // @internal
+    messageSlotChanged(prev: Element[], next: Element[]): void;
+    // @internal
+    setStates(): void;
+    // (undocumented)
+    setValidationStates(): void;
+    // @internal
+    slottedInputs: SlottableInput[];
+    // @internal
+    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
+}
+
 // @public
 export class BaseProgressBar extends FASTElement {
     constructor();
@@ -2196,38 +2230,8 @@ export const durationUltraFast = "var(--durationUltraFast)";
 export const durationUltraSlow = "var(--durationUltraSlow)";
 
 // @public
-export class Field extends FASTElement {
-    constructor();
-    // @internal
-    changeHandler(e: Event): boolean | void;
-    // @internal
-    clickHandler(e: MouseEvent): boolean | void;
-    // @internal
-    elementInternals: ElementInternals;
-    // @internal
-    focusinHandler(e: FocusEvent): boolean | void;
-    // @internal
-    focusoutHandler(e: FocusEvent): boolean | void;
-    input: SlottableInput;
-    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
-    // @internal
-    invalidHandler(e: Event): boolean | void;
+export class Field extends BaseField {
     labelPosition: FieldLabelPosition;
-    // @internal
-    labelSlot: Node[];
-    protected labelSlotChanged(prev: Node[], next: Node[]): void;
-    // @internal
-    messageSlot: Element[];
-    // @internal
-    messageSlotChanged(prev: Element[], next: Element[]): void;
-    // @internal
-    setStates(): void;
-    // (undocumented)
-    setValidationStates(): void;
-    // @internal
-    slottedInputs: SlottableInput[];
-    // @internal
-    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
 }
 
 // @public

diff --git a/packages/web-components/src/field/field.ts b/packages/web-components/src/field/field.ts
@@ -8,17 +8,7 @@ import { LabelPosition, SlottableInput, ValidationFlags } from './field.options.
  *
  * @public
  */
-export class Field extends FASTElement {
-  /**
-   * The position of the label relative to the input.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `label-position`
-   */
-  @attr({ attribute: 'label-position' })
-  public labelPosition: LabelPosition = LabelPosition.above;
-
+export class BaseField extends FASTElement {
   /**
    * The slotted label elements.
    *
@@ -233,3 +223,21 @@ export class Field extends FASTElement {
     }
   }
 }
+
+/**
+ * A Field Custom HTML Element.
+ * Based on BaseField and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class Field extends BaseField {
+  /**
+   * The position of the label relative to the input.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `label-position`
+   */
+  @attr({ attribute: 'label-position' })
+  public labelPosition: LabelPosition = LabelPosition.above;
+}
diff --git a/packages/web-components/src/field/index.ts b/packages/web-components/src/field/index.ts
@@ -1,4 +1,4 @@
-export { Field } from './field.js';
+export { BaseField, Field } from './field.js';
 export { LabelPosition as FieldLabelPosition, ValidationFlags } from './field.options.js';
 export type { SlottableInput } from './field.options.js';
 export { definition as FieldDefinition } from './field.definition.js';

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -104,6 +104,7 @@ export {
 } from './drawer/index.js';
 export { DrawerBody, DrawerBodyDefinition, DrawerBodyTemplate, DrawerBodyStyles } from './drawer-body/index.js';
 export {
+  BaseField,
   Field,
   FieldLabelPosition,
   ValidationFlags,