diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index d481ee82423b9..c77082ac1b8be 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 0000000000000..1e049feb7b0b2 --- /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 37ca26594019f..e21a9250a9997 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 095b5614af383..419dcb381abc6 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/apps/vr-tests-web-components/.eslintrc.json b/apps/vr-tests-web-components/.eslintrc.json new file mode 100644 index 0000000000000..006c4cb41f035 --- /dev/null +++ b/apps/vr-tests-web-components/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "root": true, + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "import"], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "prettier" + ], + "rules": { + "@typescript-eslint/explicit-module-boundary-types": "off" + } +} diff --git a/apps/vr-tests-web-components/.storybook/main.cjs b/apps/vr-tests-web-components/.storybook/main.cjs new file mode 100644 index 0000000000000..87666047a40aa --- /dev/null +++ b/apps/vr-tests-web-components/.storybook/main.cjs @@ -0,0 +1,90 @@ +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, +}); + +// TODO - these types are copied from root ./storybook/main.js as if we would like to use those as is, it will force us to add our custom storybook plugins as devDeps to WC +// - refactor this to be shared + +/** @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig */ + +module.exports = /** @type {StorybookBaseConfig} */ ({ + addons: [ + { + name: '@storybook/addon-docs', + }, + { + name: '@storybook/addon-essentials', + options: { + backgrounds: false, + viewport: false, + toolbars: false, + actions: false, + }, + }, + ], + + stories: ['../src/**/*.stories.tsx'], + core: { + builder: 'webpack5', + disableTelemetry: true, + }, + babel: {}, + typescript: { + // disable react-docgen-typescript (totally not needed here, slows things down a lot) + reactDocgen: false, + }, + 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', '.tsx'], + '.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/apps/vr-tests-web-components/.storybook/manager.mjs b/apps/vr-tests-web-components/.storybook/manager.mjs new file mode 100644 index 0000000000000..87192fa503710 --- /dev/null +++ b/apps/vr-tests-web-components/.storybook/manager.mjs @@ -0,0 +1,11 @@ +import { addons } from '@storybook/addons'; + +addons.setConfig({ + previewTabs: { + canvas: { hidden: true }, + }, + enableShortcuts: false, + sidebar: { + showRoots: true, + }, +}); diff --git a/apps/vr-tests-web-components/.storybook/preview.mjs b/apps/vr-tests-web-components/.storybook/preview.mjs new file mode 100644 index 0000000000000..9184ac05fff1e --- /dev/null +++ b/apps/vr-tests-web-components/.storybook/preview.mjs @@ -0,0 +1,17 @@ +import { WCThemeDecorator } from '../src/utilities/WCThemeDecorator'; + +export const parameters = { + layout: 'fullscreen', + controls: { expanded: true }, + viewMode: 'docs', + previewTabs: { + canvas: { hidden: true }, + }, + options: { + storySort: { + method: 'alphabetical', + }, + }, +}; + +export const decorators = [WCThemeDecorator]; diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json new file mode 100644 index 0000000000000..bc3202d612510 --- /dev/null +++ b/apps/vr-tests-web-components/package.json @@ -0,0 +1,28 @@ +{ + "name": "@fluentui/vr-tests-web-components", + "version": "0.0.1", + "private": true, + "description": "Visual regression tests for @fluentui/web-components", + "type": "module", + "scripts": { + "build": "build-storybook -o dist/storybook", + "format": "prettier . -w --ignore-path ../../.prettierignore", + "lint": "eslint src --ext .ts,.tsx", + "start": "start-storybook", + "type-check": "echo 'TODO'", + "vr:build": "yarn build", + "vr:test": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/scripts-tasks": "*", + "html-react-parser": "4.0.0", + "typescript": "4.7.4" + }, + "dependencies": { + "@fluentui/react-button": "*", + "@fluentui/react-storybook-addon": "*", + "@fluentui/web-components": ">=3.0.0-alpha", + "tslib": "^2.1.0" + } +} diff --git a/apps/vr-tests-web-components/project.json b/apps/vr-tests-web-components/project.json new file mode 100644 index 0000000000000..650583456867d --- /dev/null +++ b/apps/vr-tests-web-components/project.json @@ -0,0 +1,6 @@ +{ + "name": "@fluentui/vr-tests-web-components", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "implicitDependencies": [] +} diff --git a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx new file mode 100644 index 0000000000000..b5fb7e3154268 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx @@ -0,0 +1,125 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { accordionDefinition, accordionItemDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +accordionDefinition.define(FluentDesignSystem.registry); +accordionItemDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Accordion', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +const add20Filled = ` + +`; +const subtract20Filled = ` + +`; + +export const Size = () => + parse(` + + + Small + Small Panel + + + Medium + Medium Panel + + + Large + Large Panel + + + Extra Large + Extra Large Panel + + + `); + +export const SizeRTL = getStoryVariant(Size, RTL); +export const SizeDarkMode = getStoryVariant(Size, DARK_MODE); + +export const ExpandIconPositionEnd = () => + parse(` + + + Opened + Visible Panel + + + Closed + Hidden Panel + + +`); + +export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL); +export const ExpandIconPositionEndDarkMode = getStoryVariant(ExpandIconPositionEnd, DARK_MODE); + +export const AccordionWithCustomIcons = () => + parse(` + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 1 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 2 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 3 + Accordion Panel 1 + + +`); + +export const AccordionWithCustomIconsRTL = getStoryVariant(AccordionWithCustomIcons, RTL); +export const AccordionWithCustomIconsDarkMode = getStoryVariant(AccordionWithCustomIcons, DARK_MODE); + +export const Disabled = () => + parse(` + + + Disabled Item Opened + Disabled Item Opened Panel + + + Disabled Item Closed + Disabled Item Closed Panel + + +`); + +export const DisabledRTL = getStoryVariant(Disabled, RTL); +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx b/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx new file mode 100644 index 0000000000000..7b3498de172c4 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx @@ -0,0 +1,177 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { AvatarDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +AvatarDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Avatar', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + + `); + +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Image = () => + parse(` + +`); + +export const Icon = () => + parse(` + +`); + +export const IconDarkMode = getStoryVariant(Icon, DARK_MODE); + +export const Color = () => + parse(` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+`); + +export const ColorRTL = getStoryVariant(Color, RTL); +export const ColorDarkMode = getStoryVariant(Color, DARK_MODE); + +export const Colorful = () => + parse(` +
+ + + + + + + + + + + + +
+`); + +export const ColorfulRTL = getStoryVariant(Colorful, RTL); +export const ColorfulDarkMode = getStoryVariant(Colorful, DARK_MODE); + +export const Shape = () => + parse(` + + +`); + +export const Active = () => + parse(` +
+ U + A + I +
+
+`); + +export const ActiveDarkMode = getStoryVariant(Active, DARK_MODE); + +export const ActiveAppearance = () => + parse(` +
+ R + S + RS +
+`); + +export const ActiveAppearanceDarkMode = getStoryVariant(ActiveAppearance, DARK_MODE); + +export const CustomInitials = () => + parse(` + +`); + +export const CustomInitialsRTL = getStoryVariant(CustomInitials, RTL); + +export const Size = () => + parse(` +
+ 16 + 20 + 24 + 28 + 32 + 36 + 40 + 48 + 56 + 64 + 72 + 96 + 120 + 128 +
+`); diff --git a/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx new file mode 100644 index 0000000000000..0e8e36331e7e5 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/badge/badge.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 { BadgeDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js'; + +BadgeDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Badge', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => + parse(` + + `); + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const Appearance = () => + parse(` + filled + ghost + outline + tint +`); + +export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE); + +export const Color = () => + parse(` + brand + danger + important + informative + severe + subtle + success + warning +`); + +export const ColorDarkMode = getStoryVariant(Color, DARK_MODE); + +export const Shape = () => + parse(` + + + +`); + +export const ShapeDarkMode = getStoryVariant(Shape, DARK_MODE); + +export const Size = () => + parse(` + + + + + + +`); + +export const SizeDarkMode = getStoryVariant(Size, DARK_MODE); diff --git a/apps/vr-tests-web-components/src/stories/button/button.stories.tsx b/apps/vr-tests-web-components/src/stories/button/button.stories.tsx new file mode 100644 index 0000000000000..bce8193a5d94d --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/button/button.stories.tsx @@ -0,0 +1,147 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components'; +import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js'; + +ButtonDefinition.define(FluentDesignSystem.registry); + +const buttonId = 'button-id'; + +const steps = new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover(`#${buttonId}`) + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown(`#${buttonId}`) + .snapshot('pressed', { cropTo: '.testWrapper' }) + .end(); + +export default { + title: 'Button', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +export const Default = () => parse(`Default`); + +export const Primary = () => + parse(`Primary`); +export const PrimaryDarkMode = getStoryVariant(Primary, DARK_MODE); +export const PrimaryDisabled = () => + parse(`Primary`); +export const PrimaryDisabledDarkMode = getStoryVariant(PrimaryDisabled, DARK_MODE); +export const PrimaryDisabledFocusable = () => + parse( + `Primary`, + ); +export const PrimaryDisabledFocusableDarkMode = getStoryVariant(PrimaryDisabledFocusable, DARK_MODE); + +export const Outline = () => + parse(`Outline`); +export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE); +export const OutlineDisabled = () => + parse(`Outline`); +export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE); +export const OutlineDisabledFocusable = () => + parse( + `Outline`, + ); +export const OutlineDisabledFocusableDarkMode = getStoryVariant(OutlineDisabledFocusable, DARK_MODE); + +export const Subtle = () => + parse(`Subtle`); +export const SubtleDarkMode = getStoryVariant(Subtle, DARK_MODE); +export const SubtleDisabled = () => + parse(`Subtle`); +export const SubtleDisabledDarkMode = getStoryVariant(SubtleDisabled, DARK_MODE); +export const SubtleDisabledFocusable = () => + parse( + `Subtle`, + ); +export const SubtleDisabledFocusableDarkMode = getStoryVariant(SubtleDisabledFocusable, DARK_MODE); + +export const Transparent = () => + parse(`Transparent`); +export const TransparentDarkMode = getStoryVariant(Transparent, DARK_MODE); +export const TransparentDisabled = () => + parse( + `Transparent`, + ); +export const TransparentDisabledDarkMode = getStoryVariant(TransparentDisabled, DARK_MODE); +export const TransparentDisabledFocusable = () => + parse( + `Transparent`, + ); +export const TransparentDisabledFocusableDarkMode = getStoryVariant(TransparentDisabledFocusable, DARK_MODE); + +export const Rounded = () => parse(`Rounded`); +export const Circular = () => parse(`Circular`); +export const Square = () => parse(`Square`); + +const icon: (slot?: 'start' | undefined) => string = slot => ``; + +export const Small = () => parse(`Small`); +export const SmallWithIcon = () => + parse(`${icon('start')} Small with calendar icon`); +export const SmallWithIconDarkMode = getStoryVariant(SmallWithIcon, DARK_MODE); +export const SmallWithIconRTL = getStoryVariant(SmallWithIcon, RTL); + +export const SmallIconOnly = () => + parse(`${icon()}`); +export const SmallIconOnlyDarkMode = getStoryVariant(SmallIconOnly, DARK_MODE); + +export const Medium = () => parse(`Medium`); +export const MediumWithIcon = () => + parse( + `${icon('start')} Medium with calendar icon`, + ); +export const MediumWithIconDarkMode = getStoryVariant(MediumWithIcon, DARK_MODE); +export const MediumWithIconRTL = getStoryVariant(MediumWithIcon, RTL); + +export const MediumIconOnly = () => + parse(`${icon()}`); +export const MediumIconOnlyDarkMode = getStoryVariant(MediumIconOnly, DARK_MODE); + +export const Large = () => parse(`Large`); +export const LargeWithIcon = () => + parse(`${icon('start')} Large with calendar icon`); +export const LargeWithIconDarkMode = getStoryVariant(LargeWithIcon, DARK_MODE); +export const LargeWithIconRTL = getStoryVariant(LargeWithIcon, RTL); + +export const LargeIconOnly = () => + parse(`${icon()}`); +export const LargeIconOnlyDarkMode = getStoryVariant(LargeIconOnly, DARK_MODE); + +export const WithLongText = () => + parse(` + + 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 0000000000000..fa103fcc772d3 --- /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 0000000000000..041cf50e9df7f --- /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 0000000000000..d87100beefffd --- /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 0000000000000..c648ee9683b2e --- /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 0000000000000..a7fee71efe250 --- /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 0000000000000..a56059deb2205 --- /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 0000000000000..eb72023e28e5b --- /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 0000000000000..0ef3401bc2ec3 --- /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 0000000000000..e48f82e7654f9 --- /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 0000000000000..a3605ba4bcdab --- /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 0000000000000..782981a46422e --- /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 0000000000000..02d9bba98ce88 --- /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 0000000000000..e33c85d3642d2 --- /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 0000000000000..a019e1dab8c34 --- /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 0000000000000..88d1cfb77653e --- /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 0000000000000..952413d9104a8 --- /dev/null +++ b/apps/vr-tests-web-components/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.base.wc.json", + "compilerOptions": { + "target": "ES2019", + "module": "ESNext", + "noEmit": true, + "experimentalDecorators": true, + "resolveJsonModule": true, + "allowJs": true, + "jsx": "react" + }, + "include": ["./src", "./.storybook/*"] +} diff --git a/azure-pipelines.release.web-components.yml b/azure-pipelines.release.web-components.yml new file mode 100644 index 0000000000000..7a41f66b0b2d3 --- /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 a700eb47d7796..ee714ed304f52 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 5f37beaf3c0e2..d542831ed1551 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 0000000000000..c0bb1939edff0 --- /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 4afdbd55a9112..9faa52523c288 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,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", @@ -229,6 +231,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", @@ -276,6 +279,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.4.31", @@ -299,13 +303,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", @@ -326,7 +329,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 5b214b4625e54..ba38ef5432888 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 d3118d7db8188..0000000000000 --- 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 0000000000000..0b1511be1817a --- /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 ad84c86f3814c..0000000000000 --- 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 db6d6409bd971..3bcf3dd7ff879 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.css b/packages/web-components/.storybook/docs-root.css new file mode 100644 index 0000000000000..6262526a64895 --- /dev/null +++ b/packages/web-components/.storybook/docs-root.css @@ -0,0 +1,473 @@ +/* + * Heads Up! + * This file should be kept in sync with the `docs-root.css` file for the React v9 Storybook. + */ + +/* remove the docs wrapper bg to let page bg show through */ +#docs-root .sbdocs-wrapper { + background: transparent !important; +} + +/* 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; +} + +#docs-root .sbdocs-content { + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + max-width: 1200px; +} + +#docs-root h1.sbdocs-title { + font-size: 44px; + line-height: 60px; + /* identical to box height, or 143% */ + letter-spacing: -0.04em; + color: #000000; +} + +#docs-root details { + position: relative; + z-index: 99; +} + +#docs-root .sbdocs-p { + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 18px; + line-height: 27px; + letter-spacing: -0.01em; + color: #000000; + margin-top: 24px; +} + +#docs-root .sbdocs-img.featured-image { + max-width: 100%; + margin: 48px 0; + display: block; +} + +#docs-root .sbdocs-img { + border-radius: 24px; +} + +#docs-root .sbdocs-hr { + margin: 48px 0; + height: 0; + border-top: 1px solid #ebebeb; +} + +#docs-root .sbdocs-h2 { + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 24px; + line-height: 28px; + letter-spacing: -0.04em; + color: black; + border-top: 1px solid #ebebeb; + border-bottom: none; + margin: 48px 0 15px 0; + padding: 48px 0 0 0; +} + +#docs-root .sbdocs-h2 code { + border-radius: 4px; + font-size: 20px; +} + +#docs-root .sbdocs-h3 { + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 18px; + line-height: 24px; + margin: 25px 0 0 0 !important; + letter-spacing: -0.01em; + color: #000000; +} + +#docs-root .sbdocs-h3 code { + border-radius: 3px; + font-size: 16px; +} + +/* Only apply to H3s inside of stories which have a parent with an ID */ +#docs-root [id] > .sbdocs-h3:before { + content: ''; + display: block; + height: 40px; + margin: -40px 0 0; +} + +#docs-root .sbdocs-li { + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + + /* Neutrals / Web / Gray 200 #1B1A19 */ + color: #1b1a19; + margin-top: 8px; +} + +#docs-root .sbdocs-ul { + margin: 12px 0; +} + +#docs-root .sbdocs-ul .sbdocs-li { + list-style: none; + position: relative; +} + +#docs-root .sbdocs-ul .sbdocs-li::before { + position: absolute; + content: '•'; + color: #8d8d8d; + top: 0; + left: -15px; +} + +#docs-root .sbdocs-ol .sbdocs-li::marker { + color: #8d8d8d; +} + +#docs-root .sbdocs-preview { + border-radius: 16px; + background: #fff; /* --colorBrandBackgroundInverted */ + padding: 0; + box-shadow: none; + border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */ +} + +/* 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 { + /* 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 { + color: #0078d4; + color: red; +} + +#docs-root .docs-story + div { + background: #11100f; +} + +#docs-root .sbdocs-content > div:last-child { + margin-bottom: 96px; +} + +#docs-root .docs-story > div { + padding: 0; + background: none; +} + +#docs-root .docs-story > div:last-child { + right: 31px; + border-radius: 24px; +} + +.docs-story + div > div:last-child { + background: #000000; + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); + border-radius: 5px 5px 0px 0px; + right: 31px; +} + +.docs-story + div > div:last-child > button { + color: white; + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 14px; + line-height: 150%; + text-align: center; + letter-spacing: -0.01em; +} + +#docs-root a.sbdocs-a { + color: #0078d4; + text-decoration: underline; +} + +/* */ +/* Args Table */ +/* */ + +#docs-root .docblock-argstable tbody { + box-shadow: none; + border-left: none; + border-right: none; +} + +#docs-root .docblock-argstable-head th { + letter-spacing: -0.01em; + color: black; + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 16px; + line-height: 150%; + font-weight: 600; +} + +#docs-root thead.docblock-argstable-head { + border-bottom: 1px solid #edebe9; +} + +#docs-root .docblock-argstable tbody tr { + border: none; +} + +#docs-root table.docblock-argstable tbody.docblock-argstable-body td, +#docs-root .docblock-argstable th { + padding-top: 12px; + padding-bottom: 12px; + padding-left: 16px; +} + +#docs-root .docblock-argstable tbody tr td:nth-child(1) span { + font-weight: normal; + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 16px; + line-height: 130%; + letter-spacing: -0.01em; + color: #616161; +} + +#docs-root .docblock-argstable tbody tr td { + vertical-align: top; +} + +#docs-root .docblock-argstable-body > tr > td > div > div > button { + color: #0078d4; + line-height: 21px; +} + +#docs-root code, +#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span, +#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span, +#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span, +#docs-root .css-16d4d7t { + font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 130%; + letter-spacing: -0.2px; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} + +#docs-root code.sbdocs-code, +#docs-root .sbdocs-p code, +#docs-root .sbdocs-li code, +#docs-root .docblock-argstable code, +#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span, +#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span, +#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span, +#docs-root .css-16d4d7t { + font-size: 14px; + background: #f0f0f0; + border-radius: 4px; + padding: 1px 4px; + margin: 0 3px 0 3px; + color: black; + border: none; + line-height: 1.5; +} + +#docs-root .docblock-argstable code { + white-space: normal; +} + +#docs-root code { + padding: 0.1em 0.2em; + 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 { + width: auto !important; +} + +#docs-root .sbdocs-preview .prismjs { + overflow: hidden; +} + +#docs-root .os-content .prismjs * { + font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace; + font-size: 14px; + line-height: 1.4em; +} + +#docs-root .sbdocs-preview .prismjs code { + color: white; + background: #11100f; + margin: 0; + overflow-x: auto; +} + +#docs-root .docblock-argstable-body td > div > p, +#docs-root .docblock-argstable-body > tr > td:nth-child(2) p, +#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span { + font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', + sans-serif; + font-size: 16px; + line-height: 130%; + color: black; + letter-spacing: -0.01em; +} + +#docs-root .docblock-argstable tr > :nth-child(1) { + width: 4%; +} + +#docs-root .docblock-argstable tr > :nth-child(2) { + width: 100%; +} + +#docs-root .os-padding { + z-index: 0; +} + +@font-face { + font-family: 'Segoe UI'; + src: local('Segoe UI Light'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype'); + font-weight: 100; +} + +@font-face { + font-family: 'Segoe UI'; + src: local('Segoe UI Semilight'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype'); + font-weight: 200; +} + +@font-face { + font-family: 'Segoe UI'; + src: local('Segoe UI'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype'); + font-weight: 400; +} + +@font-face { + font-family: 'Segoe UI'; + src: local('Segoe UI Semibold'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype'); + font-weight: 600; +} + +@font-face { + font-family: 'Segoe UI'; + src: local('Segoe UI Bold'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'), + url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype'); + font-weight: 700; +} + +body, +body p, +body ul, +body ul li { + font-family: 'Segoe UI' !important; +} + +h1.fluent { + font-weight: 700; + font-size: 40px; + font-family: 'Segoe UI'; + line-height: 60px; + letter-spacing: -0.16px; +} + +h1 .fluent-version { + display: block; + font-size: 24px; /* --font-size-base-600 */ + line-height: 32px; + color: #707070; /* --color-neutral-foreground-3 */ +} + +h2.fluent { + font-weight: 600; + font-size: 24px; + font-family: 'Segoe UI'; + line-height: 36px; + letter-spacing: -0.16px; +} + +/* 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: 0 0 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 0000000000000..64a2437390d08 --- /dev/null +++ b/packages/web-components/.storybook/main.cjs @@ -0,0 +1,97 @@ +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, +}); + +// TODO - these types are copied from root ./storybook/main.js as if we would like to use those as is, it will force us to add our custom storybook plugins as devDeps to WC +// - refactor this to be shared + +/** + * @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig + * + * @typedef {{ + * babel: (options: Record) => Promise>; + * previewHead: (head: string) => string; + * }} StorybookExtraConfig + * + * @typedef {StorybookBaseConfig & + * Required> & + * StorybookExtraConfig + * } StorybookConfig + */ + +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 352a8ec7d0084..0000000000000 --- 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 66e56d53aabeb..d2af1fb450b82 100644 --- a/packages/web-components/.storybook/manager-head.html +++ b/packages/web-components/.storybook/manager-head.html @@ -1,16 +1,85 @@ - - - - + + + + - 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 a46a132161789..5dcaa431bdecd 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 996c666f92e71..93e32a40560db 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 9f3c89bc6e1ef..0000000000000 --- 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 95d4b56fba6ff..0000000000000 --- 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 0000000000000..de53eeeb8dc96 --- /dev/null +++ b/packages/web-components/.storybook/preview.mjs @@ -0,0 +1,30 @@ +import { switchTheme } from '../public/theme-switch.js'; +import webcomponentsTheme from './theme.mjs'; + +import '../src/index-rollup.js'; +import './docs-root.css'; + +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 57947533b5c3a..16836fbf5589d 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 0000000000000..78905f4f65971 --- /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 5ec4f66b5f724..2fcfbcc47e4ed 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 aed229c328106..fab7f221e8347 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 fb89d85fb778c..c38c40c5b02c1 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 be1ce05429583..d73335a50e28e 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/build/clean.js b/packages/web-components/build/clean.js deleted file mode 100644 index 75af0dc75b5a8..0000000000000 --- a/packages/web-components/build/clean.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Utility for cleaning directories. - * Usage: node build/clean.js %path% - */ -const path = require('path'); -const rimraf = require('rimraf'); -const argv = require('yargs').argv; - -/** - * All paths passed to the clean script - */ -const paths = argv._; - -/** - * Function to remove a given path - */ -function cleanPath(cleanPath) { - const removePath = path.resolve(process.cwd(), cleanPath); - rimraf(removePath, () => { - console.log(removePath, 'cleaned'); - }); -} - -/** - * Clean all paths - */ -if (Array.isArray(paths)) { - paths.forEach(cleanPath); -} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 8609a999c7d84..39dce2abc5cc9 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)} +