Chore: Create Divider base class to abstract out style and layout specific api

change/@fluentui-web-components-b3c312bc-fbd8-441b-94e7-fece2be539a3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: create divider base class to abstract style specfic api",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -457,6 +457,57 @@ export const BadgeStyles: ElementStyles;
 // @public (undocumented)
 export const BadgeTemplate: ElementViewTemplate<Badge>;
 
+// @public
+export class BaseButton extends FASTElement {
+    constructor();
+    autofocus: boolean;
+    // @internal
+    clickHandler(e: Event): boolean | void;
+    // (undocumented)
+    connectedCallback(): void;
+    defaultSlottedContent: HTMLElement[];
+    disabled?: boolean;
+    disabledFocusable: boolean;
+    // @internal
+    disabledFocusableChanged(previous: boolean, next: boolean): void;
+    // @internal
+    elementInternals: ElementInternals;
+    get form(): HTMLFormElement | null;
+    formAction?: string;
+    static readonly formAssociated = true;
+    formAttribute?: string;
+    // @internal
+    formDisabledCallback(disabled: boolean): void;
+    formEnctype?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: ButtonFormTarget;
+    keypressHandler(e: KeyboardEvent): boolean | void;
+    get labels(): ReadonlyArray<Node>;
+    name?: string;
+    protected press(): void;
+    resetForm(): void;
+    tabIndex: number;
+    type: ButtonType;
+    // @internal
+    typeChanged(previous: ButtonType, next: ButtonType): void;
+    value?: string;
+}
+
+// @public
+export class BaseDivider extends FASTElement {
+    // (undocumented)
+    connectedCallback(): void;
+    // @internal
+    elementInternals: ElementInternals;
+    orientation?: DividerOrientation;
+    // @internal
+    orientationChanged(previous: string | null, next: string | null): void;
+    role: DividerRole;
+    // @internal
+    roleChanged(previous: string | null, next: string | null): void;
+}
+
 // @public
 export const borderRadiusCircular = "var(--borderRadiusCircular)";
 
@@ -476,7 +527,6 @@ export const borderRadiusSmall = "var(--borderRadiusSmall)";
 export const borderRadiusXLarge = "var(--borderRadiusXLarge)";
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
-// Warning: (ae-forgotten-export) The symbol "BaseButton" needs to be exported by the entry point index.d.ts
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal
 //
 // @public
@@ -1871,29 +1921,17 @@ export type DialogType = ValuesOf<typeof DialogType>;
 // @public
 export function display(displayValue: CSSDisplayPropertyValue): string;
 
-// Warning: (ae-missing-release-tag) "Divider" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
-export class Divider extends FASTElement {
+export class Divider extends BaseDivider {
     // (undocumented)
     alignContent?: DividerAlignContent;
     alignContentChanged(prev: DividerAlignContent | undefined, next: DividerAlignContent | undefined): void;
     // (undocumented)
     appearance?: DividerAppearance;
     appearanceChanged(prev: DividerAppearance | undefined, next: DividerAppearance | undefined): void;
     // (undocumented)
-    connectedCallback(): void;
-    // @internal
-    elementInternals: ElementInternals;
-    // (undocumented)
     inset?: boolean;
     insetChanged(prev: boolean, next: boolean): void;
-    orientation?: DividerOrientation;
-    // @internal
-    orientationChanged(previous: string | null, next: string | null): void;
-    role: DividerRole;
-    // @internal
-    roleChanged(previous: string | null, next: string | null): void;
 }
 
 // @public

packages/web-components/src/button/index.ts

@@ -1,5 +1,5 @@
 export { definition as ButtonDefinition } from './button.definition.js';
-export { Button } from './button.js';
+export { BaseButton, Button } from './button.js';
 export { ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 export type { ButtonOptions } from './button.options.js';
 export { styles as ButtonStyles } from './button.styles.js';

packages/web-components/src/divider/divider.ts

@@ -4,11 +4,11 @@ import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole
 
 /**
  * A Divider Custom HTML Element.
- *
- * @remarks
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ *
+ * @public
  */
-export class Divider extends FASTElement {
+export class BaseDivider extends FASTElement {
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -36,6 +36,60 @@ export class Divider extends FASTElement {
   @attr
   public orientation?: DividerOrientation;
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    this.elementInternals.role = this.role ?? DividerRole.separator;
+
+    if (this.role !== DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
+    }
+  }
+
+  /**
+   * Sets the element's internal role when the role attribute changes.
+   *
+   * @param previous - the previous role value
+   * @param next - the current role value
+   * @internal
+   */
+  public roleChanged(previous: string | null, next: string | null): void {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.role = `${next ?? DividerRole.separator}`;
+    }
+
+    if (next === DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = null;
+    }
+  }
+
+  /**
+   * Sets the element's internal orientation when the orientation attribute changes.
+   *
+   * @param previous - the previous orientation value
+   * @param next - the current orientation value
+   * @internal
+   */
+  public orientationChanged(previous: string | null, next: string | null): void {
+    this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+
+    if (previous) {
+      toggleState(this.elementInternals, `${previous}`, false);
+    }
+
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+}
+
+/**
+ * A Divider Custom HTML Element.
+ * Based on BaseDivider and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class Divider extends BaseDivider {
   /**
    * @public
    * @remarks
@@ -96,50 +150,4 @@ export class Divider extends FASTElement {
   public insetChanged(prev: boolean, next: boolean) {
     toggleState(this.elementInternals, 'inset', next);
   }
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-
-    this.elementInternals.role = this.role ?? DividerRole.separator;
-
-    if (this.role !== DividerRole.presentation) {
-      this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
-    }
-  }
-
-  /**
-   * Sets the element's internal role when the role attribute changes.
-   *
-   * @param previous - the previous role value
-   * @param next - the current role value
-   * @internal
-   */
-  public roleChanged(previous: string | null, next: string | null): void {
-    if (this.$fastController.isConnected) {
-      this.elementInternals.role = `${next ?? DividerRole.separator}`;
-    }
-
-    if (next === DividerRole.presentation) {
-      this.elementInternals.ariaOrientation = null;
-    }
-  }
-
-  /**
-   * Sets the element's internal orientation when the orientation attribute changes.
-   *
-   * @param previous - the previous orientation value
-   * @param next - the current orientation value
-   * @internal
-   */
-  public orientationChanged(previous: string | null, next: string | null): void {
-    this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
-
-    if (previous) {
-      toggleState(this.elementInternals, `${previous}`, false);
-    }
-
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
 }

packages/web-components/src/divider/index.ts

@@ -1,4 +1,4 @@
-export { Divider } from './divider.js';
+export { BaseDivider, Divider } from './divider.js';
 export { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
 export { definition as DividerDefinition } from './divider.definition.js';
 export { template as DividerTemplate } from './divider.template.js';

packages/web-components/src/index.ts

@@ -38,6 +38,7 @@ export {
   BadgeTemplate,
 } from './badge/index.js';
 export {
+  BaseButton,
   Button,
   ButtonAppearance,
   ButtonDefinition,
@@ -80,6 +81,7 @@ export {
 export { Dialog, DialogType, DialogDefinition, DialogTemplate, DialogStyles } from './dialog/index.js';
 export { DialogBody, DialogBodyDefinition, DialogBodyTemplate, DialogBodyStyles } from './dialog-body/index.js';
 export {
+  BaseDivider,
   Divider,
   DividerAlignContent,
   DividerAppearance,