Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(web-components) Use ElementInternals for Button elements #30999

Merged
merged 15 commits into from
Apr 22, 2024
Merged

(web-components) Use ElementInternals for Button elements #30999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9090008
add web types
radium-v Apr 16, 2024
926ef96
port button styles to anchor-button
radium-v Apr 17, 2024
b268bf6
implement ElementInternals in button component
radium-v Apr 17, 2024
ea023b3
update compound-button to match new button structure
radium-v Apr 17, 2024
41f2a6e
update menu-button to match new button structure
radium-v Apr 17, 2024
fbee917
allow for alternative types for stories
radium-v Apr 17, 2024
cb4eb78
add button tests
radium-v Apr 17, 2024
afffcc1
fix playwright config
radium-v Apr 17, 2024
000aad5
doc fixes
radium-v Apr 17, 2024
8d272a3
disabled state fixes
radium-v Apr 17, 2024
04cb12e
update toggle-button to match new button structure
radium-v Apr 18, 2024
d45a63f
update button README
radium-v Apr 18, 2024
9cfbb56
update api-report
radium-v Apr 18, 2024
cdad9b4
change files
radium-v Apr 17, 2024
3cfd769
change toggle-button indeterminate attribute to mixed
radium-v Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-c2d922a6-50ec-49e1-b5f6-9e38ecd60758.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
7 changes: 1 addition & 6 deletions packages/web-components/api-extractor.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,6 @@
"enabled": true
},
"compiler": {
"tsconfigFilePath": "./tsconfig.lib.json",
"overrideTsconfig": {
"compilerOptions": {
"paths": {}
}
}
"tsconfigFilePath": "./tsconfig.api-extractor.json"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this change necessary ? another exotic tsconfig === more confusion / not following repo patterns

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The API Extractor doesn't use the tsconfigFilePath if any overrideTsconfig fields are present. This was causing warnings "Subsequent property declarations must have the same type" (TS2717) with @types/web present.

}
}
142 changes: 63 additions & 79 deletions packages/web-components/docs/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 }
Expand Down Expand Up @@ -556,7 +564,7 @@ export const ButtonSize: {
// @public
export type ButtonSize = ValuesOf<typeof ButtonSize>;

// @public (undocumented)
// @public
export const ButtonTemplate: ElementViewTemplate<Button>;

// @public
Expand Down Expand Up @@ -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 {
}
Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -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
Expand Down Expand Up @@ -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 }
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -3000,7 +2984,7 @@ export const ToggleButtonSize: {
// @public
export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;

// @public (undocumented)
// @public
export const ToggleButtonStyles: ElementStyles;

// @public
Expand Down
3 changes: 2 additions & 1 deletion packages/web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 2 additions & 3 deletions packages/web-components/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -10,8 +9,8 @@ const config: PlaywrightTestConfig = {
use: {
baseURL: 'http://localhost:6006/iframe.html',
viewport: {
height: 1280,
width: 720,
height: 720,
width: 1280,
},
},
webServer: {
Expand Down
44 changes: 25 additions & 19 deletions packages/web-components/src/anchor-button/anchor-button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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>`
Expand Down
Loading
Loading