Web components v3 tweaks

.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

.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

.gitignore

@@ -155,6 +155,9 @@ rush.json
 # tsdoc
 tsdoc-metadata.json
 
+# benchmarking
+.tensile/
+
 # tools cache
 gulp-cache
 .cache

.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

.storybook/docs-root.css

@@ -1,3 +1,12 @@
+/*
+ * Heads Up!
+ * This file is used by both React v9 and Web Components Storybooks.
+ * All CSS must apply to both implementations.
+ *
+ * DO NOT use design tokens in this file.
+ * This file styles the content outside of story previews where a Fluent theme is not expected to be set or change.
+ */
+
 #docs-root .sbdocs-content {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif;
@@ -10,7 +19,6 @@
   /* identical to box height, or 143% */
   letter-spacing: -0.04em;
   color: #000000;
-  margin-top: 49px;
 }
 
 #docs-root details {
@@ -28,11 +36,6 @@
   margin-top: 24px;
 }
 
-#docs-root .sbdocs-wrapper {
-  background: white;
-  min-height: auto;
-}
-
 #docs-root .sbdocs-img.featured-image {
   max-width: 100%;
   margin: 48px 0;
@@ -125,18 +128,25 @@
 
 #docs-root .sbdocs-preview {
   border-radius: 16px;
-  background: var(--colorBrandBackgroundInverted, #fff);
+  background: #fff; /* --colorBrandBackgroundInverted */
   padding: 0;
   box-shadow: none;
-  border: 1px solid var(--colorNeutralStroke1, #e1dfdd);
+  border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */
 }
 
-#docs-root .innerZoomElementWrapper {
+/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */
+#docs-root .innerZoomElementWrapper > div {
   padding: 30px;
+  box-sizing: border-box;
 }
 
+/* fix mouse interactions for toolbar on first story */
 #docs-root .sbdocs-preview > .os-host {
-  display: none;
+  /* The toolbar sits within the story content area and is position: absolute by default. */
+  /* The story content overlays the toolbar making it non-interactive */
+  /* We don't use z-index because the toolbar can still sometimes overlay story content (flyout menu) */
+  /* The best solution is to use a static toolbar that is always outside the story content and interactive */
+  position: static;
 }
 
 #docs-root span + .sbdocs .docblock-argstable tbody tr td button {
@@ -208,14 +218,6 @@
   border-bottom: 1px solid #edebe9;
 }
 
-#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
-  display: none;
-}
-
-#docs-root .docblock-argstable-head > tr > th:nth-child(4) {
-  display: none;
-}
-
 #docs-root .docblock-argstable tbody tr {
   border: none;
 }
@@ -288,6 +290,7 @@
   display: inline-block;
   background-color: rgba(17, 16, 15, 0.1);
   border-radius: 2px;
+  width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */
 }
 
 .os-content-glue {
@@ -396,9 +399,9 @@ h1.fluent {
 
 h1 .fluent-version {
   display: block;
-  font-size: 24px; /* --font-size-base-600 */
+  font-size: 24px; /* --fontSizeBase600 */
   line-height: 32px;
-  color: #707070; /* --color-neutral-foreground-3 */
+  color: #707070; /* --colorNeutralForeground3 */
 }
 
 h2.fluent {

apps/public-docsite-v9/.storybook/docs-root-v9.css

@@ -1,23 +1,18 @@
-/* remove the docs wrapper bg to let page bg show through */
-/* remove unnecessary padding now that theme switcher is not taking up space */
-#docs-root .sbdocs-wrapper {
-  background: transparent !important;
-  padding-top: 0;
-}
-
-/* sb-show-main is missing during page transitions causing a page shift */
-/* todo: cleanup once we no longer inherit docs-root */
-.sb-show-main.sb-main-fullscreen,
-.sb-main-fullscreen {
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-
 /* remove loading overlay */
 .sb-preparing-story,
 .sb-preparing-docs,
 .sb-nopreview,
 .sb-errordisplay {
   display: none !important;
 }
+
+/* Hide props table controls, since they don't work in the React implementation */
+#docs-root .docblock-argstable-head > tr > th:nth-child(4),
+#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
+  display: none;
+}
+
+/* Hide the toolbar on the first story: zoom in, zoom out, reset zoom, open in new tab */
+#docs-root .sbdocs-preview > .os-host {
+  display: none;
+}

apps/public-docsite-v9/.storybook/manager-head.html

@@ -42,12 +42,16 @@
 
   > 💡 NOTE:
   >
-  > This is brittle way for providing custom non thenable styles for manager UI
+  > This is a brittle way for providing custom non thenable styles for manager UI.
   >
   > Those selectors might change on any storybook version bump.
  -->
 
 <style>
+  /*
+   * Heads Up!
+   * Keep this in sync with the styles in packages/web-components/.storybook/manager-head.html
+   */
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI Light'),

apps/public-docsite-v9/public/shell.css

@@ -1,5 +1,13 @@
-/* remove margin from sidebar logo  */
+/*
+ * HEADS UP!
+ * This file is used by both React v9 and Web Components Storybooks.
+ * All CSS must apply to both implementations.
+ */
+
+/* sidebar logo (React uses an SVG, Web Components uses text) */
 .sidebar-header > div:first-of-type {
+  font-size: 20px; /* for Web Components */
+  white-space: break-spaces; /* allow line breaks "\n" in Storybook theme */
   margin-right: 0;
 }
 
@@ -53,6 +61,7 @@
  */
 [role='main'] {
   position: fixed;
+  top: 0 !important;
 }
 
 /* remove box shadow style from storybooks wrapper div */

apps/stress-test/package.json

@@ -13,7 +13,6 @@
     "@fluentui/react": "*",
     "@fluentui/react-components": "*",
     "@fluentui/react-icons": "^2.0.237",
-    "@fluentui/web-components": "*",
     "@microsoft/fast-element": "^1.11.1",
     "afterframe": "1.0.2",
     "react": "17.0.2",

apps/stress-test/src/pages/wc/simple-stress/index.ts

@@ -1,11 +1,11 @@
-import {
-  fluentButton,
-  fluentDivider,
-  fluentCheckbox,
-  fluentProgressRing,
-  fluentNumberField,
-  provideFluentDesignSystem,
-} from '@fluentui/web-components';
+// import {
+//   fluentButton,
+//   fluentDivider,
+//   fluentCheckbox,
+//   fluentProgressRing,
+//   fluentNumberField,
+//   provideFluentDesignSystem,
+// } from '@fluentui/web-components';
 import { StressApp } from '../../../components/wc/stressApp';
 import { StressComponent } from '../../../components/wc/stressComponent';
 import { StressContainer } from '../../../components/wc/stressContainer';
@@ -15,13 +15,13 @@ const testOptions = getTestOptions();
 
 document.querySelector('stress-app')?.setAttribute('numchildren', testOptions.numStartNodes.toString());
 
-provideFluentDesignSystem().register(
-  fluentButton(),
-  fluentDivider(),
-  fluentCheckbox(),
-  fluentProgressRing(),
-  fluentNumberField(),
-);
+// provideFluentDesignSystem().register(
+//   fluentButton(),
+//   fluentDivider(),
+//   fluentCheckbox(),
+//   fluentProgressRing(),
+//   fluentNumberField(),
+// );
 
 typeof StressApp;
 typeof StressComponent;

apps/stress-test/src/renderers/wc/button.ts

@@ -1,7 +1,7 @@
-import { fluentButton, provideFluentDesignSystem } from '@fluentui/web-components';
+// import { fluentButton, provideFluentDesignSystem } from '@fluentui/web-components';
 import { DOMSelectorTreeComponentRenderer } from '../../shared/vanilla/types';
 
-provideFluentDesignSystem().register(fluentButton());
+// provideFluentDesignSystem().register(fluentButton());
 
 const componentRenderer: DOMSelectorTreeComponentRenderer = (node, depth, index) => {
   const btn = document.createElement('fluent-button') as HTMLElement;

apps/stress-test/src/renderers/wc/checkbox.ts

@@ -1,7 +1,7 @@
-import { fluentCheckbox, provideFluentDesignSystem } from '@fluentui/web-components';
+// import { fluentCheckbox, provideFluentDesignSystem } from '@fluentui/web-components';
 import { DOMSelectorTreeComponentRenderer } from '../../shared/vanilla/types';
 
-provideFluentDesignSystem().register(fluentCheckbox());
+// provideFluentDesignSystem().register(fluentCheckbox());
 
 const componentRenderer: DOMSelectorTreeComponentRenderer = (node, depth, index) => {
   const checkbox = document.createElement('fluent-checkbox') as HTMLInputElement;

apps/stress-test/src/renderers/wc/numberField.ts

@@ -1,10 +1,12 @@
-import { fluentNumberField, NumberField, provideFluentDesignSystem } from '@fluentui/web-components';
+// import { fluentNumberField, NumberField, provideFluentDesignSystem } from '@fluentui/web-components';
 import { DOMSelectorTreeComponentRenderer } from '../../shared/vanilla/types';
 
-provideFluentDesignSystem().register(fluentNumberField());
+// provideFluentDesignSystem().register(fluentNumberField());
 
 const componentRenderer: DOMSelectorTreeComponentRenderer = (node, depth, index) => {
-  const numberField = document.createElement('fluent-number-field') as NumberField;
+  const numberField = document.createElement('fluent-number-field') as HTMLElement & {
+    value: string;
+  }; /* as NumberField*/
   numberField.value = node.value.name + ' ' + index;
 
   return numberField;

apps/stress-test/src/renderers/wc/textField.ts

@@ -1,7 +1,8 @@
-import { fluentTextField, provideFluentDesignSystem } from '@fluentui/web-components';
+// import { fluentTextField, provideFluentDesignSystem } from '@fluentui/web-components';
 import { DOMSelectorTreeComponentRenderer } from '../../shared/vanilla/types';
 
-provideFluentDesignSystem().register(fluentTextField());
+// DO NOT MERGE TO MASTER - WC is not yet implemented in the branch
+// provideFluentDesignSystem().register(fluentTextField());
 
 const componentRenderer: DOMSelectorTreeComponentRenderer = (node, depth, index) => {
   const field = document.createElement('fluent-text-field') as HTMLInputElement;

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"
+  }
+}