Merge branch 'master' into fix/react-card/HC-improvements

* master: (77 commits)
  chore(react-examples): replace storybook deprecated api with static stories (microsoft#32074)
  [chore]: create base class for accordion item and remove style and layout specific api (microsoft#32102)
  release: applying package updates - web-components
  chore(web-components): add test for complex focus management (microsoft#32009)
  [chore]: create base class for avatar and remove style and layout specific api (microsoft#32083)
  [chore]: create base class for text input and remove style and layout specific api (microsoft#32080)
  release: applying package updates - web-components
  chore:(react-nav-preview) Scaffold AppItem (microsoft#32088)
  docs(`react-teaching-popover`): Adding subcomponents' API to `TeachingPopover` documentation page (microsoft#32084)
  feat(web-components): relax setTheme() argument type to allow custom tokens (microsoft#32087)
  release: applying package updates - react-components
  [Chore]: Create Spinner base class to abstract out style and layout specific api. (microsoft#32067)
  [Chore]: Create Progress Bar base class to abstract out style and layout specific api. (microsoft#32066)
  fix(react-storybook-addon): transform decorator to function in withAriaLive() (microsoft#32011)
  fix(motion): improve Web Animations API detection in tests (microsoft#32029)
  chore(eslint-plugin): removes type dependency on @fluentui/react-utilities internals in ban-instanceof-html-element rule (microsoft#32072)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Chore: Create Divider base class to abstract out style and layout specific api (microsoft#32065)
  fix(TimePicker): Clear text when date value changes to null (microsoft#31626)
  ...

.devops/templates/runpublishvrscreenshot.yml

@@ -38,12 +38,7 @@ steps:
  displayName: Check if vrTests should be skipped
 
  - script: |
- yarn workspace ${{ parameters.vrTestPackageName }} vr:build
- displayName: Build VR tests components package
- condition: eq(variables['vrTestSkip'], 'no')
-
- - script: |
- yarn workspace ${{ parameters.vrTestPackageName }} vr:test --verbose
+ yarn lage test-vr --to ${{ parameters.vrTestPackageName }} --verbose
  displayName: 'Run VR tests'
  condition: eq(variables['vrTestSkip'], 'no')
 

.github/CODEOWNERS

@@ -373,6 +373,10 @@ packages/react-components/react-motion-components-preview/library @microsoft/tea
 packages/react-components/react-motion-components-preview/stories @microsoft/teams-prg
 packages/react-components/react-utilities-compat/library @microsoft/cxe-red
 packages/react-components/react-utilities-compat/stories @microsoft/cxe-red
+packages/react-components/react-color-picker-preview/library @microsoft/cxe-prg
+packages/react-components/react-color-picker-preview/stories @microsoft/cxe-prg
+packages/react-components/react-keytips-preview/library @microsoft/cxe-prg
+packages/react-components/react-keytips-preview/stories @microsoft/cxe-prg
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

.github/ISSUE_TEMPLATE/convergence_epic.md

@@ -12,40 +12,40 @@ completed as part of creating a v9 component. More info can be found here: https
 
 ## Preparation
 
-- [ ] [Open UI Research](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#open-ui-research)
+- [ ] [Open UI Research](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#open-ui-research)
  - [link to https://open-ui.org/]
-- [ ] [Open GitHub issues related to component](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#find-open-issues-on-github)
+- [ ] [Open GitHub issues related to component](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#find-open-issues-on-github)
  - [link to each issue]
-- [ ] [Create react-\* package and component from template](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#component-package)
+- [ ] [Create react-\* package and component from template](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#component-package)
  - [link to package: https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-(your-component)]
-- [ ] (Optional) [Draft implementation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#draft-implementation)
+- [ ] (Optional) [Draft implementation](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#draft-and-prototype-implementation)
  - [link to draft implementation, if applicable]
-- [ ] [Component Spec authored](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#component-spec) and [reviewed](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#spec-review)
+- [ ] [Component Spec authored](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#component-spec) and [reviewed](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#spec-review)
 
 ## Implementation
 
-- [ ] [Component implementation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#implementation)
+- [ ] [Component implementation](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#implementation)
 - [ ] Initial conformance and unit tests (validate basic functionality)
-- [ ] [Initial documentation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#documentation)
- - [ ] [Storybook stories](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#storybook-stories)
+- [ ] [Initial documentation](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#documentation)
+ - [ ] [Storybook stories](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#storybook-stories)
  - [ ] README.md covering basic usage
  - [ ] MIGRATION.md guide (include v8 and v0)
-- [ ] [Component released as preview](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#preview-release)
+- [ ] [Component released as preview](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#preview-release)
 
 ## Validation
 
-- [ ] [Add tests](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#tests)
+- [ ] [Add tests](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#tests)
  - [ ] Unit and conformance tests
  - [ ] VR tests
  - [ ] Bundle size fixtures
  - [ ] Accessibility behavior tests
- - [ ] Create an issue and run [manual accessibility tests](https://github.com/microsoft/fluentui/wiki/Manual-Accessibility-Review-Checklist): [link to issue]
-- [ ] [Validate with partners](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#validation)
-- [ ] [Run a bug bash with other FUI crews](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#bug-bash)
-- [ ] [Finalize documentation](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#finalize-documentation)
+ - [ ] Create an issue and run [manual accessibility tests](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/accessibility-review-checklist.md): [link to issue]
+- [ ] [Validate with partners](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#validation)
+- [ ] [Run a bug bash with other FUI crews](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#bug-bash)
+- [ ] [Finalize documentation](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#finalize-documentation)
  - [ ] Review and add any missing storybook stories
  - [ ] Finalize migration guide
-- [ ] [Component released as stable](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#stable-release)
+- [ ] [Component released as stable](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/component-implementation-guide.md#stable-release)
  - [ ] Run the `prepare-initial-release` script to remove the `-preview` suffix from the package name
  - [ ] Deprecate the `-preview` package in NPM
  - [ ] Export the component from `@fluentui/react-components`

.github/workflows/check-tooling.yml

@@ -0,0 +1,39 @@
+name: Check tooling
+on:
+ workflow_dispatch:
+ pull_request:
+ paths:
+ - 'tools/workspace-plugin/**'
+
+env:
+ __FORCE_API_MD_UPDATE__: true
+ __FORCE_SNAPSHOT_UPDATE__: true
+
+jobs:
+ check-tools:
+ strategy:
+ matrix:
+ os: [ubuntu-latest, windows-latest]
+ runs-on: ${{ matrix.os }}
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 20.x
+
+ - run: yarn install --frozen-lockfile
+
+ - run: yarn nx list @fluentui/workspace-plugin
+
+ - run: yarn nx g @fluentui/workspace-plugin:react-library --name hello-world --owner '@mrWick' --kind standard --no-interactive
+ - run: yarn nx g @fluentui/workspace-plugin:react-component --project hello-world-preview --name Aiur --no-interactive
+ - run: yarn nx g @fluentui/workspace-plugin:cypress-component-configuration --project hello-world-preview --no-interactive
+ - run: yarn nx g @fluentui/workspace-plugin:bundle-size-configuration --project hello-world-preview --no-interactive
+ - run: yarn nx g @fluentui/workspace-plugin:prepare-initial-release --project hello-world-preview --phase=preview --no-interactive
+ - run: yarn nx g @fluentui/workspace-plugin:prepare-initial-release --project hello-world-preview --phase=stable --no-interactive
+ - run: yarn nx g @nx/workspace:remove --project hello-world --forceRemove --no-interactive
+ - run: yarn nx g @nx/workspace:remove --project hello-world-stories --forceRemove --no-interactive
+ - run: yarn nx g @fluentui/workspace-plugin:tsconfig-base-all --no-interactive

apps/perf-test-react-components/just.config.ts

@@ -5,4 +5,5 @@ import { config } from './config/perf-test';
 preset();
 
 task('run-perf-test', () => getPerfRegressions(config));
-task('perf-test', series('clean', 'copy', 'bundle', 'run-perf-test'));
+task('perf-test:bundle', series('clean', 'copy', 'bundle'));
+task('perf-test', 'run-perf-test');

apps/perf-test-react-components/package.json

@@ -4,13 +4,13 @@
  "version": "9.0.0-rc.0",
  "private": true,
  "scripts": {
- "bundle": "just-scripts bundle",
+ "bundle": "just-scripts perf-test:bundle",
  "lint": "just-scripts lint",
  "just": "just-scripts",
  "clean": "just-scripts clean",
  "code-style": "just-scripts code-style",
  "type-check": "just-scripts type-check",
- "test:perf": "just-scripts perf-test"
+ "test-perf": "just-scripts perf-test"
  },
  "devDependencies": {
  "@fluentui/eslint-plugin": "*",

apps/perf-test-react-components/project.json

@@ -2,5 +2,9 @@
  "name": "perf-test-react-components",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
- "implicitDependencies": []
+ "implicitDependencies": [],
+ "tags": ["vNext"],
+ "targets": {
+ "bundle": { "dependsOn": [] }
+ }
 }

apps/perf-test/just.config.ts

@@ -4,5 +4,6 @@ import { config } from './config/perf-test';
 
 preset();
 
+task('perf-test:bundle', series('clean', 'copy', 'bundle'));
 task('run-perf-test', () => getPerfRegressions(config));
-task('perf-test', series('clean', 'copy', 'bundle', 'run-perf-test'));
+task('perf-test', series('run-perf-test'));

apps/perf-test/package.json

@@ -4,13 +4,13 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
- "bundle": "just-scripts bundle",
+ "bundle": "just-scripts perf-test:bundle",
  "lint": "just-scripts lint",
  "just": "just-scripts",
  "clean": "just-scripts clean",
  "code-style": "just-scripts code-style",
  "type-check": "just-scripts type-check",
- "test:perf": "just-scripts perf-test"
+ "test-perf": "just-scripts perf-test"
  },
  "devDependencies": {
  "@fluentui/eslint-plugin": "*",

apps/perf-test/project.json

@@ -2,5 +2,11 @@
  "name": "perf-test",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
- "implicitDependencies": []
+ "implicitDependencies": [],
+ "tags": ["v8"],
+ "targets": {
+ "bundle": {
+ "dependsOn": []
+ }
+ }
 }

apps/pr-deploy-site/project.json

@@ -2,5 +2,6 @@
  "name": "pr-deploy-site",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
- "implicitDependencies": []
+ "implicitDependencies": [],
+ "tags": []
 }

apps/public-docsite-resources/README.md

@@ -1,9 +1,24 @@
 # @fluentui/public-docsite-resources
 
+> 💡 NOTE:
+>
+> **🚨 This project is both application and library**, which introduces disallowed domain relationships ( `public-docsite` and `ssr-tests` application depend on this application ) and also that's why it has both `bundle` and `build` targets
+>
+> In order to properly follow domain scoping and our target naming and configuration, this project would need to be dissected into two:
+>
+> - public-docsite-resources-api
+>  - would live under `/packages/`
+>  - would contain all sources except application related code
+>  - on `build` would generate `dist/api/*.json` and all transpiled js modules related to creation of `AppDefinition.tsx`
+> - public-docsite-resources-app
+>  - would depend on `public-docsite-resources-api#build` in order to obtain AppDefinition and `api/*.json` files
+>  - would contain only application related code
+>  - on `bundle` would build deployable application as of today
+
 **Local demo app for @fluentui/react controls**
 
-This package contains the demo app that runs when you do `yarn start` from the root of the Fluent UI repo or from the `@fluentui/react` package.
+This project contains the demo app that runs when you do `yarn start` from the root of the Fluent UI repo or from the `@fluentui/react` package.
 
-To see a live version of this app, go to https://aka.ms/fluentdemo and choose a version.
+~~To see a live version of this app, go to https://aka.ms/fluentdemo and choose a version.~~
 
 See the [readme](https://github.com/microsoft/fluentui) for more information about Fluent UI and instructions for getting started with development, including how to run this app locally.

apps/public-docsite-resources/project.json

@@ -2,5 +2,6 @@
  "name": "public-docsite-resources",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
- "implicitDependencies": []
+ "implicitDependencies": [],
+ "tags": ["v8"]
 }

apps/public-docsite-v9/.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
  stories: [
  ...rootMain.stories,
  '../src/**/*.stories.mdx',
- '../src/**/*.stories.@(ts|tsx)',
+ '../src/**/index.stories.@(ts|tsx)',
  ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
  ...getPackageStoriesGlob({
  packageName: '@fluentui/public-docsite-v9',

apps/public-docsite-v9/.storybook/preview.js

@@ -32,7 +32,6 @@ export const parameters = {
  'Quick Start',
  'Styling Components',
  'Positioning Components',
- 'Component Poster',
  'Server-Side Rendering',
  ['Basic setup', 'Next.js setup', 'Limitations with Portals'],
  ],

apps/public-docsite-v9/package.json

@@ -4,7 +4,6 @@
  "private": true,
  "description": "Fluent UI React v9 documentation",
  "scripts": {
- "build": "just-scripts build",
  "build-storybook": "build-storybook --no-manager-cache -o ./dist/storybook --docs && node ./.storybook/fix-title.js 'Fluent UI React v9' ../dist",
  "chromatic:branch": "npx chromatic@6.4.3 --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name build-storybook",
  "chromatic": "npx chromatic@6.4.3 --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name build-storybook --branch-name microsoft:master",
@@ -45,6 +44,7 @@
  "react-window": "^1.8.6",
  "tslib": "^2.1.0",
  "react-hook-form": "^5.7.2",
- "@fluentui/react-nav-preview": "*"
+ "@fluentui/react-nav-preview": "*",
+ "@fluentui/react-motion-components-preview": "*"
  }
 }