diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 0613f3f0734b1f..630afb966f3b6b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build apps/ts-minbar-test-react-components @microsoft/fluentui-react-build apps/vr-tests @microsoft/fluentui-react apps/vr-tests-react-components @microsoft/fluentui-react +apps/vr-tests-web-components @microsoft/fui-wc apps/ssr-tests @microsoft/fluentui-react apps/pr-deploy-site @microsoft/fluentui-react-build apps/public-docsite-v9 @microsoft/cxe-red @microsoft/fluentui-react-build diff --git a/.github/workflows/azure-static-web-apps-deploy.yml b/.github/workflows/azure-static-web-apps-deploy.yml new file mode 100644 index 00000000000000..1e049feb7b0b2c --- /dev/null +++ b/.github/workflows/azure-static-web-apps-deploy.yml @@ -0,0 +1,30 @@ +name: Azure Static Web Apps web components + +on: + push: + branches: + - master + paths: + - packages/web-components/** + workflow_dispatch: + +permissions: + contents: read + +jobs: + build_and_deploy: + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v2 + + - name: Build and Deploy Job + id: builddeploy + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ secrets.WEB_COMPONENTS_AZURE_STATIC_WEB_APPS_API_TOKEN }} + repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments) + action: 'upload' + app_build_command: 'yarn workspace @fluentui/web-components build-storybook' + output_location: 'packages/web-components/dist/storybook' # Built app content directory, relative to app_location - optional + skip_api_build: true diff --git a/.gitignore b/.gitignore index 37ca26594019f9..e21a9250a99973 100644 --- a/.gitignore +++ b/.gitignore @@ -155,6 +155,9 @@ rush.json # tsdoc tsdoc-metadata.json +# benchmarking +.tensile/ + # tools cache gulp-cache .cache diff --git a/.prettierignore b/.prettierignore index 095b5614af3833..419dcb381abc6f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -35,9 +35,6 @@ packages/fluentui/docs/src/behaviorMenu.json packages/fluentui/docs/src/exampleMenus packages/fluentui/docs/src/exampleSources packages/fluentui/ability-attributes/src/schema.ts -packages/web-components/src/**/*.styles.ts -packages/web-components/**/*.spec.ts -packages/web-components/src/default-palette.ts # template files which actually follow a different language's formatting *.hbs diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css index 1b2149ddc7f30a..1a825251dbc234 100644 --- a/.storybook/docs-root.css +++ b/.storybook/docs-root.css @@ -1,3 +1,12 @@ +/* + * Heads Up! + * This file is used by both React v9 and Web Components Storybooks. + * All CSS must apply to both implementations. + * + * DO NOT use design tokens in this file. + * This file styles the content outside of story previews where a Fluent theme is not expected to be set or change. + */ + #docs-root .sbdocs-content { font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; @@ -10,7 +19,6 @@ /* identical to box height, or 143% */ letter-spacing: -0.04em; color: #000000; - margin-top: 49px; } #docs-root details { @@ -28,11 +36,6 @@ margin-top: 24px; } -#docs-root .sbdocs-wrapper { - background: white; - min-height: auto; -} - #docs-root .sbdocs-img.featured-image { max-width: 100%; margin: 48px 0; @@ -125,18 +128,25 @@ #docs-root .sbdocs-preview { border-radius: 16px; - background: var(--colorBrandBackgroundInverted, #fff); + background: #fff; /* --colorBrandBackgroundInverted */ padding: 0; box-shadow: none; - border: 1px solid var(--colorNeutralStroke1, #e1dfdd); + border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */ } -#docs-root .innerZoomElementWrapper { +/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */ +#docs-root .innerZoomElementWrapper > div { padding: 30px; + box-sizing: border-box; } +/* fix mouse interactions for toolbar on first story */ #docs-root .sbdocs-preview > .os-host { - display: none; + /* The toolbar sits within the story content area and is position: absolute by default. */ + /* The story content overlays the toolbar making it non-interactive */ + /* We don't use z-index because the toolbar can still sometimes overlay story content (flyout menu) */ + /* The best solution is to use a static toolbar that is always outside the story content and interactive */ + position: static; } #docs-root span + .sbdocs .docblock-argstable tbody tr td button { @@ -208,14 +218,6 @@ border-bottom: 1px solid #edebe9; } -#docs-root .docblock-argstable-body > tr > td:nth-child(4) { - display: none; -} - -#docs-root .docblock-argstable-head > tr > th:nth-child(4) { - display: none; -} - #docs-root .docblock-argstable tbody tr { border: none; } @@ -288,6 +290,7 @@ display: inline-block; background-color: rgba(17, 16, 15, 0.1); border-radius: 2px; + width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */ } .os-content-glue { @@ -396,9 +399,9 @@ h1.fluent { h1 .fluent-version { display: block; - font-size: 24px; /* --font-size-base-600 */ + font-size: 24px; /* --fontSizeBase600 */ line-height: 32px; - color: #707070; /* --color-neutral-foreground-3 */ + color: #707070; /* --colorNeutralForeground3 */ } h2.fluent { diff --git a/apps/public-docsite-v9/.storybook/docs-root-v9.css b/apps/public-docsite-v9/.storybook/docs-root-v9.css index aa6f23e4c1f42d..12da4998a7b6b6 100644 --- a/apps/public-docsite-v9/.storybook/docs-root-v9.css +++ b/apps/public-docsite-v9/.storybook/docs-root-v9.css @@ -1,19 +1,3 @@ -/* remove the docs wrapper bg to let page bg show through */ -/* remove unnecessary padding now that theme switcher is not taking up space */ -#docs-root .sbdocs-wrapper { - background: transparent !important; - padding-top: 0; -} - -/* sb-show-main is missing during page transitions causing a page shift */ -/* todo: cleanup once we no longer inherit docs-root */ -.sb-show-main.sb-main-fullscreen, -.sb-main-fullscreen { - margin: 0; - padding: 0; - display: block; -} - /* remove loading overlay */ .sb-preparing-story, .sb-preparing-docs, @@ -21,3 +5,14 @@ .sb-errordisplay { display: none !important; } + +/* Hide props table controls, since they don't work in the React implementation */ +#docs-root .docblock-argstable-head > tr > th:nth-child(4), +#docs-root .docblock-argstable-body > tr > td:nth-child(4) { + display: none; +} + +/* Hide the toolbar on the first story: zoom in, zoom out, reset zoom, open in new tab */ +#docs-root .sbdocs-preview > .os-host { + display: none; +} diff --git a/apps/public-docsite-v9/.storybook/manager-head.html b/apps/public-docsite-v9/.storybook/manager-head.html index f831e114550a3a..956112a16ddfba 100644 --- a/apps/public-docsite-v9/.storybook/manager-head.html +++ b/apps/public-docsite-v9/.storybook/manager-head.html @@ -42,12 +42,16 @@ > 💡 NOTE: > - > This is brittle way for providing custom non thenable styles for manager UI + > This is a brittle way for providing custom non thenable styles for manager UI. > > Those selectors might change on any storybook version bump. --> + Long text wraps after it hits the max width of the component +`); + +export const WithLongTextRTL = getStoryVariant(WithLongText, RTL); diff --git a/apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx b/apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx new file mode 100644 index 00000000000000..fa103fcc772d3c --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { CheckboxDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js'; + +CheckboxDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Checkbox', + decorators: [ + (story: () => React.ReactElement) => { + return ( + checkbox.indeterminate = true)', + ) + .snapshot('indeterminate', { cropTo: '.testWrapper' }) + .end()} + > +
+ {story()} +
+ + ); + }, + ], +}; + +export const Indeterminate = () => + parse(` + Indeterminate + `); + +export const IndeterminateDarkMode = getStoryVariant(Indeterminate, DARK_MODE); + +export const CircularIndeterminate = () => + parse(` + CircularIndeterminate + `); + +export const CircularIndeterminateDarkMode = getStoryVariant(CircularIndeterminate, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx b/apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx new file mode 100644 index 00000000000000..041cf50e9df7f7 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { CheckboxDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +CheckboxDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Checkbox', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + Default + `); + +export const DefaultRTL = getStoryVariant(Default, RTL); +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const Checked = () => + parse(` + Checked + `); +export const CheckedDarkMode = getStoryVariant(Checked, DARK_MODE); + +export const Disabled = () => + parse(` + Disabled + `); +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); + +export const DisabledChecked = () => + parse(` + Disabled checked + `); +export const DisabledCheckedDarkMode = getStoryVariant(DisabledChecked, DARK_MODE); + +export const Circular = () => + parse(` + Circular + `); + +export const CircularRTL = getStoryVariant(Circular, RTL); +export const CircularDarkMode = getStoryVariant(Circular, DARK_MODE); + +export const CircularChecked = () => + parse(` + CircularChecked + `); +export const CircularCheckedDarkMode = getStoryVariant(CircularChecked, DARK_MODE); + +export const CircularDisabled = () => + parse(` + CircularDisabled + `); +export const CircularDisabledDarkMode = getStoryVariant(CircularDisabled, DARK_MODE); + +export const CircularDisabledChecked = () => + parse(` + CircularDisabled checked + `); +export const CircularDisabledCheckedDarkMode = getStoryVariant(CircularDisabledChecked, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx b/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx new file mode 100644 index 00000000000000..d87100beefffd1 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { DividerDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +DividerDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Divider', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + + `); + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const AlignContentCenter = () => + parse(`
Center
`); +export const AlignContentStart = () => parse(`
Start
`); +export const AlignContentStartRTL = getStoryVariant(AlignContentStart, RTL); +export const AlignContentEnd = () => parse(`
End
`); +export const AlignContentEndRTL = getStoryVariant(AlignContentEnd, RTL); + +export const AppearanceStrong = () => parse(`
Strong
`); +export const AppearanceStrongDarkMode = getStoryVariant(AppearanceStrong, DARK_MODE); +export const AppearanceBrand = () => parse(`
Brand
`); +export const AppearanceBrandDarkMode = getStoryVariant(AppearanceBrand, DARK_MODE); +export const AppearanceSubtle = () => parse(`
Subtle
`); +export const AppearanceSubtleDarkMode = getStoryVariant(AppearanceSubtle, DARK_MODE); +export const AppearanceDefault = () => + parse(`
Default
`); +export const AppearanceDefaultDarkMode = getStoryVariant(AppearanceDefault, DARK_MODE); + +export const Inset = () => parse(`
Inset
`); + +export const Vertical = () => parse(`
vertical
`); + +export const WithSvg = () => + parse(` + + + + + +`); + +export const WithSvgRtl = getStoryVariant(WithSvg, RTL); + +export const VerticalWithSvg = () => + parse(` + + + + + +`); diff --git a/apps/vr-tests-web-components/src/stories/label/label.stories.tsx b/apps/vr-tests-web-components/src/stories/label/label.stories.tsx new file mode 100644 index 00000000000000..c648ee9683b2e6 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/label/label.stories.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { LabelDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +LabelDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Label', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => parse(`Default`); +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const SizeSmall = () => parse(`Small`); +export const SizeMedium = () => parse(`Medium`); +export const SizeLarge = () => parse(`Large`); + +export const WeightRegular = () => parse(`Regular`); +export const WeightSemibold = () => parse(`Semibold`); + +export const Required = () => parse(`Required`); +export const RequiredDarkMode = getStoryVariant(Required, DARK_MODE); +export const RequiredRTL = getStoryVariant(Required, RTL); + +export const Disabled = () => parse(`Disabled`); +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/menu-list/menu-list.stories.tsx b/apps/vr-tests-web-components/src/stories/menu-list/menu-list.stories.tsx new file mode 100644 index 00000000000000..a7fee71efe2506 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/menu-list/menu-list.stories.tsx @@ -0,0 +1,194 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { MenuListDefinition, MenuItemDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +MenuListDefinition.define(FluentDesignSystem.registry); +MenuItemDefinition.define(FluentDesignSystem.registry); + +const createDecorator = + (steps: unknown[], wrapperStyle: React.CSSProperties = { width: '320px' }) => + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }; + +const defaultSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover('[role="menuitem"]') + .snapshot('hover menuitem', { cropTo: '.testWrapper' }) + .end(); + +const checkboxSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .click('[role="menuitemcheckbox"]') + .snapshot('1st selected', { cropTo: '.testWrapper' }) + .click('[role="menuitemcheckbox"]:nth-of-type(2)') + .snapshot('2nd selected', { cropTo: '.testWrapper' }) + .end(); + +const radioSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .click('[role="menuitemradio"]') + .snapshot('1st selected', { cropTo: '.testWrapper' }) + .click('[role="menuitemradio"]:nth-of-type(2)') + .snapshot('2nd selected', { cropTo: '.testWrapper' }) + .end(); + +const submenuSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .click('[aria-haspopup="menu"]') + .snapshot('1st selected', { cropTo: '.testWrapper' }) + .click('[aria-haspopup="menu"]:nth-of-type(2)') + .snapshot('2nd selected', { cropTo: '.testWrapper' }) + .end(); + +export default { + title: 'MenuList', +}; + +const Cut20Filled = ``; + +const Edit20Filled = ``; + +export const Default = () => + parse(` + + Cut + Edit + Paste + +`); +Default.decorators = [createDecorator(defaultSteps)]; + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Checkbox = () => + parse(` + + Item 1 + Item 2 + Item 3 + + `); +Checkbox.decorators = [createDecorator(checkboxSteps)]; +export const CheckboxDarkMode = getStoryVariant(Checkbox, DARK_MODE); +export const CheckboxRTL = getStoryVariant(Checkbox, RTL); + +export const Radio = () => + parse(` + + Item 1 + Item 2 + Item 3 + + `); +Radio.decorators = [createDecorator(radioSteps)]; +export const RadioDarkMode = getStoryVariant(Radio, DARK_MODE); +export const RadioRTL = getStoryVariant(Radio, RTL); + +export const WithIcons = () => + parse(` + + Item 1 + + Edit + ${Edit20Filled} + + + ${Cut20Filled} + Cut + + +`); +WithIcons.decorators = [createDecorator(defaultSteps)]; + +export const CheckboxWithIcons = () => + parse(` + + Item 1 + + Edit + ${Edit20Filled} + + + ${Cut20Filled} + Cut + + +`); +CheckboxWithIcons.decorators = [createDecorator(checkboxSteps)]; +export const CheckboxWithIconsRTL = getStoryVariant(CheckboxWithIcons, RTL); + +export const RadioWithIcons = () => + parse(` + + Item 1 + + Edit + ${Edit20Filled} + + + ${Cut20Filled} + Cut + + +`); +RadioWithIcons.decorators = [createDecorator(radioSteps)]; +export const RadioWithIconsRTL = getStoryVariant(RadioWithIcons, RTL); + +export const WithSubmenu = () => + parse(` + + + Item 1 + + Subitem 1.1 + Subitem 1.2 + + + + Item 2 + + Subitem 2.1 + Subitem 2.2 + + + Item 3 + +`); +WithSubmenu.decorators = [createDecorator(submenuSteps, { width: '500px', padding: '20px 0' })]; + +export const WithSubmenuDarkMode = getStoryVariant(WithSubmenu, DARK_MODE); +export const WithSubmenuRLT = getStoryVariant(WithSubmenu, RTL); diff --git a/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx b/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx new file mode 100644 index 00000000000000..a56059deb22054 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { ProgressBarDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +ProgressBarDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'ProgressBar', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse( + `3/10`, + ); + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Value0 = () => + parse(`0`); +export const Value25 = () => + parse(`25`); +export const Value50 = () => + parse(`50`); +export const Value75 = () => + parse(`75`); +export const Value100 = () => + parse(`100`); + +export const ThicknessMedium = () => + parse(``); +export const ThicknessLarge = () => + parse(``); + +export const ShapeRounded = () => + parse(``); +export const ShapeSquare = () => + parse(``); + +export const ValidationStateSuccess = () => + parse(``); +export const ValidationStateSuccessDarkMode = getStoryVariant(ValidationStateSuccess, DARK_MODE); + +export const ValidationStateWarning = () => + parse(``); +export const ValidationStateWarningDarkMode = getStoryVariant(ValidationStateWarning, DARK_MODE); + +export const ValidationStateError = () => + parse(``); +export const ValidationStateErrorDarkMode = getStoryVariant(ValidationStateError, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx b/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx new file mode 100644 index 00000000000000..eb72023e28e5ba --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { RadioDefinition, RadioGroupDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +RadioDefinition.define(FluentDesignSystem.registry); +RadioGroupDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'RadioGroup', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + + Pear + Banana + Orange +`); + +export const DefaultRTL = getStoryVariant(Default, RTL); +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const Vertical = () => + parse(` + + Pear + Banana + Orange +`); + +export const VerticalRTL = getStoryVariant(Vertical, RTL); + +export const Horizontal = () => + parse(` + + Pear + Banana + Orange +`); + +export const HorizontalStacked = () => + parse(` + + Pear + Banana + Orange +`); + +export const HorizontalStackedRTL = getStoryVariant(HorizontalStacked, RTL); + +export const DefaultChecked = () => + parse(` + + Pear + Banana + Orange +`); + +export const Disabled = () => + parse(` + + Pear + Banana + Orange +`); + +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); + +export const DisabledItem = () => + parse(` + + Pear + Banana + Orange +`); + +export const DisabledItemDarkMode = getStoryVariant(DisabledItem, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx b/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx new file mode 100644 index 00000000000000..0ef3401bc2ec32 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { RadioDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js'; + +RadioDefinition.define(FluentDesignSystem.registry); +export default { + title: 'Radio', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + Pear +`); +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const Checked = () => + parse(` + Pear +`); + +export const CheckedDarkMode = getStoryVariant(Checked, DARK_MODE); + +export const Disabled = () => + parse(` + Pear +`); + +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); + +export const DisabledChecked = () => + parse(` + Pear +`); + +export const DisabledCheckedDarkMode = getStoryVariant(DisabledChecked, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx b/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx new file mode 100644 index 00000000000000..e48f82e7654f96 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright, Keys } from 'storywright'; +import { SliderDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +SliderDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Slider', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + +`); + +export const DefaultRTL = getStoryVariant(Default, RTL); +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const Vertical = () => + parse(` + +`); + +export const SizeSmall = () => + parse(` + +`); + +export const SizeMedium = () => + parse(` + +`); + +export const SliderSteps = () => + parse(` + +`); + +export const SliderStepsVertical = () => + parse(` + +`); + +export const Disabled = () => + parse(` + +`); + +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/switch/switch.stories.tsx b/apps/vr-tests-web-components/src/stories/switch/switch.stories.tsx new file mode 100644 index 00000000000000..a3605ba4bcdab1 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/switch/switch.stories.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { SwitchDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +SwitchDefinition.define(FluentDesignSystem.registry); + +const controlId = 'switch-id'; + +export default { + title: 'Switch', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + Default + `); + +export const DefaultDark = getStoryVariant(Default, DARK_MODE); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Checked = () => + parse(` + Checked + `); + +export const CheckedDark = getStoryVariant(Checked, DARK_MODE); +export const CheckedRTL = getStoryVariant(Checked, RTL); + +export const Disabled = () => + parse(` + Disabled + `); + +export const DisabledDark = getStoryVariant(Disabled, DARK_MODE); +export const DisabledRTL = getStoryVariant(Disabled, RTL); + +export const DisabledChecked = () => + parse(` + Disabled checked + `); + +export const DisabledCheckedDark = getStoryVariant(DisabledChecked, DARK_MODE); + +export const LabelBefore = () => + parse(` + Label before + `); + +export const LabelBeforeRTL = getStoryVariant(LabelBefore, RTL); + +export const LabelAbove = () => + parse(` + Label above + `); + +export const LabelAboveRTL = getStoryVariant(LabelAbove, RTL); + +export const LabelAfter = () => + parse(` + Label after + `); + +export const LabelAfterRTL = getStoryVariant(LabelAfter, RTL); diff --git a/apps/vr-tests-web-components/src/stories/tabs/tabs-interactive.stories.tsx b/apps/vr-tests-web-components/src/stories/tabs/tabs-interactive.stories.tsx new file mode 100644 index 00000000000000..782981a46422e0 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/tabs/tabs-interactive.stories.tsx @@ -0,0 +1,136 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { TabDefinition, TabsDefinition, TabPanelDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +TabDefinition.define(FluentDesignSystem.registry); +TabsDefinition.define(FluentDesignSystem.registry); +TabPanelDefinition.define(FluentDesignSystem.registry); + +const secondTabId = 'second-tab-id'; + +const createDecorator = + (steps: unknown[], wrapperStyle: React.CSSProperties = { width: '380px' }) => + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }; + +const horizontalSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover(`#${secondTabId}`) + .snapshot('hover', { cropTo: '.testWrapper' }) + .click(`#${secondTabId}`) + .snapshot('2nd tab click', { cropTo: '.testWrapper' }) + .keys(`#${secondTabId}`, 'ArrowRight') + .snapshot('right arrow', { cropTo: '.testWrapper' }) + .end(); + +const verticalSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover(`#${secondTabId}`) + .snapshot('hover', { cropTo: '.testWrapper' }) + .click(`#${secondTabId}`) + .snapshot('2nd tab click', { cropTo: '.testWrapper' }) + .keys(`#${secondTabId}`, 'ArrowDown') + .snapshot('down arrow', { cropTo: '.testWrapper' }) + .end(); + +const appearanceSteps = new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover(`#${secondTabId}`) + .snapshot('hover', { cropTo: '.testWrapper' }) + .end(); + +export default { + title: 'Tabs', +}; + +export const Navigation = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +Navigation.decorators = [createDecorator(horizontalSteps)]; + +export const NavigationRTL = getStoryVariant(Navigation, RTL); + +export const NavigationVertical = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); + +Navigation.decorators = [createDecorator(verticalSteps)]; + +export const NavigationOverDisabledItem = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +NavigationOverDisabledItem.decorators = [createDecorator(horizontalSteps)]; + +export const AppearanceTransparent = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +AppearanceTransparent.decorators = [createDecorator(appearanceSteps)]; + +export const AppearanceSubtle = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +AppearanceSubtle.decorators = [createDecorator(appearanceSteps)]; diff --git a/apps/vr-tests-web-components/src/stories/tabs/tabs.stories.tsx b/apps/vr-tests-web-components/src/stories/tabs/tabs.stories.tsx new file mode 100644 index 00000000000000..02d9bba98ce886 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/tabs/tabs.stories.tsx @@ -0,0 +1,185 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { TabDefinition, TabsDefinition, TabPanelDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +TabDefinition.define(FluentDesignSystem.registry); +TabsDefinition.define(FluentDesignSystem.registry); +TabPanelDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Tabs', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Horizontal = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); + +export const Vertical = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); + +export const Disabled = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); + +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); + +export const SizeSmall = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +export const SizeSmallDarkMode = getStoryVariant(SizeSmall, DARK_MODE); + +export const SizeSmallVertical = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +export const SizeSmallVerticalDarkMode = getStoryVariant(SizeSmallVertical, DARK_MODE); + +export const SizeMedium = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +export const SizeMediumDarkMode = getStoryVariant(SizeMedium, DARK_MODE); + +export const SizeMediumVertical = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +export const SizeMediumVerticalDarkMode = getStoryVariant(SizeMediumVertical, DARK_MODE); + +export const SizeLarge = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +export const SizeLargeDarkMode = getStoryVariant(SizeLarge, DARK_MODE); + +export const SizeLargeVertical = () => + parse(` + + First Tab + Second Tab + Third Tab + Fourth Tab + + First Panel + Second Panel + Third Panel + Fourth Panel + + `); +export const SizeLargeVerticalDarkMode = getStoryVariant(SizeLargeVertical, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx b/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx new file mode 100644 index 00000000000000..e33c85d3642d24 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx @@ -0,0 +1,179 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { TextInputDefinition, LabelDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { tokens } from '@fluentui/tokens'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +TextInputDefinition.define(FluentDesignSystem.registry); +LabelDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'TextInput', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; +const Person20Regular = ``; + +export const Default = () => + parse(` + Sample Input + `); + +export const ContentStart = () => + parse(` + + ${Person20Regular} + Content Start + +`); +export const ContentStartDarkMode = getStoryVariant(ContentStart, DARK_MODE); +export const ContentStartRTL = getStoryVariant(ContentStart, RTL); + +export const ContentEnd = () => + parse(` + + ${Person20Regular} + Content End + +`); +export const ContentEndDarkMode = getStoryVariant(ContentEnd, DARK_MODE); +export const ContentEndRTL = getStoryVariant(ContentEnd, RTL); + +export const ContentStartEnd = () => + parse(` + + $ + .00 + Content Before + After + +`); +export const ContentStartEndDarkMode = getStoryVariant(ContentStartEnd, DARK_MODE); +export const ContentStartEndRTL = getStoryVariant(ContentStartEnd, RTL); + +export const Placeholder = () => + parse(` + + ${Person20Regular} + Input with a placeholder + +`); +export const PlaceholderDarkMode = getStoryVariant(Placeholder, DARK_MODE); + +export const Disabled = () => + parse(` + + ${Person20Regular} + Disabled Input + +`); +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); + +export const Required = () => + parse(` + + ${Person20Regular} + Required Input + +`); +export const RequiredDarkMode = getStoryVariant(Required, DARK_MODE); + +export const AppearanceOutline = () => + parse(` + + ${Person20Regular} + Outline (default) Input + +`); + +export const AppearanceOutlineDarkMode = getStoryVariant(AppearanceOutline, DARK_MODE); + +export const AppearanceUnderline = () => + parse(` + + ${Person20Regular} + Underlined Input + +`); + +export const AppearanceUnderlineDarkMode = getStoryVariant(AppearanceUnderline, DARK_MODE); + +export const AppearanceFilledLighter = () => + parse(` +
+ + ${Person20Regular} + Filled Lighter Input + +
+`); + +export const AppearanceFilledLighterDarkMode = getStoryVariant(AppearanceFilledLighter, DARK_MODE); + +export const AppearanceFilledDarker = () => + parse(` +
+ + ${Person20Regular} + Filled Darker Input + +
+`); + +export const AppearanceFilledDarkerDarkMode = getStoryVariant(AppearanceFilledDarker, DARK_MODE); + +export const SizeSmall = () => + parse(` + + ${Person20Regular} + Small Input + +`); + +export const SizeMedium = () => + parse(` + + ${Person20Regular} + Medium (default) Input + +`); + +export const SizeLarge = () => + parse(` + + ${Person20Regular} + Large Input + +`); + +export const Inline = () => + parse(` +This is + +with a paragraph of text. +`); diff --git a/apps/vr-tests-web-components/src/stories/text/text.stories.tsx b/apps/vr-tests-web-components/src/stories/text/text.stories.tsx new file mode 100644 index 00000000000000..a019e1dab8c346 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/text/text.stories.tsx @@ -0,0 +1,133 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { TextDefinition, FluentDesignSystem, colorNeutralBackground6 } from '@fluentui/web-components'; + +TextDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Text', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + Default + `); + +export const Nowrap = () => + parse(` + +
+ This text will not wrap lines when it overflows the container. +
+ +`); + +export const Truncate = () => + parse(` + +
+ Setting truncate and nowrap will truncate when it overflows the container. +
+ +`); + +export const Italic = () => + parse(` + + Italics are emphasized text. + +`); + +export const Underline = () => + parse(` + + Underlined text draws the reader's attention to the words. + +`); + +export const Strikethrough = () => + parse(` + + Strikethrough text is used to indicate something that is no longer relevant. + +`); + +export const Block = () => + parse(` + + Fluent text is inline by default. Setting + block + will make it behave as a block element. + +`); + +export const Size = () => + parse(` +
+ 100 + 200 + 300 + 400 + 500 + 600 + 700 + 800 + 900 + 1000 +
+`); + +export const Weight = () => + parse(` +
+ This text is regular. + This text is medium. + This text is semibold. + This text is bold. +
+`); + +export const Align = () => + parse(` +
+ + Start aligned block. + + + End aligned block. + + + Center aligned block. + + + Justify aligned block text stretches wrapped lines to meet container edges. + +
+`); + +export const Font = () => + parse(` +
+ Font base. + Font numeric 0123456789. + Font monospace. +
+`); diff --git a/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx new file mode 100644 index 00000000000000..88d1cfb77653ee --- /dev/null +++ b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import { StoryContext } from '@storybook/addons'; +import { ComponentStory } from '@storybook/react'; +import { FASTElement, customElement, html, attr } from '@microsoft/fast-element'; +import { teamsLightTheme, teamsDarkTheme, webLightTheme, webDarkTheme } from '@fluentui/tokens'; +import { setThemeFor } from '@fluentui/web-components'; + +const themes = [ + { id: 'web-light', label: 'Web Light', theme: webLightTheme }, + { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme }, + { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme }, + { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme }, +] as const; + +const defaultTheme = themes[0]; + +type ThemeId = (typeof themes)[number]['id']; + +interface WCStoryContext extends StoryContext { + parameters: { + dir?: 'ltr' | 'rtl'; + fluentTheme?: ThemeId; + }; +} + +@customElement({ + name: 'fast-theme-decorator', + template: html``, + styles: ` + :host { + display: block; + color: var(--colorNeutralForeground2); + background-color: var(--colorNeutralBackground2); + font-family: var(--fontFamilyBase); + } + `, +}) +export class FASTThemeDecorator extends FASTElement { + @attr({ + attribute: 'fluent-theme', + }) + public fluentTheme: ThemeId = defaultTheme.id; + + connectedCallback() { + super.connectedCallback(); + const theme = themes.find(value => value.id === this.fluentTheme)?.theme ?? defaultTheme.theme; + setThemeFor(this, theme); + } +} + +export const WCThemeDecorator = (StoryFn: () => JSX.Element, context: WCStoryContext) => { + const { dir = 'ltr', fluentTheme = defaultTheme.id } = context.parameters; + + return React.createElement('fast-theme-decorator', { dir, 'fluent-theme': fluentTheme }, StoryFn()); +}; + +export const DARK_MODE = 'Dark Mode'; +export const RTL = 'RTL'; + +type Variant = typeof DARK_MODE | typeof RTL; + +function getStoryName(story: ComponentStory) { + if (story.storyName) { + return story.storyName; + } + + return story.name.replace(/([a-z])([A-Z])/g, '$1 $2'); +} + +export const getStoryVariant = (story: () => string | JSX.Element | JSX.Element[], variant: Variant) => { + return { + ...story, + render: story, + storyName: `${getStoryName(story as ComponentStory)} - ${variant}`, + parameters: { + ...(variant === DARK_MODE && { fluentTheme: 'teams-dark' }), + ...(variant === RTL && { dir: 'rtl' }), + }, + }; +}; diff --git a/apps/vr-tests-web-components/tsconfig.json b/apps/vr-tests-web-components/tsconfig.json new file mode 100644 index 00000000000000..322f35376ef57e --- /dev/null +++ b/apps/vr-tests-web-components/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.base.wc.json", + "compilerOptions": { + "target": "ES2019", + "module": "ESNext", + "noEmit": true, + "experimentalDecorators": true, + "resolveJsonModule": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "Node16", + "typeRoots": ["../../node_modules/@types"] + }, + "include": ["./src", "./.storybook/*"] +} diff --git a/azure-pipelines.release.web-components.yml b/azure-pipelines.release.web-components.yml new file mode 100644 index 00000000000000..7a41f66b0b2d3e --- /dev/null +++ b/azure-pipelines.release.web-components.yml @@ -0,0 +1,86 @@ +pr: none +trigger: none + +# Customize build number to include major version +# Example: web-components_20201022.1 +name: 'web-components_$(Date:yyyyMMdd)$(Rev:.r)' + +variables: + - group: 'Github and NPM secrets' + - template: .devops/templates/variables.yml + parameters: + skipComponentGovernanceDetection: false + - name: release.web_components # Used to scope beachball to release only vnext packages + value: true + - name: tags + value: production,externalfacing + +resources: + repositories: + - repository: 1esPipelines + type: git + name: 1ESPipelineTemplates/1ESPipelineTemplates + ref: refs/tags/release + +schedules: + # Triggers the nightly release + # minute 0, hour 4 in UTC (5am in UTC+1), any day of month, any month, days 1-5 of week (M-F) + # https://docs.microsoft.com/en-us/azure/devops/pipelines/build/triggers?tabs=yaml&view=azure-devops#supported-cron-syntax + - cron: '0 4 * * 1-5' + displayName: 'Daily release (M-F at 5am UTC+1)' + branches: + include: + - master + +extends: + template: v1/1ES.Official.PipelineTemplate.yml@1esPipelines + parameters: + pool: + name: Azure-Pipelines-1ESPT-ExDShared + image: windows-latest + os: windows # We need windows because compliance task only run on windows. + stages: + - stage: main + jobs: + - job: Release + pool: + name: '1ES-Host-Ubuntu' + image: '1ES-PT-Ubuntu-20.04' + os: linux + workspace: + clean: all + templateContext: + outputs: + - output: pipelineArtifact + targetPath: $(System.DefaultWorkingDirectory) + artifactName: output + steps: + - template: .devops/templates/tools.yml@self + + - script: | + git config user.name "Fluent UI Build" + git config user.email "fluentui-internal@service.microsoft.com" + git remote set-url origin https://$(githubUser):$(githubPAT)@github.com/microsoft/fluentui.git + displayName: Authenticate git for pushes + + - task: Bash@3 + inputs: + filePath: yarn-ci.sh + displayName: yarn + + # --only makes it only run tests (otherwise due to the missing --production arg, lage would re-run the build) + # https://github.com/microsoft/fluentui/issues/21686 + - script: | + yarn lage format:check lint test build --to @fluentui/web-components + displayName: Build, [test], Lint + + - script: | + yarn publish:beachball -n $(npmToken) --config scripts/beachball/release-web-components.config.js + git reset --hard origin/master + env: + GITHUB_PAT: $(githubPAT) + displayName: Publish changes and bump versions + + - template: .devops/templates/cleanup.yml@self + parameters: + checkForModifiedFiles: false diff --git a/azure-pipelines.vrt-baseline.yml b/azure-pipelines.vrt-baseline.yml index a700eb47d77969..ee714ed304f52d 100644 --- a/azure-pipelines.vrt-baseline.yml +++ b/azure-pipelines.vrt-baseline.yml @@ -15,6 +15,32 @@ variables: pool: '1ES-Host-Ubuntu' jobs: + # TODO: When web-components-v3 branch is merged with master, this file can be deleted and everything below this comment + # can be moved to azure-pipelines.vrt-baseline.yml. The corresponding pipeline on ADO can be deleted as well. + - job: VRToolUpdateBaseline_WebComponents + variables: + pipelineId: '315' + workspace: + clean: all + steps: + - template: .devops/templates/tools.yml + - template: download-vr-cli.yml + - template: .devops/templates/runpublishvrscreenshot.yml + parameters: + fluentVersion: webcomponents + vrTestPackageName: '@fluentui/vr-tests-web-components' + vrTestPackagePath: 'apps/vr-tests-web-components' + + - bash: vr-app run-diff --buildType release --screenshotsDirectory ./screenshots --clientType "FLUENTUI" --locationPrefix 'FluentUI-web-components' --locationPostfix 'vrscreenshotwebcomponents' --pipelineId $(pipelineId) + displayName: 'Run Screenshotdiff update baseline' + env: + API_TOKEN: $(fabric-public-pipeline-access-PAT) + GITHUB_API_TOKEN: $(githubRepoStatusPAT) + STORAGE_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) + VR_APP_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) + VR_APP_CLIENT_ID: $(VR_APP_CLIENT_ID) + VR_APP_API_URL: $(VR_APP_API_URL) + - job: VRToolUpdateBaseline_V9 variables: pipelineId: '311' diff --git a/azure-pipelines.vrt-pr.yml b/azure-pipelines.vrt-pr.yml index 5f37beaf3c0e2d..d542831ed1551a 100644 --- a/azure-pipelines.vrt-pr.yml +++ b/azure-pipelines.vrt-pr.yml @@ -15,6 +15,85 @@ variables: pool: '1ES-Host-Ubuntu' jobs: + - job: VisualRegressionTest_WebComponents + variables: + pipelineId: '315' + pipelineName: 'fluent-ui_VRT_Pipeline_web-components' + workspace: + clean: all + steps: + - checkout: self + fetchDepth: 0 + + - template: .devops/templates/tools.yml + - template: download-vr-cli.yml + + - bash: | + postPolicy="true"; + response=$(curl --request POST ${VR_APP_CLIENT_URL} --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=client_credentials' --data-urlencode 'client_id='${VR_APP_CLIENT_ID} --data-urlencode 'client_secret='${VR_APPROVAL_CLIENT_SECRET} ) + parsedResponse=${response/*"access_token"/} + token=${parsedResponse:3:${#parsedResponse}-5} + curl --location --request POST 'https://vrapprovalfunction-prod.azurewebsites.net/api/policyStateV2' \ + --header 'Authorization: Bearer '"$token" \ + --header 'Content-Type: application/json' \ + --data-raw ' { + "organization": "uifabric", + "projectName": "fabricpublic", + "prId": $(System.PullRequest.PullRequestNumber), + "commitId": "$(Build.SourceVersion)", + "generate":true, + "clientType":"FLUENTUI", + "blockingPipeline":{ + }, + "nonBlockingPipeline":{ + "$(pipelineId)": { + "pipelineStatus": "PENDING", + "pipelineName": "$(pipelineName)" + } + }, + "postPolicy": '${postPolicy}', + "policyType": "OPTIONAL" + }' + displayName: 'Call policy State Api' + env: + VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) + VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) + VR_APP_CLIENT_ID: $(VR_APP_CLIENT_ID) + VR_APP_CLIENT_URL: $(VR_APP_CLIENT_URL) + + - template: .devops/templates/runpublishvrscreenshot.yml + parameters: + fluentVersion: webcomponents + vrTestPackageName: '@fluentui/vr-tests-web-components' + vrTestPackagePath: 'apps/vr-tests-web-components' + + - powershell: | + $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" + Write-Host "Looking up latest official build via url: $url" + $pipelineBuildInfo = Invoke-RestMethod -Uri $url -Headers @{Authorization = "Bearer $env:SYSTEM_ACCESSTOKEN"} + Write-Host "Response: $pipelineBuildInfo" + [int]$latestBuildId = $pipelineBuildInfo.value.id + Write-Host "Setting variable LatestBuildId=$latestBuildId" + Write-Host "##vso[task.setvariable variable=LatestBuildId]$latestBuildId" + name: GetLatestGreenCIBuild + env: + SYSTEM_ACCESSTOKEN: $(System.AccessToken) + # TODO: When web-components-v3 branch is merged with master, + # BASELINE-PIPELINE-ID-WEBCOMPONENTS should be changed to simply BASELINE-PIPELINE-ID. + BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID-WEBCOMPONENTS) + condition: eq(variables['vrTestSkip'], 'no') + + - bash: vr-app run-diff --screenshotsDirectory ./screenshots --buildType pr --clientType "FLUENTUI" --ciDefinitionId 214 --groupName $(pipelineName) --locationPrefix 'FluentUI-web-components' --locationPostfix 'vrscreenshotwebcomponents' --pipelineId $(pipelineId) --clientName 'fluentui-web-components-v3' --threshold '0.04' --cumThreshold '1' + displayName: 'Run fluentui-screenshotdiff' + env: + API_TOKEN: $(fabric-public-pipeline-access-PAT) + GITHUB_API_TOKEN: $(githubRepoStatusPAT) + STORAGE_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) + VR_APP_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) + VR_APP_CLIENT_ID: $(VR_APP_CLIENT_ID) + VR_APP_API_URL: $(VR_APP_API_URL) + condition: eq(variables['vrTestSkip'], 'no') + - job: VisualRegressionTest_V9 variables: pipelineId: '311' diff --git a/change/@fluentui-web-components-db28c4c9-e1dd-4dd0-a4fe-c7fed393995e.json b/change/@fluentui-web-components-db28c4c9-e1dd-4dd0-a4fe-c7fed393995e.json new file mode 100644 index 00000000000000..c0bb1939edff0a --- /dev/null +++ b/change/@fluentui-web-components-db28c4c9-e1dd-4dd0-a4fe-c7fed393995e.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: merge wc-3 to master - avoiding any library bumps", + "packageName": "@fluentui/web-components", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/package.json b/package.json index ac7b7121eba8cd..954a3918e10c5d 100644 --- a/package.json +++ b/package.json @@ -103,6 +103,8 @@ "@nx/workspace": "17.3.2", "@octokit/rest": "18.12.0", "@phenomnomnominal/tsquery": "6.1.3", + "@playwright/test": "1.28.1", + "@rollup/plugin-node-resolve": "13.3.0", "@storybook/addon-a11y": "6.5.15", "@storybook/addon-actions": "6.5.15", "@storybook/addon-docs": "6.5.15", @@ -230,6 +232,7 @@ "eslint-plugin-jest": "23.20.0", "eslint-plugin-jsdoc": "48.2.0", "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-playwright": "0.15.3", "eslint-plugin-react": "7.26.0", "eslint-plugin-react-hooks": "4.2.0", "express": "4.19.2", @@ -279,6 +282,7 @@ "p-queue": "6.6.2", "parse-diff": "0.7.1", "path-browserify": "1.0.1", + "playwright": "1.28.1", "plop": "2.6.0", "portfinder": "1.0.28", "postcss": "8.3.5", @@ -302,13 +306,12 @@ "request-promise-native": "1.0.9", "resolve": "1.22.8", "riceburn": "1.3.1", - "rollup": "2.45.2", + "rollup": "2.71.0", "rollup-plugin-commonjs": "10.1.0", - "rollup-plugin-filesize": "8.0.2", + "rollup-plugin-esbuild": "6.1.1", "rollup-plugin-node-resolve": "5.2.0", "rollup-plugin-terser": "5.3.1", "rollup-plugin-transform-tagged-template": "0.0.3", - "rollup-plugin-typescript2": "0.27.1", "sass": "1.49.11", "sass-loader": "12.4.0", "satisfied": "^1.1.1", @@ -330,7 +333,7 @@ "through2": "4.0.2", "tmp": "0.2.1", "ts-jest": "29.1.1", - "ts-loader": "9.3.1", + "ts-loader": "9.4.2", "ts-node": "10.9.1", "tsconfig-paths": "4.2.0", "tsconfig-paths-webpack-plugin": "4.1.0", diff --git a/packages/web-components/.eslintignore b/packages/web-components/.eslintignore index 5b214b4625e54d..ba38ef5432888d 100644 --- a/packages/web-components/.eslintignore +++ b/packages/web-components/.eslintignore @@ -6,5 +6,3 @@ dist coverage # don't lint storybook .storybook -# don't lint tests -*.spec.* \ No newline at end of file diff --git a/packages/web-components/.eslintrc.js b/packages/web-components/.eslintrc.js deleted file mode 100644 index d3118d7db8188b..00000000000000 --- a/packages/web-components/.eslintrc.js +++ /dev/null @@ -1,57 +0,0 @@ -module.exports = { - root: true, - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint', 'import'], - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier', - ], - settings: { - react: { - version: 'latest', - }, - }, - rules: { - 'no-extra-boolean-cast': 'off', - 'no-prototype-builtins': 'off', - 'no-fallthrough': 'off', - 'no-unexpected-multiline': 'off', - 'import/order': 'error', - 'sort-imports': [ - 'error', - { - ignoreCase: true, - ignoreDeclarationSort: true, - }, - ], - 'comma-dangle': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/no-use-before-define': 'off', - '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/explicit-function-return-type': 'off', - '@typescript-eslint/camelcase': 'off', - '@typescript-eslint/no-inferrable-types': 'off', - '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }], - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/naming-convention': [ - 'error', - { - selector: 'default', - format: ['UPPER_CASE', 'camelCase', 'PascalCase'], - leadingUnderscore: 'allow', - }, - { - selector: 'property', - format: null, // disable for property names because of our foo__expanded convention for JSS - // TODO: I think we can come up with a regex that ignores variables with __ in them - }, - { - selector: 'variable', - format: null, // disable for variable names because of our foo__expanded convention for JSS - // TODO: I think we can come up with a regex that ignores variables with __ in them - }, - ], - }, -}; diff --git a/packages/web-components/.eslintrc.json b/packages/web-components/.eslintrc.json new file mode 100644 index 00000000000000..0b1511be1817a2 --- /dev/null +++ b/packages/web-components/.eslintrc.json @@ -0,0 +1,64 @@ +{ + "root": true, + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "import"], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "prettier", + "plugin:playwright/recommended" + ], + "settings": { + "react": { + "version": "latest" + } + }, + "rules": { + "no-extra-boolean-cast": "off", + "no-prototype-builtins": "off", + "no-fallthrough": "off", + "no-unexpected-multiline": "off", + "no-useless-escape": "off", + "import/order": "error", + "sort-imports": [ + "error", + { + "ignoreCase": true, + "ignoreDeclarationSort": true + } + ], + "comma-dangle": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/camelcase": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { + "args": "none" + } + ], + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/naming-convention": [ + "error", + { + "selector": "default", + "format": ["UPPER_CASE", "camelCase", "PascalCase"], + "leadingUnderscore": "allow" + }, + { + "selector": "property", + "format": null // disable for property names because of our foo__expanded convention for JSS + // TODO: I think we can come up with a regex that ignores variables with __ in them + }, + { + "selector": "variable", + "format": null // disable for variable names because of our foo__expanded convention for JSS + // TODO: I think we can come up with a regex that ignores variables with __ in them + } + ] + } +} diff --git a/packages/web-components/.mocharc.json b/packages/web-components/.mocharc.json deleted file mode 100644 index ad84c86f3814ce..00000000000000 --- a/packages/web-components/.mocharc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "colors": true, - "recursive": true, - "timeout": 5000, - "require": ["esm", "jsdom-global/register"] -} diff --git a/packages/web-components/.npmignore b/packages/web-components/.npmignore index db6d6409bd9711..3bcf3dd7ff879e 100644 --- a/packages/web-components/.npmignore +++ b/packages/web-components/.npmignore @@ -1,30 +1,42 @@ +.vscode/ + # Tests -dist/dts/__test__/ -dist/esm/__test__/ *.spec.* +*.test.* +*.bench.* coverage/ +__fixtures__ +__mocks__ +__tests__ # images images/ # Source files src/ +scripts/ # config files .eslintignore .eslintrc.js +.eslintrc.json .prettierignore -.storybook tsconfig.json -tsconfig.build.json +tsconfig.*.json rollup.config.json +rollup.config.js karma.conf.cjs api-extractor.json .mocharc.json -# Storybook static site +# Storybook +.storybook +*.stories.* +public/ dist/storybook-static/ # cache .rollupcache -temp +temp/ +etc/ +CHANGELOG.json diff --git a/packages/web-components/.storybook/docs-root-web-compoents.css b/packages/web-components/.storybook/docs-root-web-compoents.css new file mode 100644 index 00000000000000..51ab5192f7fac8 --- /dev/null +++ b/packages/web-components/.storybook/docs-root-web-compoents.css @@ -0,0 +1,49 @@ +/* Mimic React v9 Provider styles: + * - apply font, background, and foreground colors + * - apply padding for story content + */ +#docs-root .innerZoomElementWrapper > div > div { + padding: 48px 24px; + font-family: var(--fontFamilyBase); + background: var(--colorNeutralBackground2); + color: var(--colorNeutralForeground2); +} + +/* + * Theme Switcher + */ +#switches-container { + position: sticky; + display: flex; + gap: 20px; + align-items: center; + padding: 12px; + width: 100%; + top: 0; + box-sizing: border-box; /* keep from overflowing body making x scroll bar*/ + background: #fff; + box-shadow: 0px 0px 3px rgb(0 0 0 / 22%); + z-index: 10; +} + +#switches-container select { + padding: 5px var(--spacingHorizontalM); + border: var(--strokeWidthThin) solid #d1d1d1 /* --colorNeutralStroke1, without theme switching */; + border-radius: var(--borderRadiusMedium); + font-size: var(--fontSizeBase300); + font-weight: var(--fontWeightSemibold); + line-height: var(--lineHeightBase300); + width: 140px; +} + +.custom-fullscreen #switches-container { + display: none; +} + +.custom-fullscreen .sbdocs-wrapper { + padding: 20px; +} + +.custom-fullscreen .sbdocs-content { + max-width: unset; +} diff --git a/packages/web-components/.storybook/main.cjs b/packages/web-components/.storybook/main.cjs new file mode 100644 index 00000000000000..a6c4d1ab928b16 --- /dev/null +++ b/packages/web-components/.storybook/main.cjs @@ -0,0 +1,80 @@ +const path = require('path'); +const CircularDependencyPlugin = require('circular-dependency-plugin'); +const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); + +const tsBin = require.resolve('typescript'); +const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json'); + +const tsPaths = new TsconfigPathsPlugin({ + configFile: tsConfigPath, +}); + +module.exports = /** @type {Omit} */ ({ + stories: ['../src/**/*.stories.@(ts|mdx)'], + staticDirs: ['../public'], + core: { + builder: 'webpack5', + disableTelemetry: true, + }, + addons: [ + { + name: '@storybook/addon-docs', + }, + { + name: '@storybook/addon-essentials', + options: { + backgrounds: false, + viewport: false, + toolbars: false, + actions: true, + }, + }, + ], + webpackFinal: async config => { + config.resolve = config.resolve ?? {}; + config.resolve.extensions = config.resolve.extensions ?? []; + config.resolve.plugins = config.resolve.plugins ?? []; + config.module = config.module ?? {}; + config.plugins = config.plugins ?? []; + + config.resolve.extensionAlias = { + '.js': ['.js', '.ts'], + '.mjs': ['.mjs', '.mts'], + }; + config.resolve.extensions.push(...['.ts', '.js']); + config.resolve.plugins.push(tsPaths); + config.module.rules = config.module.rules ?? []; + config.module.rules.push( + { + test: /\.([cm]?ts|tsx)$/, + loader: 'ts-loader', + sideEffects: true, + options: { + transpileOnly: true, + compiler: tsBin, + }, + }, + // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM + // It also enables importing other packages without proper ESM extensions, but that should be avoided ! + // @see https://webpack.js.org/configuration/module/#resolvefullyspecified + { + test: /\.m?js/, + resolve: { fullySpecified: false }, + }, + ); + + config.plugins.push( + new CircularDependencyPlugin({ + exclude: /node_modules/, + failOnError: process.env.NODE_ENV === 'production', + }), + ); + + // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged. + if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) { + config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin'); + } + + return config; + }, +}); diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.storybook/main.js deleted file mode 100644 index 352a8ec7d0084e..00000000000000 --- a/packages/web-components/.storybook/main.js +++ /dev/null @@ -1,49 +0,0 @@ -const CircularDependencyPlugin = require('circular-dependency-plugin'); - -module.exports = { - stories: ['../src/**/*.stories.@(ts|mdx)'], - staticDirs: ['../public'], - core: { - builder: 'webpack5', - disableTelemetry: true, - }, - addons: [ - { - name: '@storybook/addon-docs', - }, - { - name: '@storybook/addon-essentials', - options: { - backgrounds: false, - viewport: false, - toolbars: false, - actions: false, - }, - }, - ], - webpackFinal: async config => { - config.module.rules.push({ - test: /\.ts$/, - use: [ - { - loader: 'ts-loader', - }, - ], - }); - config.resolve.extensions.push('.ts'); - config.resolve.extensions.push('.js'); - config.plugins.push( - new CircularDependencyPlugin({ - exclude: /node_modules/, - failOnError: process.env.NODE_ENV === 'production', - }), - ); - - // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged. - if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) { - config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin'); - } - - return config; - }, -}; diff --git a/packages/web-components/.storybook/manager-head.html b/packages/web-components/.storybook/manager-head.html index 66e56d53aabeb3..4ad492a52099c8 100644 --- a/packages/web-components/.storybook/manager-head.html +++ b/packages/web-components/.storybook/manager-head.html @@ -3,14 +3,86 @@ --> + diff --git a/packages/web-components/.storybook/manager.js b/packages/web-components/.storybook/manager.mjs similarity index 85% rename from packages/web-components/.storybook/manager.js rename to packages/web-components/.storybook/manager.mjs index a46a1321617892..5dcaa431bdecd9 100644 --- a/packages/web-components/.storybook/manager.js +++ b/packages/web-components/.storybook/manager.mjs @@ -1,5 +1,5 @@ import { addons } from '@storybook/addons'; -import webcomponentsTheme from './theme'; +import webcomponentsTheme from './theme.mjs'; addons.setConfig({ previewTabs: { diff --git a/packages/web-components/.storybook/preview-body.html b/packages/web-components/.storybook/preview-body.html index 996c666f92e71a..93e32a40560db2 100644 --- a/packages/web-components/.storybook/preview-body.html +++ b/packages/web-components/.storybook/preview-body.html @@ -1,12 +1,9 @@
- - Direction - RTL - LTR - - - Luminance - Dark - Light - + +
diff --git a/packages/web-components/.storybook/preview-head.html b/packages/web-components/.storybook/preview-head.html deleted file mode 100644 index 9f3c89bc6e1ef3..00000000000000 --- a/packages/web-components/.storybook/preview-head.html +++ /dev/null @@ -1,67 +0,0 @@ - diff --git a/packages/web-components/.storybook/preview.js b/packages/web-components/.storybook/preview.js deleted file mode 100644 index 95d4b56fba6ffd..00000000000000 --- a/packages/web-components/.storybook/preview.js +++ /dev/null @@ -1,54 +0,0 @@ -import { addons } from '@storybook/addons'; -import { DOCS_RENDERED } from '@storybook/core-events'; -import * as Fluent from '../src/index-rollup'; -import { fillColor, neutralLayer1, neutralLayer2 } from '../src/design-tokens'; -import webcomponentsTheme from './theme'; -import { toggleBgMode, toggleLtr } from '../public/switches'; - -Fluent; - -document.getElementById('luminance-switch').addEventListener('change', toggleBgMode, false); -document.getElementById('direction-switch').addEventListener('change', toggleLtr, false); - -export const parameters = { - layout: 'fullscreen', - controls: { expanded: true }, - viewMode: 'docs', - previewTabs: { - canvas: { hidden: true }, - }, - options: { - storySort: { - order: [ - 'Getting Started', - ['Overview', 'Installation', 'Styling'], - 'Components', - 'Integrations', - ['Introduction'], - 'Design System', - ['Design Tokens', 'Color Explorer', 'High Contrast'], - 'Resources', - ['Browser Support', 'FAQ', 'License', 'Security'], - '*', - ], - method: 'alphabetical', - }, - }, - docs: { - theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme - }, -}; - -addons.getChannel().addListener(DOCS_RENDERED, name => { - if (name.toLowerCase().includes('accordion') || name.toLowerCase().includes('card')) { - fillColor.setValueFor(document.body, neutralLayer2); - } else { - fillColor.setValueFor(document.body, neutralLayer1); - } - - if (name.toLowerCase().includes('color-explorer')) { - document.body.classList.add('custom-fullscreen'); - } else { - document.body.classList.remove('custom-fullscreen'); - } -}); diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.mjs new file mode 100644 index 00000000000000..d8130f99233ef0 --- /dev/null +++ b/packages/web-components/.storybook/preview.mjs @@ -0,0 +1,39 @@ +import * as Fluent from '../src/index-rollup.js'; +import webcomponentsTheme from './theme.mjs'; +import { switchTheme } from '../public/theme-switch.js'; +import '../../../.storybook/docs-root.css'; +import './docs-root-web-compoents.css'; + +Fluent; + +function changeTheme(e) { + switchTheme(e.target.value); +} + +document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false); +switchTheme('web-light'); + +export const parameters = { + layout: 'fullscreen', + controls: { expanded: true }, + viewMode: 'docs', + previewTabs: { + canvas: { hidden: true }, + }, + options: { + storySort: { + method: 'alphabetical', + order: [ + 'Concepts', + [ + 'Introduction', + ], + 'Components', + 'Theme', + ], + }, + }, + docs: { + theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme + }, +}; diff --git a/packages/web-components/.storybook/theme.js b/packages/web-components/.storybook/theme.mjs similarity index 58% rename from packages/web-components/.storybook/theme.js rename to packages/web-components/.storybook/theme.mjs index 57947533b5c3a8..16836fbf5589dc 100644 --- a/packages/web-components/.storybook/theme.js +++ b/packages/web-components/.storybook/theme.mjs @@ -2,7 +2,7 @@ import { create } from '@storybook/theming'; export default create({ base: 'light', - brandTitle: 'Fluent Web Components', + brandTitle: 'Fluent UI\nWeb Components', brandUrl: 'https://github.com/microsoft/fluentui', // Toolbar default and active colors @@ -13,20 +13,23 @@ export default create({ colorSecondary: 'deepskyblue', // UI - // appBg: '#0ff', - // appContentBg: '--fill', + appBg: '#ffffff', + appContentBg: '#ffffff', + appBorderColor: '#e0e0e0', // use msft gray appBorderRadius: 4, // Typography - // fontBase: '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif', + fontBase: + '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;', fontCode: 'monospace', // Text colors - textColor: '#222', - textInverseColor: 'rgba(255,255,255,0.9)', + textColor: '#11100f', + textInverseColor: '#0078d4', // use msft primary blue default // Form colors inputBg: 'white', inputTextColor: 'black', inputBorderRadius: 4, }); + diff --git a/packages/web-components/.storybook/tsconfig.json b/packages/web-components/.storybook/tsconfig.json new file mode 100644 index 00000000000000..78905f4f659714 --- /dev/null +++ b/packages/web-components/.storybook/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "noEmit": true, + "types": ["node"] + }, + "include": ["*", "../public", "../src/**/*.stories.*"] +} diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json index 5ec4f66b5f7245..2fcfbcc47e4ed3 100644 --- a/packages/web-components/CHANGELOG.json +++ b/packages/web-components/CHANGELOG.json @@ -1,6 +1,1032 @@ { "name": "@fluentui/web-components", "entries": [ + { + "date": "Wed, 01 May 2024 04:09:09 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.15", + "version": "3.0.0-beta.15", + "comments": { + "prerelease": [ + { + "author": "=", + "package": "@fluentui/web-components", + "commit": "dc5cd66206e6fd01b6849fdfe9b02bcb86121aec", + "comment": "fix(web-components): remove all barrell exports with exception of design tokens" + } + ] + } + }, + { + "date": "Fri, 26 Apr 2024 04:07:24 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.14", + "version": "3.0.0-beta.14", + "comments": { + "prerelease": [ + { + "author": "13071055+chrisdholt@users.noreply.github.com", + "package": "@fluentui/web-components", + "commit": "8eb247555918987d33171c6a932cc4218d36727d", + "comment": "create CSS partials for named typography styles" + } + ] + } + }, + { + "date": "Thu, 25 Apr 2024 04:09:24 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.13", + "version": "3.0.0-beta.13", + "comments": { + "prerelease": [ + { + "author": "=", + "package": "@fluentui/web-components", + "commit": "ee42c7c3871b4f7cb97cf7868e12772d1bfe2b06", + "comment": "ensure buttons with long text maintain center alignment" + } + ] + } + }, + { + "date": "Tue, 23 Apr 2024 04:09:06 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.12", + "version": "3.0.0-beta.12", + "comments": { + "prerelease": [ + { + "author": "863023+radium-v@users.noreply.github.com", + "package": "@fluentui/web-components", + "commit": "2eab460e1fbb6dbc68008bcd5963279761c64460", + "comment": "Use ElementInternals for Button components" + } + ] + } + }, + { + "date": "Mon, 15 Apr 2024 04:09:34 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.11", + "version": "3.0.0-beta.11", + "comments": { + "prerelease": [ + { + "author": "=", + "package": "@fluentui/web-components", + "commit": "0d4cc99c6174fc0e9320cb448aa7ae136ce1fae3", + "comment": "fix(web-components): remove final dependencies on fast-foundation" + } + ] + } + }, + { + "date": "Tue, 09 Apr 2024 04:08:05 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.10", + "version": "3.0.0-beta.10", + "comments": { + "prerelease": [ + { + "author": "=", + "package": "@fluentui/web-components", + "commit": "0bdcbe7aedc829f039ed48cd9ef546709429e5fb", + "comment": "revert design token syntax change for DX" + } + ] + } + }, + { + "date": "Mon, 08 Apr 2024 04:08:59 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.9", + "version": "3.0.0-beta.9", + "comments": { + "prerelease": [ + { + "author": "=", + "package": "@fluentui/web-components", + "commit": "9ac84d348585fbbb214b18be076c566ec60f9d99", + "comment": "chore: setup perf benchmarking in web components" + }, + { + "author": "beachball", + "package": "@fluentui/web-components", + "comment": "Bump @fluentui/tokens to v1.0.0-alpha.2", + "commit": "9ac84d348585fbbb214b18be076c566ec60f9d99" + } + ] + } + }, + { + "date": "Mon, 12 Feb 2024 04:08:06 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.8", + "version": "3.0.0-beta.8", + "comments": { + "prerelease": [ + { + "author": "jes@microsoft.com", + "package": "@fluentui/web-components", + "commit": "8fd063a5c1c6b7c0b77cf2c51436d564b5b1c1f0", + "comment": "Removes dependancy on fast-foundation classes and templates" + } + ] + } + }, + { + "date": "Fri, 09 Feb 2024 04:08:43 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.7", + "version": "3.0.0-beta.7", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "4909fe2c8e9fb9029b5e7fa4d5aa73d299cf089f", + "comment": "feat: remove JS design token implementation in favor of platform css variables" + } + ] + } + }, + { + "date": "Fri, 01 Dec 2023 04:08:50 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.6", + "version": "3.0.0-beta.6", + "comments": { + "none": [ + { + "author": "mibaraka@microsoft.com", + "package": "@fluentui/web-components", + "commit": "ebe7e4837a07b1218f9f7196b5c3043c0ad4cbb3", + "comment": "Updating disclaimer on storybook" + } + ] + } + }, + { + "date": "Thu, 26 Oct 2023 04:16:51 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.6", + "version": "3.0.0-beta.6", + "comments": { + "prerelease": [ + { + "author": "brian.christopher.brady@gmail.com", + "package": "@fluentui/web-components", + "commit": "dd16c56adf42b8f2771907749d3f8fde8eb52f4e", + "comment": "feat(dialog): add dialog web component" + } + ] + } + }, + { + "date": "Thu, 19 Oct 2023 04:18:07 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.5", + "version": "3.0.0-beta.5", + "comments": { + "prerelease": [ + { + "author": "hale.rankin@microsoft.com", + "package": "@fluentui/web-components", + "commit": "ef39b5c4329868b9426612c188e31496b26d75e5", + "comment": "Updates package with Menu component sideEffect." + } + ] + } + }, + { + "date": "Fri, 13 Oct 2023 04:17:27 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.4", + "version": "3.0.0-beta.4", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "af42938529ee2284a933a9f64db163c3bf283400", + "comment": "fix: update switch to use margin instead of transform for the checked state to support RTL" + } + ] + } + }, + { + "date": "Thu, 28 Sep 2023 04:18:49 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.3", + "version": "3.0.0-beta.3", + "comments": { + "prerelease": [ + { + "author": "brian.christopher.brady@gmail.com", + "package": "@fluentui/web-components", + "commit": "980b0d394322fd6a11ea85d57721e928ca4803a5", + "comment": "feat(menu): adds menu web component" + } + ] + } + }, + { + "date": "Mon, 28 Aug 2023 04:19:02 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.2", + "version": "3.0.0-beta.2", + "comments": { + "prerelease": [ + { + "author": "mmansour@microsoft.com", + "package": "@fluentui/web-components", + "commit": "9d4c07c582596b55ceea4b68677fd74dd9236ae7", + "comment": "Fixed pathing to types for package exports" + } + ] + } + }, + { + "date": "Fri, 25 Aug 2023 04:19:39 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.1", + "version": "3.0.0-beta.1", + "comments": { + "prerelease": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "c271ab35c7160288de81b27a31627aa199a9afe3", + "comment": "Bump version to beta" + } + ] + } + }, + { + "date": "Wed, 23 Aug 2023 04:18:01 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.31", + "version": "3.0.0-alpha.31", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "913d17528272d230a1c6f72652271faaebeb1a12", + "comment": "feat(web-components): add explicit named exports for design tokens and package export path for theme utils" + } + ] + } + }, + { + "date": "Tue, 22 Aug 2023 04:17:13 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.30", + "version": "3.0.0-alpha.30", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "2f59582504dca05054a49aa2d47a483356fb6a69", + "comment": "feat(web-components): update core component files to use foundation export paths and update package exports to include extensions" + } + ] + } + }, + { + "date": "Mon, 21 Aug 2023 04:16:01 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.29", + "version": "3.0.0-alpha.29", + "comments": { + "none": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "a6baaca2a79e39bd1ef616ddb757d7505d6b0adf", + "comment": "chore: Enable lint for unit tests" + } + ] + } + }, + { + "date": "Tue, 15 Aug 2023 04:16:11 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.29", + "version": "3.0.0-alpha.29", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "8c3c3b2fbc9cf08609ae30d5f9fd2dddfaef3b0c", + "comment": "fix(web-components): update latest versions of fast packages and fix unallowed attributes issue for fluent-divider" + } + ] + } + }, + { + "date": "Thu, 10 Aug 2023 04:18:05 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.28", + "version": "3.0.0-alpha.28", + "comments": { + "none": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "c83bfec16fd0d93b1305e5f5aec5d8a62c8f7cb7", + "comment": "add playwright testing to the web component package" + } + ] + } + }, + { + "date": "Wed, 09 Aug 2023 04:16:56 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.28", + "version": "3.0.0-alpha.28", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "a00e814aa5a1641754d4b7fb6f05c0ac2aa4e060", + "comment": "fix(web-components): enumerate side-effects for package export paths" + } + ] + } + }, + { + "date": "Tue, 08 Aug 2023 04:18:02 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.27", + "version": "3.0.0-alpha.27", + "comments": { + "prerelease": [ + { + "author": "brian.christopher.brady@gmail.com", + "package": "@fluentui/web-components", + "commit": "54df8d3a425019ac593089e57225e624247aeb2e", + "comment": "(accessibility): high contrast fixes" + }, + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "5e205bc242bef175275d73d3ca5c52243782f589", + "comment": "Fixes low contrast in dark mode for web component badge" + } + ] + } + }, + { + "date": "Mon, 07 Aug 2023 04:17:07 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.26", + "version": "3.0.0-alpha.26", + "comments": { + "none": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "c41d572219c127e1c042ce847b9e867c150b230c", + "comment": "dummy change to trigger CI" + } + ], + "prerelease": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "67cb8d06db5c7f17da4c6116729925705c0f7d3e", + "comment": "feat: Add support for scoped theming" + } + ] + } + }, + { + "date": "Fri, 28 Jul 2023 04:14:52 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.25", + "version": "3.0.0-alpha.25", + "comments": { + "none": [ + { + "author": "me@levithomason.com", + "package": "@fluentui/web-components", + "commit": "b1dae68db2d16f214923fd188872d5cbe485e01a", + "comment": "Documentation style updates" + } + ] + } + }, + { + "date": "Wed, 19 Jul 2023 04:18:54 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.25", + "version": "3.0.0-alpha.25", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "ee984a5df76329a1da80fbe2cb6b20394d26eb7c", + "comment": "fix(web-components): check if component is connected before calling setAttribute in attribute changed callback" + }, + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "44328d34af5ce81c8b66b87a02a6082c2e967fc5", + "comment": "feat(checkbox): Add checkbox web component" + } + ] + } + }, + { + "date": "Mon, 12 Jun 2023 04:17:30 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.24", + "version": "3.0.0-alpha.24", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "7d890d73560b1fec4e8d1d280ce5417529a0530f", + "comment": "export fluent design system from web-components package" + } + ] + } + }, + { + "date": "Thu, 08 Jun 2023 04:18:00 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.23", + "version": "3.0.0-alpha.23", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "ac7f17ec809a50b1b709e5fd66e8566b4181f08e", + "comment": "feat(text-input): add TextInput as a new web component" + } + ] + } + }, + { + "date": "Wed, 24 May 2023 04:19:34 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.22", + "version": "3.0.0-alpha.22", + "comments": { + "prerelease": [ + { + "author": "harankin@microsoft.com", + "package": "@fluentui/web-components", + "commit": "60b51196b1939782da61b7ff578c17fa510ef864", + "comment": "feat(menu-item): export MenuItemRole constants" + } + ] + } + }, + { + "date": "Mon, 15 May 2023 04:19:56 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.21", + "version": "3.0.0-alpha.21", + "comments": { + "prerelease": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "cad93648a2ce28e99935d4ab36089d770fa06a53", + "comment": "Fixes exports in Switch" + } + ] + } + }, + { + "date": "Mon, 08 May 2023 04:19:58 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.20", + "version": "3.0.0-alpha.20", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "1dddc623661d1b2667a866a1f779363d91a759e4", + "comment": "feat(radio): add radio and radio-group web components" + } + ] + } + }, + { + "date": "Fri, 21 Apr 2023 04:19:22 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.19", + "version": "3.0.0-alpha.19", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "f801e34cdc25ba01ccf3b2baa9fac1080d987e9b", + "comment": "feat(menu-list): Add menu-list and menu-item web components" + } + ] + } + }, + { + "date": "Thu, 20 Apr 2023 04:20:30 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.18", + "version": "3.0.0-alpha.18", + "comments": { + "prerelease": [ + { + "author": "harankin@microsoft.com", + "package": "@fluentui/web-components", + "commit": "9cd641f4d38d6889ee50afeedca54f77617cd1a5", + "comment": "Image component style updates" + } + ] + } + }, + { + "date": "Wed, 19 Apr 2023 04:23:30 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.17", + "version": "3.0.0-alpha.17", + "comments": { + "none": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "e5ff319c5354a9f47d6f5b990441673e32998b7c", + "comment": "Adds Select spec" + } + ] + } + }, + { + "date": "Wed, 12 Apr 2023 04:19:35 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.17", + "version": "3.0.0-alpha.17", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "cc0a6678ff55f657b13b70cff02645fe3772c84e", + "comment": "feat(toggle-button): add toggle button web component" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "37195a34b36538ab0cc7c765824691bab796502e", + "comment": "feat(compound-button): add compound button as new web component" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "5ab8f95663fcac978d98dccc65626196679a2ae2", + "comment": "feat(anchor-button): add anchor button to web components" + } + ] + } + }, + { + "date": "Tue, 11 Apr 2023 04:24:57 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.16", + "version": "3.0.0-alpha.16", + "comments": { + "prerelease": [ + { + "author": "mibaraka@microsoft.com", + "package": "@fluentui/web-components", + "commit": "30b72e9804a37880b4b90c0bcd400635506f300e", + "comment": "Adding Tabs, Tab and Tab-Panel" + } + ] + } + }, + { + "date": "Fri, 07 Apr 2023 04:17:30 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.15", + "version": "3.0.0-alpha.15", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "48980fef03e94733a686deea7dc9454eba6dd8c4", + "comment": "feat(label): adds label as a new web component" + } + ] + } + }, + { + "date": "Thu, 06 Apr 2023 04:22:08 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.14", + "version": "3.0.0-alpha.14", + "comments": { + "prerelease": [ + { + "author": "mibaraka@microsoft.com", + "package": "@fluentui/web-components", + "commit": "55024b9a8799834f6d102445218ffd724a125913", + "comment": "Adding TabList, Tab, and TabPanel web components" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "2a1f8f60205b064140fab122cced18b06177546d", + "comment": "feat(menu-button): add menu button as new component" + } + ], + "none": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "ca6e4dd7ed8476810a51384f0e44b54989cc0b66", + "comment": "chore(web-components): fixes the alphabetical order of package exports" + } + ] + } + }, + { + "date": "Fri, 31 Mar 2023 04:19:43 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.13", + "version": "3.0.0-alpha.13", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "7f5a5e507a3902a9703d5198a13cc96335c82eaa", + "comment": "update fast-element and fast-foundation dependencies" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "d901fa95e8f90c1b5dabda8602a72ecb77288f0c", + "comment": "feat(button): add button web component" + } + ] + } + }, + { + "date": "Tue, 28 Mar 2023 04:20:01 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.12", + "version": "3.0.0-alpha.12", + "comments": { + "prerelease": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "d63779409cf8b7565b415fdac51e09cf4dbc6e08", + "comment": "Adds Slider as a web component" + } + ] + } + }, + { + "date": "Tue, 14 Mar 2023 04:21:22 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.11", + "version": "3.0.0-alpha.11", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "6e51be008ee479451431421eaf2e3e63744b6d5c", + "comment": "update FAST dependencies to latest package versions" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "fc86569d1d96d6deff9188fa0702d173150dd5dd", + "comment": "Adds css containment to implemented web components" + } + ] + } + }, + { + "date": "Thu, 09 Mar 2023 04:19:45 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.10", + "version": "3.0.0-alpha.10", + "comments": { + "prerelease": [ + { + "author": "jes@microsoft.com", + "package": "@fluentui/web-components", + "commit": "443b8d8e35429ffbabda35cbe7d4704adaaf8ab4", + "comment": "fix: [text] block breaks the style attribute" + } + ] + } + }, + { + "date": "Tue, 07 Mar 2023 04:24:51 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.9", + "version": "3.0.0-alpha.9", + "comments": { + "none": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "07c70c3cb2253817e70e9b1c4615aee7e69a1816", + "comment": "Adds SliderLabel spec and folder" + } + ] + } + }, + { + "date": "Fri, 03 Mar 2023 04:23:00 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.9", + "version": "3.0.0-alpha.9", + "comments": { + "none": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "9ae245574502f15ed372dc37b0374883f45ccdf2", + "comment": "adds radio and radio group spec" + } + ] + } + }, + { + "date": "Wed, 01 Mar 2023 04:20:20 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.9", + "version": "3.0.0-alpha.9", + "comments": { + "prerelease": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "d87331975f16754f9debb4e11c6dd4f2b516f130", + "comment": "Redo of PR of Slider spec after merge error" + } + ] + } + }, + { + "date": "Tue, 28 Feb 2023 04:25:15 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.8", + "version": "3.0.0-alpha.8", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "c0d4b0def168396e9139672146bbadbe408ea4d4", + "comment": "updates wc3 accordion and accordion item docs" + } + ], + "none": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "237267b5ad816d090011c93f2922476c1abfe87f", + "comment": "chore: Enable Typescript strict mode" + } + ] + } + }, + { + "date": "Mon, 27 Feb 2023 04:27:02 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.7", + "version": "3.0.0-alpha.7", + "comments": { + "prerelease": [ + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "4309a0d5afbe56dab0b1204922a37873fe832c8b", + "comment": "feat(avatar): add Avatar web component" + }, + { + "author": "harankin@microsoft.com", + "package": "@fluentui/web-components", + "commit": "7d9573d73b4be010c2b07540fa0c23c27aba2821", + "comment": "feat(divider): Add divider web component" + }, + { + "author": "harankin@microsoft.com", + "package": "@fluentui/web-components", + "commit": "e793ad8a7f7ae0239a808439d121cf012dd414e5", + "comment": "feat(image): Add image web component" + } + ] + } + }, + { + "date": "Fri, 24 Feb 2023 04:20:32 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.6", + "version": "3.0.0-alpha.6", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "2de60aec984eb2802da76c6c67849da358c0db49", + "comment": "feat(switch): Add switch web component" + } + ] + } + }, + { + "date": "Wed, 22 Feb 2023 04:22:43 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.5", + "version": "3.0.0-alpha.5", + "comments": { + "prerelease": [ + { + "author": "brianbrady@microsoft.com", + "package": "@fluentui/web-components", + "commit": "1ad2597f744bf7c3e2eada7720eea793fcee660e", + "comment": "feat(accordion): Add accordion web component" + } + ] + } + }, + { + "date": "Tue, 21 Feb 2023 04:21:36 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.4", + "version": "3.0.0-alpha.4", + "comments": { + "none": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "57f2ea7f8389f1409fba6fb0697708ddf8fb05d9", + "comment": "docs: Add landing page" + } + ] + } + }, + { + "date": "Fri, 17 Feb 2023 04:19:53 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.4", + "version": "3.0.0-alpha.4", + "comments": { + "none": [ + { + "author": "jslone@microsoft.com", + "package": "@fluentui/web-components", + "commit": "b79b33d10cbd6015531fa943e0e6dbe7f84b9b42", + "comment": "chore: run manually to bump wc to fix failed CI release" + } + ] + } + }, + { + "date": "Thu, 16 Feb 2023 16:51:48 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.4", + "version": "3.0.0-alpha.4", + "comments": { + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "ae03f3eec389aca7e15fde295868aacd51eb1822", + "comment": "chore(web-components): introduce ts-solution configs and monorepo setup/DX" + } + ], + "prerelease": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "226b7af089cea03d27ec722cabc73d018f263fd1", + "comment": "fix(web-components): dont ship non production assets to npm registry" + } + ] + } + }, + { + "date": "Wed, 15 Feb 2023 04:24:51 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.3", + "version": "3.0.0-alpha.3", + "comments": { + "prerelease": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "4d959c01c7b282136e669b7c0ac0d038b9deeafe", + "comment": "Adds Spinner as a web component" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "09b44a73d3d225044af4e114d210176f7f38001a", + "comment": "update fast element and foundation versions" + } + ] + } + }, + { + "date": "Mon, 13 Feb 2023 04:21:38 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.2", + "version": "3.0.0-alpha.2", + "comments": { + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "5745de0ab6ab860f905c33d4430b857b8a72f27f", + "comment": "style: fix formatting in files that were silently passed previously" + } + ] + } + }, + { + "date": "Mon, 06 Feb 2023 04:20:29 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.2", + "version": "3.0.0-alpha.2", + "comments": { + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "dcf643c51586968fa700b83eb1982866e6cfe946", + "comment": "ci: setup web-components docsite CI/CD" + } + ] + } + }, + { + "date": "Thu, 26 Jan 2023 04:18:59 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.2", + "version": "3.0.0-alpha.2", + "comments": { + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "1949a66866dca51e82530efdedbb3d455880d614", + "comment": "chore(web-components): run manually bump to fix failed CI release" + } + ] + } + }, + { + "date": "Wed, 25 Jan 2023 17:42:30 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.2", + "version": "3.0.0-alpha.2", + "comments": { + "prerelease": [ + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "68de783e80c71173a717c758680a63bf9c7e8c78", + "comment": "feat: export theme" + } + ], + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "c5b3031ada2f788ef0a36185024f4c10c16143d6", + "comment": "chore: run manually bump to fix failed CI release" + } + ] + } + }, + { + "date": "Wed, 25 Jan 2023 14:49:08 GMT", + "tag": "@fluentui/web-components_v3.0.0-alpha.1", + "version": "3.0.0-alpha.1", + "comments": { + "prerelease": [ + { + "author": "ryan@ryanmerrill.net", + "package": "@fluentui/web-components", + "commit": "1322f3f962e8a850fe104cc2ba9b12b2bc2f2842", + "comment": "add progressbar as new component" + }, + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "6de62a46eafd74b968ec913901729b3f7284dc7a", + "comment": "Add initial theme" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "eead74fee07339f998615fe34d8f847d0f63af6e", + "comment": "add badge and counter badge as new components" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "5e3ba35835c0a5487b574ea58a51cccd67b5fa8c", + "comment": "add text as a new component" + } + ], + "none": [ + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "7c94cbd46051ea57bba4e8885c86e89967bb412c", + "comment": "chore: setup typescript 4.7 for web-components package" + }, + { + "author": "miroslav.stastny@microsoft.com", + "package": "@fluentui/web-components", + "commit": "cd42ab4f8aa11c7ac134538193dc8dc4a01ca0f3", + "comment": "Reset web-components for v3 development" + }, + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "7f15428e8fb2c3cfbfe8e555978bfa66f74f8fd8", + "comment": "chore: bump web-components to 3.0.0-alpha.0" + }, + { + "author": "martinhochel@microsoft.com", + "package": "@fluentui/web-components", + "commit": "9b29aada3dba8f929530ddc1b4b64e869d5fffd4", + "comment": "chore(web-components): resolve invalid webpack test regex on windows" + }, + { + "author": "chhol@microsoft.com", + "package": "@fluentui/web-components", + "commit": "be3d30fcbe222be34b02a554e948d14bb2d730df", + "comment": "update clean file to .cjs and ensure rimraf is in dependency tree" + } + ] + } + }, { "date": "Wed, 10 Apr 2024 07:28:55 GMT", "tag": "@fluentui/web-components_v2.6.1", diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index aed229c3281066..fab7f221e8347c 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -1,9 +1,437 @@ # Change Log - @fluentui/web-components -This log was last generated on Wed, 10 Apr 2024 07:28:55 GMT and should not be manually modified. +This log was last generated on Wed, 01 May 2024 04:09:09 GMT and should not be manually modified. +## [3.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.15) + +Wed, 01 May 2024 04:09:09 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.14..@fluentui/web-components_v3.0.0-beta.15) + +### Changes + +- fix(web-components): remove all barrell exports with exception of design tokens ([PR #31069](https://github.com/microsoft/fluentui/pull/31069) by =) + +## [3.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.14) + +Fri, 26 Apr 2024 04:07:24 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.13..@fluentui/web-components_v3.0.0-beta.14) + +### Changes + +- create CSS partials for named typography styles ([PR #31164](https://github.com/microsoft/fluentui/pull/31164) by 13071055+chrisdholt@users.noreply.github.com) + +## [3.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.13) + +Thu, 25 Apr 2024 04:09:24 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.12..@fluentui/web-components_v3.0.0-beta.13) + +### Changes + +- ensure buttons with long text maintain center alignment ([PR #31179](https://github.com/microsoft/fluentui/pull/31179) by =) + +## [3.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.12) + +Tue, 23 Apr 2024 04:09:06 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.11..@fluentui/web-components_v3.0.0-beta.12) + +### Changes + +- Use ElementInternals for Button components ([PR #30999](https://github.com/microsoft/fluentui/pull/30999) by 863023+radium-v@users.noreply.github.com) + +## [3.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.11) + +Mon, 15 Apr 2024 04:09:34 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.10..@fluentui/web-components_v3.0.0-beta.11) + +### Changes + +- fix(web-components): remove final dependencies on fast-foundation ([PR #31009](https://github.com/microsoft/fluentui/pull/31009) by =) + +## [3.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.10) + +Tue, 09 Apr 2024 04:08:05 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.9..@fluentui/web-components_v3.0.0-beta.10) + +### Changes + +- revert design token syntax change for DX ([PR #30819](https://github.com/microsoft/fluentui/pull/30819) by =) + +## [3.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.9) + +Mon, 08 Apr 2024 04:08:59 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.8..@fluentui/web-components_v3.0.0-beta.9) + +### Changes + +- chore: setup perf benchmarking in web components ([PR #30972](https://github.com/microsoft/fluentui/pull/30972) by =) +- Bump @fluentui/tokens to v1.0.0-alpha.2 ([PR #30972](https://github.com/microsoft/fluentui/pull/30972) by beachball) + +## [3.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.8) + +Mon, 12 Feb 2024 04:08:06 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.7..@fluentui/web-components_v3.0.0-beta.8) + +### Changes + +- Removes dependancy on fast-foundation classes and templates ([PR #30090](https://github.com/microsoft/fluentui/pull/30090) by jes@microsoft.com) + +## [3.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.7) + +Fri, 09 Feb 2024 04:08:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.6..@fluentui/web-components_v3.0.0-beta.7) + +### Changes + +- feat: remove JS design token implementation in favor of platform css variables ([PR #30002](https://github.com/microsoft/fluentui/pull/30002) by chhol@microsoft.com) + +## [3.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.6) + +Thu, 26 Oct 2023 04:16:51 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.5..@fluentui/web-components_v3.0.0-beta.6) + +### Changes + +- feat(dialog): add dialog web component ([PR #28569](https://github.com/microsoft/fluentui/pull/28569) by brian.christopher.brady@gmail.com) + +## [3.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.5) + +Thu, 19 Oct 2023 04:18:07 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.4..@fluentui/web-components_v3.0.0-beta.5) + +### Changes + +- Updates package with Menu component sideEffect. ([PR #29581](https://github.com/microsoft/fluentui/pull/29581) by hale.rankin@microsoft.com) + +## [3.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.4) + +Fri, 13 Oct 2023 04:17:27 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.3..@fluentui/web-components_v3.0.0-beta.4) + +### Changes + +- fix: update switch to use margin instead of transform for the checked state to support RTL ([PR #29505](https://github.com/microsoft/fluentui/pull/29505) by chhol@microsoft.com) + +## [3.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.3) + +Thu, 28 Sep 2023 04:18:49 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.2..@fluentui/web-components_v3.0.0-beta.3) + +### Changes + +- feat(menu): adds menu web component ([PR #27906](https://github.com/microsoft/fluentui/pull/27906) by brian.christopher.brady@gmail.com) + +## [3.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.2) + +Mon, 28 Aug 2023 04:19:02 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.1..@fluentui/web-components_v3.0.0-beta.2) + +### Changes + +- Fixed pathing to types for package exports ([PR #28986](https://github.com/microsoft/fluentui/pull/28986) by mmansour@microsoft.com) + +## [3.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.1) + +Fri, 25 Aug 2023 04:19:39 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.31..@fluentui/web-components_v3.0.0-beta.1) + +### Changes + +- Bump version to beta ([PR #28976](https://github.com/microsoft/fluentui/pull/28976) by miroslav.stastny@microsoft.com) + +## [3.0.0-alpha.31](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.31) + +Wed, 23 Aug 2023 04:18:01 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.30..@fluentui/web-components_v3.0.0-alpha.31) + +### Changes + +- feat(web-components): add explicit named exports for design tokens and package export path for theme utils ([PR #28952](https://github.com/microsoft/fluentui/pull/28952) by chhol@microsoft.com) + +## [3.0.0-alpha.30](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.30) + +Tue, 22 Aug 2023 04:17:13 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.29..@fluentui/web-components_v3.0.0-alpha.30) + +### Changes + +- feat(web-components): update core component files to use foundation export paths and update package exports to include extensions ([PR #28912](https://github.com/microsoft/fluentui/pull/28912) by chhol@microsoft.com) + +## [3.0.0-alpha.29](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.29) + +Tue, 15 Aug 2023 04:16:11 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.28..@fluentui/web-components_v3.0.0-alpha.29) + +### Changes + +- fix(web-components): update latest versions of fast packages and fix unallowed attributes issue for fluent-divider ([PR #28837](https://github.com/microsoft/fluentui/pull/28837) by chhol@microsoft.com) + +## [3.0.0-alpha.28](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.28) + +Wed, 09 Aug 2023 04:16:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.27..@fluentui/web-components_v3.0.0-alpha.28) + +### Changes + +- fix(web-components): enumerate side-effects for package export paths ([PR #28748](https://github.com/microsoft/fluentui/pull/28748) by chhol@microsoft.com) + +## [3.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.27) + +Tue, 08 Aug 2023 04:18:02 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.26..@fluentui/web-components_v3.0.0-alpha.27) + +### Changes + +- (accessibility): high contrast fixes ([PR #28717](https://github.com/microsoft/fluentui/pull/28717) by brian.christopher.brady@gmail.com) +- Fixes low contrast in dark mode for web component badge ([PR #28766](https://github.com/microsoft/fluentui/pull/28766) by ryan@ryanmerrill.net) + +## [3.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.26) + +Mon, 07 Aug 2023 04:17:07 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.25..@fluentui/web-components_v3.0.0-alpha.26) + +### Changes + +- feat: Add support for scoped theming ([PR #28441](https://github.com/microsoft/fluentui/pull/28441) by miroslav.stastny@microsoft.com) + +## [3.0.0-alpha.25](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.25) + +Wed, 19 Jul 2023 04:18:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.24..@fluentui/web-components_v3.0.0-alpha.25) + +### Changes + +- fix(web-components): check if component is connected before calling setAttribute in attribute changed callback ([PR #28500](https://github.com/microsoft/fluentui/pull/28500) by chhol@microsoft.com) +- feat(checkbox): Add checkbox web component ([PR #27450](https://github.com/microsoft/fluentui/pull/27450) by brianbrady@microsoft.com) + +## [3.0.0-alpha.24](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.24) + +Mon, 12 Jun 2023 04:17:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.23..@fluentui/web-components_v3.0.0-alpha.24) + +### Changes + +- export fluent design system from web-components package ([PR #27905](https://github.com/microsoft/fluentui/pull/27905) by chhol@microsoft.com) + +## [3.0.0-alpha.23](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.23) + +Thu, 08 Jun 2023 04:18:00 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.22..@fluentui/web-components_v3.0.0-alpha.23) + +### Changes + +- feat(text-input): add TextInput as a new web component ([PR #27348](https://github.com/microsoft/fluentui/pull/27348) by brianbrady@microsoft.com) + +## [3.0.0-alpha.22](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.22) + +Wed, 24 May 2023 04:19:34 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.21..@fluentui/web-components_v3.0.0-alpha.22) + +### Changes + +- feat(menu-item): export MenuItemRole constants ([PR #27941](https://github.com/microsoft/fluentui/pull/27941) by harankin@microsoft.com) + +## [3.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.21) + +Mon, 15 May 2023 04:19:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.20..@fluentui/web-components_v3.0.0-alpha.21) + +### Changes + +- Fixes exports in Switch ([PR #27821](https://github.com/microsoft/fluentui/pull/27821) by ryan@ryanmerrill.net) + +## [3.0.0-alpha.20](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.20) + +Mon, 08 May 2023 04:19:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.19..@fluentui/web-components_v3.0.0-alpha.20) + +### Changes + +- feat(radio): add radio and radio-group web components ([PR #27113](https://github.com/microsoft/fluentui/pull/27113) by brianbrady@microsoft.com) + +## [3.0.0-alpha.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.19) + +Fri, 21 Apr 2023 04:19:22 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.18..@fluentui/web-components_v3.0.0-alpha.19) + +### Changes + +- feat(menu-list): Add menu-list and menu-item web components ([PR #26765](https://github.com/microsoft/fluentui/pull/26765) by brianbrady@microsoft.com) + +## [3.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.18) + +Thu, 20 Apr 2023 04:20:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.17..@fluentui/web-components_v3.0.0-alpha.18) + +### Changes + +- Image component style updates ([PR #27567](https://github.com/microsoft/fluentui/pull/27567) by harankin@microsoft.com) + +## [3.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.17) + +Wed, 12 Apr 2023 04:19:35 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.16..@fluentui/web-components_v3.0.0-alpha.17) + +### Changes + +- feat(toggle-button): add toggle button web component ([PR #27405](https://github.com/microsoft/fluentui/pull/27405) by chhol@microsoft.com) +- feat(compound-button): add compound button as new web component ([PR #27407](https://github.com/microsoft/fluentui/pull/27407) by chhol@microsoft.com) +- feat(anchor-button): add anchor button to web components ([PR #27395](https://github.com/microsoft/fluentui/pull/27395) by chhol@microsoft.com) + +## [3.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.16) + +Tue, 11 Apr 2023 04:24:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.15..@fluentui/web-components_v3.0.0-alpha.16) + +### Changes + +- Adding Tabs, Tab and Tab-Panel ([PR #27505](https://github.com/microsoft/fluentui/pull/27505) by mibaraka@microsoft.com) + +## [3.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.15) + +Fri, 07 Apr 2023 04:17:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.14..@fluentui/web-components_v3.0.0-alpha.15) + +### Changes + +- feat(label): adds label as a new web component ([PR #27344](https://github.com/microsoft/fluentui/pull/27344) by brianbrady@microsoft.com) + +## [3.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.14) + +Thu, 06 Apr 2023 04:22:08 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.13..@fluentui/web-components_v3.0.0-alpha.14) + +### Changes + +- Adding TabList, Tab, and TabPanel web components ([PR #27167](https://github.com/microsoft/fluentui/pull/27167) by mibaraka@microsoft.com) +- feat(menu-button): add menu button as new component ([PR #27396](https://github.com/microsoft/fluentui/pull/27396) by chhol@microsoft.com) + +## [3.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.13) + +Fri, 31 Mar 2023 04:19:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.12..@fluentui/web-components_v3.0.0-alpha.13) + +### Changes + +- update fast-element and fast-foundation dependencies ([PR #27392](https://github.com/microsoft/fluentui/pull/27392) by chhol@microsoft.com) +- feat(button): add button web component ([PR #27278](https://github.com/microsoft/fluentui/pull/27278) by chhol@microsoft.com) + +## [3.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.12) + +Tue, 28 Mar 2023 04:20:01 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.11..@fluentui/web-components_v3.0.0-alpha.12) + +### Changes + +- Adds Slider as a web component ([PR #27165](https://github.com/microsoft/fluentui/pull/27165) by ryan@ryanmerrill.net) + +## [3.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.11) + +Tue, 14 Mar 2023 04:21:22 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.10..@fluentui/web-components_v3.0.0-alpha.11) + +### Changes + +- update FAST dependencies to latest package versions ([PR #27187](https://github.com/microsoft/fluentui/pull/27187) by chhol@microsoft.com) +- Adds css containment to implemented web components ([PR #27190](https://github.com/microsoft/fluentui/pull/27190) by chhol@microsoft.com) + +## [3.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.10) + +Thu, 09 Mar 2023 04:19:45 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.9..@fluentui/web-components_v3.0.0-alpha.10) + +### Changes + +- fix: [text] block breaks the style attribute ([PR #27129](https://github.com/microsoft/fluentui/pull/27129) by jes@microsoft.com) + +## [3.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.9) + +Wed, 01 Mar 2023 04:20:20 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.8..@fluentui/web-components_v3.0.0-alpha.9) + +### Changes + +- Redo of PR of Slider spec after merge error ([PR #26981](https://github.com/microsoft/fluentui/pull/26981) by ryan@ryanmerrill.net) + +## [3.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.8) + +Tue, 28 Feb 2023 04:25:15 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.7..@fluentui/web-components_v3.0.0-alpha.8) + +### Changes + +- updates wc3 accordion and accordion item docs ([PR #26938](https://github.com/microsoft/fluentui/pull/26938) by brianbrady@microsoft.com) + +## [3.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.7) + +Mon, 27 Feb 2023 04:27:02 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.6..@fluentui/web-components_v3.0.0-alpha.7) + +### Changes + +- feat(avatar): add Avatar web component ([PR #26729](https://github.com/microsoft/fluentui/pull/26729) by chhol@microsoft.com) +- feat(divider): Add divider web component ([PR #26901](https://github.com/microsoft/fluentui/pull/26901) by harankin@microsoft.com) +- feat(image): Add image web component ([PR #26936](https://github.com/microsoft/fluentui/pull/26936) by harankin@microsoft.com) + +## [3.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.6) + +Fri, 24 Feb 2023 04:20:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.5..@fluentui/web-components_v3.0.0-alpha.6) + +### Changes + +- feat(switch): Add switch web component ([PR #26517](https://github.com/microsoft/fluentui/pull/26517) by brianbrady@microsoft.com) + +## [3.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.5) + +Wed, 22 Feb 2023 04:22:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.4..@fluentui/web-components_v3.0.0-alpha.5) + +### Changes + +- feat(accordion): Add accordion web component ([PR #26547](https://github.com/microsoft/fluentui/pull/26547) by brianbrady@microsoft.com) + +## [3.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.4) + +Thu, 16 Feb 2023 16:51:48 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.3..@fluentui/web-components_v3.0.0-alpha.4) + +### Changes + +- fix(web-components): dont ship non production assets to npm registry ([PR #26854](https://github.com/microsoft/fluentui/pull/26854) by martinhochel@microsoft.com) + +## [3.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.3) + +Wed, 15 Feb 2023 04:24:51 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.2..@fluentui/web-components_v3.0.0-alpha.3) + +### Changes + +- Adds Spinner as a web component ([PR #26392](https://github.com/microsoft/fluentui/pull/26392) by ryan@ryanmerrill.net) +- update fast element and foundation versions ([PR #26844](https://github.com/microsoft/fluentui/pull/26844) by chhol@microsoft.com) + +## [3.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.2) + +Wed, 25 Jan 2023 17:42:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.1..@fluentui/web-components_v3.0.0-alpha.2) + +### Changes + +- feat: export theme ([PR #26500](https://github.com/microsoft/fluentui/pull/26500) by miroslav.stastny@microsoft.com) + +## [3.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.1) + +Wed, 25 Jan 2023 14:49:08 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.8..@fluentui/web-components_v3.0.0-alpha.1) + +### Changes + +- add progressbar as new component ([PR #26329](https://github.com/microsoft/fluentui/pull/26329) by ryan@ryanmerrill.net) +- Add initial theme ([PR #25660](https://github.com/microsoft/fluentui/pull/25660) by miroslav.stastny@microsoft.com) +- add badge and counter badge as new components ([PR #26357](https://github.com/microsoft/fluentui/pull/26357) by chhol@microsoft.com) +- add text as a new component ([PR #26090](https://github.com/microsoft/fluentui/pull/26090) by chhol@microsoft.com) + ## [2.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.6.1) Wed, 10 Apr 2024 07:28:55 GMT diff --git a/packages/web-components/README.md b/packages/web-components/README.md index fb89d85fb778c2..c38c40c5b02c15 100644 --- a/packages/web-components/README.md +++ b/packages/web-components/README.md @@ -55,3 +55,7 @@ Storybook will watch modules for changes and hot-reload the module when necessar `Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry` This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case. + +## Testing + +When testing locally, start the dev server and in a separate terminal window, run `yarn test:dev` within the web-components folder. diff --git a/packages/web-components/api-extractor.json b/packages/web-components/api-extractor.json index be1ce054295832..d73335a50e28e9 100644 --- a/packages/web-components/api-extractor.json +++ b/packages/web-components/api-extractor.json @@ -16,5 +16,8 @@ "dtsRollup": { "enabled": true + }, + "compiler": { + "tsconfigFilePath": "./tsconfig.api-extractor.json" } } diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 8609a999c7d843..39dce2abc5cc98 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -4,1730 +4,3038 @@ ```ts -import { Accordion } from '@microsoft/fast-foundation'; -import { AccordionItem } from '@microsoft/fast-foundation'; -import { AccordionItemOptions } from '@microsoft/fast-foundation'; -import { Anchor as Anchor_2 } from '@microsoft/fast-foundation'; -import { AnchoredRegion } from '@microsoft/fast-foundation'; -import { Badge as Badge_2 } from '@microsoft/fast-foundation'; -import { BaseProgress } from '@microsoft/fast-foundation'; -import { Behavior } from '@microsoft/fast-element'; -import { Breadcrumb } from '@microsoft/fast-foundation'; -import { BreadcrumbItem } from '@microsoft/fast-foundation'; -import { BreadcrumbItemOptions } from '@microsoft/fast-foundation'; -import { Button as Button_2 } from '@microsoft/fast-foundation'; -import { CalendarOptions } from '@microsoft/fast-foundation'; -import { Card as Card_2 } from '@microsoft/fast-foundation'; -import { CheckboxOptions } from '@microsoft/fast-foundation'; -import { Combobox as Combobox_2 } from '@microsoft/fast-foundation'; -import { ComboboxOptions } from '@microsoft/fast-foundation'; -import { Constructable } from '@microsoft/fast-element'; -import type { Container } from '@microsoft/fast-foundation'; -import { CSSDesignToken } from '@microsoft/fast-foundation'; +import type { Constructable } from '@microsoft/fast-element'; import { CSSDirective } from '@microsoft/fast-element'; -import { DataGrid } from '@microsoft/fast-foundation'; -import { DataGridCell } from '@microsoft/fast-foundation'; -import { DataGridRow } from '@microsoft/fast-foundation'; -import { DesignSystem } from '@microsoft/fast-foundation'; -import { DesignToken } from '@microsoft/fast-foundation'; -import { Dialog } from '@microsoft/fast-foundation'; import { Direction } from '@microsoft/fast-web-utilities'; -import { Divider } from '@microsoft/fast-foundation'; -import { ElementDefinitionContext } from '@microsoft/fast-foundation'; import { ElementStyles } from '@microsoft/fast-element'; +import { ElementViewTemplate } from '@microsoft/fast-element'; import { FASTElement } from '@microsoft/fast-element'; -import { Flipper } from '@microsoft/fast-foundation'; -import { FlipperOptions } from '@microsoft/fast-foundation'; -import { FoundationElement } from '@microsoft/fast-foundation'; -import { FoundationElementDefinition } from '@microsoft/fast-foundation'; -import { FoundationElementRegistry } from '@microsoft/fast-foundation'; -import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation'; -import { HorizontalScrollOptions } from '@microsoft/fast-foundation'; -import { Listbox as Listbox_2 } from '@microsoft/fast-foundation'; -import { ListboxOption } from '@microsoft/fast-foundation'; -import { Menu as Menu_2 } from '@microsoft/fast-foundation'; -import { MenuItem } from '@microsoft/fast-foundation'; -import { MenuItemOptions } from '@microsoft/fast-foundation'; -import { NumberField as NumberField_2 } from '@microsoft/fast-foundation'; -import { NumberFieldOptions } from '@microsoft/fast-foundation'; -import { OverrideFoundationElementDefinition } from '@microsoft/fast-foundation'; -import { ProgressOptions } from '@microsoft/fast-foundation'; -import { ProgressRingOptions } from '@microsoft/fast-foundation'; -import { Radio } from '@microsoft/fast-foundation'; -import { RadioGroup } from '@microsoft/fast-foundation'; -import { RadioOptions } from '@microsoft/fast-foundation'; -import { Search as Search_2 } from '@microsoft/fast-foundation'; -import { SearchOptions } from '@microsoft/fast-foundation'; -import { Select as Select_2 } from '@microsoft/fast-foundation'; -import { SelectOptions } from '@microsoft/fast-foundation'; -import { Skeleton } from '@microsoft/fast-foundation'; -import { Slider } from '@microsoft/fast-foundation'; -import { SliderLabel } from '@microsoft/fast-foundation'; -import { SliderOptions } from '@microsoft/fast-foundation'; -import { Switch } from '@microsoft/fast-foundation'; -import { SwitchOptions } from '@microsoft/fast-foundation'; -import { Tab } from '@microsoft/fast-foundation'; -import { TabPanel } from '@microsoft/fast-foundation'; -import { Tabs } from '@microsoft/fast-foundation'; -import { TextArea as TextArea_2 } from '@microsoft/fast-foundation'; -import { TextField as TextField_2 } from '@microsoft/fast-foundation'; -import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation'; -import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation'; -import { TreeItem } from '@microsoft/fast-foundation'; -import { TreeItemOptions } from '@microsoft/fast-foundation'; -import { TreeView } from '@microsoft/fast-foundation'; -import { ViewTemplate } from '@microsoft/fast-element'; - -// @public (undocumented) -export const accentBaseColor: CSSDesignToken; - -// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles; - -// @public (undocumented) -export const accentFillActive: CSSDesignToken; +import { FASTElementDefinition } from '@microsoft/fast-element'; +import type { HostBehavior } from '@microsoft/fast-element'; +import type { HostController } from '@microsoft/fast-element'; +import { HTMLDirective } from '@microsoft/fast-element'; +import { Orientation } from '@microsoft/fast-web-utilities'; +import type { SyntheticViewTemplate } from '@microsoft/fast-element'; +import type { Theme } from '@fluentui/tokens'; -// @public (undocumented) -export const accentFillActiveDelta: DesignToken; +// @public +export class Accordion extends FASTElement { + // (undocumented) + protected accordionItems: Element[]; + expandmode: AccordionExpandMode; + // (undocumented) + expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void; + // @internal (undocumented) + handleChange(source: any, propertyName: string): void; + // @internal (undocumented) + slottedAccordionItems: HTMLElement[]; + // @internal (undocumented) + slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void; +} // @public (undocumented) -export const accentFillFocus: CSSDesignToken; +export const accordionDefinition: FASTElementDefinition; -// @public (undocumented) -export const accentFillFocusDelta: DesignToken; +// @public +export const AccordionExpandMode: { + readonly single: "single"; + readonly multi: "multi"; +}; -// @public (undocumented) -export const accentFillHover: CSSDesignToken; +// Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point index.d.ts +// +// @public +export type AccordionExpandMode = ValuesOf; -// @public (undocumented) -export const accentFillHoverDelta: DesignToken; +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal +// +// @public +export class AccordionItem extends FASTElement { + block: boolean; + // @internal (undocumented) + clickHandler: (e: MouseEvent) => void; + disabled: boolean; + // @internal (undocumented) + expandbutton: HTMLElement; + expanded: boolean; + expandIconPosition?: AccordionItemExpandIconPosition; + headinglevel: 1 | 2 | 3 | 4 | 5 | 6; + id: string; + size?: AccordionItemSize; +} -// @public (undocumented) -export const accentFillRecipe: DesignToken; +// Warning: (ae-forgotten-export) The symbol "StartEnd" needs to be exported by the entry point index.d.ts +// +// @internal +export interface AccordionItem extends StartEnd { +} // @public (undocumented) -export const accentFillRest: CSSDesignToken; +export const accordionItemDefinition: FASTElementDefinition; -// @public (undocumented) -export const accentFillRestDelta: DesignToken; +// @public +export const AccordionItemExpandIconPosition: { + readonly start: "start"; + readonly end: "end"; +}; -// @public (undocumented) -export const accentForegroundActive: CSSDesignToken; +// @public +export type AccordionItemExpandIconPosition = ValuesOf; -// @public (undocumented) -export const accentForegroundActiveDelta: DesignToken; +// Warning: (ae-forgotten-export) The symbol "StartEndOptions" needs to be exported by the entry point index.d.ts +// +// @public +export type AccordionItemOptions = StartEndOptions & { + expandedIcon?: StaticallyComposableHTML; + collapsedIcon?: StaticallyComposableHTML; +}; -// @public @deprecated (undocumented) -export const accentForegroundCut: CSSDesignToken; +// @public +export const AccordionItemSize: { + readonly small: "small"; + readonly medium: "medium"; + readonly large: "large"; + readonly extraLarge: "extra-large"; +}; -// @public @deprecated (undocumented) -export const accentForegroundCutLarge: CSSDesignToken; +// @public +export type AccordionItemSize = ValuesOf; // @public (undocumented) -export const accentForegroundFocus: CSSDesignToken; +export const accordionItemStyles: ElementStyles; -// @public (undocumented) -export const accentForegroundFocusDelta: DesignToken; +// @public +export const accordionItemTemplate: ElementViewTemplate; // @public (undocumented) -export const accentForegroundHover: CSSDesignToken; +export const accordionStyles: ElementStyles; // @public (undocumented) -export const accentForegroundHoverDelta: DesignToken; +export const accordionTemplate: ElementViewTemplate; -// @public (undocumented) -export const accentForegroundRecipe: DesignToken; +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal +// +// @public +export class AnchorButton extends FASTElement { + appearance?: AnchorButtonAppearance | undefined; + // (undocumented) + connectedCallback(): void; + control: HTMLAnchorElement; + // @internal + defaultSlottedContent: HTMLElement[]; + disabled?: boolean; + // (undocumented) + protected disabledChanged(prev: boolean, next: boolean): void; + disabledFocusable?: boolean; + // (undocumented) + protected disabledFocusableChanged(prev: boolean, next: boolean): void; + // (undocumented) + disconnectedCallback(): void; + download: string; + href: string; + hreflang: string; + iconOnly: boolean; + ping: string; + referrerpolicy: string; + rel: string; + shape?: AnchorButtonShape | undefined; + size?: AnchorButtonSize; + target: AnchorTarget; + type: string; +} -// @public (undocumented) -export const accentForegroundRest: CSSDesignToken; +// Warning: (ae-forgotten-export) The symbol "DelegatesARIALink" needs to be exported by the entry point index.d.ts +// +// @internal +export interface AnchorButton extends StartEnd, DelegatesARIALink { +} -// @public (undocumented) -export const accentForegroundRestDelta: DesignToken; +// @public +export const AnchorButtonAppearance: { + readonly primary: "primary"; + readonly outline: "outline"; + readonly subtle: "subtle"; + readonly secondary: "secondary"; + readonly transparent: "transparent"; +}; -// @public (undocumented) -export const accentPalette: DesignToken>; +// @public +export type AnchorButtonAppearance = ValuesOf; // @public (undocumented) -export const accentStrokeControlActive: CSSDesignToken; +export const AnchorButtonDefinition: FASTElementDefinition; -// @public (undocumented) -export const accentStrokeControlFocus: CSSDesignToken; +// @public +export type AnchorButtonOptions = StartEndOptions; -// @public (undocumented) -export const accentStrokeControlHover: CSSDesignToken; +// @public +export const AnchorButtonShape: { + readonly circular: "circular"; + readonly rounded: "rounded"; + readonly square: "square"; +}; -// @public (undocumented) -export const accentStrokeControlRecipe: DesignToken; +// @public +export type AnchorButtonShape = ValuesOf; -// @public (undocumented) -export const accentStrokeControlRest: CSSDesignToken; +// @public +export const AnchorButtonSize: { + readonly small: "small"; + readonly medium: "medium"; + readonly large: "large"; +}; + +// @public +export type AnchorButtonSize = ValuesOf; -export { Accordion } +// @public +export const AnchorButtonTemplate: ElementViewTemplate; -export { AccordionItem } +// @public +export const AnchorTarget: { + readonly _self: "_self"; + readonly _blank: "_blank"; + readonly _parent: "_parent"; + readonly _top: "_top"; +}; // @public -export const accordionItemStyles: (context: ElementDefinitionContext, definition: AccordionItemOptions) => ElementStyles; +export type AnchorTarget = ValuesOf; // @public -export const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export class Avatar extends FASTElement { + active?: AvatarActive | undefined; + appearance?: AvatarAppearance | undefined; + color?: AvatarColor; + colorId?: AvatarNamedColor | undefined; + static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[]; + // @internal + generateColor(): AvatarColor | void; + // @internal + generateInitials(): string | void; + initials?: string | undefined; + name?: string | undefined; + shape?: AvatarShape | undefined; + size?: AvatarSize | undefined; +} // @public -export const allComponents: { - fluentAccordion: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentAccordionItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentAnchor: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentAnchoredRegion: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentBadge: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentDataGrid: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentDataGridCell: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentDataGridRow: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentDesignSystemProvider: (overrideDefinition?: OverrideFoundationElementDefinition< { - baseName: string; - template: ViewTemplate; - styles: ElementStyles; - }> | undefined) => FoundationElementRegistry< { - baseName: string; - template: ViewTemplate; - styles: ElementStyles; - }, DesignSystemProvider>; - fluentDialog: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentDivider: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentFlipper: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentHorizontalScroll: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentListbox: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentOption: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentMenu: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentMenuItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentNumberField: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentProgress: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentSliderLabel: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentSwitch: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; - fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; - register(container?: Container, ...rest: any[]): void; +export const AvatarActive: { + readonly active: "active"; + readonly inactive: "inactive"; }; -// Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal @deprecated -export const ambientShadow = "0 0 2px rgba(0, 0, 0, 0.14)"; +// @public +export type AvatarActive = ValuesOf; -// Warning: (ae-internal-missing-underscore) The name "Anchor" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export class Anchor extends Anchor_2 { - // @public - appearance?: AnchorAppearance; - // (undocumented) - appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void; - // (undocumented) - connectedCallback(): void; - defaultSlottedContentChanged(): void; -} +// @public +export const AvatarAppearance: { + readonly ring: "ring"; + readonly shadow: "shadow"; + readonly ringShadow: "ring-shadow"; +}; + +// @public +export type AvatarAppearance = ValuesOf; + +// @public +export const AvatarColor: { + readonly darkRed: "dark-red"; + readonly cranberry: "cranberry"; + readonly red: "red"; + readonly pumpkin: "pumpkin"; + readonly peach: "peach"; + readonly marigold: "marigold"; + readonly gold: "gold"; + readonly brass: "brass"; + readonly brown: "brown"; + readonly forest: "forest"; + readonly seafoam: "seafoam"; + readonly darkGreen: "dark-green"; + readonly lightTeal: "light-teal"; + readonly teal: "teal"; + readonly steel: "steel"; + readonly blue: "blue"; + readonly royalBlue: "royal-blue"; + readonly cornflower: "cornflower"; + readonly navy: "navy"; + readonly lavender: "lavender"; + readonly purple: "purple"; + readonly grape: "grape"; + readonly lilac: "lilac"; + readonly pink: "pink"; + readonly magenta: "magenta"; + readonly plum: "plum"; + readonly beige: "beige"; + readonly mink: "mink"; + readonly platinum: "platinum"; + readonly anchor: "anchor"; + readonly neutral: "neutral"; + readonly brand: "brand"; + readonly colorful: "colorful"; +}; + +// @public +export type AvatarColor = ValuesOf; + +// @public +export const AvatarDefinition: FASTElementDefinition; + +// @public +export const AvatarNamedColor: { + readonly darkRed: "dark-red"; + readonly cranberry: "cranberry"; + readonly red: "red"; + readonly pumpkin: "pumpkin"; + readonly peach: "peach"; + readonly marigold: "marigold"; + readonly gold: "gold"; + readonly brass: "brass"; + readonly brown: "brown"; + readonly forest: "forest"; + readonly seafoam: "seafoam"; + readonly darkGreen: "dark-green"; + readonly lightTeal: "light-teal"; + readonly teal: "teal"; + readonly steel: "steel"; + readonly blue: "blue"; + readonly royalBlue: "royal-blue"; + readonly cornflower: "cornflower"; + readonly navy: "navy"; + readonly lavender: "lavender"; + readonly purple: "purple"; + readonly grape: "grape"; + readonly lilac: "lilac"; + readonly pink: "pink"; + readonly magenta: "magenta"; + readonly plum: "plum"; + readonly beige: "beige"; + readonly mink: "mink"; + readonly platinum: "platinum"; + readonly anchor: "anchor"; +}; + +// @public +export type AvatarNamedColor = ValuesOf; // @public -export type AnchorAppearance = ButtonAppearance | 'hypertext'; +export const AvatarShape: { + readonly circular: "circular"; + readonly square: "square"; +}; -export { AnchoredRegion } +// @public +export type AvatarShape = ValuesOf; + +// @public +export const AvatarSize: { + readonly _16: 16; + readonly _20: 20; + readonly _24: 24; + readonly _28: 28; + readonly _32: 32; + readonly _36: 36; + readonly _40: 40; + readonly _48: 48; + readonly _56: 56; + readonly _64: 64; + readonly _72: 72; + readonly _96: 96; + readonly _120: 120; + readonly _128: 128; +}; // @public -export const anchoredRegionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export type AvatarSize = ValuesOf; // @public -export const anchorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export const AvatarStyles: ElementStyles; + +// @public (undocumented) +export const AvatarTemplate: ElementViewTemplate; -// Warning: (ae-internal-missing-underscore) The name "Badge" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal // -// @internal -export class Badge extends Badge_2 { - // (undocumented) +// @public +export class Badge extends FASTElement { appearance: BadgeAppearance; + color: BadgeColor; + shape?: BadgeShape; + size?: BadgeSize; +} + +// @internal +export interface Badge extends StartEnd { } // @public -export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string; +export const BadgeAppearance: { + readonly filled: "filled"; + readonly ghost: "ghost"; + readonly outline: "outline"; + readonly tint: "tint"; +}; // @public -export const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export type BadgeAppearance = ValuesOf; -// Warning: (ae-internal-missing-underscore) The name "baseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles; +// @public +export const BadgeColor: { + readonly brand: "brand"; + readonly danger: "danger"; + readonly important: "important"; + readonly informative: "informative"; + readonly severe: "severe"; + readonly subtle: "subtle"; + readonly success: "success"; + readonly warning: "warning"; +}; -// @public (undocumented) -export const baseHeightMultiplier: CSSDesignToken; +// @public +export type BadgeColor = ValuesOf; // @public (undocumented) -export const baseHorizontalSpacingMultiplier: CSSDesignToken; +export const BadgeDefinition: FASTElementDefinition; -// Warning: (ae-internal-missing-underscore) The name "baseInputStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles; +// @public +export const BadgeShape: { + readonly circular: "circular"; + readonly rounded: "rounded"; + readonly square: "square"; +}; + +// @public +export type BadgeShape = ValuesOf; + +// @public +export const BadgeSize: { + readonly tiny: "tiny"; + readonly extraSmall: "extra-small"; + readonly small: "small"; + readonly medium: "medium"; + readonly large: "large"; + readonly extraLarge: "extra-large"; +}; + +// @public +export type BadgeSize = ValuesOf; + +// @public +export const BadgeStyles: ElementStyles; + +// @public (undocumented) +export const BadgeTemplate: ElementViewTemplate; // @public (undocumented) -export const baseLayerLuminance: CSSDesignToken; +export const borderRadiusCircular = "var(--borderRadiusCircular)"; // @public (undocumented) -export const bodyFont: CSSDesignToken; +export const borderRadiusLarge = "var(--borderRadiusLarge)"; -export { Breadcrumb } +// @public (undocumented) +export const borderRadiusMedium = "var(--borderRadiusMedium)"; -export { BreadcrumbItem } +// @public (undocumented) +export const borderRadiusNone = "var(--borderRadiusNone)"; -// @public -export const breadcrumbItemStyles: (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) => ElementStyles; +// @public (undocumented) +export const borderRadiusSmall = "var(--borderRadiusSmall)"; -// @public -export const breadcrumbStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +// @public (undocumented) +export const borderRadiusXLarge = "var(--borderRadiusXLarge)"; -// Warning: (ae-internal-missing-underscore) The name "Button" should be prefixed with an underscore because the declaration is marked as @internal +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal // -// @internal -export class Button extends Button_2 { - // @public - appearance: ButtonAppearance; - // (undocumented) - appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void; +// @public +export class Button extends FASTElement { + constructor(); + appearance?: ButtonAppearance; + autofocus: boolean; + // @internal + clickHandler(e: Event): boolean | void; // (undocumented) connectedCallback(): void; - defaultSlottedContentChanged(): void; + defaultSlottedContent: HTMLElement[]; + 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; + keypressHandler(e: KeyboardEvent): boolean | void; + get labels(): ReadonlyArray; + name?: string; + protected press(): void; + resetForm(): void; + shape?: ButtonShape; + size?: ButtonSize; + type: ButtonType; + // @internal + typeChanged(previous: ButtonType, next: ButtonType): void; + value?: string; +} + +// @internal (undocumented) +export interface Button extends StartEnd { } // @public -export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth'; +export const ButtonAppearance: { + readonly primary: "primary"; + readonly outline: "outline"; + readonly subtle: "subtle"; + readonly secondary: "secondary"; + readonly transparent: "transparent"; +}; // @public -export const buttonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export type ButtonAppearance = ValuesOf; -// @public (undocumented) -export class Card extends Card_2 { - cardFillColor: string; - // (undocumented) - connectedCallback(): void; - // @internal (undocumented) - handleChange(source: any, propertyName: string): void; - neutralPaletteSource: string; -} +// @public +export const ButtonDefinition: FASTElementDefinition; // @public -export const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export const ButtonFormTarget: { + readonly blank: "_blank"; + readonly self: "_self"; + readonly parent: "_parent"; + readonly top: "_top"; +}; // @public -export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles; +export type ButtonFormTarget = ValuesOf; -// @public (undocumented) -export interface ColorRecipe { - // (undocumented) - evaluate(element: HTMLElement, reference?: Swatch): Swatch; -} +// @public +type ButtonOptions = StartEndOptions + ${startSlotTemplate(options)} + ${endSlotTemplate(options)} +