(web-components) Use ElementInternals for Button elements (microsof…

…t#30999)

change/@fluentui-web-components-c2d922a6-50ec-49e1-b5f6-9e38ecd60758.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Use ElementInternals for Button components",
+ "packageName": "@fluentui/web-components",
+ "email": "863023+radium-v@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}

packages/web-components/api-extractor.json

@@ -18,11 +18,6 @@
  "enabled": true
  },
  "compiler": {
- "tsconfigFilePath": "./tsconfig.lib.json",
- "overrideTsconfig": {
- "compilerOptions": {
- "paths": {}
- }
- }
+ "tsconfigFilePath": "./tsconfig.api-extractor.json"
  }
 }

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

@@ -465,53 +465,50 @@ export const borderRadiusSmall = "var(--borderRadiusSmall)";
 // @public (undocumented)
 export const borderRadiusXLarge = "var(--borderRadiusXLarge)";
 
-// Warning: (ae-forgotten-export) The symbol "FormAssociatedButton" 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
-export class Button extends FormAssociatedButton {
- appearance?: ButtonAppearance | undefined;
+export class Button extends FASTElement {
+ constructor();
+ appearance?: ButtonAppearance;
  autofocus: boolean;
- // @internal (undocumented)
- connectedCallback(): void;
+ // @internal
+ clickHandler(e: Event): boolean | void;
  // (undocumented)
- control: HTMLButtonElement;
+ connectedCallback(): void;
  defaultSlottedContent: HTMLElement[];
- disabledFocusable?: boolean;
- // (undocumented)
- protected disabledFocusableChanged(prev: boolean, next: boolean): void;
- // (undocumented)
- disconnectedCallback(): void;
- formaction: string;
- // (undocumented)
- protected formactionChanged(): void;
- formenctype: string;
- // (undocumented)
- protected formenctypeChanged(): void;
- formId: string;
- formmethod: string;
- // (undocumented)
- protected formmethodChanged(): void;
- formnovalidate: boolean;
- // (undocumented)
- protected formnovalidateChanged(): void;
- formtarget: '_self' | '_blank' | '_parent' | '_top';
- // (undocumented)
- protected formtargetChanged(): void;
+ disabled?: boolean;
+ disabledFocusable: boolean;
+ // @internal
+ disabledFocusableChanged(previous: boolean, next: boolean): void;
+ // @internal
+ protected 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;
  iconOnly: boolean;
- shape?: ButtonShape | undefined;
+ keypressHandler(e: KeyboardEvent): boolean | void;
+ get labels(): ReadonlyArray<Node>;
+ name?: string;
+ protected press(): void;
+ resetForm(): void;
+ shape?: ButtonShape;
  size?: ButtonSize;
  type: ButtonType;
- // (undocumented)
- protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
- // 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;
+ // @internal
+ typeChanged(previous: ButtonType, next: ButtonType): void;
+ value?: string;
 }
 
-// @internal
-export interface Button extends StartEnd, DelegatesARIAButton {
+// @internal (undocumented)
+export interface Button extends StartEnd {
 }
 
 // @public
@@ -526,9 +523,20 @@ export const ButtonAppearance: {
 // @public
 export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 
-// @public (undocumented)
+// @public
 export const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
+// @public
+export const ButtonFormTarget: {
+ readonly blank: "_blank";
+ readonly self: "_self";
+ readonly parent: "_parent";
+ readonly top: "_top";
+};
+
+// @public
+export type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;
+
 // @public
 type ButtonOptions = StartEndOptions<Button>;
 export { ButtonOptions }
@@ -556,7 +564,7 @@ export const ButtonSize: {
 // @public
 export type ButtonSize = ValuesOf<typeof ButtonSize>;
 
-// @public (undocumented)
+// @public
 export const ButtonTemplate: ElementViewTemplate<Button>;
 
 // @public
@@ -1683,27 +1691,15 @@ export const curveLinear = "var(--curveLinear)";
 // @public
 export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
-// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIAButton" because one of its declarations is marked as @internal
-//
-// @public
-export class DelegatesARIAButton {
- ariaExpanded: 'true' | 'false' | string | null;
- ariaPressed: 'true' | 'false' | 'mixed' | string | null;
-}
-
-// Warning: (ae-forgotten-export) The symbol "ARIAGlobalStatesAndProperties" needs to be exported by the entry point index.d.ts
-//
-// @internal
-export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
-}
-
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIALink" because one of its declarations is marked as @internal
 //
 // @public
 export class DelegatesARIALink {
  ariaExpanded: 'true' | 'false' | string | null;
 }
 
+// Warning: (ae-forgotten-export) The symbol "ARIAGlobalStatesAndProperties" needs to be exported by the entry point index.d.ts
+//
 // @internal
 export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
 }
@@ -2209,15 +2205,14 @@ export const MenuTemplate: ElementViewTemplate<Menu>;
 // Warning: (ae-forgotten-export) The symbol "BaseProgress" needs to be exported by the entry point index.d.ts
 //
 // @public
-class ProgressBar_2 extends BaseProgress {
+export class ProgressBar extends BaseProgress {
  shape?: ProgressBarShape;
  thickness?: ProgressBarThickness;
  validationState: ProgressBarValidationState | null;
 }
-export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
 
 // @public
 export const ProgressBarShape: {
@@ -2232,7 +2227,7 @@ export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 export const ProgressBarStyles: ElementStyles;
 
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
 
 // @public
 export const ProgressBarThickness: {
@@ -2255,8 +2250,8 @@ export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationSt
 
 // @public
 export type ProgressOptions = {
- indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar_2>;
- indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar_2>;
+ indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
+ indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "FormAssociatedRadio" needs to be exported by the entry point index.d.ts
@@ -2624,7 +2619,7 @@ export const strokeWidthThickest = "var(--strokeWidthThickest)";
 // @public (undocumented)
 export const strokeWidthThin = "var(--strokeWidthThin)";
 
-// @public (undocumented)
+// @public
 const styles: ElementStyles;
 export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
@@ -2942,27 +2937,16 @@ export type TextWeight = ValuesOf<typeof TextWeight>;
 
 // @public
 export class ToggleButton extends Button {
- constructor();
- checked: boolean;
- checkedAttribute: boolean;
- // (undocumented)
- protected checkedAttributeChanged(): void;
- // (undocumented)
- protected checkedChanged(prev: boolean | undefined, next: boolean): void;
  // (undocumented)
  connectedCallback(): void;
- currentChecked: boolean;
- // (undocumented)
- currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
- // (undocumented)
- defaultChecked: boolean;
- // (undocumented)
- protected defaultCheckedChanged(): void;
- protected dirtyChecked: boolean;
- // (undocumented)
- disconnectedCallback(): void;
- // @internal (undocumented)
- protected handleToggleButtonClick: (e: MouseEvent) => void;
+ mixed?: boolean;
+ // @internal
+ protected mixedChanged(): void;
+ // @override
+ protected press(): void;
+ pressed: boolean;
+ // @internal
+ protected pressedChanged(): void;
 }
 
 // @public
@@ -3000,7 +2984,7 @@ export const ToggleButtonSize: {
 // @public
 export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
 
-// @public (undocumented)
+// @public
 export const ToggleButtonStyles: ElementStyles;
 
 // @public

packages/web-components/package.json

@@ -183,7 +183,7 @@
  "compile:benchmark": "rollup -c rollup.bench.js",
  "clean": "node ./scripts/clean dist",
  "generate-api": "api-extractor run --local",
- "build": "yarn compile && rollup -c && yarn generate-api",
+ "build": "yarn compile && yarn rollup -c && yarn generate-api",
  "lint": "eslint . --ext .ts",
  "lint:fix": "eslint . --ext .ts --fix",
  "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
@@ -197,6 +197,7 @@
  "test:dev": "playwright test"
  },
  "devDependencies": {
+ "@types/web": "^0.0.142",
  "@microsoft/api-extractor": "7.31.2",
  "@storybook/html": "6.5.15",
  "@tensile-perf/web-components": "~0.1.13",

packages/web-components/playwright.config.ts

@@ -1,7 +1,6 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
- projects: [{ name: 'chromium' }, { name: 'firefox' }, { name: 'webkit' }],
  reporter: 'list',
  testMatch: /.*\.spec\.ts$/,
  retries: 3,
@@ -10,8 +9,8 @@ const config: PlaywrightTestConfig = {
  use: {
  baseURL: 'http://localhost:6006/iframe.html',
  viewport: {
- height: 1280,
- width: 720,
+ height: 720,
+ width: 1280,
  },
  },
  webServer: {

packages/web-components/src/anchor-button/anchor-button.stories.ts

@@ -98,8 +98,8 @@ export const Shape = renderComponent(html<AnchorButtonStoryArgs>`
 
 export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <fluent-anchor-button href="#" size="small">Small</fluent-anchor-button>
- <fluent-anchor-button href="#" size="small" icon
- ><svg
+ <fluent-anchor-button href="#" size="small" icon>
+ <svg
  fill="currentColor"
  slot="start"
  aria-hidden="true"
@@ -111,9 +111,10 @@ export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <path
  d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
  fill="currentColor"
- ></path></svg
- >Small with calendar icon</fluent-anchor-button
- >
+ ></path>
+ </svg>
+ Small with calendar icon
+ </fluent-anchor-button>
  <fluent-anchor-button href="#" size="small" icon-only aria-label="Small icon only button"
  ><svg
  fill="currentColor"
@@ -126,11 +127,12 @@ export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <path
  d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
  fill="currentColor"
- ></path></svg
- ></fluent-anchor-button>
+ ></path>
+ </svg>
+ </fluent-anchor-button>
  <fluent-anchor-button href="#" size="medium">Medium</fluent-anchor-button>
- <fluent-anchor-button href="#" size="medium" icon
- ><svg
+ <fluent-anchor-button href="#" size="medium" icon>
+ <svg
  fill="currentColor"
  slot="start"
  aria-hidden="true"
@@ -142,9 +144,10 @@ export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <path
  d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
  fill="currentColor"
- ></path></svg
- >Medium with calendar icon</fluent-anchor-button
- >
+ ></path>
+ </svg>
+ Medium with calendar icon
+ </fluent-anchor-button>
  <fluent-anchor-button href="#" size="medium" icon-only aria-label="Medium icon only button"
  ><svg
  fill="currentColor"
@@ -157,8 +160,9 @@ export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <path
  d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
  fill="currentColor"
- ></path></svg
- ></fluent-anchor-button>
+ ></path>
+ </svg>
+ </fluent-anchor-button>
  <fluent-anchor-button href="#" size="large">Large</fluent-anchor-button>
  <fluent-anchor-button href="#" size="large" icon
  ><svg
@@ -173,9 +177,10 @@ export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <path
  d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
  fill="currentColor"
- ></path></svg
- >Large with calendar icon</fluent-anchor-button
- >
+ ></path>
+ </svg>
+ Large with calendar icon
+ </fluent-anchor-button>
  <fluent-anchor-button href="#" size="large" icon-only aria-label="Large icon only button"
  ><svg
  fill="currentColor"
@@ -188,8 +193,9 @@ export const Size = renderComponent(html<AnchorButtonStoryArgs>`
  <path
  d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
  fill="currentColor"
- ></path></svg
- ></fluent-anchor-button>
+ ></path>
+ </svg>
+ </fluent-anchor-button>
 `);
 
 export const Disabled = renderComponent(html<AnchorButtonStoryArgs>`