Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

chore: merge web-components-v3 feature branch #31288

Merged
merged 206 commits into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
206 commits
Select commit Hold shift + click to select a range
2f97e82
Enable build pipeline for web-components-v3 branch (#25529)
miroslavstastny Nov 4, 2022
7bada17
Enable bundle size pipeline on web-components-v3 branch (#25554)
miroslavstastny Nov 7, 2022
66d2d1c
Remove Web Components v2 implementation in v3 branch (#25434)
miroslavstastny Nov 7, 2022
e6fe592
ci: setup wc v3 daily releases (#25808)
Hotell Dec 2, 2022
3010a9d
feat(wc): Add v9-compatible themes (#25660)
miroslavstastny Dec 21, 2022
49b1287
chore: setup typescript 4.7 for web-components package (#26299)
Hotell Jan 11, 2023
1432e12
feat: add text as new component (#26090)
chrisdholt Jan 12, 2023
2e77479
fix clean file and ensure rimraf is enumerated as dependency (#26350)
chrisdholt Jan 13, 2023
65d640f
chore(web-components): resolve invalid webpack test regex on windows …
Hotell Jan 18, 2023
df7b75d
feat: add badge and counter badge as new components (#26357)
chrisdholt Jan 18, 2023
831af4d
Users/procload/add progressbar as new component (#26329)
procload Jan 18, 2023
2ec905c
chore(web-components): run manually bump to fix failed CI release (#2…
Hotell Jan 25, 2023
2141a97
feat(web-components): export theme (#26500)
miroslavstastny Jan 25, 2023
5f99781
ci: fix github pushes auth for release (#26502)
Hotell Jan 25, 2023
bd3775e
applying package updates
Jan 26, 2023
43a09d2
ci: setup web-components docsite CI/CD (#26629)
Hotell Feb 3, 2023
5b8bb47
Update azure-static-web-apps-deploy.yml (#26632)
ling1726 Feb 3, 2023
c2f09b4
Update azure-storage-web-components.yml (#26633)
ling1726 Feb 3, 2023
4f0fbaa
Update azure-storage-web-components.yml (#26635)
ling1726 Feb 3, 2023
70d1e2a
ci: remove pull_request workflows from ASW WC (#26636)
Hotell Feb 3, 2023
31a88b7
style: format yml workflow (#26634)
Hotell Feb 3, 2023
80570b0
applying package updates
Feb 6, 2023
b1e022a
applying package updates
Feb 13, 2023
b9851d0
Adds basic implementation of Spinner component (#26392)
procload Feb 14, 2023
4873cbc
update fast element and foundation versions for wc-3 branch (#26844)
chrisdholt Feb 15, 2023
c996f64
applying package updates
Feb 15, 2023
18b7eaa
chore(web-components): introduce ts-solution configs and monorepo set…
Hotell Feb 15, 2023
27dfead
fix(web-components): dont ship non production assets to npm registry …
Hotell Feb 15, 2023
1e65b27
Manual bump of web components version (#26878)
JustSlone Feb 16, 2023
63365de
applying package updates
Feb 17, 2023
747479e
doc(web-components): Add storybook landing page (#26911)
miroslavstastny Feb 20, 2023
2f2f5f3
applying package updates
Feb 21, 2023
cfec27a
web component accordion (#26547)
brianchristopherbrady Feb 21, 2023
ffe28d3
applying package updates
Feb 22, 2023
609aa47
fix(ci): check changes folder exists (#26941)
miroslavstastny Feb 22, 2023
2f18c50
fix(ci): overwrite existing data when publishing WC storybook (#26939)
miroslavstastny Feb 22, 2023
db9bcd8
Web Component Switch (#26517)
brianchristopherbrady Feb 24, 2023
05d14a6
applying package updates
Feb 24, 2023
81e272b
fix(ci): update web components swa workflow (#26960)
tudorpopams Feb 24, 2023
e85bac7
Adds Image web component (#26936)
halerankin Feb 24, 2023
47b6449
Adds Divider web component (#26901)
halerankin Feb 25, 2023
a27c73f
(web-components): add avatar as a new Fluent 2 aligned component (#26…
chrisdholt Feb 25, 2023
7a06f79
applying package updates
Feb 27, 2023
e6e1b2b
chore: Enable Typescript strict mode (#26950)
miroslavstastny Feb 27, 2023
6c949a0
divides accordion and accordion item readme (#26938)
brianchristopherbrady Feb 27, 2023
beddd9c
applying package updates
Feb 28, 2023
11704bf
Redo of PR of Slider spec after merge error (#26981)
procload Feb 28, 2023
71f25a2
applying package updates
Mar 1, 2023
2410855
web component Radio and RadioGroup spec (#26900)
brianchristopherbrady Mar 2, 2023
0d524fb
applying package updates
Mar 3, 2023
c2054a8
Adds SliderLabel Spec and Folder (#27001)
procload Mar 6, 2023
adeec7b
applying package updates
Mar 7, 2023
5898ff3
Web Component v3 Stories (#27049)
levithomason Mar 8, 2023
e5fa521
fix: [text] block breaks the style attribute (#27129)
eljefe223 Mar 8, 2023
197a16b
applying package updates
Mar 9, 2023
2e91be9
update FAST dependencies (#27187)
chrisdholt Mar 13, 2023
79c5aa6
(web-components): add css containment to v3 components (#27190)
chrisdholt Mar 13, 2023
3f0d57a
applying package updates
Mar 14, 2023
ed4d369
Adds Slider as a web component (#27165)
procload Mar 27, 2023
c325360
applying package updates
Mar 28, 2023
75f0d6d
update fast-elment to 2.0.0-beta.23 and fast-foundation to 3.0.0-alph…
chrisdholt Mar 30, 2023
7dda763
feat(button): add button to web components v3 (#27278)
chrisdholt Mar 31, 2023
6ca9cd1
applying package updates
Mar 31, 2023
13ed8c9
add menu button as new component (#27396)
chrisdholt Apr 5, 2023
f77b8ea
Adding web component Tabs, Tab and TabPanel (#27167)
bearcat-msft Apr 5, 2023
a1451f2
fix order of web comonenponent package exports (#27449)
chrisdholt Apr 5, 2023
acd2341
applying package updates
Apr 6, 2023
57016be
Adds Label as a new web component (#27344)
brianchristopherbrady Apr 6, 2023
fafde7e
fixes label change log (#27481)
brianchristopherbrady Apr 6, 2023
e332782
applying package updates
Apr 7, 2023
f01751d
Web Components V3 - Tabs, Tab, Tab-Panel package.json mappings (#27505)
bearcat-msft Apr 10, 2023
e0df051
chore(storybook): set background for WC stories (#27504)
miroslavstastny Apr 10, 2023
8e46f75
applying package updates
Apr 11, 2023
1f5ea52
add compound button as new v3 component (#27407)
chrisdholt Apr 11, 2023
837c3ca
add anchor button as a new component to web components v3 (#27395)
chrisdholt Apr 11, 2023
2ae63de
add toggle button as new v3 web component (#27405)
chrisdholt Apr 11, 2023
90a98b4
applying package updates
Apr 12, 2023
77a5956
Users/procload/add select spec (#27360)
procload Apr 18, 2023
aed6dfc
applying package updates
Apr 19, 2023
2346d39
Update: Modify Image Web Component Styles (#27567)
halerankin Apr 19, 2023
0b58024
applying package updates
Apr 20, 2023
0f8c7ac
Adds Menu and MenuItem as new web components (#26765)
brianchristopherbrady Apr 20, 2023
4aad65d
applying package updates
Apr 21, 2023
ec275ac
Adds Radio and RadioGroup as new web components (#27113)
brianchristopherbrady May 5, 2023
e866eaf
applying package updates
May 8, 2023
1240c12
Adds components to api report for importing into wrappers (#27822)
procload May 12, 2023
bfaef76
Correct export naming in Switch component (#27821)
procload May 12, 2023
8ad861b
applying package updates
May 15, 2023
5b66ac1
Exports MenuItemRole From MenuItem (#27941)
halerankin May 23, 2023
aac2431
applying package updates
May 24, 2023
f7f64be
Adds TextInput as a new web component (#27348)
brianchristopherbrady Jun 6, 2023
26ede7d
applying package updates
Jun 8, 2023
55bde63
feat: export fluent design system from package (#27905)
chrisdholt Jun 9, 2023
16d07dc
applying package updates
Jun 12, 2023
3c3a7ea
feat (web-components-v3): Add dedicated vr-tests package and integrat…
TristanWatanabe Jun 26, 2023
c0d2547
Onboard generalized version of VRT to upload baseline screenshots for…
Devjoyti-Barman Jul 18, 2023
f22e641
Onboarding generalized version of VRT for web-components-v3 (#28536)
Devjoyti-Barman Jul 18, 2023
915e1c3
Adds Checkbox as a new web component (#27450)
brianchristopherbrady Jul 18, 2023
dd7b721
change files (#28500)
chrisdholt Jul 18, 2023
59fcbd3
applying package updates
Jul 19, 2023
fee8a91
Docs: Normalize WC v3 and React v9 Storybook Styles (#28424)
levithomason Jul 27, 2023
aca62cd
applying package updates
Jul 28, 2023
ebd4017
Use node16 in WC deploy workflow (#28730)
miroslavstastny Aug 4, 2023
dd2e711
Chore: trigger WC CI (#28733)
miroslavstastny Aug 4, 2023
4f1ef00
chore(wc): allow the CI to be triggered manually (#28746)
miroslavstastny Aug 4, 2023
4ce7da2
chore(fluent-accordion): Add screenshot tests (#28441)
miroslavstastny Aug 5, 2023
e2da8cd
applying package updates
Aug 7, 2023
6164d02
Fixes low contrast in dark mode (#28766)
procload Aug 7, 2023
6d0bc2d
a11y high contrast mode and focus state bug fixes for web components …
brianchristopherbrady Aug 8, 2023
e606701
build(wc): Enforce node 16 (#28768)
miroslavstastny Aug 8, 2023
3358e5d
applying package updates
Aug 8, 2023
5d4a91b
enumerate files which have side effects (#28748)
chrisdholt Aug 8, 2023
bb0c0cb
applying package updates
Aug 9, 2023
a0b4df9
chore(web-components): Add playwright testing for v3 web components (…
chrisdholt Aug 9, 2023
baffcd7
applying package updates
Aug 10, 2023
4f3430c
chore(avatar): Add screenshot tests (#28784)
miroslavstastny Aug 14, 2023
8bb3a74
fix(web-components): update fast dependencies and fix un-allowed attr…
chrisdholt Aug 14, 2023
a74a758
applying package updates
Aug 15, 2023
35d774d
Adds tests for Switch Component (#28828)
procload Aug 17, 2023
323ac90
chore: Add lint rules for playwright, enable unit tests (#28911)
miroslavstastny Aug 18, 2023
06edba7
Adds Playwright unit tests to ProgressBar web component (#28799)
procload Aug 21, 2023
c596f9d
Adds Tests for Slider Web Component v3 (#28813)
procload Aug 21, 2023
b22594e
Adds tests for checkbox component (#28814)
procload Aug 21, 2023
dd2ab60
accordion and accordion item unit tests (#28801)
brianchristopherbrady Aug 21, 2023
1d69812
applying package updates
Aug 21, 2023
84e9a94
Adds test for Fluent Spinner (#28811)
procload Aug 21, 2023
cbff696
chore(slider): Add screenshot tests (#28873)
miroslavstastny Aug 21, 2023
84f5a1f
removes unused import from checkbox story (#28924)
brianchristopherbrady Aug 21, 2023
f531906
chore(radio): Add screenshot tests (#28868)
miroslavstastny Aug 21, 2023
9e996ac
chore(badge): Add screenshot tests (#28794)
miroslavstastny Aug 21, 2023
281f234
chore(divider): Add screenshot tests (#28860)
miroslavstastny Aug 21, 2023
0a53bac
chore(button): Add screenshot tests (#28797)
miroslavstastny Aug 21, 2023
efabcb8
chore(progress-bar): Add screenshot tests (#28866)
miroslavstastny Aug 21, 2023
88328be
feat(web-components): update to use foundation export paths and add e…
chrisdholt Aug 21, 2023
b831415
chore(text-input): Add screenshot tests (#28929)
miroslavstastny Aug 21, 2023
dabec7f
chore(switch): Add screenshot tests (#28930)
miroslavstastny Aug 21, 2023
9e91308
chore(tabs): Add screenshot tests (#28931)
miroslavstastny Aug 21, 2023
8b7b4b0
chore(text): Add screenshot tests (#28932)
miroslavstastny Aug 21, 2023
5265088
chore(label): Add screenshot tests (#28861)
miroslavstastny Aug 21, 2023
8e861b6
chore(checkbox): Add screenshot tests (#28871)
miroslavstastny Aug 22, 2023
d73d00c
applying package updates
Aug 22, 2023
8c903bd
chore(menu-list): Add screenshot tests (#28864)
miroslavstastny Aug 22, 2023
6b2919b
Adds RadioGroup tests to component (#28826)
procload Aug 22, 2023
d4cf082
Text component unit tests (#28834)
brianchristopherbrady Aug 22, 2023
b06d661
add explicit exports for tokens and add package export for theme util…
chrisdholt Aug 22, 2023
482d7e8
Adds Tests For Fluent Divider Web Component (#28812)
halerankin Aug 23, 2023
9cca621
Label unit tests (#28830)
brianchristopherbrady Aug 23, 2023
8fd7a06
applying package updates
Aug 23, 2023
777c05e
menu list unit tests (#28857)
brianchristopherbrady Aug 23, 2023
beec46c
badge unit testing (#28832)
brianchristopherbrady Aug 23, 2023
b753a5c
adds text input unit tests (#28859)
brianchristopherbrady Aug 23, 2023
a9991e2
tabs, tab, tabpanel unit tests (#28872)
brianchristopherbrady Aug 23, 2023
895d6e7
Adds Tests For Fluent Image Web Component (#28815)
halerankin Aug 24, 2023
c7eacb2
Adds Tests For Fluent Anchor Button Web Component (#28825)
halerankin Aug 24, 2023
75c3982
avatar unit tests (#28800)
brianchristopherbrady Aug 24, 2023
920db2b
feat: Bump version to beta (#28976)
miroslavstastny Aug 24, 2023
88406da
applying package updates
Aug 25, 2023
6f6042d
fix(web-components): Fixed pathing to types for package exports (#28986)
mohamedmansour Aug 25, 2023
ddf1b90
Adds unit tests for CounterBadge (#28867)
procload Aug 26, 2023
f17dbf3
applying package updates
Aug 28, 2023
77c2d71
accordion storybook content fix (#28729)
brianchristopherbrady Sep 21, 2023
4a8c229
Menu Web Component [ PRIORITY 1 ] (#27906)
brianchristopherbrady Sep 27, 2023
20d2355
applying package updates
Sep 28, 2023
42021e5
fix(web-components): update switch to use margin for checked state to…
chrisdholt Oct 12, 2023
cb9e133
applying package updates
Oct 13, 2023
530fc2c
Adds Menu Component to sideEffects (#29581)
halerankin Oct 18, 2023
cfd444a
applying package updates
Oct 19, 2023
8712d19
Web Component Dialog (#28569)
brianchristopherbrady Oct 25, 2023
df3b8e2
applying package updates
Oct 26, 2023
885ceb1
Add 1es pt pipeline to web-components-v3 (#29713)
dannyvv Oct 31, 2023
2fd75f1
Web components V3 - updating disclaimer message on storybook intro pa…
bearcat-msft Nov 30, 2023
a843edb
applying package updates
Dec 1, 2023
e27184a
[web-components]: remove design token implementation in favor of plat…
chrisdholt Feb 8, 2024
0c50929
applying package updates
Feb 9, 2024
29de826
feat: removes dependency on fast-foundation templates and classes. (#…
eljefe223 Feb 9, 2024
6caa69a
applying package updates
Feb 12, 2024
a33f28d
chore(web-components): add perf testing benchmarks (#30972)
chrisdholt Apr 5, 2024
5df83b8
applying package updates
Apr 8, 2024
728f6a2
feat(web-components): revert syntax change for design tokens (#30819)
chrisdholt Apr 8, 2024
8ea6668
applying package updates
Apr 9, 2024
1b9913b
fix(web-components): remove final dependencies on fast-foundation (#3…
chrisdholt Apr 12, 2024
25e189f
applying package updates
Apr 15, 2024
16d7a8f
(web-components) Use `ElementInternals` for Button elements (#30999)
radium-v Apr 22, 2024
29604b4
applying package updates
Apr 23, 2024
c085569
fix(web-components): ensure buttons with long text maintain center al…
chrisdholt Apr 24, 2024
1eebe16
applying package updates
Apr 25, 2024
e250095
feat(web-components): create css partials for typography styles (#31164)
chrisdholt Apr 25, 2024
bf621b4
applying package updates
Apr 26, 2024
13794aa
fix(web-components): refactor exports to remove most barrel exports f…
chrisdholt Apr 30, 2024
7ef020b
applying package updates
May 1, 2024
e289db3
fix rebase conflict
radium-v Apr 30, 2024
79e0e07
remove rollup-plugin-filesize
radium-v Apr 30, 2024
35cbf81
update rollup-plugin-esbuild
radium-v Apr 30, 2024
57d6eab
Resolve pipelines after rebase
radium-v May 2, 2024
fa875de
fix package mismatch
radium-v May 2, 2024
650bd2a
resolve lockfile
radium-v May 2, 2024
4b16c70
sync change directory
radium-v May 2, 2024
79ccd5e
resolve workspace lint
radium-v May 2, 2024
a2c8be9
chore: wc-3 changes necessary in order to bring it back to master (#3…
Hotell May 7, 2024
cb6fdf3
[web-components-v3] Revert storybook modifications (#31332)
radium-v May 10, 2024
becdc34
chore: remove types from tsconfig in vr tests and remove jest config …
chrisdholt May 10, 2024
4a6f16b
chore: wc-3 tweaks to pass type-checking and cleanup task definitions…
Hotell May 13, 2024
a6cb564
chore(web-components): fix web component vr tests type-checking (#31353)
chrisdholt May 13, 2024
2a0db9a
Merge branch 'master' into web-components-v3
chrisdholt May 13, 2024
c975fec
Merge branch 'master' into web-components-v3
chrisdholt May 13, 2024
53e259b
Merge branch 'master' into web-components-v3
chrisdholt May 13, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
chrisdholt marked this conversation as resolved.
Show resolved Hide resolved
chrisdholt marked this conversation as resolved.
Show resolved Hide resolved
chrisdholt marked this conversation as resolved.
Show resolved Hide resolved
chrisdholt marked this conversation as resolved.
Show resolved Hide resolved
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
Expand Down
30 changes: 30 additions & 0 deletions .github/workflows/azure-static-web-apps-deploy.yml
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,9 @@ rush.json
# tsdoc
tsdoc-metadata.json

# benchmarking
.tensile/

# tools cache
gulp-cache
.cache
Expand Down
3 changes: 0 additions & 3 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 14 additions & 0 deletions apps/vr-tests-web-components/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
90 changes: 90 additions & 0 deletions apps/vr-tests-web-components/.storybook/main.cjs
Original file line number Diff line number Diff line change
@@ -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;
},
});
11 changes: 11 additions & 0 deletions apps/vr-tests-web-components/.storybook/manager.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { addons } from '@storybook/addons';

addons.setConfig({
previewTabs: {
canvas: { hidden: true },
},
enableShortcuts: false,
sidebar: {
showRoots: true,
},
});
17 changes: 17 additions & 0 deletions apps/vr-tests-web-components/.storybook/preview.mjs
Original file line number Diff line number Diff line change
@@ -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];
28 changes: 28 additions & 0 deletions apps/vr-tests-web-components/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
6 changes: 6 additions & 0 deletions apps/vr-tests-web-components/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "@fluentui/vr-tests-web-components",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"implicitDependencies": []
}
Original file line number Diff line number Diff line change
@@ -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 (
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
chrisdholt marked this conversation as resolved.
Show resolved Hide resolved
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</StoryWright>
);
},
],
};

const add20Filled = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5 2.75C10.5 2.33579 10.1642 2 9.75 2C9.33579 2 9 2.33579 9 2.75V9H2.75C2.33579 9 2 9.33579 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5H9V16.75C9 17.1642 9.33579 17.5 9.75 17.5C10.1642 17.5 10.5 17.1642 10.5 16.75V10.5H16.75C17.1642 10.5 17.5 10.1642 17.5 9.75C17.5 9.33579 17.1642 9 16.75 9H10.5V2.75Z"
fill="#212121"
/>
</svg>`;
const subtract20Filled = `<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="3" y="9.25" width="14" height="1.5" rx="0.75" fill="#212121" />
</svg>`;

export const Size = () =>
parse(`
<fluent-accordion>
<fluent-accordion-item expanded size="small">
<span slot="heading">Small</span>
Small Panel
</fluent-accordion-item>
<fluent-accordion-item expanded size="medium">
<span slot="heading">Medium</span>
Medium Panel
</fluent-accordion-item>
<fluent-accordion-item expanded size="large">
<span slot="heading">Large</span>
Large Panel
</fluent-accordion-item>
<fluent-accordion-item expanded size="extra-large">
<span slot="heading">Extra Large</span>
Extra Large Panel
</fluent-accordion-item>
</fluent-accordion>
`);

export const SizeRTL = getStoryVariant(Size, RTL);
export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);

export const ExpandIconPositionEnd = () =>
parse(`
<fluent-accordion openItems={[0]}>
<fluent-accordion-item expanded expand-icon-position="end">
<span slot="heading">Opened</span>
Visible Panel
</fluent-accordion-item>
<fluent-accordion-item expand-icon-position="end">
<span slot="heading">Closed</span>
Hidden Panel
</fluent-accordion-item>
</fluent-accordion>
`);

export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
export const ExpandIconPositionEndDarkMode = getStoryVariant(ExpandIconPositionEnd, DARK_MODE);

export const AccordionWithCustomIcons = () =>
parse(`
<fluent-accordion>
<fluent-accordion-item>
<span slot="collapsed-icon">${add20Filled}</span>
<span slot="expanded-icon">${subtract20Filled}</span>
<span slot="heading">Accordion Header 1</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
<span slot="collapsed-icon">${add20Filled}</span>
<span slot="expanded-icon">${subtract20Filled}</span>
<span slot="heading">Accordion Header 2</span>
Accordion Panel 1
</fluent-accordion-item>
<fluent-accordion-item>
<span slot="collapsed-icon">${add20Filled}</span>
<span slot="expanded-icon">${subtract20Filled}</span>
<span slot="heading">Accordion Header 3</span>
Accordion Panel 1
</fluent-accordion-item>
</fluent-accordion>
`);

export const AccordionWithCustomIconsRTL = getStoryVariant(AccordionWithCustomIcons, RTL);
export const AccordionWithCustomIconsDarkMode = getStoryVariant(AccordionWithCustomIcons, DARK_MODE);

export const Disabled = () =>
parse(`
<fluent-accordion>
<fluent-accordion-item disabled expanded>
<span slot="heading">Disabled Item Opened</span>
Disabled Item Opened Panel
</fluent-accordion-item>
<fluent-accordion-item disabled>
<span slot="heading">Disabled Item Closed</span>
Disabled Item Closed Panel
</fluent-accordion-item>
</fluent-accordion>
`);

export const DisabledRTL = getStoryVariant(Disabled, RTL);
export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
Loading
Loading