diff --git a/.devops/templates/runpublishvrscreenshot.yml b/.devops/templates/runpublishvrscreenshot.yml index 6f6e06c1169d25..28575d15929bdd 100644 --- a/.devops/templates/runpublishvrscreenshot.yml +++ b/.devops/templates/runpublishvrscreenshot.yml @@ -39,11 +39,6 @@ steps: fi displayName: Check if vrTests should be skipped - - script: | - yarn workspace ${{ parameters.vrTestPackageName }} convert - displayName: Convert screener component to storywright - condition: and(eq(variables['vrTestSkip'], 'no'), eq('${{ parameters.shouldBuildNorthstar }}', 'false')) - - ${{ if eq(parameters.shouldBuildstorybookaddon, 'true') }}: - script: | yarn build --to @fluentui/react-storybook-addon @@ -57,12 +52,12 @@ steps: condition: eq(variables['vrTestSkip'], 'no') - script: | - yarn workspace ${{ parameters.vrTestPackageName }} screener:build + yarn workspace ${{ parameters.vrTestPackageName }} vr:build displayName: Build VR tests components package condition: eq(variables['vrTestSkip'], 'no') - script: | - yarn workspace ${{ parameters.vrTestPackageName }} test:component --verbose + yarn workspace ${{ parameters.vrTestPackageName }} vr:test --verbose displayName: 'Run VR tests' condition: eq(variables['vrTestSkip'], 'no') diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 18211eb2c3281f..bba6e9dca75e34 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -28,7 +28,6 @@ /.githooks @microsoft/fluentui-react-build /.storybook @microsoft/fluentui-react-build /.vscode @microsoft/fluentui-react-build -/scripts @microsoft/fluentui-react-build /tools @microsoft/fluentui-react-build #### Root Build files @@ -53,10 +52,37 @@ /migrations.json @microsoft/fluentui-react-build #### Meta and License stuff -/LICENSE @microsoft/fluentui-react-build @justSlone @jurokapsiar -/packages/react/LICENSE @microsoft/fluentui-react-build @justSlone @jurokapsiar -/.github/CODEOWNERS @microsoft/fluentui-react-build @justSlone @jurokapsiar -/.github/ISSUE_TEMPLATE* @justSlone @jurokapsiar +/LICENSE @microsoft/fluentui-react-build @justSlone @jurokapsiar @tudorpopams +/packages/react/LICENSE @microsoft/fluentui-react-build @justSlone @jurokapsiar @tudorpopams +/.github/CODEOWNERS @microsoft/fluentui-react-build @justSlone @jurokapsiar @tudorpopams +/.github/ISSUE_TEMPLATE* @justSlone @jurokapsiar @tudorpopams + +## Tooling packages +scripts/api-extractor @microsoft/fluentui-react-build +scripts/babel @microsoft/fluentui-react-build +scripts/beachball @microsoft/fluentui-react-build +scripts/cypress @microsoft/fluentui-react-build +scripts/dangerjs @microsoft/fluentui-react-build +scripts/dependency-graph-generator @microsoft/fluentui-react-build +scripts/executors @microsoft/fluentui-react-build +scripts/fluentui-publish @microsoft/fluentui-react-build +scripts/generators @microsoft/fluentui-react-build +scripts/github @microsoft/fluentui-react-build +scripts/gulp @microsoft/fluentui-react-build @microsoft/teams-prg +scripts/jest @microsoft/fluentui-react-build +scripts/lint-staged @microsoft/fluentui-react-build +scripts/monorepo @microsoft/fluentui-react-build +scripts/package-manager @microsoft/fluentui-react-build +scripts/prettier @microsoft/fluentui-react-build +scripts/projects-test @microsoft/fluentui-react-build +scripts/puppeteer @microsoft/fluentui-react-build +scripts/storybook @microsoft/fluentui-react-build +scripts/tasks @microsoft/fluentui-react-build +scripts/triage-bot @microsoft/fluentui-react-build @microsoft/cxe-prg +scripts/ts-node @microsoft/fluentui-react-build +scripts/update-release-notes @microsoft/fluentui-react-build +scripts/utils @microsoft/fluentui-react-build +scripts/webpack @microsoft/fluentui-react-build #### Fluent UI N* packages/a11y-rules @microsoft/fluentui-northstar @@ -66,7 +92,7 @@ packages/fluentui/react-northstar/src/components/Chat @microsoft/fluentui-norths packages/fluentui/react-northstar/src/themes/teams/components/Chat @microsoft/fluentui-northstar @Hirse #### Web Components -packages/web-components @chrisdholt @EisenbergEffect @nicholasrice +packages/web-components @microsoft/fui-wc #### Apps apps/public-docsite @microsoft/fluentui-v8-website @@ -177,10 +203,12 @@ packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow packages/react-migration-v8-v9 @microsoft/cxe-coastal @geoffcoxmsft packages/react-components/react-tree @microsoft/teams-prg packages/react-components/react-skeleton @microsoft/cxe-red +packages/tokens @microsoft/teams-prg +packages/react-components/react-tags @microsoft/cxe-coastal @TristanWatanabe +packages/react-components/react-data-grid-react-window @microsoft/teams-prg +packages/react-components/react-datepicker @microsoft/cxe-red @sopranopillow @khmakoto # <%= NX-CODEOWNER-PLACEHOLDER %> - - ## Components packages/react @microsoft/cxe-red @microsoft/cxe-coastal packages/react/src/components/ActivityItem @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto @@ -230,8 +258,21 @@ packages/react/src/components/WeeklyDayPicker @microsoft/fluent-date-time ## Theming and styling packages/react/src/utilities/ThemeProvider @microsoft/cxe-red @microsoft/cxe-coastal @dzearing - +packages/fluent2-theme @microsoft/cxe-red @microsoft/cxe-coastal @geoffcoxmsft ## Experiments packages/react-experiments/src/components/Signals @ThomasMichon packages/react-experiments/src/components/Tile @ThomasMichon packages/react-experiments/src/components/TileList @ThomasMichon + +### generic rules for v-build. Might be tweaked based on needs. +**/just.config.ts @microsoft/fluentui-react-build +**/jest.config.js @microsoft/fluentui-react-build +**/webpack.*.js @microsoft/fluentui-react-build +**/.eslintrc.js @microsoft/fluentui-react-build +**/.eslintrc.json @microsoft/fluentui-react-build +**/tsconfig.json @microsoft/fluentui-react-build +**/tsconfig.lib.json @microsoft/fluentui-react-build +**/tsconfig.spec.json @microsoft/fluentui-react-build +**/cypress.config.ts @microsoft/fluentui-react-build +**/api-extractor.json @microsoft/fluentui-react-build +**/api-extractor.unstable.json @microsoft/fluentui-react-build diff --git a/.github/workflows/check-packages.yml b/.github/workflows/check-packages.yml index 9282d529eecaec..2529de2d9ab6ff 100644 --- a/.github/workflows/check-packages.yml +++ b/.github/workflows/check-packages.yml @@ -38,7 +38,7 @@ jobs: dependency-mismatches: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: @@ -62,7 +62,7 @@ jobs: change-files: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 with: fetch-depth: 0 diff --git a/.github/workflows/create-milestone.yml b/.github/workflows/create-milestone.yml index ad38254db1f9a8..f34c3719932e1f 100644 --- a/.github/workflows/create-milestone.yml +++ b/.github/workflows/create-milestone.yml @@ -16,10 +16,12 @@ jobs: - name: Create milestone run: | month=$(date +"%B") + month_numeric=$(date +"%m") quarter=$(date +"%q") year=$(date +"%Y") title="${month} Project Cycle Q${quarter} ${year}" - echo "Using title '${title}'" - gh api --method POST repos/microsoft/fluentui/milestones -f title="${title}" + due_on=$(date -v1d -v${month_numeric}m -v-1d +"%Y-%m-%dT%H:%M:%S%z") + echo "Using title '${title}' and setting due date: '${due-on}'" + gh api --method POST repos/microsoft/fluentui/milestones -f title="${title} -f due_on="${due_on}" env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml index 6464862d7e3315..8abcb77c26b3f4 100644 --- a/.github/workflows/issues.yml +++ b/.github/workflows/issues.yml @@ -12,7 +12,7 @@ jobs: issues: write steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - uses: actions/github-script@v6 with: script: | diff --git a/.github/workflows/screener-build.yml b/.github/workflows/screener-build.yml deleted file mode 100644 index c4d3279f85e70a..00000000000000 --- a/.github/workflows/screener-build.yml +++ /dev/null @@ -1,287 +0,0 @@ -name: Screener build - -on: - push: - branches: - - master - pull_request: - types: [opened, reopened, synchronize, ready_for_review] - -env: - DEPLOYHOST: 'fluentuipr.z22.web.core.windows.net' - -jobs: - environment-upload: - runs-on: ubuntu-latest - steps: - - run: mkdir artifacts - - ########################################### - # BROWSERSLIST_IGNORE_OLD_DATA = Prevents failures on CI when "caniuse-lite" becomes outdated - # DEPLOYHOST = address of host for screener tests deployment - # BUILD_BUILDID = unique ID of the workflow run within the repo - ########################################### - - name: Set base env variables - run: | - cat <> artifacts/environment - BROWSERSLIST_IGNORE_OLD_DATA=true - BUILD_BUILDID=${{ github.run_id }} - SCREENER_BUILD=1 - EOT - - - name: Set env variables if there is not a PR - run: | - cat <> artifacts/environment - DEPLOYBASEPATH=heads/${{github.ref_name}} - DEPLOYURL=https://${{env.DEPLOYHOST}}/heads/${{github.ref_name}} - BUILD_SOURCEBRANCHNAME=${{ github.ref_name }} - EOT - if: github.event_name == 'push' - - - name: Check if draft PR has 'Ready for VR' label - uses: actions/github-script@v6 - with: - script: | - let labels = await github.rest.issues.listLabelsOnIssue({ - issue_number: ${{github.event.pull_request.number}}, - owner: context.repo.owner, - repo: context.repo.repo - }); - - let foundLabel = labels.data.find((label) => {return label.name == 'Ready for VR'}); - if(foundLabel === undefined) - core.exportVariable('SKIP_SCREENER', true); - if: github.event_name == 'pull_request' && github.event.pull_request.draft == true - - - run: echo "SKIP_SCREENER=${{env.SKIP_SCREENER}}" >> skip-screener - - - name: Upload environment variables artifact - uses: actions/upload-artifact@v3 - with: - name: skip-screener - path: skip-screener - - ########################################### - # SYSTEM_PULLREQUEST_TARGETBRANCH = target branch name - # SYSTEM_PULLREQUEST_SOURCEBRANCH = source branch name - # SYSTEM_PULLREQUEST_PULLREQUESTID = ID of the PR - # SYSTEM_PULLREQUEST_SOURCECOMMITID = commit SHA of PR - # DEPLOYBASEPATH = path for deploy URL -> pull/ for PRs - # DEPLOYURL= address for tests deployment, uses DEPLOYHOST and DEPLOYBASEPATH - # BUILD_SOURCEBRANCHNAME = 'merge' for PRs - ########################################### - - name: Set env variables if there is a PR - run: | - cat <> artifacts/environment - SYSTEM_PULLREQUEST_TARGETBRANCH=${{ github.event.pull_request.base.ref }} - SYSTEM_PULLREQUEST_PULLREQUESTID=${{ github.event.pull_request.id }} - SYSTEM_PULLREQUEST_SOURCECOMMITID=${{ github.event.pull_request.head.sha }} - DEPLOYBASEPATH=pull/${{github.event.pull_request.number}} - DEPLOYURL=https://${{env.DEPLOYHOST}}/pull/${{github.event.pull_request.number}} - BUILD_SOURCEBRANCHNAME=${{ github.event.pull_request.head.ref }} - EOT - if: ${{ github.event_name == 'pull_request' && env.SKIP_SCREENER == ''}} - - - name: Upload environment variables artifact - uses: actions/upload-artifact@v3 - with: - name: env-artifact - path: artifacts/environment - if: ${{ env.SKIP_SCREENER == '' }} - - outputs: - SKIP_SCREENER: ${{env.SKIP_SCREENER}} - - screener-react-northstar: - if: needs.environment-upload.outputs.SKIP_SCREENER == '' - needs: environment-upload - runs-on: 'ubuntu-latest' - name: Screener @fluentui/react-northstar - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - name: Download env variables artifact - uses: actions/download-artifact@v3 - with: - name: env-artifact - - - name: Define env variables - run: | - input_file="environment" - while read line - do - echo "$line" >> $GITHUB_ENV - done < "$input_file" - - - name: Delete environment file - run: | - rm environment - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - - name: Install dependencies - run: yarn install --frozen-lockfile - - - run: | - echo "Is PR build? ${{startsWith(github.ref, 'refs/pull/')}}" - packageAffected=$(yarn --silent check:affected-package --packages @fluentui/docs --pr=${{startsWith(github.ref, 'refs/pull/')}}) - if [[ $packageAffected == false ]]; then - echo "Should skip screener" - echo "SKIP_SCREENER_BUILD=true" >> $GITHUB_ENV - else - echo "SKIP_SCREENER_BUILD=false" >> $GITHUB_ENV - echo "Should NOT skip screener" - fi - name: Check if northstar packages were affected - - - name: Log environment variables (Linux) - if: runner.os == 'Linux' - run: | - printenv | sort ;\ - echo "SHELLOPTS $SHELLOPTS" ;\ - - - name: build FUI N* VR Test - run: yarn workspace @fluentui/docs vr:build - env: - SCREENER_BUILD: 1 - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - - uses: actions/upload-artifact@v3 - with: - name: northstar-artifact - path: packages/fluentui/docs/dist - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - screener-react: - if: needs.environment-upload.outputs.SKIP_SCREENER == '' - needs: environment-upload - runs-on: 'ubuntu-latest' - name: Screener @fluentui/react - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - name: Download a single artifact - uses: actions/download-artifact@v3 - with: - name: env-artifact - - - name: Define env variables - run: | - input_file="environment" - while read line - do - echo "$line" >> $GITHUB_ENV - done < "$input_file" - - - name: Delete environment file - run: | - rm environment - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - - name: Install dependencies - run: yarn install --frozen-lockfile - - - run: | - echo "Is PR build? ${{startsWith(github.ref, 'refs/pull/')}}" - packageAffected=$(yarn --silent check:affected-package --packages @fluentui/vr-tests --pr=${{startsWith(github.ref, 'refs/pull/')}}) - if [[ $packageAffected == false ]]; then - echo "Should skip screener" - echo "SKIP_SCREENER_BUILD=true" >> $GITHUB_ENV - else - echo "SKIP_SCREENER_BUILD=false" >> $GITHUB_ENV - echo "Should NOT skip screener" - fi - name: Check if v8 packages were affected - - - name: Log environment variables (Linux) - if: runner.os == 'Linux' - run: | - printenv | sort ;\ - echo "SHELLOPTS $SHELLOPTS" ;\ - - - name: build vr-tests storybook - run: yarn workspace @fluentui/vr-tests screener:build - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - - uses: actions/upload-artifact@v3 - with: - name: screener-artifact - path: apps/vr-tests/dist/storybook - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - screener-react-components: - if: needs.environment-upload.outputs.SKIP_SCREENER == '' - needs: environment-upload - runs-on: 'ubuntu-latest' - name: Screener @fluentui/react-components - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - name: Download a single artifact - uses: actions/download-artifact@v3 - with: - name: env-artifact - - - name: Define env variables - run: | - input_file="environment" - while read line - do - echo "$line" >> $GITHUB_ENV - done < "$input_file" - - - name: Delete environment file - run: | - rm environment - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - name: Install dependencies - run: yarn install --frozen-lockfile - - - run: | - echo "Is PR build? ${{startsWith(github.ref, 'refs/pull/')}}" - packageAffected=$(yarn --silent check:affected-package --packages @fluentui/vr-tests-react-components --pr=${{startsWith(github.ref, 'refs/pull/')}}) - if [[ $packageAffected == false ]]; then - echo "Should skip screener" - echo "SKIP_SCREENER_BUILD=true" >> $GITHUB_ENV - else - echo "SKIP_SCREENER_BUILD=false" >> $GITHUB_ENV - echo "Should NOT skip screener" - fi - name: Check if v9 packages were affected - - - name: Log environment variables (Linux) - if: runner.os == 'Linux' - run: | - printenv | sort ;\ - echo "SHELLOPTS $SHELLOPTS" ;\ - - - name: build @fluentui/react-storybook-addon - run: yarn build --to @fluentui/react-storybook-addon - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - - name: build vr-tests-react-components storybook - run: yarn workspace @fluentui/vr-tests-react-components screener:build - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - - uses: actions/upload-artifact@v3 - with: - name: vnext-artifact - path: apps/vr-tests-react-components/dist/storybook - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} diff --git a/.github/workflows/screener-run.yml b/.github/workflows/screener-run.yml deleted file mode 100644 index 6ddd0a26c50bef..00000000000000 --- a/.github/workflows/screener-run.yml +++ /dev/null @@ -1,259 +0,0 @@ -name: Screener run -on: - workflow_run: - workflows: - - Screener build - types: - - completed - -env: - AZURE_STORAGE_CONNECTION_STRING: ${{secrets.AZURE_STORAGE_CONNECTION_STRING}} -jobs: - determine-if-skipping: - runs-on: 'ubuntu-latest' - steps: - - name: Download artifact to determine if skipping jobs - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: skip-screener - - - name: Define env variable - run: | - var=$(head -1 skip-screener) - echo "$var" >> $GITHUB_ENV - outputs: - SKIP_SCREENER: ${{env.SKIP_SCREENER}} - - screener-react-northstar: - if: needs.determine-if-skipping.outputs.SKIP_SCREENER == '' - needs: determine-if-skipping - runs-on: 'ubuntu-latest' - name: Screener @fluentui/react-northstar - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - - name: Check if test app artifact deployed - uses: actions/github-script@v6 - id: skip-screener - with: - script: | - let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({ - owner: context.repo.owner, - repo: context.repo.repo, - run_id: context.payload.workflow_run.id, - - }); - let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => { - return artifact.name == "northstar-artifact" - })[0]; - core.exportVariable('IS_ARTIFACT_PRESENT', (matchArtifact !== undefined).toString()); - - - name: Download environment variables artifact - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: env-artifact - - - name: Download N* storybook artifact - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: northstar-artifact - # downloads artifact to where it would be 'built' - path: packages/fluentui/docs/dist - if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - - - name: Define env variables - run: | - input_file="environment" - while read line - do - echo "$line" >> $GITHUB_ENV - done < "$input_file" - - - name: Log environment variables (Linux) - if: runner.os == 'Linux' - run: | - printenv | sort ;\ - echo "SHELLOPTS $SHELLOPTS" ;\ - - - name: Install dependencies - run: yarn install --frozen-lockfile - - - name: Upload N* VR test site - uses: azure/CLI@v1 - with: - inlineScript: | - az storage blob upload-batch -d '$web/${{env.DEPLOYBASEPATH}}/react-northstar-screener' -s 'packages/fluentui/docs/dist' --overwrite - if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - - - name: Start @fluentui/react-northstar VR Test - run: yarn workspace @fluentui/docs vr:test - env: - SCREENER_ENDPOINT: ${{secrets.SCREENER_ENDPOINT}} - SCREENER_PROXY_ENDPOINT: ${{secrets.SCREENER_PROXY_ENDPOINT}} - SCREENER_API_KEY: ${{secrets.SCREENER_API_KEY}} - - screener-react: - if: needs.determine-if-skipping.outputs.SKIP_SCREENER == '' - needs: determine-if-skipping - runs-on: 'ubuntu-latest' - name: Screener @fluentui/react - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - - name: Check if test app artifact deployed - uses: actions/github-script@v6 - id: skip-screener - with: - script: | - let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({ - owner: context.repo.owner, - repo: context.repo.repo, - run_id: context.payload.workflow_run.id, - }); - let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => { - return artifact.name == "screener-artifact" - })[0]; - core.exportVariable('IS_ARTIFACT_PRESENT', (matchArtifact !== undefined).toString()); - - - name: Download environment variables artifact - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: env-artifact - - - name: Download screener storybook artifact - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: screener-artifact - path: apps/vr-tests/dist/storybook - if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - - - name: Define env variables - run: | - input_file="environment" - while read line - do - echo "$line" >> $GITHUB_ENV - done < "$input_file" - - - name: Log environment variables (Linux) - if: runner.os == 'Linux' - run: | - printenv | sort ;\ - echo "SHELLOPTS $SHELLOPTS" ;\ - - - name: Install dependencies - run: yarn install --frozen-lockfile - - name: Upload @fluentui/react VR test site - uses: azure/CLI@v1 - with: - inlineScript: | - az storage blob upload-batch -d '$web/${{env.DEPLOYBASEPATH}}/react-screener' -s 'apps/vr-tests/dist/storybook' --overwrite - if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - - - name: Start @fluentui/react VR Test - run: yarn workspace @fluentui/vr-tests screener - env: - SCREENER_ENDPOINT: ${{secrets.SCREENER_ENDPOINT}} - SCREENER_PROXY_ENDPOINT: ${{secrets.SCREENER_PROXY_ENDPOINT}} - SCREENER_API_KEY: ${{secrets.SCREENER_API_KEY}} - - screener-react-components: - if: needs.determine-if-skipping.outputs.SKIP_SCREENER == '' - needs: determine-if-skipping - runs-on: 'ubuntu-latest' - name: Screener @fluentui/react-components - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - - name: Check if test app artifact deployed - uses: actions/github-script@v6 - id: skip-screener - with: - script: | - let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({ - owner: context.repo.owner, - repo: context.repo.repo, - run_id: context.payload.workflow_run.id, - }); - let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => { - return artifact.name == "vnext-artifact" - })[0]; - core.exportVariable('IS_ARTIFACT_PRESENT', (matchArtifact !== undefined).toString()); - - - name: Download environment variables artifact - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: env-artifact - - - name: Download VNext storybook artifact - uses: dawidd6/action-download-artifact@v2 - with: - workflow: screener-build.yml - run_id: ${{github.event.workflow_run.id}} - name: vnext-artifact - path: apps/vr-tests-react-components/dist/storybook - if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - - - name: Define env variables - run: | - input_file="environment" - while read line - do - echo "$line" >> $GITHUB_ENV - done < "$input_file" - - - name: Log environment variables (Linux) - if: runner.os == 'Linux' - run: | - printenv | sort ;\ - echo "SHELLOPTS $SHELLOPTS" ;\ - - - name: Install dependencies - run: yarn install --frozen-lockfile - - - name: Upload @fluentui/react-components VR test site - uses: azure/CLI@v1 - with: - inlineScript: | - az storage blob upload-batch -d '$web/${{env.DEPLOYBASEPATH}}/react-components-screener' -s 'apps/vr-tests-react-components/dist/storybook' --overwrite - if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - - - name: Start @fluentui/react-components VR Test - run: yarn workspace @fluentui/vr-tests-react-components screener - env: - SCREENER_ENDPOINT: ${{secrets.SCREENER_ENDPOINT}} - SCREENER_PROXY_ENDPOINT: ${{secrets.SCREENER_PROXY_ENDPOINT}} - SCREENER_API_KEY: ${{secrets.SCREENER_API_KEY}} diff --git a/.gulp.js b/.gulp.js index 92421f5eba985f..e75f16fd1a21e0 100644 --- a/.gulp.js +++ b/.gulp.js @@ -1,6 +1,6 @@ // https://github.com/gulpjs/gulp-cli#configuration module.exports = { flags: { - require: '@fluentui/scripts/babel/register', + require: '@fluentui/scripts-babel/register', }, }; diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css index e1f8fe7f8d97f1..6a32ff625df92b 100644 --- a/.storybook/docs-root.css +++ b/.storybook/docs-root.css @@ -62,6 +62,11 @@ 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; @@ -72,6 +77,11 @@ 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: ''; @@ -285,7 +295,7 @@ #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: Menlo, monospace; + font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace; font-style: normal; font-weight: normal; font-size: 14px; @@ -318,7 +328,10 @@ } #docs-root code { - margin: 1px 0 1px 0; + padding: 0.1em 0.2em; + display: inline-block; + background-color: rgba(17, 16, 15, 0.1); + border-radius: 2px; } .os-content-glue { diff --git a/.storybook/main.js b/.storybook/main.js index 00da3fccf57088..c53594af9bd51d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,7 +3,7 @@ const fs = require('fs'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); const exportToCodesandboxAddon = require('storybook-addon-export-to-codesandbox'); -const { loadWorkspaceAddon, getCodesandboxBabelOptions } = require('../scripts/storybook'); +const { loadWorkspaceAddon, getCodesandboxBabelOptions } = require('@fluentui/scripts-storybook'); /** * @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig @@ -72,8 +72,7 @@ module.exports = /** @type {Omit} */ ({ */ enforce: 'post', test: /\.stories\.tsx$/, - //TODO: simplify once all v9 packages have been migrated to new package structure. Tracking work: https://github.com/microsoft/fluentui/issues/24129 - include: /stories|src/, + include: /stories/, exclude: /node_modules/, use: { loader: 'babel-loader', diff --git a/.storybook/preview.js b/.storybook/preview.js index 96a41c540ea88c..679ada77a4d3a0 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -35,6 +35,7 @@ export const parameters = { docs: { source: { excludeDecorators: true, + type: 'source', }, }, exportToCodeSandbox: { diff --git a/.vscode/launch.json b/.vscode/launch.json index 38e7fcbfa7767b..db3efb7177c52a 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -137,7 +137,7 @@ "--age", "10" ], - "runtimeArgs": ["--nolazy", "--inspect", "-r", "${workspaceRoot}/scripts/ts-node-register"], + "runtimeArgs": ["--nolazy", "--inspect", "-r", "${workspaceRoot}/scripts/ts-node/register"], "env": { "NODE_ENV": "development" }, diff --git a/apps/perf-test-react-components/just.config.ts b/apps/perf-test-react-components/just.config.ts index 5929fd3ee0fc5c..be016c1495657e 100644 --- a/apps/perf-test-react-components/just.config.ts +++ b/apps/perf-test-react-components/just.config.ts @@ -1,5 +1,5 @@ import { getPerfRegressions } from './tasks/perf-test'; -import { preset, task, series } from '@fluentui/scripts'; +import { preset, task, series } from '@fluentui/scripts-tasks'; preset(); diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index a80c638bbe3ff9..9368ea0e51605d 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -12,17 +12,18 @@ "code-style": "just-scripts code-style" }, "devDependencies": { - "@fluentui/eslint-plugin": "*" + "@fluentui/eslint-plugin": "*", + "@fluentui/scripts-tasks": "*", + "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@griffel/core": "^1.8.1", - "@fluentui/react-avatar": "^9.2.8", - "@fluentui/react-button": "^9.1.10", - "@fluentui/react-persona": "9.1.0-beta.5", - "@fluentui/react-provider": "^9.1.9", - "@fluentui/react-spinbutton": "^9.0.10", - "@fluentui/react-theme": "^9.1.3", - "@fluentui/scripts": "^1.0.0", + "@griffel/core": "^1.9.0", + "@fluentui/react-avatar": "^9.2.12", + "@fluentui/react-button": "^9.1.14", + "@fluentui/react-persona": "^9.1.1", + "@fluentui/react-provider": "^9.2.1", + "@fluentui/react-spinbutton": "^9.0.14", + "@fluentui/react-theme": "^9.1.5", "@microsoft/load-themed-styles": "^1.10.26", "flamegrill": "0.2.0", "lodash": "^4.17.15", diff --git a/apps/perf-test-react-components/src/scenarioIterations.js b/apps/perf-test-react-components/src/scenarioIterations.ts similarity index 71% rename from apps/perf-test-react-components/src/scenarioIterations.js rename to apps/perf-test-react-components/src/scenarioIterations.ts index 830d33392c04f7..aa2482f34f6cbc 100644 --- a/apps/perf-test-react-components/src/scenarioIterations.js +++ b/apps/perf-test-react-components/src/scenarioIterations.ts @@ -1,7 +1,5 @@ // You don't have to add scenarios to this structure unless you want their iterations to differ from the default. -const scenarioIterations = { +export const scenarioIterations = { MakeStyles: 50000, FluentProviderWithTheme: 10, }; - -module.exports = scenarioIterations; diff --git a/apps/perf-test-react-components/src/scenarioNames.js b/apps/perf-test-react-components/src/scenarioNames.ts similarity index 68% rename from apps/perf-test-react-components/src/scenarioNames.js rename to apps/perf-test-react-components/src/scenarioNames.ts index 982cd8fe1b9a6e..7bb7aa2c2d28d6 100644 --- a/apps/perf-test-react-components/src/scenarioNames.js +++ b/apps/perf-test-react-components/src/scenarioNames.ts @@ -1,5 +1,3 @@ // You don't have to add scenarios to this structure unless you want their display name to differ // from their scenario name. -const scenarioNames = {}; - -module.exports = scenarioNames; +export const scenarioNames = {}; diff --git a/apps/perf-test-react-components/src/scenarioRenderTypes.js b/apps/perf-test-react-components/src/scenarioRenderTypes.ts similarity index 80% rename from apps/perf-test-react-components/src/scenarioRenderTypes.js rename to apps/perf-test-react-components/src/scenarioRenderTypes.ts index 8868c41f361e7f..e72be02dacf713 100644 --- a/apps/perf-test-react-components/src/scenarioRenderTypes.js +++ b/apps/perf-test-react-components/src/scenarioRenderTypes.ts @@ -9,13 +9,8 @@ */ const AllRenderTypes = ['mount', 'virtual-rerender', 'virtual-rerender-with-unmount']; -const DefaultRenderTypes = ['mount']; +export const DefaultRenderTypes = ['mount']; -const scenarioRenderTypes = { +export const scenarioRenderTypes = { FluentProviderWithTheme: AllRenderTypes, }; - -module.exports = { - scenarioRenderTypes, - DefaultRenderTypes, -}; diff --git a/apps/perf-test-react-components/src/scenarios/Persona.tsx b/apps/perf-test-react-components/src/scenarios/Persona.tsx index eda8505943eaed..bc0dbd40b4bcdb 100644 --- a/apps/perf-test-react-components/src/scenarios/Persona.tsx +++ b/apps/perf-test-react-components/src/scenarios/Persona.tsx @@ -10,7 +10,8 @@ const Scenario = () => ( presence={{ status: 'available' }} avatar={{ image: { - src: 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-male.png', + src: + 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20221209.001/office-ui-fabric-react-assets/persona-male.png', }, }} /> diff --git a/apps/perf-test-react-components/tasks/perf-test.ts b/apps/perf-test-react-components/tasks/perf-test.ts index 80ed1801149c2e..794ed65e9b1ce0 100644 --- a/apps/perf-test-react-components/tasks/perf-test.ts +++ b/apps/perf-test-react-components/tasks/perf-test.ts @@ -1,9 +1,11 @@ import fs from 'fs'; import path from 'path'; import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill'; -import scenarioIterations from '../src/scenarioIterations'; +import { scenarioIterations } from '../src/scenarioIterations'; import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes'; -import { argv } from '@fluentui/scripts'; +import { argv } from '@fluentui/scripts-tasks'; + +type ScenarioSetting = Record; // TODO: consolidate with newer version of fluent perf-test @@ -145,13 +147,15 @@ export async function getPerfRegressions() { const scenarioList = scenariosArg.length > 0 ? scenariosArg : scenariosAvailable; const scenarios: Scenarios = {}; - const scenarioSettings = {}; + const scenarioSettings: ScenarioSetting = {}; scenarioList.forEach(scenarioName => { if (!scenariosAvailable.includes(scenarioName)) { throw new Error(`Invalid scenario: ${scenarioName}.`); } - const iterations = iterationsArg || scenarioIterations[scenarioName] || iterationsDefault; - const renderTypes = scenarioRenderTypes[scenarioName] || DefaultRenderTypes; + const iterations = + iterationsArg || scenarioIterations[scenarioName as keyof typeof scenarioIterations] || iterationsDefault; + const renderTypes: string[] = + scenarioRenderTypes[scenarioName as keyof typeof scenarioRenderTypes] || DefaultRenderTypes; renderTypes.forEach(renderType => { const scenarioKey = `${scenarioName}-${renderType}`; @@ -221,7 +225,7 @@ export async function getPerfRegressions() { /** * Create test summary based on test results. */ -function createReport(scenarioSettings, testResults: CookResults) { +function createReport(scenarioSettings: ScenarioSetting, testResults: CookResults) { const report = '## [Perf Analysis (`@fluentui/react-components`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n' // Show only significant changes by default. @@ -239,13 +243,9 @@ function createReport(scenarioSettings, testResults: CookResults) { * Create a table of scenario results. * @param showAll Show only significant results by default. */ -function createScenarioTable(scenarioSettings, testResults: CookResults, showAll: boolean) { +function createScenarioTable(scenarioSettings: ScenarioSetting, testResults: CookResults, showAll: boolean) { const resultsToDisplay = Object.keys(testResults).filter( - key => - showAll || - (testResults[key].analysis && - testResults[key].analysis.regression && - testResults[key].analysis.regression.isRegression), + key => showAll || testResults[key].analysis?.regression?.isRegression, ); if (resultsToDisplay.length === 0) { diff --git a/apps/perf-test-react-components/tsconfig.json b/apps/perf-test-react-components/tsconfig.json index f3c612b74211c1..399abe363dcada 100644 --- a/apps/perf-test-react-components/tsconfig.json +++ b/apps/perf-test-react-components/tsconfig.json @@ -6,16 +6,10 @@ "module": "commonjs", "jsx": "react", "declaration": true, - "sourceMap": true, "experimentalDecorators": true, - "forceConsistentCasingInFileNames": true, - "moduleResolution": "node", "preserveConstEnums": true, - "strictNullChecks": true, - "noImplicitAny": true, - "lib": ["es2016", "dom"], - "types": ["webpack-env"], - "skipLibCheck": true + "lib": ["ES2015", "DOM"], + "types": ["webpack-env"] }, "include": ["src"] } diff --git a/apps/perf-test-react-components/webpack.config.js b/apps/perf-test-react-components/webpack.config.js index f066ba3fe9eef0..545d23fe7806e5 100644 --- a/apps/perf-test-react-components/webpack.config.js +++ b/apps/perf-test-react-components/webpack.config.js @@ -1,4 +1,4 @@ -const resources = require('../../scripts/webpack/webpack-resources'); +const { resources } = require('@fluentui/scripts-webpack'); // The issue here is making readable Flamegraphs that don't have complicated paths like: // ~Fabric.../../packages/react/lib/components/DetailsList/DetailsRow.base.js.DetailsRowBase.render diff --git a/apps/perf-test/just.config.ts b/apps/perf-test/just.config.ts index 5929fd3ee0fc5c..be016c1495657e 100644 --- a/apps/perf-test/just.config.ts +++ b/apps/perf-test/just.config.ts @@ -1,5 +1,5 @@ import { getPerfRegressions } from './tasks/perf-test'; -import { preset, task, series } from '@fluentui/scripts'; +import { preset, task, series } from '@fluentui/scripts-tasks'; preset(); diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 65d4b77a93f9f7..74676fe7a0561d 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -12,12 +12,13 @@ "code-style": "just-scripts code-style" }, "devDependencies": { - "@fluentui/eslint-plugin": "*" + "@fluentui/eslint-plugin": "*", + "@fluentui/scripts-tasks": "*", + "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/example-data": "^8.4.3", - "@fluentui/react": "^8.103.7", - "@fluentui/scripts": "^1.0.0", + "@fluentui/example-data": "^8.4.5", + "@fluentui/react": "^8.104.5", "@microsoft/load-themed-styles": "^1.10.26", "flamegrill": "0.2.0", "lodash": "^4.17.15", diff --git a/apps/perf-test/src/scenarioIterations.js b/apps/perf-test/src/scenarioIterations.ts similarity index 87% rename from apps/perf-test/src/scenarioIterations.js rename to apps/perf-test/src/scenarioIterations.ts index 1e81dfe7943cbc..e04633b61ae235 100644 --- a/apps/perf-test/src/scenarioIterations.js +++ b/apps/perf-test/src/scenarioIterations.ts @@ -1,5 +1,5 @@ // You don't have to add scenarios to this structure unless you want their iterations to differ from the default. -const scenarioIterations = { +export const scenarioIterations = { DocumentCardTitle: 1000, Breadcrumb: 1000, CommandBar: 1000, @@ -17,5 +17,3 @@ const scenarioIterations = { GroupedList: 2, GroupedListV2: 2, }; - -module.exports = scenarioIterations; diff --git a/apps/perf-test/src/scenarioNames.js b/apps/perf-test/src/scenarioNames.ts similarity index 87% rename from apps/perf-test/src/scenarioNames.js rename to apps/perf-test/src/scenarioNames.ts index e9bdcd6b11db34..4a2dd120f69fa5 100644 --- a/apps/perf-test/src/scenarioNames.js +++ b/apps/perf-test/src/scenarioNames.ts @@ -1,11 +1,9 @@ // You don't have to add scenarios to this structure unless you want their display name to differ // from their scenario name. -const scenarioNames = { +export const scenarioNames = { DetailsRowFast: 'DetailsRow (fast icons)', DetailsRowNoStyles: 'DetailsRow without styles', DocumentCardTitle: 'DocumentCardTitle with truncation', StackWithIntrinsicChildren: 'Stack with Intrinsic children', StackWithTextChildren: 'Stack with Text children', }; - -module.exports = scenarioNames; diff --git a/apps/perf-test/src/scenarioRenderTypes.js b/apps/perf-test/src/scenarioRenderTypes.ts similarity index 81% rename from apps/perf-test/src/scenarioRenderTypes.js rename to apps/perf-test/src/scenarioRenderTypes.ts index e30c3c4aaff06a..58018e5e5df72f 100644 --- a/apps/perf-test/src/scenarioRenderTypes.js +++ b/apps/perf-test/src/scenarioRenderTypes.ts @@ -9,15 +9,10 @@ */ const AllRenderTypes = ['mount', 'virtual-rerender', 'virtual-rerender-with-unmount']; -const DefaultRenderTypes = ['mount']; +export const DefaultRenderTypes = ['mount']; -const scenarioRenderTypes = { +export const scenarioRenderTypes = { ThemeProvider: AllRenderTypes, GroupedList: AllRenderTypes, GroupedListV2: AllRenderTypes, }; - -module.exports = { - scenarioRenderTypes, - DefaultRenderTypes, -}; diff --git a/apps/perf-test/tasks/perf-test.ts b/apps/perf-test/tasks/perf-test.ts index d11a357df84a30..ffe9d0c3364731 100644 --- a/apps/perf-test/tasks/perf-test.ts +++ b/apps/perf-test/tasks/perf-test.ts @@ -1,10 +1,11 @@ import fs from 'fs'; import path from 'path'; import flamegrill, { CookResults, Scenarios, ScenarioConfig, CookResult } from 'flamegrill'; -import scenarioIterations from '../src/scenarioIterations'; +import { scenarioIterations } from '../src/scenarioIterations'; import { scenarioRenderTypes, DefaultRenderTypes } from '../src/scenarioRenderTypes'; -import { argv } from '@fluentui/scripts'; +import { argv } from '@fluentui/scripts-tasks'; +type ScenarioSetting = Record; // TODO: consolidate with newer version of fluent perf-test // A high number of iterations are needed to get visualization of lower level calls that are infrequently hit by ticks. @@ -143,13 +144,15 @@ export async function getPerfRegressions() { const scenarioList = scenariosArg.length > 0 ? scenariosArg : scenariosAvailable; const scenarios: Scenarios = {}; - const scenarioSettings = {}; + const scenarioSettings: ScenarioSetting = {}; scenarioList.forEach(scenarioName => { if (!scenariosAvailable.includes(scenarioName)) { throw new Error(`Invalid scenario: ${scenarioName}.`); } - const iterations = iterationsArg || scenarioIterations[scenarioName] || iterationsDefault; - const renderTypes = scenarioRenderTypes[scenarioName] || DefaultRenderTypes; + const iterations: number = + iterationsArg || scenarioIterations[scenarioName as keyof typeof scenarioIterations] || iterationsDefault; + const renderTypes: string[] = + scenarioRenderTypes[scenarioName as keyof typeof scenarioRenderTypes] || DefaultRenderTypes; renderTypes.forEach(renderType => { const scenarioKey = `${scenarioName}-${renderType}`; @@ -217,7 +220,7 @@ export async function getPerfRegressions() { /** * Create test summary based on test results. */ -function createReport(scenarioSettings, testResults: CookResults) { +function createReport(scenarioSettings: ScenarioSetting, testResults: CookResults) { const report = '## [Perf Analysis (`@fluentui/react`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n' // Show only significant changes by default. @@ -235,13 +238,9 @@ function createReport(scenarioSettings, testResults: CookResults) { * Create a table of scenario results. * @param showAll Show only significant results by default. */ -function createScenarioTable(scenarioSettings, testResults: CookResults, showAll: boolean) { +function createScenarioTable(scenarioSettings: ScenarioSetting, testResults: CookResults, showAll: boolean) { const resultsToDisplay = Object.keys(testResults).filter( - key => - showAll || - (testResults[key].analysis && - testResults[key].analysis.regression && - testResults[key].analysis.regression.isRegression), + key => showAll || testResults[key].analysis?.regression?.isRegression, ); if (resultsToDisplay.length === 0) { diff --git a/apps/perf-test/webpack.config.js b/apps/perf-test/webpack.config.js index f066ba3fe9eef0..545d23fe7806e5 100644 --- a/apps/perf-test/webpack.config.js +++ b/apps/perf-test/webpack.config.js @@ -1,4 +1,4 @@ -const resources = require('../../scripts/webpack/webpack-resources'); +const { resources } = require('@fluentui/scripts-webpack'); // The issue here is making readable Flamegraphs that don't have complicated paths like: // ~Fabric.../../packages/react/lib/components/DetailsList/DetailsRow.base.js.DetailsRowBase.render diff --git a/apps/pr-deploy-site/chiclet-test.html b/apps/pr-deploy-site/chiclet-test.html index b353f9ec833e75..87fe6ecdd5bf6b 100644 --- a/apps/pr-deploy-site/chiclet-test.html +++ b/apps/pr-deploy-site/chiclet-test.html @@ -16,7 +16,7 @@ /> Chiclet Test Page diff --git a/apps/pr-deploy-site/index.html b/apps/pr-deploy-site/index.html index 0c14cc1bdc51e3..dd5086c2e3e46c 100644 --- a/apps/pr-deploy-site/index.html +++ b/apps/pr-deploy-site/index.html @@ -5,7 +5,7 @@ PR Deployed Sites diff --git a/apps/pr-deploy-site/just.config.ts b/apps/pr-deploy-site/just.config.ts index be6e56c8715f97..e398612f0585cb 100644 --- a/apps/pr-deploy-site/just.config.ts +++ b/apps/pr-deploy-site/just.config.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; -import { series, task, copyInstructionsTask, copyInstructions, cleanTask } from '@fluentui/scripts'; -import { findGitRoot, getAllPackageInfo } from '@fluentui/scripts/monorepo/index'; +import { series, task, copyInstructionsTask, copyInstructions, cleanTask } from '@fluentui/scripts-tasks'; +import { findGitRoot, getAllPackageInfo } from '@fluentui/scripts-monorepo'; task('clean', cleanTask()); diff --git a/apps/pr-deploy-site/package.json b/apps/pr-deploy-site/package.json index 1358952b5e2e3e..27d5253cdb438f 100644 --- a/apps/pr-deploy-site/package.json +++ b/apps/pr-deploy-site/package.json @@ -13,6 +13,7 @@ "license": "MIT", "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/scripts": "^1.0.0" + "@fluentui/scripts-tasks": "*", + "@fluentui/scripts-monorepo": "*" } } diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index bf324b5371c9d1..b3041f7ac06d9e 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -3,7 +3,7 @@ const fs = require('fs'); const path = require('path'); -const { findRepoDeps, findGitRoot } = require('@fluentui/scripts/monorepo'); +const { findRepoDeps, findGitRoot } = require('@fluentui/scripts-monorepo'); const gitRoot = findGitRoot(); diff --git a/apps/public-docsite-resources/just.config.ts b/apps/public-docsite-resources/just.config.ts index e690e4c847eab7..4e67a31a4ac52e 100644 --- a/apps/public-docsite-resources/just.config.ts +++ b/apps/public-docsite-resources/just.config.ts @@ -1,4 +1,4 @@ -import { preset, task, series } from '@fluentui/scripts'; +import { preset, task, series } from '@fluentui/scripts-tasks'; import { generatePageJsonFiles } from '@fluentui/api-docs'; preset(); @@ -6,5 +6,5 @@ preset(); task('generate-json', () => generatePageJsonFiles(require('./config/api-docs'))); // copied from scripts/just.config.js with addition of generate-json -task('build', series('clean', 'copy', 'sass', 'generate-json', 'ts')).cached(); +task('build', series('clean', 'copy', 'sass', 'generate-json', 'ts')).cached!(); task('dev', series('copy', 'sass', 'generate-json', 'webpack-dev-server')); diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 22570fb0f8d53b..f058fbe0abb777 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -27,20 +27,22 @@ "update-snapshots": "just-scripts jest -u" }, "devDependencies": { - "@fluentui/api-docs": "^8.2.4", + "@fluentui/api-docs": "^8.2.5", "@fluentui/eslint-plugin": "*", - "@fluentui/scripts": "^1.0.0" + "@fluentui/scripts-monorepo": "*", + "@fluentui/scripts-tasks": "*", + "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.104.5", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.5.36", - "@fluentui/react-docsite-components": "^8.10.34", - "@fluentui/font-icons-mdl2": "^8.5.4", - "@fluentui/set-version": "^8.2.3", - "@fluentui/theme-samples": "^8.7.34", - "@fluentui/react-monaco-editor": "^1.7.34", + "@fluentui/azure-themes": "^8.5.45", + "@fluentui/react-docsite-components": "^8.11.8", + "@fluentui/font-icons-mdl2": "^8.5.6", + "@fluentui/set-version": "^8.2.4", + "@fluentui/theme-samples": "^8.7.43", + "@fluentui/react-monaco-editor": "^1.7.43", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-resources/webpack.serve.config.js b/apps/public-docsite-resources/webpack.serve.config.js index 00dfb3f33ec9c1..e0af52225d409c 100644 --- a/apps/public-docsite-resources/webpack.serve.config.js +++ b/apps/public-docsite-resources/webpack.serve.config.js @@ -1,7 +1,6 @@ // @ts-check const path = require('path'); -const getResolveAlias = require('@fluentui/scripts/webpack/getResolveAlias'); -const resources = require('@fluentui/scripts/webpack/webpack-resources'); +const { resources, getResolveAlias } = require('@fluentui/scripts-webpack'); const { addMonacoWebpackConfig } = require('@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfig'); const BUNDLE_NAME = 'demo-app'; diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index a70c5b93cf021c..1d38b8462e08ae 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -1,5 +1,5 @@ const rootMain = require('../../../.storybook/main'); -const { getPackageStoriesGlob } = require('@fluentui/scripts/storybook'); +const { getPackageStoriesGlob } = require('@fluentui/scripts-storybook'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index d3a8ccce35dbf1..90cd58429aa7bc 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -28,9 +28,9 @@ export const parameters = { ['Quick Start', 'Styling Components', 'Positioning Components', 'Component Poster', 'Server-Side Rendering'], 'Migration', [ - 'Overview', - 'Important changes', - 'Planning your journey', + 'Getting Started', + 'Keeping Design Consistent', + 'Handling Breaking Changes', 'from v8', ['Component Mapping', 'Color Mapping', 'Troubleshooting'], 'from v0', diff --git a/apps/public-docsite-v9/just.config.ts b/apps/public-docsite-v9/just.config.ts index 6ba74c8de1f030..242d94f1f02109 100644 --- a/apps/public-docsite-v9/just.config.ts +++ b/apps/public-docsite-v9/just.config.ts @@ -1,5 +1,5 @@ -import { preset, task } from '@fluentui/scripts'; +import { preset, task } from '@fluentui/scripts-tasks'; preset(); -task('build', 'build:node-lib').cached(); +task('build', 'build:node-lib').cached!(); diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index eca38eb657a5ab..c436c09ee01c96 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -18,18 +18,18 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/scripts": "^1.0.0" + "@fluentui/scripts-storybook": "*", + "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.104.5", "@fluentui/react-northstar": "^0.65.0", "@fluentui/react-icons-northstar": "^0.65.0", - "@fluentui/scripts": "^1.0.0", "@fluentui/storybook": "^1.0.0", - "@fluentui/react-components": "^9.7.2", - "@fluentui/react-storybook-addon": "^9.0.0-rc.1", - "@fluentui/react-theme": "^9.1.3", - "@griffel/react": "^1.4.2", + "@fluentui/react-components": "^9.9.1", + "@fluentui/react-storybook-addon": "9.0.0-rc.1", + "@fluentui/react-theme": "^9.1.5", + "@griffel/react": "^1.5.2", "react": "17.0.2", "react-dom": "17.0.2", "react-window": "^1.8.6", diff --git a/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx similarity index 60% rename from apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx rename to apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx index ec77bd58cc644d..b81cda6dc04b8f 100644 --- a/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx @@ -1,18 +1,20 @@ import { Meta } from '@storybook/addon-docs'; - + -## Child Window Rendering +## Advanced Configuration + +### Child Window Rendering When rendering on the main browser window, many components need access to `window` or `document` for applying styling, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in `iframe` elements. In these cases, the target element is hosted in a different context, and thus have a different `window` reference. To aid in providing components with the correct instances of `window` or `document`, React context can be used to provide the tree of React components with the correct instance. -### Configuring rendering +#### Configuring rendering We need to configure a renderer for `makeStyles()` and pass a `targetDocument` to `RendererProvider` & `FluentProvider`: -```js +```jsx import { createDOMRenderer, FluentProvider, RendererProvider } from '@fluentui/react-components'; import * as React from 'react'; @@ -29,3 +31,30 @@ function MyComponent(props) { ``` You can check complete example at [CodeSandbox](https://codesandbox.io/s/fluentuireact-components-render-into-iframe-l62ke). + +### Content Security Policies + +To add `nonce` attribute need for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), please use `styleElementAttributes` to specify it: + +```jsx +import { createDOMRenderer, FluentProvider, RendererProvider } from '@fluentui/react-components'; +import * as React from 'react'; + +function MyComponent(props) { + const { children } = props; + const renderer = React.useMemo( + () => createDOMRenderer(document, { styleElementAttributes: { nonce: 'random' } }), + [], + ); + + return ( + + {children} + + ); +} +``` + +## References + +- https://griffel.js.org/react/api/create-dom-renderer diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.Card.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.Card.stories.mdx new file mode 100644 index 00000000000000..811fa3af181b20 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.Card.stories.mdx @@ -0,0 +1,227 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Card Migration + +## Overview + +Before: + +```tsx +import { Card } from '@fluentui/react-northstar'; +const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicing elit.; +``` + +After: + +```tsx +import { Card } from '@fluentui/react-components/unstable'; +const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicing elit.; +``` + +## How to migrate props: + +| Card props | migration guide | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| variables, styles | see Migrate style overrides in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| centered | REMOVED: see Migrate centered prop in this document | +| compact | use `size="small"` | +| disabled | REMOVED: No equivalent functionality. Can be created by overriding the styles. | +| elevated | REMOVED: All cards are now elevated by default. To change that, use the `appearance` property. | +| expandable | REMOVED: No equivalent functionality. | +| fluid | REMOVED: see Migrate fluid prop in this document | +| ghost | use `appearance="subtle"` | +| inverted | use `appearance="filled-alternative"` | +| size | keep it as is. Values: `small`, `medium`(default) and `large` | + +## Migrate style overrides + +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). + +### Example for migrate boolean `variables`: + +Before: + +```tsx +// in COMPONENT_NAME.tsx +import { Card } from '@fluentui/react-northstar'; + +export const Component = () => ; + +// in Card-styles.ts +export const CardStyles1 = { + root: ({ variables: { isActionCard } }) => ({ + ...(isActionCard && { + color: colors.grey['250'], + }), + }), +}; +``` + +After: + +```tsx +// in COMPONENT_NAME.tsx +import { Card } from '@fluentui/react-components/unstable'; +import { useStyles } from './COMPONENT_NAME.styles.ts'; + +export const Component = () => { + const classes = useStyles(); + + return ; +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles, tokens } from '@fluentui/react-components/unstable'; + +export const useStyles = makeStyles({ + actionCard: { + color: colors.colorNeutralForeground1, + }, +}); +``` + +### Example for migrate namespaced styles, with conditional styles via `variableProps`: + +Before: + +```tsx +// in COMPONENT_NAME.tsx +import { Card, useUIProviderContext } from '@fluentui/react-northstar'; + +export const Component = props => { + const { vars } = useUIProviderContext(); + const { enableUsingChatListGroupTitleAsHeader } = props; + return ( + + ); +}; + +// in Card-namespace-flyout.ts +export default { + root: { + filterCard: ({ variableProps: { enableUsingChatListGroupTitleAsHeader } }) => ({ + ...(enableUsingChatListGroupTitleAsHeader && { + height: '3rem', + width: '8rem', + minWidth: '8rem', + }), + }), + }, +}; +``` + +After: + +```tsx +// in COMPONENT_NAME.tsx +import { Card, mergeClasses } from '@fluentui/react-components/unstable'; +import { useStyles } from './COMPONENT_NAME.styles.ts'; + +export const Component = props => { + const classes = useStyles(); + + return ( + + ); +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles } from '@fluentui/react-components/unstable'; + +export const useStyles = makeStyles({ + chatListGroupTitleAsHeader: { + height: '3rem', + width: '8rem', + minWidth: '8rem', + }, +}); +``` + +## Migrate `centered` prop + +Can be achieved by overriding the styles of the Card component. + +Before: + +```tsx +import { Card } from '@fluentui/react-northstar'; + +const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicing elit.; +``` + +After: + +```tsx +import * as React from 'react'; +import { makeStyles } from '@fluentui/react-components/unstable'; +import { Card } from '@fluentui/react-components/unstable'; + +const useStyles = makeStyles({ + centeredCard: { + justifyItems: 'center', + }, +}); + +export const CenteredCard = () => { + const styles = useStyles(); + + return ( + +

Lorem ipsum dolor sit amet.

+ + ); +}; +``` + +## Migrate `size` prop + +All cards are fluid by default. To change that, use a parent container with a defined size. + +Before: + +```tsx +import { Card } from '@fluentui/react-northstar'; + +const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicing elit.; +``` + +After: + +```jsx +import * as React from 'react'; +import { makeStyles } from '@fluentui/react-components/unstable'; +import { Card } from '@fluentui/react-components/unstable'; + +const useStyles = makeStyles({ + parent: { + width: '500px', + }, +}); + +export const SizedCard = () => { + const styles = useStyles(); + + return ( +
+ +

Lorem ipsum dolor sit amet.

+ +
+ ); +}; +``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardBody.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardBody.stories.mdx new file mode 100644 index 00000000000000..fabc5c78b04f23 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardBody.stories.mdx @@ -0,0 +1,35 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Card Body Migration + +## Overview + +This component is not needed anymore. Instead, pass any content under the main Card component. + +Before: + +```jsx +import { Card, CardBody } from '@fluentui/react-northstar'; + +export const CardBodyExample = () => ( + + +

Lorem ipsum dolor sit amet.

+ + +); +``` + +After: + +```jsx +import { Card } from '@fluentui/react-components/unstable'; + +export const CardBodyExample = () => ( + +

Lorem ipsum dolor sit amet.

+ +); +``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardFooter.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardFooter.stories.mdx new file mode 100644 index 00000000000000..f4a6881242dfb4 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardFooter.stories.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Card Footer Migration + +## Overview + +Before: + +```tsx +import { CardFooter } from '@fluentui/react-northstar'; + +const Component = () => Lorem ipsum; +``` + +After: + +```tsx +import { CardFooter } from '@fluentui/react-components/unstable'; + +const Component = () => ; +``` + +## How to migrate props: + +| CardFooter props | migration guide | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| variables, styles | see Migrate style overrides in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| fitted | REMOVED: By default, all Footers are fitted | + +## Migrate style overrides + +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). + +### Example for migrate boolean `variables`: + +Follow the same patterns as in the Card [migration guide](?path=/docs/concepts-migration-from-v0-components-card-migration-card--page). diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardHeader.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardHeader.stories.mdx new file mode 100644 index 00000000000000..c1e2c5b9fb92eb --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardHeader.stories.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Card Header Migration + +## Overview + +Before: + +```tsx +import { CardHeader } from '@fluentui/react-northstar'; + +const Component = () => Lorem ipsum; +``` + +After: + +```tsx +import { CardHeader } from '@fluentui/react-components/unstable'; + +const Component = () => ; +``` + +## How to migrate props: + +| CardHeader props | migration guide | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| variables, styles | see Migrate style overrides in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| fitted | REMOVED: by default, all headers are fitted | + +## Migrate style overrides + +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). + +### Example for migrate boolean `variables`: + +Follow the same patterns as in the Card [migration guide](?path=/docs/concepts-migration-from-v0-components-card-migration-card--page). diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardPreview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardPreview.stories.mdx new file mode 100644 index 00000000000000..1ef2a8f250614d --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardPreview.stories.mdx @@ -0,0 +1,49 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Card Preview Migration + +## Overview + +Before: + +```tsx +import { CardPreview, Image } from '@fluentui/react-northstar'; + +const Component = () => ( + + Preview of a Word document + +); +``` + +After: + +```tsx +import { CardPreview } from '@fluentui/react-components/unstable'; + +const Component = () => ( + + Preview of a Word document + +); +``` + +## How to migrate props: + +| CardPreview props | migration guide | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| variables, styles | see Migrate style overrides in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| fitted | REMOVED: by default, all Previews are fitted | +| horizontal | REMOVED: no longer supported | + +## Migrate style overrides + +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). + +### Example for migrate boolean `variables`: + +Follow the same patterns as in the Card [migration guide](?path=/docs/concepts-migration-from-v0-components-card-migration-card--page). diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx new file mode 100644 index 00000000000000..c6eb2c09fbf7ae --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx @@ -0,0 +1,414 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Toolbar Migration + +## Overview: + +Before: + +```tsx +import { Toolbar } from '@fluentui/react-northstar'; +const Component = () => ( + + ), + key: 'bold', + kind: 'toggle', + active: state.bold, + title: 'Toggle bold', + }, + { + icon: ( + + ), + key: 'italic', + kind: 'toggle', + active: state.italic, + title: 'Toggle italic', + }, + { + icon: ( + + ), + key: 'underline', + kind: 'toggle', + active: state.underline, + title: 'Toggle underline', + }, + { + key: 'divider-1', + kind: 'divider', + }, + { + icon: ( + + ), + key: 'font-size', + title: 'Font size', + }, + { + icon: ( + + ), + key: 'remove-format', + title: 'Remove formatting', + }, + { + key: 'divider-2', + kind: 'divider', + }, + { + icon: ( + + ), + key: 'outdent', + title: 'Outdent', + }, + { + icon: ( + + ), + key: 'indent', + title: 'Indent', + }, + { + key: 'divider-3', + kind: 'divider', + }, + { + icon: ( + + ), + key: 'more', + active: state.more, + title: 'More', + menu: [ + { + key: 'quote', + content: 'Quote', + icon: , + }, + { + key: 'link', + content: 'Link', + icon: , + disabled: true, + }, + { + key: 'code', + content: 'Code snippet', + icon: , + }, + ], + }, + ]} + /> +); +``` + +After: + +```tsx +import { Toolbar, ToolbarToggleButton, ToolbarDivider, ToolbarButton } from '@fluentui/react-components'; + +export const Component = () => { + + } /> + } /> + } /> + + } /> + } /> + + } /> + } /> + + + + } /> + + + + + New + New Window + Open File + Open Folder + + + + ; +}; +``` + +## Controlled + +V0 only allows to set an item active in a controlled way through `active` property in a toolbar item. V9 Toolbar doesn't need that by default by can also be controlled. + +V9 Controlled: + +```javascript +import { + Toolbar, + ToolbarToggleButton, + ToolbarDivider, + ToolbarButton +} from '@fluentui/react-components'; + + + +const Component = () => { + const [checkedValues, setCheckedValues] = React.useState>({ + textOptions: ['bold', 'italic'], + }); + const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => { + setCheckedValues(s => { + return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems }; + }); + }; + + return ( + + } name="textOptions" value="bold" /> + } name="textOptions" value="italic" /> + } + name="textOptions" + value="underline" + /> + + ); +} +``` + +## How to migrate props: + +| `Toolbar` props | migrate guide | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| accessibility | see [migrate-custom-accessibility.md](../migrate-custom-accessibility.md) | +| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | +| ref, key | keep it as is | +| getOverflowItems | REMOVED: Use @fluentui/react-overflow to render overflow items | +| items | REMOVED: Only supports children API | +| onOverflow | use `isOverflowing` from `useOverflowMenu` from @fluentui/react-overflow. See [migrate overflow props](#migrate-%60overflow%60-props) | +| onOverflowOpenChange | REMOVED: handle the needed changes in the overflow component. See [migrate overflow props](#migrate-%60overflow%60-props) | +| overflow | REMOVED: Use @fluentui/react-overflow | +| overflowItem | REMOVED: Should be implemented in the Overflow component that is using `useOverflowMenu`. See [migrate overflow props](#migrate-%60overflow%60-props) | +| overflowOpen | REMOVED: Should be handled by the component that will be using `useOverflowMenu` | +| overflowSentinel | REMOVED: Can be set as `padding` in the `Overflow` component from @fluentui/react-overflow. See [migrate overflow props](#migrate-%60overflow%60-props) | + +| `ToolbarItem` props | migrate guide | +| ------------------- | ------------------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | +| variables, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | +| circular | replace with `shape="circular"` | +| disabled | keep it as is | +| disabledFocusable | keep it as is | +| fluid | replace with `block` | +| icon | keep it as is. | +| menu | REMOVED: use `@fluentui/react-menu` | +| menuOpen | REMOVED: use `@fluentui/react-menu` | +| onMenuOpenChange | REMOVED: use `@fluentui/react-menu` | +| popup | REMOVED: use `@fluentui/react-popover`, [see example](?path=/docs/preview-components-toolbar--default#with-popover) | +| wrapper | REMOVED | + +`ToolbarCustomItem` in V9 is replaced by direct adding the content as `Toolbar` children. + +V0 + +```javascript + + Click Here} /> + +``` + +V9 + +```javascript + + Click Here + +``` + +Here is comparison for both versions: [Sandbox](https://codesandbox.io/s/toolbar-migration-fluentui-iyhl1j) + +--- + +## Migrate style overrides + +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](../migrate-styles.md). + +### Example for migrate boolean `variables`: + +Before: + +```tsx +// in COMPONENT_NAME.tsx +import { Toolbar } from '@fluentui/react-components'; + +export const Component = () => ; + +// in toolbar-button-styles.ts +export const toolbarStyles = { + root: ({ variables: { fluid } }) => ({ + ...(fluid && { + width: '100%', + }), + }), +}; +``` + +After: + +```tsx +// in COMPONENT_NAME.tsx +import { useStyles } from './COMPONENT_NAME.styles.ts'; +import { Toolbar, ToolbarButton } from '@fluentui/react-components'; + +export const Component = () => { + const classes = useStyles(); + return ( + + Italic + + ); +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles } from '@fluentui/react-components'; + +export const useStyles = makeStyles({ + breakoutRoomsAssignmentToolbar: { + width: '100%', + }, +}); +``` + +### Example for migrate namespaced styles, with conditional styles via `variableProps`: + +Before: + +```tsx +// in COMPONENT_NAME.tsx +import { Toolbar, useUIProviderContext } from '@fluentui/react-components'; + +export const Component = props => { + const { vars } = useUIProviderContext(); + const { isLive } = props; + return ; +}; + +// in toolbar-styles.ts +export default { + root: ({ variables: { isLive } }) => ({ + ...(isLive && { + height: '100%', + alignItems: 'center', + color: isLive ? colorSchemeSilver.foreground1 : 'inherit', + }), + }), +}; +``` + +After: + +```tsx +// in COMPONENT_NAME.tsx +import { useStyles } from './COMPONENT_NAME.styles.ts'; +import { Toolbar, Button, mergeClasses } from '@fluentui/react-components'; + +export const Component = props => { + const classes = useStyles(); + const { isLive } = props; + return ( + + Italic + + ); +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +export const useStyles = makeStyles({ + tabItemToolbar: { + height: '100%', + display: 'inline-flex', + alignItems: 'center', + color: 'inherit', + }, + liveTabItemToolbar: { + color: tokens.colorPaletteSilverForeground1, + }, +}); +``` + +## Migrate `overflow` props + +Before: + +```tsx +import { Toolbar } from '@fluentui/react-components'; +const Component = () => ( + { + setOverflowOpen(overflowOpen); + }} + getOverflowItems={startIndex => itemData.slice(startIndex)} + /> +); +``` + +After: + +See [Toolbar Overflow Items example](https://react.fluentui.dev/?path=/docs/preview-components-toolbar--default#overflow-items) diff --git a/apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.stories.mdx new file mode 100644 index 00000000000000..9f772b67a58b97 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/GettingStarted.stories.mdx @@ -0,0 +1,148 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Getting started migrating to v9 + +If you are considering migrating to Fluent UI React version 9 then we would first like to **_thank you_** and let you know how excited we are for you to experience all the improvements and features we have been working on. + +## Major changes and why we made them + +### Build-time styles + +In previous versions, styles were created and applied at runtime. Components used a theme object on React.Context to create styles. + +In v9, styles are created at build time to define class names. Components apply these class names at runtime based on state. A theme object is used to set CSS variables in the DOM which component styles reference. + +[Griffel](https://griffel.js.org/), a CSS-in-JS framework, provides build-time transforms, atomic CSS, and type-safe styles for v9. + +Build-time styles significantly improve rendering performance and can be optimized to reduce bundle size. + +### Design tokens + +In previous versions, the theme defined properties specific to component, component part, and state. For example, `inputTextHovered` or `buttonBorderDisabled`. + +In v9, the theme properties are defined from the design tokens names. Design tokens are specific to neutral/brand, usage, and state. For example, `colorNeutralForeground2Hover`, `colorBrandForegroundLinkPressed`, or `spacingVerticalXL`. + +The Fluent 2 design language provides a practical number of tokens useful to all components without degrading performance. As new components are added, new tokens are not required. This makes each theme less fragile and allows components to depend on token values being defined. + +### TSX/JSX children + +In previous versions, components had props that accepted data objects or arrays. It was the component's responsibility to render each child based on the data. Components often exposed callbacks so callers could override rendering children. + +For example, v8's `ContextualMenuButton` `menuProps` prop would be passed a hierarchy of menu items to render. + +In v9, most components support declaring the children as TSX/JSX elements. Component children are responsible for rendering themselves. + +For example, `MenuList` can have `MenuItem`, `MenuDivider`, `MenuItemRadio`, etc. as children. + +Declarative children provide idiomatic React development. + +- Children can be full-fledged components supporting data and event binding and access context. +- Components don't have to provide render callbacks as child components render themselves. +- Components can be extended with custom child types. +- Components don't have to define additional types to express hierarchy. +- The caller controls React performance tuning techniques like memoization and lazy loading. + +### Slots + +In previous versions, components would expose render callback props. These allowed callers to customize how a component part (e.g. header, footer, item, content) were rendered. + +In v9, components define slots that allow callers to replace a component part with their own. Slot props are like the previous callbacks but more powerful; they support literals, TSX/JSX, or render functions. +See the [Customizing Components with Slots](/docs/concepts-developer-customizing-components-with-slots--page) topic for more details. + +As a core part of the v9 architecture, slots provide a consistent extensibility mechanism across components. Components no longer need to define their own unique render prop callbacks. Slots provide greater flexibility as they accept literals, TSX/JSX, or render functions. + +## Expected challenges + +There will be challenges to overcome during migration. The good news is Fluent UI React v9 was designed to be adopted incrementally and used side-by-side with v0/v8 components. + +> Think of migration as a process of incrementally adopting components from a new library and phasing out old components rather than as a version bump upgrade from v0 or v8. + +### Design differences + +Fluent 1 design (v0, v8) and Fluent 2 design (v9) look different. The differences are subtle, but noticeable. +You may decide you are okay living with some visual differences during migration. + +Alternatively, you can make everything look like Fluent 1 or Fluent 2, but it takes some extra effort. +We've provided some techniques and tools. +See [Keeping Design Consistent](/docs/concepts-migration-keeping-design-consistent--page). + +### Custom styles + +Version 9 components no longer have a custom styles prop, a runtime theme object on React context, or default SASS support. +If you have deeply customized the styles of components from previous versions, it will require effort to bring them forward. + +We strongly recommend using the default component styles of Fluent 2 and leave custom styles behind. +The default styles provide a high-performance, consistent, accessible, and familiar experience across products. + +### Props changes + +In v9, component props differ from previous versions. You will need to update code to use new components. +We recommend you make the necessary updates in your codebase directly. We have provided some shim components you can consider using temporarily to migrate faster. + +### Build updates + +You may need to adjust your build dependencies to support multiple versions of Fluent UI React. +You may also need to make change to take advantage of tree-shaking, CSS bundling and minification, and browser-matrix compatibility. + +### Temporary bundle size increase + +During migration you will likely depend on both v9 and previous versions. This can increase the bundle size of your application. +As you retire old components, tree shaking will reduce your bundle size. Since v9 components tend to be smaller than previous versions, you should see a bundle size reduction when migration is complete. + +## Stages of migration + +If you have a large codebase, it will be helpful to break up your plan into stages. + +1. Get familiar with v9 + +Read the documentation, try using several components, and inspect the resulting HTML and CSS. Take a look at our roadmap to understand when new v9 components will be shipping vs. which previous components you will need to continue using for now. + +2. Assess your application + +Analyze your codebase to measure how many places you use Fluent UI, how much custom styling you do, how much complex data binding you do, and what architectural abstractions you have in place. + +3. Decide when to migrate (milestones) + +Consider how you might flight new components to vet them in your application. + +Decide if you want to migrate your entire codebase at once, migrate a single component type (i.e. horizontal migration), or migrate all components in a single experience or page (i.e. vertical migration). + +Plan out some milestones where you can verify all your tests pass, you meet your performance benchmarks, and you can confidently ship using new components. + +4. Migrate some experiences/components + +We recommend migrating `Button` as your first component. It tends to be used across an application, has a straightforward interface, and provides performance improvements. Updating `ContextualMenuButton` to `MenuButton` will expose you to converting from data structures to declarative children. + +Record how much effort each replacement requires and use this information when planning out future component migrations. Monitor bundle size, build time, and render performance as you adopt v9. + +5. Build new experiences in v9 + +If you are adding new experiences and features to your product, we strongly recommend building them with v9, rather than incurring additional migration debt. + +6. Incrementally migrate core experiences + +Plan out a rinse-and-repeat plan to migrate your core experiences to v9. From previous stages, you should feel confident handling any migration challenges. + +7. Migrate the remaining long tail + +Build a list of the remaining v8 components and check against the roadmap to see when there will be v9 replacements. + +Consider building a placeholder component using the v9 hooks composition model and new styling system. Fluent UI React is open source and welcomes contributions! + +## Migrating your first component + +We'll use `Button` as an example. + +1. Locate all the usages of Button you want to replace (e.g. ActionButton, PrimaryButton, SplitButton). +2. Add @fluentui/react-components to associated package.json files. +3. Update import statements for Button from @fluentui/react to @fluentui/react-components +4. At each place you use Button, update the props to match v9. + + For example, `` would be replaced with ` + + + + + + + New Item + Open Item + ... + + + +``` + +### You can map data props to children + +If you have complex code that builds up the data props, you can author your own map call to convert the data to children. + +Continuing the contextual menu button example: +If you want to keep your `menuProps` data, you can map the items to `MenuItem` children. + +```tsx + + + + + + + + {menuProps.map(menuItem => ( + {menuItem.text} + ))} + + + +``` + +## Breaking Change: Render props to slots + +In v9, components provide slots to customize parts. +If you use the render props callbacks to customize the children, items, or parts of a component, you will need to update them to use slots. + +For example, the v8 CheckBox has an onRenderLabel() callback. + +```tsx +const onRenderBoldLabel = (props: ITextFieldProps) => {props.label} + + +``` + +To customize the label for a v9 CheckBox, you would use the label slot. +The slot accepts a string literal, JSX, or a render function. + +```tsx +const StrongLabel = (props: LabelProps) => + +Customer Name +``` + +## Breaking Change: Custom styles to className + +In v9, styles are customized by using makeStyles and mergeClasses to set the className prop. +The className prop can be set on the component as well as on individual slots. + +If you have customized v8 components using the styles prop and passed custom style objects, you will need to convert them to class names. +There may not be a one-to-one mapping between the parts from a v8 styles object to the slots of a v9 component. + +For example, a v8 Persona with customized styles to display the primary text as steel blue and the secondary text to have extra top and left margin. + +```tsx +const personaStyles: Partial = { + primaryText: { + color: 'steelblue', + }, + secondaryText: { + margin: '5px 0 0 10px', + }, +}; + +; +``` + +To keep this customization in v9 Persona, you will need to create styles with makeStyles and then apply them to the associated slot. + +```tsx +const usePersonaStyles = makeStyles({ + primaryText: { + color: 'steelblue', + }, + secondaryText: { + ...shorthands.margin('5px', '0', '0', '10px'), + }, +}); + +const personaStyles = usePersonaStyles(); + +//... + +; +``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx deleted file mode 100644 index bba2de6cb427a7..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx +++ /dev/null @@ -1,182 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Important changes you should know about - -v9 introduces several paradigm shifts that were necessary to improve performance, ease development, and reduce bundle size. -This resulted in some breaking changes you will need to handle as you migrate. - -## Props vs. Children - -### v8 - -In v8, several components had props that accepted arrays of data and used a map function to render the children. -To allow control over rendering individual items, render props callbacks were added. - -Components that rendered large lists of items had lots of specific behavior (such as virtualization) hard coded within the component. - -For example, `ContextualMenuButton` takes `menuProps` containing menu data, -an optional `menuAs` to control the rendering of menu items, -and an optional `onMenuClick`. - -```tsx -const menuProps: IContextualMenuProps = { - items: [ - { - key: 'emailMessage', - text: 'Email message', - }, - { - key: 'calendarEvent', - text: 'Calendar event', - }, - ], - directionalHintFixed: true, -}; - -function _getMenu(props: IContextualMenuProps): JSX.Element { - return ; -} - -function _onMenuClick(ev?: React.SyntheticEvent) { - console.log(ev); -} - -; -``` - -### v0 - -For v0, array props are also not used. Render props callback works very similarly in v9 as it was in v0. - -### v9 - -Components in v9 give you full control of rendering items by allowing you to pass child elements instead of data props. -This allows you to define and compose children however you like: declaring JSX elements or writing your own map function. -You don't have to define and pass separate renderprops functions to control the rendering of children. - -This means that your existing code passing arrays of data will need to be updated to render child elements. - -In v9, you get much more control over menus including what component triggers the display of the menu or submenu. -By specifying the children you directly control the rendering of each child and can wire up onClick handlers directly -rather than having to figure out which menuItem was clicked. - -```tsx - - - - - - - Email message - Calendar event - - - -``` - -You can continue to leverage existing data structures by writing a map function. -With the map function separate from the Menu component, you get a lot more control. - -```tsx - - - - - - - {menuItems.map(item => {item.name}) - - - -``` - -## Custom Styling & Theming - -There are significant styling and theming differences between v8 and v9. - -### v8 - -In v8, the `styles` prop on components accepts javascript objects (IStyle). -These could be parameterized to generate styles at runtime. -Unfortunately, this has a negative impact on rendering performance. - -The ThemeProvider provided a theme object on the context. -The theme contains a collection of component styles, color palettes, fonts, and spacing values. -Components consumed the theme through the theme object in state or by using the `useTheme` hook. -Legacy themes are supported through loadTheme and the theme customizer. - -For example, a `Button` can be styled to look like a primary button when hovered. - -```tsx -const theme = useTheme(); - -const customButtonStyles: IButtonStyles = { - rootHovered: { - backgroundColor: theme.semanticColors.primaryButtonBackground, - color: theme.semanticColors.primaryButtonText, - }, -}; - -return ( - - - -); -``` - -### v0 - -In v0, `styles` and `design` prop on components accept javascript objects. Styling and theming is also possible by using `variables` and extending the theme with custom varables. -Flexible system of design variables allowed different consumers to extend their design systems in different ways. In v9, variables API is no longer available as it was one of the reasons for frequent style calculation during runtime. Instead, there was a different approach chosen in order to improve rendering performance - style overrides or CSS variables can be used to achieve similar functionality. - -Due to the high flexibility of variables, it is not possible to provide a straightforward migration plan for them. You can use the v0 debug panel to observe what styles are being applied based on variable change and transform those styles using [style transformation tool](aka.ms/perestroika). - -### v9 - -In v9, styles are created with the `makeStyles` function and combined with the `mergeClasses` function from [`@griffel/react`](https://github.com/microsoft/griffel). -Components apply styles through the `className` property. -The styles are created at build time, but never runtime (requires the use of `griffel`'s build-time optimization plugin). -This allows styles to be deduped, optimized, and bundled for significantly smaller bundles and improved CSS performance. - -There is a new theme provider in v9 named `FluentProvider` that replaces v8's `ThemeProvider`. - -FluentProvider provides a theme using css variables referencing design tokens. -The design tokens provide global colors, fonts, and spacing. -There are alias tokens for general purpose component parts (e.g. background, border). -Components consume the theme, by importing `tokens`, a collection of css var usage, and using them in `makeStyles`. - -FluentProvider can be nested multiple times in the hierarchy to create theme variations and `dir` changes for a scoped set of components. -FluentProvider does **not** have a default theme like ThemeProvider, so you'll need to set the theme at your application's root for the components to be styled correctly. - -For example, the same `Button` customization as before would be done like this. - -```tsx -const useStyles = makeStyles({ - base: { - ':hover': { - backgroundColor: tokens.colorBrandBackground, - color: tokens.colorNeutralForegroundOnBrand, - }, - }, -}); - -const customButtonStyles = useStyles(); -return ; -``` - -## Component Part Customization - -In v8, parts of components were customized through render props callbacks. -Part-specific callbacks were provided by individual components. -Many callbacks included data payloads to allow you to pass data per item into a callback. - -In v9, part customization is done through a slots mechanism. -The props for a component can define slots that allow you to replace the entire part with JSX, -properties to pass to the default slot component style, -or a render function. - -See the [Customizing Components with Slots](/docs/concepts-developer-customizing-components-with-slots--page) topic for detailed information on slots. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx new file mode 100644 index 00000000000000..1780bffbb179a2 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx @@ -0,0 +1,147 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Keeping Design Consistent + +Fluent 2 is the next version of the Fluent design language. +Fluent UI React v9 uses the Fluent 2 design language for layout and style of components. + +The design language defines a set of design tokens. +Themes consist of a property/value pair for each token. +Designers reference these tokens in the design specs detailing the layout and style of components. + +The themes in v0 and v8 were specific to component, component part, and state. +While this allowed for fine-grained control over each component's style, it led to an explosion of theme properties. +Too many theme properties can make defining new themes an arduous chore, can make themes fragile when properties are added or removed, and can leave dead theme properties behind when components stop using them. + +In v9, the theme properties are called design tokens. +They are much more general purpose. +They are partitioned by neutral vs. brand, usage (e.g. foreground, background, stroke), and state. + +This topic covers ways you can maintain a consistent theme and style during migration. + +## You can choose to live with and limit style differences during migration + +The visual style differences between v9 and previous versions are slight. +If your migration effort is small, you can migrate all at once, or if your users are OK with some inconsistency, you might decide to avoid extra effort and live with it. + +For example, you can see differences between v8's and v9's Button components when you put them side-by-side. +However, the design differences between v8's Input and v9's Button are difficult to detect. + +You can reduce the visual friction between Fluent 1 and Fluent 2 designs during migration by migrating all instances of one component type to v9. + +## You can use theme providers side-by-side + +In v0/v8, you pass the `ThemeProvider` component a theme. +This puts the theme object on React's context. +Component style methods then reference the theme properties when building styles. + +In v9, you pass the `FluentProvider` component a theme. +This defines a CSS variable for each design token. +Component CSS styles then reference the CSS variables. + +When migrating to v9, you will have v0/v8 and v9 components side-by-side. +You can wrap both `ThemeProvider` and `FluentProvider` around components. +Both `ThemeProvider` and `FluentProvider` support nesting to define a theme or partial theme at different scopes. + +```tsx +import { ThemeProvider, Button as Buttonv8, webLightTheme} from '@fluentui/react'; +import { FluentProvider, Button as Buttonv9} from '@fluentui/react-components'; + + + + Hello migration + Hello migration + + +``` + +## You can use design token styles in your own components + +Fluent UI React v9 leverages the Griffel CSS-in-JS library. +The `makeStyles` and `mergeClasses` methods are exported by `@fluentui/react-components` package. +Read [Styling Components](/docs/concepts-developer-styling-components--page) for details. + +Because `FluentProvider` defines design token values as CSS variables, you can reference them your own component styles. +Read [Theming](/docs/concepts-developer-theming--page) to see examples. + +## You can extend the theme with new design tokens + +The v9 `FluentProvider` defines CSS variables consumed by components. +You can extend the `Theme` type with your own design tokens, set values when creating an instance of your theme, and then consume them in your own components. + +See _Extending themes with new tokens_ section in [Theming](/docs/concepts-developer-theming--page). + +## You can make v0, v8, v9 components have the same style + +While you have both old and new components together in your application, you may see some differences in the theme and styling of components. +You can choose to live with the minor discrepancies until you have fully migrated to v9. +You can also choose to make everything look like a previous version or like v9. + +> We recommend moving to v9's Fluent 2 design. +> It has improved accessibility and has consistent style across components. + +### You can create custom themes + +By passing a v8 theme to `ThemeProvider` that uses v9 colors, v8 will look more like v9. +Conversely, passing a v9 theme to `FluentProvider` that uses v8 colors will make v9 look more like v8. + +### You can use theme shims + +We have developed some shims (code that helps with migration) that let you create a v9 theme from the default v8 theme, create a v8 theme from the `webLightTheme` or `webDarkTheme` v9 themes. + +One of our key partner teams has developed a Fluent 2 theme for v8 that includes custom component styles to exactly match the Fluent 2 theme of v9. + +Check them out in the _/Migration Shims/Themes_ topics. + +## You can define custom styles with className + +As detailed in the _/Concepts/Developer/Styling Components_ topic, you can create styles with `makeStyles` and `mergeClasses` and then pass the className to any v9 component or component slot.Those styles will be applied last, allowing you to modify the default component style. + +If you do create custom styles, we strongly recommend using design tokens. +This ensures styles update with theme changes. + +## You can recompose components with custom styles + +Fluent v9 has a powerful composition model using React hooks. +Each component is separated into a hook that maps props to state, a hook that uses state to set className styles on each slot, and a render function that outputs each slot with applied props. + +While you can create a wrapper component that renders a v9 component with custom styles applied, this often introduces more virtual DOM elements that may affect performance. + +Instead, you can create a component that reuses the same hooks of the component. +You can substitute your own hooks or call additional hooks. +Because you are leveraging the same infrastructure v9 components use, no additional wrapper virtual DOM elements are created. + +This example defines a new button component. +The props to state hooks and render method from `Button` are reused. +A new style hook is substituted for `useButtonStyle`. + +```tsx +import * as React from 'react'; +import { renderButton_unstable as renderButton, useButton_unstable as useButton } from '@fluentui/react-components'; +import type { ButtonProps, ForwardRefComponent } from '@fluentui/react-components'; + +const useStyles = makeStyles({ + root: { + background: tokens.colorNeutralBackground2, + //... + }, +}); + +// This is an example of a custom style hook +const useCusomButtonStyles = (state: ButtonState): ButtonState => { + const styles = useStyles(); + + state.root.className = styles.root; + //... +}; + +export const MyButton: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useButton(props, ref); + useCustomButtonStyles(state); + return renderButton(state); +}) as ForwardRefComponent; +``` + +This is the most advanced form of customization in Fluent UI React v9, but provides you complete control over components. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx deleted file mode 100644 index 1d814202443f10..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx +++ /dev/null @@ -1,66 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Migrating from v8 or v0 to v9 - -If you or your team are currently using version 8 of `@fluentui/react` or version 0.x of `@fluentui/react-northstar` and are thinking of migrating to version 9 -then we would first like to **_thank you_** for making the jump and tell you how excited we are for you to experience all the improvements and features we have been working on. - -There are several things to keep in mind when migrating, so we have created these uprade guide topics explaining: - -- the new concepts you will encounter and how they map to concepts in previous versions -- things to consider when planning migration work -- detailed guidance on migrating components -- examples and helper code to make migrating easier - -We highly recommend reading through the v9 concepts for developers and the component documentation. -Knowing how v9 works will provide needed context for migrating. - -## Why should I migrate from v8 or v0 to v9? - -Fluent UI React v9 provides significant improvements to components over both v8 and v0. - -Some reasons to migrate to v9: - -- New and improved visual styling, rendering performance, and accessibility -- Easier to use and more consistent component props -- Build-time CSS-in-JS -- Component customization using slots -- Design token language with an improved theme provider -- Component composition and re-use leveraging React hooks -- Reduced bundle size with tree shaking - -## Do I have to migrate all at once? - -Absolutely not! **You can migrate incrementally**. - -Fluent UI v9 was built as separate libraries with the intention of support incremental adoption of v9 components alongside v8 and v0 components. - -## What if I'm on v7 right now? - -We recommend first migrating v7 to v8. The migration is mostly fixing a few breaking changes and replacing some deprecated components or props with newer versions. - -## What is available in v9? - -Version 9 is a "converged" library built from the ground-up that addresses many of the concerns and issues that plagued version 8. -However, this approach means that the intial number of version 9 components is fewer than existed in version 8. -Some components have also been renamed and a couple of them have been retired. - -At the time of this writing, v9 has an initial set of components shipped as a release candidate. -There are also some components in preview that are more likely to change than the release candidate components. -However, **all published components are production ready**. - -The v9 RC provides the following v8 equivalents: Avatar (previously Persona), Buttons, Divider, Image, Link, Portal and Popover (previously Layer/Overlay), Text, and Tooltip. -There are also new components: Accordion, Badges, and Menu. - -See the [Component Mapping](/docs/concepts-migrating-from-v8-component-mapping--page) for a complete list. - -The v9 RC provides the following v0 equivalents: Accordion, Avatar, Badge (previously Status), Buttons, Divider, Image, Menu, Portal and Popover (previously Popup), Text, and Tooltip. - -## How much effort is required? - -We won't sugarcoat it; migrating from v8 to v9 is more involved than the previous v7 to v8 migration. -There are breaking changes, component differences, and paradigm shifts. - -The good news is that you can migrate incrementally and take it one step at a time. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx deleted file mode 100644 index f8ff4c9cfbbc08..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx +++ /dev/null @@ -1,186 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Planning your journey - -As mentioned before, Fluent UI React v9 was designed to allow you to incrementally migrate. -You have a lot of flexibility on how you approach, plan, and execute moving to v9. - -This part of the guide will help you assess your project, choose your approach, -and plan out an iterative cycle for a successful migration. - -## Assessing your application - -How your application uses Fluent will influence your approach. -Scan over your codebase and try to answer the following questions: - -1. What Fluent components does your application use? -2. For each component, how many times is each component used (i.e. usage instances)? -3. Is most usage basic or advanced? - -Basic usage means you use the component with minimal customization. -You pass typical props and bind data from your components or application state. - -```tsx - -``` - -Advanced usage includes things like passing complex custom styles objects, callbacks for custom rendering, using refs to make imperative calls, and complex data binding. - -## Considerations - -There are lots of ways to migrate. Here are are some different options to consider. - -### Incremental or All-at-once - -_Incremental_: migrate a few components and ship, often by flighting the migrated components to a subset of users. -The benefits of the incremental approach are that you get v9 improvements sooner, find issues earlier, -and can iteratively get faster migrating components. - -Since v9 does not have all the components offered in previous versions yet, incrementally migrating allows you to gradually introduce v9 -side-by-side with v8 or v0. -You can more closely monitor the changes to bundle size and performance improvements with a gradual approach. - -_All-at-once_: migrate every v8/v0 component to their v9 equivalent. -You can still flight the migrated experience to a subset of users. -You get the benefit that you could A/B route to different web application servers when flighting and keep the -previous untouched version running independent of the migrated version. - -You also get the maximum benefits of v9 including a new consistent style, -tree-shaking out v8 components from the bundles, build-time CSS optimizations, and render performance improvements. - -### Horizontal or Vertical - -_Horizontal_: migrating one component across your entire application. -For example, migrating Button from previous version to v9 everywhere. -This has the benefit that your code will end up only depending on v9 Button and the v8 Button won't be included in the downloaded bundle. -Your buttons will look and behave the same across your app. - -_Vertical_: migrating all the components in one part of your application. -For example, migrating Button, Divider, Persona, and Link on a contact status side bar. -This has the benefit that you can migrate one part of your application in isolation leaving the rest of the app unaffected. -You can choose a non-critical part of your application to reduce risk of app-wide issues. -It makes it easier to trace any issues caused by migration. -Vertical may allow you to find integration issues earlier as you are using multiple new components. - -You can also choose to migrate one component in one part of your application. -You lose some of the benefits of each individual approach, but can try things out more slowly. - -### Deep or Shallow - -_Deep_: migrating components that are core to your application and re-used in many places. -For example, migrating a main toolbar to use the v9 Button and Menu components. -You get the benefits of v9 across the entire application. -You will get more usage of the migrated components and can gather feedback earlier. - -_Shallow_: migrating components that appear only in one non-critical place in your application. -For example, migrating an optional edit profile screen. -You get the benefit of limiting risk, but decrease the usage and may not find issues right away. - -### New v9 or Old v8 style - -If you have v8 and v9 components side-by-side, you may want to avoid noticable style differences. -If you need style consistency, apply theming and style customizations to make v8 components look like v9 components, -or make v9 components look like v8 components. - -You may decide you can live with the style differences for a period of time. -Most are small changes that are only noticable when v8 and v9 versions of the same component are next to each other in the UI. - -### New v9 or Old v0 style - -v0 will to some extent gradually converge its appearance. However, you might still need to use style overrides in some cases to achieve consistency. - -### Manual changes, code mod scripts, or shims - -_Manual_: update each usage of Fluent React by hand. -This is the brute force approach to migration. -It may be the best option especially for smaller projects. -You may have a lot of variety in how you use components that preclude a search/replace or automated option. -You may also have an existing wrapper around a component that allows you to migrate at a single code location. -The benefits include you can call v9 components as intended, the opportunity to simplify and improve -how your code uses Fluent, and you can make incremental check-ins ensuring existing tests pass. - -_Code mod_: author a script to update multiple locations in your code at once. -You may be able to leverage existing scripts from previous migrations, from others who have migrated, or from the Fluent React team. -If your codebase is very consistent in how it uses Fluent, this option can save a lot of extra effort over manual migration. -You can have code mods that add flighting logic around usage to have both v8/v0 and v9 available. -The downside is that if your usage is complex or highly varied, authoring a code mod that covers all cases may be impractical. - -_Shims_: author or use a component that takes v8/v0 props and renders a v9 component. -Shims can be a good option to get v9 components in your app if you don't have the time to update all the places you use the component. -You can leave your props creation code alone and pass it to the shim. -It is easy to search/replace your code to update to using the shim. -You can also do your flighting logic within the shim itself. -One downside is that your shim will retain the dependency on v8/v0 and prevent removing it from your bundle. -Also, there are cases with custom renderprops callbacks that cannot be supported by a shim because the rendered -content is not compatible with the v9 component. - -## Recommendations - -### Small projects - -If you have a small project and can commit the effort, we recommend migrating everything and modifying the code directly. - -This gives you the maximum benefit of rendering performance, build time style bundling, and tree-shaking out v8 components that are no longer used. You'll be able to refactor any advanced usage cases in the newer v9 paradigms and end up with cleaner code. - -You should still consider flighting the migrated experience, but you can A/B the entire application rather than if/then flighting per component in the code. - -### Medium or larger with advanced usage - -If you have a medium to large project, significant advanced usage of components, and limited resources or time constraints, we recommend leveraging the shim components. - -You can replace all the usages of a component like Button with ShimButton and get a v9 Button rendered. You get the benefits of v9 components and can crawl over the code to update to use v9 directly at your leisure. - -Warning! Shims aren't free. You'll still need to modify code to migrate custom styles, renderprops callbacks, and ref usage. Shims take a dependency on the v8 types and v9 components, so tree-shaking may be limited. Shims introduce mapping logic (although it shouldn't signficantly impact render performance). - -### Medium or larger apps with basic usage - -If you have a large project with hundreds to thousands of Fluent component usages, we strongly recommend migrating horizontally. The Button component is a typical choice to migrate across the application. - -If your usage is mostly basic, we recommend authoring a code-mod to handle what would be too tedious with search & replace. Consider running code-mods to handle most cases and then do some manual migration work to cover the rest. - -### Large with advanced usage - -If you have a large projects with thousands of Fluent component usages, a lot of advanced usage, and several resource constraints, we recommend creating an application-specific shim and permanent abstraction around the Fluent component. - -A permanent abstraction will give you a place to adapt for compatibility as you move from v8 props to v9 props. It will also be valuable with future migrations. v9 has a new hook-based composition model you can leverage to create a shim without introducing the extra virtual DOM elements of a wrapper. You can also introduce the flighting logic within your shim to be able to toggle the migration on/off. - -You can consider code-mods to migrate the more basic usage, but will likely find too much variance to handle all the cases across your code. - -We recommend you migrate horizontally, but you may want to migrate horizontally within one portion of your application at a time. For example, all the buttons in a toolbar or on a related set of pages in your application. This lets you migrate in stages without destabilizing then entire application. - -If you have a subsystem of your application that is independent and similar to a small/medium application, you may choose to migrate it vertically. You can have a cohesive improvement to one part of the application and flight it independent of the rest of the application. - -## Creating a plan - -We strongly recommend using a work item tracking system or Excel spreadsheet to plan out your migration tasks. - -### A plan for a plan - -You should create and complete a set of planning tasks: - -1. Measure the current bundle size, render performance, and other metrics for later comparison. -2. Determine the mechanism for how you will flight the migrated components to a subset of users. -3. Decide on any pre-migration improvements that you will make first to reduce migration effort. -4. Determine what other constraints you have - maximum bundle size, performance bars, allowed style inconsistencies, etc. -5. Assess the application and choose your approach. -6. Choose a target deadline or milestone date for each phase of migration. - -### Getting started tasks - -You should plan a set of getting started tasks for migrating one component in one location. - -1. Update project to reference Fluent React v9. -2. Add FluentProvider with a theme to the root of the app -3. Add any v9 component to the UI, verify it renders as expected, then remove it. -4. Update a single usage location to use the v9 component. Consider recording how long it takes. - -### Iterative planning - -Plan a task or set of tasks to be able to 'rinse and repeat' each usage migration. - -- The type of tasks and their granularity will vary depending on your approach. -- After migrating some instances, review how long each took and plan out the next set of tasks. diff --git a/apps/public-docsite-v9/tsconfig.json b/apps/public-docsite-v9/tsconfig.json index c787b450987660..cc35ba4818249e 100644 --- a/apps/public-docsite-v9/tsconfig.json +++ b/apps/public-docsite-v9/tsconfig.json @@ -15,7 +15,7 @@ "moduleResolution": "node", "preserveConstEnums": true, "skipLibCheck": true, - "types": ["webpack-env", "@storybook/react", "screener-storybook"] + "types": ["webpack-env", "@storybook/react"] }, "include": ["src"] } diff --git a/apps/public-docsite/just.config.ts b/apps/public-docsite/just.config.ts index bcc7d9d264037c..b10db31a6aca51 100644 --- a/apps/public-docsite/just.config.ts +++ b/apps/public-docsite/just.config.ts @@ -1,3 +1,3 @@ -import { preset } from '@fluentui/scripts'; +import { preset } from '@fluentui/scripts-tasks'; preset(); diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index 3e3bf8acef6eac..04b6b8d1e0157c 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -23,27 +23,29 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/common-styles": "^1.2.13", + "@fluentui/common-styles": "^1.2.15", "@fluentui/eslint-plugin": "*", - "@fluentui/react-monaco-editor": "^1.7.34", - "@fluentui/scripts": "^1.0.0", - "write-file-webpack-plugin": "^4.1.0" + "@fluentui/react-monaco-editor": "^1.7.43", + "write-file-webpack-plugin": "^4.1.0", + "@fluentui/scripts-tasks": "*", + "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/font-icons-mdl2": "^8.5.4", + "@fluentui/font-icons-mdl2": "^8.5.6", "@fluentui/public-docsite-resources": "^8.1.41", - "@fluentui/public-docsite-setup": "^0.3.13", - "@fluentui/react": "^8.103.7", - "@fluentui/react-docsite-components": "^8.10.34", + "@fluentui/public-docsite-setup": "^0.3.15", + "@fluentui/react": "^8.104.5", + "@fluentui/react-docsite-components": "^8.11.8", "@fluentui/react-examples": "^8.34.4", - "@fluentui/react-experiments": "^8.14.29", - "@fluentui/react-file-type-icons": "^8.8.3", - "@fluentui/react-icons-mdl2": "^1.3.27", - "@fluentui/react-icons-mdl2-branded": "^1.2.28", - "@fluentui/set-version": "^8.2.3", - "@fluentui/theme": "^2.6.19", - "@fluentui/theme-samples": "^8.7.34", - "@fluentui/utilities": "^8.13.4", + "@fluentui/react-experiments": "^8.14.38", + "@fluentui/fluent2-theme": "^8.104.8", + "@fluentui/react-file-type-icons": "^8.8.5", + "@fluentui/react-icons-mdl2": "^1.3.29", + "@fluentui/react-icons-mdl2-branded": "^1.2.30", + "@fluentui/set-version": "^8.2.4", + "@fluentui/theme": "^2.6.21", + "@fluentui/theme-samples": "^8.7.43", + "@fluentui/utilities": "^8.13.5", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Styles/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Styles/web.tsx index 45431a06094190..6e4743de73a518 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Styles/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Styles/web.tsx @@ -122,12 +122,12 @@ export const stylesPagesWeb: INavPage[] = [ // getComponent: cb => require.ensure([], require => cb(require('../../../pages/Styles/IconsPage/IconsPage').IconsPage)) // }, { - title: 'Office Brand Icons', - url: '#/styles/web/office-brand-icons', - component: () => , + title: 'M365 Product Icons', + url: '#/styles/web/m365-product-icons', + component: () => , getComponent: cb => require.ensure([], require => - cb(require('../../../pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage').OfficeBrandIconsPage), + cb(require('../../../pages/Styles/M365ProductIconsPage/M365ProductIconsPage').M365ProductIconsPage), ), }, { diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx index b77be715b3bce0..3948ae4db1fa84 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx @@ -3,14 +3,14 @@ import { ISiteDefinition, LoadingComponent } from '@fluentui/react-docsite-compo import { ControlsPages, ResourcesPages, StylesPages, GetStartedPages } from './SiteDefinition.pages/index'; import { Platforms } from '../interfaces/Platforms'; import { platforms } from './SiteDefinition.platforms'; +import { cdnUrl } from '../utilities/cdn'; import { SiteGlobals } from '@fluentui/public-docsite-setup'; declare const window: Window & SiteGlobals; export const SiteDefinition: ISiteDefinition = { siteTitle: 'Fluent UI', - siteLogoSource: - 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/microsoftfluentui-logo-rgb_no-padding.svg', + siteLogoSource: `${cdnUrl}/fabric-website/images/microsoftfluentui-logo-rgb_no-padding.svg`, platforms, pages: [ { @@ -49,7 +49,8 @@ export const SiteDefinition: ISiteDefinition = { { from: '#/examples/announced/', to: '#/controls/web/announced/' }, { from: /#\/components/, to: '#/controls/web' }, { from: '#/styles/animation', to: '#/styles/web/motion' }, - { from: '#/styles/brand-icons', to: '#/styles/web/office-brand-icons' }, + { from: '#/styles/brand-icons', to: '#/styles/web/m365-product-icons' }, + { from: '#/styles/web/office-brand-icons', to: '#/styles/web/m365-product-icons' }, { from: '#/styles/colors', to: '#/styles/web/colors/theme-slots' }, { from: '#/styles/icons', to: '#/styles/web/icons' }, { from: '#/styles/layout', to: '#/styles/web/layout' }, diff --git a/apps/public-docsite/src/components/Site/AppThemes.ts b/apps/public-docsite/src/components/Site/AppThemes.ts index 9ef4a608c42b72..ee1f28c9069c9b 100644 --- a/apps/public-docsite/src/components/Site/AppThemes.ts +++ b/apps/public-docsite/src/components/Site/AppThemes.ts @@ -1,9 +1,12 @@ import { DefaultTheme, DarkTheme } from '@fluentui/theme-samples'; +import { Fluent2WebLightTheme, Fluent2WebDarkTheme } from '@fluentui/fluent2-theme'; import { IAppThemes, IExampleCardTheme } from '@fluentui/react-docsite-components'; const exampleCardTheme: IExampleCardTheme[] = [ { title: 'Default', theme: DefaultTheme }, { title: 'Dark', theme: DarkTheme }, + { title: 'Fluent 2 Web Light', theme: Fluent2WebLightTheme }, + { title: 'Fluent 2 Web Dark', theme: Fluent2WebDarkTheme }, ]; export const AppThemes: IAppThemes = { diff --git a/apps/public-docsite/src/data/brand-icons-monochrome.json b/apps/public-docsite/src/data/brand-icons-monochrome.json deleted file mode 100644 index 5dceb8bb64703c..00000000000000 --- a/apps/public-docsite/src/data/brand-icons-monochrome.json +++ /dev/null @@ -1,38 +0,0 @@ -[ - { "name": "AADLogo" }, - { "name": "AccessLogo" }, - { "name": "ATPLogo" }, - { "name": "AzureLogo" }, - { "name": "BingLogo" }, - { "name": "BookingsLogo" }, - { "name": "ClassroomLogo" }, - { "name": "DelveAnalyticsLogo" }, - { "name": "DelveLogo" }, - { "name": "DynamicSMBLogo" }, - { "name": "EdgeLogo" }, - { "name": "ExcelDocument" }, - { "name": "ExcelLogo" }, - { "name": "ExchangeLogo" }, - { "name": "LyncLogo" }, - { "name": "MSNLogo" }, - { "name": "OfficeAssistantLogo" }, - { "name": "OfficeLogo" }, - { "name": "OfficeStoreLogo" }, - { "name": "OfficeVideoLogo" }, - { "name": "OneDrive" }, - { "name": "OneNoteLogo" }, - { "name": "OutlookLogo" }, - { "name": "PowerBILogo" }, - { "name": "PowerPointDocument" }, - { "name": "PowerPointLogo" }, - { "name": "SharepointLogo" }, - { "name": "SkypeLogo" }, - { "name": "SocialListeningLogo" }, - { "name": "StoreLogo" }, - { "name": "StoreLogoMed" }, - { "name": "VisioLogo" }, - { "name": "WindowsLogo" }, - { "name": "WordDocument" }, - { "name": "WordLogo" }, - { "name": "YammerLogo" } -] diff --git a/apps/public-docsite/src/data/brand-icons-documents.json b/apps/public-docsite/src/data/product-icons-documents.json similarity index 100% rename from apps/public-docsite/src/data/brand-icons-documents.json rename to apps/public-docsite/src/data/product-icons-documents.json diff --git a/apps/public-docsite/src/data/brand-icons-products.json b/apps/public-docsite/src/data/product-icons.json similarity index 92% rename from apps/public-docsite/src/data/brand-icons-products.json rename to apps/public-docsite/src/data/product-icons.json index 4e60d542186d29..2e82333585ee7d 100644 --- a/apps/public-docsite/src/data/brand-icons-products.json +++ b/apps/public-docsite/src/data/product-icons.json @@ -7,7 +7,7 @@ { "icon": "onenote", "name": "OneNote" }, { "icon": "sharepoint", "name": "SharePoint" }, { "icon": "teams", "name": "Microsoft Teams" }, - { "icon": "office", "name": "Office" }, + { "icon": "m365", "name": "Microsoft 365" }, { "icon": "access", "name": "Access" }, { "icon": "delve", "name": "Delve" }, { "icon": "forms", "name": "Microsoft Forms" }, diff --git a/apps/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarOverview.md b/apps/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarOverview.md index 248759a1a0d240..58d2d745153bd2 100644 --- a/apps/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarOverview.md +++ b/apps/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarOverview.md @@ -3,17 +3,17 @@ ### Initials - - + + ### Profile - - + + ### Group - - + + diff --git a/apps/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarOverview.md b/apps/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarOverview.md index 94f167ef1f30bd..8f407ce30c85d0 100644 --- a/apps/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarOverview.md +++ b/apps/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarOverview.md @@ -3,17 +3,17 @@ ### Initials - - + + ### Profile - - + + ### Group - - + + diff --git a/apps/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarUsage.md b/apps/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarUsage.md index ab69896b815b04..acbc55449c34fe 100644 --- a/apps/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarUsage.md +++ b/apps/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarUsage.md @@ -8,8 +8,8 @@ To determine initials for an avatar, the code initially tries to extract two-let AvatarView(avatarSize: size, contactName: "Amanda Brady", contactEmail: "Amanda.Brady@example.com", contactImage: nil) ``` - - + + ### Profile @@ -18,7 +18,7 @@ AvatarView(avatarSize: size, contactName: "Amanda Brady", contactEmail: "Amanda. AvatarView(avatarSize: size, contactName: "Amanda Brady", contactEmail: "Amanda.Brady@example.com", contactImage: NSImage(named: "Amanda")) ``` - - + + diff --git a/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/android/BottomNavigationOverview.md b/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/android/BottomNavigationOverview.md index 7cf0ae6810e197..0758a1a8d327ff 100644 --- a/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/android/BottomNavigationOverview.md +++ b/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/android/BottomNavigationOverview.md @@ -3,6 +3,6 @@ The bottom navigation displays icons and optional text at the bottom of the scre ### Bottom Navigation - - + + diff --git a/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/ios/BottomNavigationOverview.md b/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/ios/BottomNavigationOverview.md index 918557d9a5e348..05fe0d8641776e 100644 --- a/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/ios/BottomNavigationOverview.md +++ b/apps/public-docsite/src/pages/Controls/BottomNavigationPage/docs/ios/BottomNavigationOverview.md @@ -5,13 +5,13 @@ The tab bar displays tabs at the bottom of the window for switching between diff ### Portrait - - + + ### Landscape - - + + diff --git a/apps/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetOverview.md b/apps/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetOverview.md index 4f456a188a382c..33fb1b83f89a71 100644 --- a/apps/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetOverview.md +++ b/apps/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetOverview.md @@ -3,6 +3,6 @@ ### BottomSheet - - + + diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonOverview.md b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonOverview.md index 3dbb25424c65b8..b7f0cff76daade 100644 --- a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonOverview.md +++ b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonOverview.md @@ -3,12 +3,12 @@ Buttons are one of the core controls that make an app feel native to the platfor ### Primary Filled - - + + ### Borderless Button - - + + diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonUsage.md b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonUsage.md index 979ee3d9fef555..3a52ee13ce924b 100644 --- a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonUsage.md +++ b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonUsage.md @@ -4,19 +4,19 @@ Fluent UI React Native Buttons have default styling based on the Fluent UI Desig #### Default Button (Windows) - + #### Primary Button (Windows) - + #### Default Button (macOS) - + #### Primary Button (macOS) - + #### Example usage (from [ButtonFocusTest.tsx](https://github.com/microsoft/fluentui-react-native/blob/master/apps/fluent-tester/src/FluentTester/TestComponents/Button/ButtonFocusTest.tsx)) diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md index 3681b7a819517f..b6a780b2eef667 100644 --- a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md +++ b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md @@ -3,22 +3,22 @@ Buttons are one of the core controls that make an app feel native to the platfor ### Primary Filled - - + + ### Primary Outlined - - + + ### Secondary Outlined - - + + ### Tertiary Outlined - - + + diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonOverview.md b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonOverview.md index a2d2f65bbc51dd..dc4ff10899103d 100644 --- a/apps/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonOverview.md +++ b/apps/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonOverview.md @@ -3,17 +3,17 @@ Buttons give people a way to trigger an action. They're typically found in windo ### Primary filled - - + + ### Primary outlined - - + + ### Borderless - - + + diff --git a/apps/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarOverview.md b/apps/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarOverview.md index 49a4af4da073d0..0b91e54f138f0f 100644 --- a/apps/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarOverview.md +++ b/apps/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarOverview.md @@ -3,7 +3,7 @@ The `CalendarView` is used to display calendar dates and to allow a user to sele ### Calendar - - + + diff --git a/apps/public-docsite/src/pages/Controls/ChipPage/docs/android/ChipOverview.md b/apps/public-docsite/src/pages/Controls/ChipPage/docs/android/ChipOverview.md index be8ff5acd3e5d0..e2adc803da8fab 100644 --- a/apps/public-docsite/src/pages/Controls/ChipPage/docs/android/ChipOverview.md +++ b/apps/public-docsite/src/pages/Controls/ChipPage/docs/android/ChipOverview.md @@ -3,7 +3,7 @@ Chips are compact representations of entities (most commonly, people) that can b ### Persona Chips - - + + diff --git a/apps/public-docsite/src/pages/Controls/ChipPage/docs/ios/ChipOverview.md b/apps/public-docsite/src/pages/Controls/ChipPage/docs/ios/ChipOverview.md index 4aac73555c9838..74370a88991f1b 100644 --- a/apps/public-docsite/src/pages/Controls/ChipPage/docs/ios/ChipOverview.md +++ b/apps/public-docsite/src/pages/Controls/ChipPage/docs/ios/ChipOverview.md @@ -5,17 +5,17 @@ The chip field control handles keyboard input, wrapping and truncation automatic ### Small Chip - - + + ### Medium Chip - - + + ### Badge Field - - + + diff --git a/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/android/DateTimePickerOverview.md b/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/android/DateTimePickerOverview.md index 9e1d0d2bdc2247..f2126a86b607f7 100644 --- a/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/android/DateTimePickerOverview.md +++ b/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/android/DateTimePickerOverview.md @@ -7,17 +7,17 @@ These pickers let users quickly choose a date or time through a familiar popup a ### Date Picker - - + + ### Time Picker - - + + ### Range Picker for Dates - - + + diff --git a/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/ios/DateTimePickerOverview.md b/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/ios/DateTimePickerOverview.md index 084841ec4c4b6d..ed7b989923d1ad 100644 --- a/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/ios/DateTimePickerOverview.md +++ b/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/ios/DateTimePickerOverview.md @@ -3,8 +3,8 @@ These pickers let users quickly choose a date or time through a familiar popup a - - + + diff --git a/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerUsage.md b/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerUsage.md index 3362c5cae0e6a1..ca6413881e1b9e 100644 --- a/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerUsage.md +++ b/apps/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerUsage.md @@ -8,8 +8,8 @@ The DatePicker uses the provided [`Calendar`](https://developer.apple.com/docume DatePickerController(date: nil, calendar: nil, style: .date) ``` - - + + ### DatePicker with time text field @@ -18,8 +18,8 @@ DatePickerController(date: nil, calendar: nil, style: .date) DatePickerController(date: nil, calendar: nil, style: .dateTime) ``` - - + + ### Custom initial date @@ -29,8 +29,8 @@ let date = Calendar.current.date(from: DateComponents(year: 2019, month: 1, day: DatePickerController(date: date, calendar: nil, style: .date) ``` - - + + ### Custom calendar @@ -41,8 +41,8 @@ calendar.locale = Locale(identifier: "ar") DatePickerController(date: nil, calendar: calendar, style: .date) ``` - - + + ### Secondary calendar @@ -54,8 +54,8 @@ let controller = DatePickerController(date: nil, calendar: nil, style: .date) controller.secondaryCalendar = calendar ``` - - + + ### No text field @@ -65,7 +65,7 @@ let controller = DatePickerController(date: nil, calendar: nil, style: .date) controller.hasTextField = false ``` - - + + diff --git a/apps/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerOverview.md b/apps/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerOverview.md index 28bb1805477c5d..d41a166d3cc2cc 100644 --- a/apps/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerOverview.md +++ b/apps/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerOverview.md @@ -2,7 +2,7 @@ - - + + diff --git a/apps/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md b/apps/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md index c6fe20ba293bc9..18b0ec809f6845 100644 --- a/apps/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md +++ b/apps/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md @@ -3,12 +3,12 @@ Drawers let you reveal lightweight views inside your application without being a ### Vertical - - + + ### Horizontal - - + + diff --git a/apps/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkUsage.md b/apps/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkUsage.md index 5f85b3d56af17c..ec7042efa57bfd 100644 --- a/apps/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkUsage.md +++ b/apps/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkUsage.md @@ -2,7 +2,7 @@ Fluent UI React Native Link has default styling based on the Fluent Design Langu ### Link example - + #### Example usage (from [LinkTest.tsx](https://github.com/microsoft/fluentui-react-native/blob/master/apps/fluent-tester/src/FluentTester/TestComponents/Link/LinkTest.tsx)) diff --git a/apps/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkUsage.md b/apps/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkUsage.md index 4bcf18dbd406c7..695e86b18c87db 100644 --- a/apps/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkUsage.md +++ b/apps/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkUsage.md @@ -2,8 +2,8 @@ The Link control is implemented as a stylized NSButton, and thus inherits all of - - + + ### Default configuration diff --git a/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsOverview.md b/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsOverview.md index dca070c6de4994..a968b1b3c49a84 100644 --- a/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsOverview.md +++ b/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsOverview.md @@ -3,17 +3,17 @@ When displaying fundamental content types like files or people, it's important t ### One line - - + + ### Two line - - + + ### Three line - - + + diff --git a/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsOverview.md b/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsOverview.md index cb7363929fa8d4..70797919bb582c 100644 --- a/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsOverview.md +++ b/apps/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsOverview.md @@ -3,32 +3,32 @@ When displaying fundamental content types like files or people, it's important t ### One line - - + + ### Two line - - + + ### Three line - - + + ### Center line - - + + ### Selection - - + + ### Description - - + + diff --git a/apps/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarOverview.md b/apps/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarOverview.md index 0cb5d555eb0d91..34013457e6abe0 100644 --- a/apps/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarOverview.md +++ b/apps/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarOverview.md @@ -3,12 +3,12 @@ ### Toast - - + + ### Bar - - + + diff --git a/apps/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarOverview.md b/apps/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarOverview.md index deb27e1b4dc84c..1ce884ca8464bd 100644 --- a/apps/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarOverview.md +++ b/apps/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarOverview.md @@ -3,11 +3,11 @@ ### Top App bar - - + + ### Top App bar with Search - - + + diff --git a/apps/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarOverview.md b/apps/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarOverview.md index af54e421ff11b4..a17d0c732b4dad 100644 --- a/apps/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarOverview.md +++ b/apps/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarOverview.md @@ -4,13 +4,13 @@ This navigation controller provides supports the Large Title presentation and an ### Portrait - - + + ### Landscape - - + + diff --git a/apps/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerOverview.md b/apps/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerOverview.md index f341dc5672c1a1..10ece252db11a2 100644 --- a/apps/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerOverview.md +++ b/apps/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerOverview.md @@ -5,7 +5,7 @@ The `PeoplePicker` control handles keyboard input, field expanding and collapsin ### People Picker - - + + diff --git a/apps/public-docsite/src/pages/Controls/PersonaPage/docs/android/PersonaOverview.md b/apps/public-docsite/src/pages/Controls/PersonaPage/docs/android/PersonaOverview.md index 6675efc26d340b..922c8c31c6f10d 100644 --- a/apps/public-docsite/src/pages/Controls/PersonaPage/docs/android/PersonaOverview.md +++ b/apps/public-docsite/src/pages/Controls/PersonaPage/docs/android/PersonaOverview.md @@ -8,7 +8,7 @@ Persona controls are also available as a performant list view. The `PersonaListV - - + + diff --git a/apps/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaUsage.md b/apps/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaUsage.md index d156be2ab88239..d1897ca4aba4c0 100644 --- a/apps/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaUsage.md +++ b/apps/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaUsage.md @@ -1,6 +1,6 @@ ### Persona in various sizes - + #### Example usage (from [PersonaCoinTest.tsx](https://github.com/microsoft/fluentui-react-native/tree/master/apps/fluent-tester/src/FluentTester/TestComponents/PersonaCoin)) diff --git a/apps/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaOverview.md b/apps/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaOverview.md index d8542a337ce362..87e3234d2fb83f 100644 --- a/apps/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaOverview.md +++ b/apps/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaOverview.md @@ -8,7 +8,7 @@ Persona controls are also available as a performant list view. The `PersonaListV - - + + diff --git a/apps/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarOverview.md b/apps/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarOverview.md index 1cc350c4091ea6..b58fc669aae4f7 100644 --- a/apps/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarOverview.md +++ b/apps/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarOverview.md @@ -3,8 +3,8 @@ - - + + diff --git a/apps/public-docsite/src/pages/Controls/PivotPage/docs/ios/PivotOverview.md b/apps/public-docsite/src/pages/Controls/PivotPage/docs/ios/PivotOverview.md index 6dafbc6732f704..d82ed65c7e9514 100644 --- a/apps/public-docsite/src/pages/Controls/PivotPage/docs/ios/PivotOverview.md +++ b/apps/public-docsite/src/pages/Controls/PivotPage/docs/ios/PivotOverview.md @@ -3,17 +3,17 @@ Pivots are used for switching between sub-views or different pre-defined filteri ### Two - - + + ### Three - - + + ### Four - - + + diff --git a/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuOverview.md b/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuOverview.md index 4a87eb306b5bf1..6ff45f8e4de9c7 100644 --- a/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuOverview.md +++ b/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuOverview.md @@ -3,16 +3,16 @@ ### Popup Menu with icons - - + + ### Popup Menu with Radio Buttons - - + + ### Popup Menu with Check Boxes - - + + diff --git a/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuOverview.md b/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuOverview.md index 577387d53254ab..e26470e6a90b76 100644 --- a/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuOverview.md +++ b/apps/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuOverview.md @@ -4,13 +4,13 @@ PopupMenus provide a set of commands or options inside of a drawer. Two types of ### Top down - - + + ### Bottom up - - + + diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorOverview.md b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorOverview.md index edb5791c124e54..a00e61ae370040 100644 --- a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorOverview.md +++ b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorOverview.md @@ -2,7 +2,7 @@ A separator visually separates content into groups. - - + + diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorUsage.md b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorUsage.md index 86efaac24ad080..3a5492852e472b 100644 --- a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorUsage.md +++ b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorUsage.md @@ -1,6 +1,6 @@ ### Link example - + #### Example usage (from [SeparatorTest.tsx](https://github.com/microsoft/fluentui-react-native/blob/master/apps/fluent-tester/src/FluentTester/TestComponents/Separator/SeparatorTest.tsx)) diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorOverview.md b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorOverview.md index afa8f0d2562f64..9937664ed24d8e 100644 --- a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorOverview.md +++ b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorOverview.md @@ -2,7 +2,7 @@ A separator visually separates content into groups. - - + + diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorOverview.md b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorOverview.md index a21e752ba76f73..8e1bc0b07f4690 100644 --- a/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorOverview.md +++ b/apps/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorOverview.md @@ -2,7 +2,7 @@ A separator visually separates content into groups. - - + + diff --git a/apps/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerOverview.md b/apps/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerOverview.md index 5d42ebb4883eeb..fc6db4f5816910 100644 --- a/apps/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerOverview.md +++ b/apps/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerOverview.md @@ -2,7 +2,7 @@ Shimmer is a temporary animation placeholder for when a service call takes time - - + + diff --git a/apps/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarOverview.md b/apps/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarOverview.md index 68ad973f6df0b5..43f534dc5523cc 100644 --- a/apps/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarOverview.md +++ b/apps/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarOverview.md @@ -3,11 +3,11 @@ Snackbars provide a brief message about an operation at the bottom of the screen ### Snackbar - - + + ### Announcement Snackbar - - + + diff --git a/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerOverview.md b/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerOverview.md index 3e084dfabcd541..384baa4ff1a7fd 100644 --- a/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerOverview.md +++ b/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerOverview.md @@ -7,6 +7,6 @@ Use a standalone spinner when you need a progress indicator on an existing surfa ### Spinner - - + + diff --git a/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerOverview.md b/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerOverview.md index 9c83d0a77ceb1d..3c102d10d5ecda 100644 --- a/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerOverview.md +++ b/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerOverview.md @@ -9,12 +9,12 @@ For actions that happen "between views", you can use the progress indicator that ### Activity Indicator - - + + ### HUD - - + + diff --git a/apps/public-docsite/src/pages/Controls/TextPage/docs/android/TextOverview.md b/apps/public-docsite/src/pages/Controls/TextPage/docs/android/TextOverview.md index be6f19edae7543..c971c5dd590216 100644 --- a/apps/public-docsite/src/pages/Controls/TextPage/docs/android/TextOverview.md +++ b/apps/public-docsite/src/pages/Controls/TextPage/docs/android/TextOverview.md @@ -2,7 +2,7 @@ Use these typography styles to standardize text across your app. - - + + diff --git a/apps/public-docsite/src/pages/Controls/TextPage/docs/cross/TextUsage.md b/apps/public-docsite/src/pages/Controls/TextPage/docs/cross/TextUsage.md index ed63574634a209..81f836cca21ff9 100644 --- a/apps/public-docsite/src/pages/Controls/TextPage/docs/cross/TextUsage.md +++ b/apps/public-docsite/src/pages/Controls/TextPage/docs/cross/TextUsage.md @@ -5,15 +5,15 @@ If you need to customize the fontFamily, fontSize, or fontWeight of your Text, y ### Text example On Windows, Text uses the Segoe UI font family. - + On macOS, Text uses the San Francisco font family. - + ### Text ramp example You can specify the `variant` prop to apply font styles to Text. Examples of `variant` values are shown below. - + #### Example usage (from [TextTest.tsx](https://github.com/microsoft/fluentui-react-native/tree/master/apps/fluent-tester/src/FluentTester/TestComponents/Text)) diff --git a/apps/public-docsite/src/pages/Controls/TextPage/docs/ios/TextOverview.md b/apps/public-docsite/src/pages/Controls/TextPage/docs/ios/TextOverview.md index c18e1869ee77d4..a070472fc8d3ee 100644 --- a/apps/public-docsite/src/pages/Controls/TextPage/docs/ios/TextOverview.md +++ b/apps/public-docsite/src/pages/Controls/TextPage/docs/ios/TextOverview.md @@ -2,7 +2,7 @@ Use `Label` to standardize text across your app. - - + + diff --git a/apps/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipOverview.md b/apps/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipOverview.md index 6f3b81fb322181..a73919b8d435cc 100644 --- a/apps/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipOverview.md +++ b/apps/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipOverview.md @@ -3,12 +3,12 @@ Use tooltips to show small unobtrusive hints on top of your app's UI. These can ### One line - - + + ### Two line - - + + diff --git a/apps/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipOverview.md b/apps/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipOverview.md index 657a19a40c5f21..7ba2daa0ebb60c 100644 --- a/apps/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipOverview.md +++ b/apps/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipOverview.md @@ -3,12 +3,12 @@ Use tooltips to show small unobtrusive hints on top of your app's UI. These can ### One line - - + + ### Two line - - + + diff --git a/apps/public-docsite/src/pages/HomePage/HomePage.base.tsx b/apps/public-docsite/src/pages/HomePage/HomePage.base.tsx index aa2af23d2a6859..b5b7066fdf0a08 100644 --- a/apps/public-docsite/src/pages/HomePage/HomePage.base.tsx +++ b/apps/public-docsite/src/pages/HomePage/HomePage.base.tsx @@ -23,6 +23,7 @@ import { windowsLogoColor, macLogoColor, crossPlatformLogoColor, + cdnUrl, } from '../../utilities/index'; import { SiteDefinition } from '../../SiteDefinition/SiteDefinition'; import { IHomePageProps, IHomePageStyles, IHomePageStyleProps } from './HomePage.types'; @@ -41,7 +42,7 @@ registerIcons({ }, }); -const fabricUsageIconBaseUrl = 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/svg/'; +const fabricUsageIconBaseUrl = `${cdnUrl}/assets/brand-icons/product/svg/`; /** * List of App/Brand icon names that use Fluent UI. @@ -363,8 +364,11 @@ export class HomePageBase extends React.Component
Resources illustration diff --git a/apps/public-docsite/src/pages/NotFoundPage/NotFoundPage.tsx b/apps/public-docsite/src/pages/NotFoundPage/NotFoundPage.tsx index 92ddfdc175e6d5..28fd52d07ca344 100644 --- a/apps/public-docsite/src/pages/NotFoundPage/NotFoundPage.tsx +++ b/apps/public-docsite/src/pages/NotFoundPage/NotFoundPage.tsx @@ -12,11 +12,12 @@ import { } from '@fluentui/react-docsite-components/lib/index2'; import { SiteDefinition } from '../../SiteDefinition/index'; import { topNavHeight, mediaQuery } from '../../styles/constants'; +import { cdnUrl } from '../../utilities/cdn'; const illustrations = [ - 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/images/error/error1.svg', - 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/images/error/error2.svg', - 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/images/error/error3.svg', + `${cdnUrl}/office-ui-fabric-react-assets/images/error/error1.svg`, + `${cdnUrl}/office-ui-fabric-react-assets/images/error/error2.svg`, + `${cdnUrl}/office-ui-fabric-react-assets/images/error/error3.svg`, ]; const rootClass = mergeStyles({ diff --git a/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDesign.md b/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDesign.md index c4df274def4861..868d86ffc4ab40 100644 --- a/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDesign.md +++ b/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDesign.md @@ -4,7 +4,7 @@ Fluent UI gives you access to Segoe, Microsoft’s official typeface, along with ### Icons -Fluent UI includes Office’s official product icons. Fluent UI also provides a suite of product and document symbols, so you can use the same metaphors we use. [Learn more](#/styles/web/icons) +Fluent UI includes Microsoft 365's official product icons. Fluent UI also provides a suite of product and document symbols, so you can use the same metaphors we use. [Learn more](#/styles/web/icons) ### Controls diff --git a/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDevelopCore.md b/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDevelopCore.md index cc6294b3462b08..0c254b08a7e06d 100644 --- a/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDevelopCore.md +++ b/apps/public-docsite/src/pages/Overviews/GetStartedPage/docs/web/GetStartedDevelopCore.md @@ -8,12 +8,12 @@ If you're using Fluent UI React, you may not need Fabric Core. Most of the style ### Adding Fabric Core to your site -To add the latest version of Fabric Core to your site, link to this CSS file in the `` of your webpage. (For the MDL2 styles used in Fabric 6, replace `11.0.0` with `9.6.1` in the `href`.) +To add the latest version of Fabric Core to your site, link to this CSS file in the `` of your webpage. (For the MDL2 styles used in Fabric 6, replace `11.1.0` with `9.6.1` in the `href`.) ```html ``` diff --git a/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDesignResources.md b/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDesignResources.md index 935baaad273b80..55e65d245cd573 100644 --- a/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDesignResources.md +++ b/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDesignResources.md @@ -22,16 +22,6 @@ These SharePoint design resources provide everything you need to design your web
  • [SharePoint Toolkit (Figma)](https://aka.ms/SharePointToolkits/Web/Figma)
    • -

    Office Add-ins

    - -The Add-ins design toolkit provides layouts for interface elements and commonly used patterns in Word, Excel, and PowerPoint. Use it in addition to the Microsoft design toolkits to create an add-in that fits within Office. - -
      -
    • [Add-ins Toolkit (Sketch)](https://aka.ms/addins_sketch_toolkit)
      • -
    • [Designing Office Add-ins](https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-design)
      • -
    • [Add-ins Toolkit (XD)](https://aka.ms/addins_toolkit)
      • -
    - ### Fonts
      diff --git a/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDeveloperResources.md b/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDeveloperResources.md index abce5f2d41a72a..4237577575722a 100644 --- a/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDeveloperResources.md +++ b/apps/public-docsite/src/pages/Overviews/ResourcesPage/docs/default/ResourcesDeveloperResources.md @@ -41,12 +41,3 @@ SharePoint uses Fluent UI, so if you’re building on top of or within a SharePo
    • [Theme Designer](https://aka.ms/themedesigner)
    • [Get started with building client-side web parts](https://aka.ms/spfx-tutorials)
    - -

    Office Add-ins

    - -Fluent UI is the official UI toolkit for creating Office Add-ins. Check out some of these resources to learn more about how to use Fluent UI in your next Add-in. - -
      -
    • [Add-ins overview](https://docs.microsoft.com/office/dev/add-ins/)
      • -
    • [Using Fluent UI React in your Add-ins](https://docs.microsoft.com/office/dev/add-ins/design/add-in-design)
      • -
    diff --git a/apps/public-docsite/src/pages/Styles/Colors/docs/web/ColorsNeutrals.md b/apps/public-docsite/src/pages/Styles/Colors/docs/web/ColorsNeutrals.md index 451406bc4ec603..2521dea7b385f8 100644 --- a/apps/public-docsite/src/pages/Styles/Colors/docs/web/ColorsNeutrals.md +++ b/apps/public-docsite/src/pages/Styles/Colors/docs/web/ColorsNeutrals.md @@ -1,5 +1,5 @@ These are commonly used for backgrounds, strokes, and interactive states within controls. -This palette can be used to customize your `theme.palette`. See how our default `theme.palette` maps to new Fluent colors with this [web color conversion table](https://static2.sharepointonline.com/files/fabric/fabric-website/files/fabric-neutrals-web-color-conversion.pdf).​​ +This palette can be used to customize your `theme.palette`. See how our default `theme.palette` maps to new Fluent colors with this [web color conversion table](https://res-1.cdn.office.net/files/fabric-cdn-prod_20221209.001/fabric-website/files/fabric-neutrals-web-color-conversion.pdf).​​ In case you have a need to create a custom neutral theme palette to use in your application, you can use the [Theme Designer](https://aka.ms/themedesigner).​ diff --git a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx index b2063d5d2023c6..c3e0a6534abda3 100644 --- a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx +++ b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx @@ -69,7 +69,7 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { ) } - + {selectedItem === 'svg-branded' && ( )} diff --git a/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md b/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md index 6dc50f29d74462..2a5ff87cf81d62 100644 --- a/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md +++ b/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md @@ -1,7 +1,7 @@ Fluent UI primarily uses a custom font for its iconography, released under the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license). As of Fluent UI React version 8, an SVG-based version of the same icon set is available under the MIT license. -**This page is about the general-use monoline icons. See the [brand icons page](#/styles/web/office-brand-icons) for multi-color product icons and the [file type icons page](#/styles/web/file-type-icons) for document icons.** +**This page is about the general-use monoline icons. See the [product icons page](#/styles/web/m365-product-icons) for multi-color product icons and the [file type icons page](#/styles/web/file-type-icons) for document icons.** ### When should I use Fluent UI icons? -It is recommended to use Fluent UI icons for command bars, navigation or status indicators. If you need icons to represent Office apps, see the [Office brand icons page](#/styles/web/office-brand-icons). If you are representing files or digital content, see the [file type icons page](#/styles/web/file-type-icons). +It is recommended to use Fluent UI icons for command bars, navigation or status indicators. If you need icons to represent Microsoft 365 apps, see the [Microsoft 365 product icons page](#/styles/web/m365-product-icons). If you are representing files or digital content, see the [file type icons page](#/styles/web/file-type-icons). diff --git a/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md b/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md index 0a95e5f84fe425..9c797e71929da5 100644 --- a/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md +++ b/apps/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md @@ -1,6 +1,6 @@ -An SVG-based version of Fluent UI's icon set is available from `@fluentui/react-icons-mdl2` and is released under the MIT license. This is the same MDL2 icon set used in the font icons, excluding any branded icons. +An SVG-based version of Fluent UI's icon set is available from `@fluentui/react-icons-mdl2` and is released under the MIT license. This is the same MDL2 icon set used in the font icons, excluding any product icons. -Branded SVG icons are available from `@fluentui/react-icons-mdl2-branded` and are still subject to the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license). +Product SVG icons are available from `@fluentui/react-icons-mdl2-branded` and are still subject to the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license). Both packages contain SVG icons wrapped in React components. This allows you to import and bundle only the icons you need, resulting in smaller download sizes compared to the font-based approach with `initializeIcons`, which downloads all icons by default. diff --git a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.module.scss b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.module.scss index c13274d71e0dd9..3450cf0da0ee78 100644 --- a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.module.scss +++ b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.module.scss @@ -62,7 +62,7 @@ } } -.brandIconsPage .brandIconsPageLink { +.productIconsPage .productIconsPageLink { color: $ms-color-themePrimary; } diff --git a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx index 74152f08482717..0036be34cb055e 100644 --- a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx +++ b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx @@ -11,7 +11,7 @@ const baseUrl = 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs'; // eslint-disable-next-line import/no-extraneous-dependencies -const documentIcons = require<{ name: string }[]>('@fluentui/public-docsite/lib/data/brand-icons-documents.json'); +const documentIcons = require<{ name: string }[]>('@fluentui/public-docsite/lib/data/product-icons-documents.json'); export const FileTypeIconsPage: React.FunctionComponent = props => { const { platform } = props; @@ -47,7 +47,7 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { Use file type icons to indicate to users that they are creating a new file of that type. Make sure that a file of the type that the icon represents loads when the user selects the icon. For example, do not use a Word .docx icon to open a .txt file. File type icons should always represent - Microsoft Office files. + Microsoft 365 files.

    If you're looking for icons for command bars, navigation, status indicators, or similar, check out @@ -55,10 +55,10 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { Fluent UI icons page - . {/* comment to prevent eslint/prettier conflict */}Alternatively, if you're looking for brand + . {/* comment to prevent eslint/prettier conflict */}Alternatively, if you're looking for product logos, or the icons of apps themselves, check out the{' '} - - Fluent UI brand icons page + + Fluent UI product icons page .

    diff --git a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsOverview.md b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsOverview.md index 6ce6e06097917e..c726149e7b07c8 100644 --- a/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsOverview.md +++ b/apps/public-docsite/src/pages/Styles/FileTypeIconsPage/docs/web/FileTypeIconsOverview.md @@ -2,4 +2,4 @@ Fluent UI includes document icons that you can use to connect your experience to File type icons represent user content, typically "files" in the classical sense, but also many "digital objects" like SharePoint pages or Sway stories. These icons are usually bigger and more detailed than command icons, and they're replaced with an actual thumbnail preview when possible. -Usage of these icons is subject to the [assets license agreement (PDF)](https://aka.ms/fluentui-assets-license). Please read this document and the resolution/size guidance carefully to ensure that you use our branded icons correctly to create the best experience. +Usage of these icons is subject to the [assets license agreement (PDF)](https://aka.ms/fluentui-assets-license). Please read this document and the resolution/size guidance carefully to ensure that you use our product icons correctly to create the best experience. diff --git a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.doc.ts b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.doc.ts similarity index 57% rename from apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.doc.ts rename to apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.doc.ts index 148199fc12c6f9..f0346f84a6538c 100644 --- a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.doc.ts +++ b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.doc.ts @@ -1,10 +1,10 @@ import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -const title = 'Office Brand Icons'; +const title = 'Microsoft 365 Product Icons'; const componentUrl = - 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage'; + 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/M365ProductIconsPage'; -export const OfficeBrandIconsPageProps: TFabricPlatformPageProps = { +export const M365ProductIconsPageProps: TFabricPlatformPageProps = { web: { title, componentUrl, diff --git a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.module.scss b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.module.scss similarity index 96% rename from apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.module.scss rename to apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.module.scss index 73cb4739d04aaa..99ae5cc31ead96 100644 --- a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.module.scss +++ b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.module.scss @@ -59,7 +59,7 @@ } } -.brandIconsPage .brandIconsPageLink { +.productIconsPage .productIconsPageLink { color: $ms-color-themePrimary; } diff --git a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.tsx b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.tsx similarity index 79% rename from apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.tsx rename to apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.tsx index eb3a7c62ff3cae..a1febd7bdb35d9 100644 --- a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.tsx +++ b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/M365ProductIconsPage.tsx @@ -2,25 +2,26 @@ import * as React from 'react'; import { Image, Link } from '@fluentui/react'; import { Markdown, MarkdownHeader, IPageSectionProps } from '@fluentui/react-docsite-components/lib/index2'; import { IStylesPageProps, StylesAreaPage } from '../StylesAreaPage'; -import { OfficeBrandIconsPageProps } from './OfficeBrandIconsPage.doc'; +import { M365ProductIconsPageProps } from './M365ProductIconsPage.doc'; import { Platforms } from '../../../interfaces/Platforms'; -import * as styles from './OfficeBrandIconsPage.module.scss'; +import { cdnUrl } from '../../../utilities/cdn'; +import * as styles from './M365ProductIconsPage.module.scss'; const baseUrl = - 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs'; -const fabricCDN = 'https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets'; + 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs'; +const fabricCDN = `${cdnUrl}/assets`; const productIcons = require< { icon: string; name: string }[] // eslint-disable-next-line import/no-extraneous-dependencies ->('@fluentui/public-docsite/lib/data/brand-icons-products.json'); +>('@fluentui/public-docsite/lib/data/product-icons.json'); -export const OfficeBrandIconsPage: React.FunctionComponent = props => { +export const M365ProductIconsPage: React.FunctionComponent = props => { const { platform } = props; return ( ); @@ -32,23 +33,23 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { return [ { sectionName: 'Overview', - editUrl: `${baseUrl}/web/OfficeBrandIconsOverview.md`, + editUrl: `${baseUrl}/web/M365ProductIconsOverview.md`, content: ( <> { - require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsOverview.md') as string + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsOverview.md') as string } - When should I use Office Brand icons? + When should I use Microsoft 365 Product icons?

    - Use Office brand icons to help your users transition between Microsoft products. Product icons - should only be used when the behavior of the command (app icon) is to launch the application. Do - not use a product icon to create a new file of that type. For example, do not use the Word app - icon for the menu option that allows users create a new Word document. + Use Microsoft 365 product icons to help your users transition between Microsoft products. Product + icons should only be used when the behavior of the command (app icon) is to launch the + application. Do not use a product icon to create a new file of that type. For example, do not use + the Word app icon for the menu option that allows users create a new Word document.

    If you're looking for icons for command bars, navigation, status indicators, or similar, check out @@ -96,14 +97,14 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { }, { sectionName: 'Format and sizes', - editUrl: `${baseUrl}/web/OfficeBrandIconsFormat.md`, + editUrl: `${baseUrl}/web/M365ProductIconsFormat.md`, content: (

    { - require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsFormat.md') as string + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsFormat.md') as string }
    @@ -153,29 +154,29 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { }, { sectionName: 'Resolutions', - editUrl: `${baseUrl}/web/OfficeBrandIconsResolutions.md`, + editUrl: `${baseUrl}/web/M365ProductIconsResolutions.md`, content: ( { - require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsResolutions.md') as string + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsResolutions.md') as string } ), }, { sectionName: 'Implementation', - editUrl: `${baseUrl}/web/OfficeBrandIconsImplementation.md`, + editUrl: `${baseUrl}/web/M365ProductIconsImplementation.md`, content: ( { - require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsImplementation.md') as string + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsImplementation.md') as string } ), }, { - sectionName: 'Branded icon library', + sectionName: 'Product icon library', content: ( <>
      diff --git a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsFormat.md b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsFormat.md similarity index 58% rename from apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsFormat.md rename to apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsFormat.md index 8f248e0e2e36e6..02a1a3413de584 100644 --- a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsFormat.md +++ b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsFormat.md @@ -1,4 +1,4 @@ -Office brand icons look best at 16x16, 48x48, and 96x96 pixel sizes in the UI of Microsoft products. Fluent UI provides these icons in both SVG and PNG formats. SVGs are more versatile, and can be resized more easily since they are vectors, but are not supported by all browsers. PNGs are supported by most browsers, but require many sizes to remain visually crisp. +Microsoft 365 product icons look best at 16x16, 48x48, and 96x96 pixel sizes in the UI of Microsoft products. Fluent UI provides these icons in both SVG and PNG formats. SVGs are more versatile, and can be resized more easily since they are vectors, but are not supported by all browsers. PNGs are supported by most browsers, but require many sizes to remain visually crisp. Both PNGs and SVGs are available in predefined dimensions at 16x16, 20x20, 32x32, 40x40, 48x48, 64x64 and 96x96 pixel sizes. Where possible, use the default sizes to prevent artifacts and blurry subpixel rendering for PNGs. Otherwise, use the size that most closely maps to what you need for your experience for the best quality. diff --git a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsImplementation.md b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsImplementation.md similarity index 51% rename from apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsImplementation.md rename to apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsImplementation.md index c74b0b898e880b..dcad916ece372f 100644 --- a/apps/public-docsite/src/pages/Styles/OfficeBrandIconsPage/docs/web/OfficeBrandIconsImplementation.md +++ b/apps/public-docsite/src/pages/Styles/M365ProductIconsPage/docs/web/M365ProductIconsImplementation.md @@ -1,12 +1,12 @@ -To use the Microsoft 365 multicolor brand icons, select the format and size that best meets your needs. Fluent UI includes a media query that automatically selects the right image file for the pixel density of the screen you’re targeting. +To use the Microsoft 365 multicolor product icons, select the format and size that best meets your needs. Fluent UI includes a media query that automatically selects the right image file for the pixel density of the screen you’re targeting. The following code shows you how to specify a 96px product icon by brand using the [office-ui-fabric-core](https://github.com/OfficeDev/office-ui-fabric-core) CSS and a `
      ` element: ```jsx -// Sample code for using office-ui-fabric-core version 11.0.0 to display an Word 96x96px Icon +// Sample code for using office-ui-fabric-core version 11.1.0 to display an Word 96x96px Icon
      @@ -16,7 +16,7 @@ This following code shows you how to specify a 48px product icon by brand using ```jsx Word product icon[] { Delete & Slide

      This pattern for deleting an object from the view and how the remaining objects realign themselves.

      -
      - + ), ], } as ComponentMeta; diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index 3645856fc30147..282b0674b386ed 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; @@ -42,7 +42,7 @@ const nameAndImage = [ /** Arrays of example values for each Avatar prop */ const examples = { size: [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128], - nameAndImage: nameAndImage, + nameAndImage, name: nameAndImage.map(p => p.name), image: nameAndImage.map(p => p.image), badge: [ @@ -193,7 +193,7 @@ storiesOf('Avatar Converged', module)
    )) .addDecorator(story => ( - {story()} + {story()} )) .addStory( 'basic', @@ -243,4 +243,5 @@ storiesOf('Avatar Converged', module) includeHighContrast: true, includeDarkMode: true, }) - .addStory('image-bad-url', () => ); + .addStory('image-bad-url', () => ) + .addStory('image-bad-url+icon', () => ); diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 4ba18d54606c99..6bd674763f1cb4 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { storiesOf } from '@storybook/react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { AvatarGroup, AvatarGroupItem, @@ -74,7 +74,7 @@ const AvatarGroupList: React.FC< storiesOf('AvatarGroup Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - {story()} + {story()} )) .addStory('basic', () => , { includeHighContrast: true, @@ -136,9 +136,9 @@ storiesOf('AvatarGroup Converged', module) storiesOf('AvatarGroup Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - + {story()} - + )) .addStory( 'overflowContent', diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx index 88c0021b684d34..53bb727299c9a2 100644 --- a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Button } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'Button Converged', Component: Button, - decorators: [story => withScreenerSteps({ story, steps })], + decorators: [story => withStoryWrightSteps({ story, steps })], } as ComponentMeta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx index 4c067d60f87042..01daae64e160a7 100644 --- a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities'; +import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'CompoundButton Converged', component: CompoundButton, - decorators: [story => withScreenerSteps({ story, steps })], + decorators: [story => withStoryWrightSteps({ story, steps })], } as ComponentMeta; export const Outline = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx index 3d73daf5f7d912..cce9b57adaa9c6 100644 --- a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities'; +import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities'; import { buttonId } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); -const steps = new Screener.Steps() +const steps = new Steps() .snapshot('default', { cropTo: '.testWrapper' }) // https://github.com/microsoft/fluentui/issues/21998 // .hover('#button-id') @@ -20,7 +20,7 @@ const steps = new Screener.Steps() export default { title: 'CompoundButton Converged', component: CompoundButton, - decorators: [story => withScreenerSteps({ story, steps })], + decorators: [story => withStoryWrightSteps({ story, steps })], } as ComponentMeta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx index 492115ce9318c0..811a358b2c3861 100644 --- a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { MenuButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities'; +import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'MenuButton Converged', component: MenuButton, - decorators: [story => withScreenerSteps({ story, steps })], + decorators: [story => withStoryWrightSteps({ story, steps })], } as ComponentMeta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx index 4e8e4bff57ea60..bbf967d53bb444 100644 --- a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ToggleButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'ToggleButton Converged', component: ToggleButton, - decorators: [story => withScreenerSteps({ story, steps })], + decorators: [story => withStoryWrightSteps({ story, steps })], } as ComponentMeta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/Button/utils.ts b/apps/vr-tests-react-components/src/stories/Button/utils.ts index 41cf2954cabb2b..651478afafb80e 100644 --- a/apps/vr-tests-react-components/src/stories/Button/utils.ts +++ b/apps/vr-tests-react-components/src/stories/Button/utils.ts @@ -1,4 +1,4 @@ -import Screener from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { makeStyles } from '@griffel/react'; export const buttonId = 'button-id'; @@ -9,7 +9,7 @@ export const useStyles = makeStyles({ }, }); -export const steps = new Screener.Steps() +export const steps = new Steps() .snapshot('default', { cropTo: '.testWrapper' }) .hover('#button-id') .snapshot('hover', { cropTo: '.testWrapper' }) diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx index 12f1bb416a430a..93952e93137c14 100644 --- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Card, CardHeader, CardPreview } from '@fluentui/react-card'; import { MoreHorizontal24Filled } from '@fluentui/react-icons'; import { Body1, Caption1 } from '@fluentui/react-text'; @@ -13,11 +13,11 @@ export default { decorators: [ story => ( - +
    {story()}
    -     + ), ], } as ComponentMeta; diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx index 2a4946ff607a45..953270ef12da4b 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Card } from '@fluentui/react-card'; import { action } from '@storybook/addon-actions'; import { SampleCardContent } from './utils'; @@ -11,8 +11,8 @@ export default { decorators: [ story => ( - {story()}
    - + ), ], } as ComponentMeta; diff --git a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx index 8ffcbb067ec181..c05755f3317c91 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Card } from '@fluentui/react-card'; import { SampleCardContent } from './utils'; import { ComponentMeta } from '@storybook/react'; @@ -10,8 +10,8 @@ export default { decorators: [ story => ( - {story()}
    - + ), ], } as ComponentMeta; diff --git a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx index ec456a60d55a09..375a23d90e89b4 100644 --- a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Checkbox } from '@fluentui/react-checkbox'; import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; @@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato storiesOf('Checkbox Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('unchecked', () => , { includeRtl: true }) .addStory('checked', () => ) @@ -27,7 +27,7 @@ storiesOf('Checkbox Converged', module) storiesOf('Checkbox Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} + {story()} )) .addStory('disabled+checked', () => ) .addStory('disabled+mixed', () => ) diff --git a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider.stories.tsx index 3c07d6fd9b943d..28cbc16ac0efb6 100644 --- a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Divider.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Divider } from '@fluentui/react-divider'; import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index'; @@ -7,7 +7,7 @@ import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utiliti storiesOf('Divider Converged - Horizontal', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} + {story()} )) .addStory('without content', () => , { includeRtl: true }) .addStory('with content', () => Today, { @@ -37,7 +37,7 @@ storiesOf('Divider Converged - Vertical', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => (
    - {story()} + {story()}
    )) .addStory('Center Aligned', () => Today) diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx index 8f1fae22d29d7b..a633595429512b 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox'; import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox'; @@ -24,11 +24,11 @@ type FieldControlProps = Pick< */ const storiesOfField = (name: string, Field: React.VoidFunctionComponent) => storiesOf(name, module) - .addDecorator(story => {story()}) + .addDecorator(story => {story()}) .addDecorator(story => (
    - {story()} + {story()}
    )) diff --git a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx index d24288b7aee426..e8f0e9953a255f 100644 --- a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Image } from '@fluentui/react-image'; import { ComponentMeta } from '@storybook/react'; @@ -10,7 +10,7 @@ export default { decorators: [ (story: () => React.ReactNode) => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/apps/vr-tests-react-components/src/stories/Input.stories.tsx b/apps/vr-tests-react-components/src/stories/Input.stories.tsx index 8e527d97762968..d3233f1b528209 100644 --- a/apps/vr-tests-react-components/src/stories/Input.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Input.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Input } from '@fluentui/react-input'; import { SearchRegular, DismissRegular } from '@fluentui/react-icons'; @@ -8,7 +8,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato storiesOf('Input Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('Appearance: outline (default)', () => ) .addStory('Appearance: underline', () => ) @@ -47,7 +47,7 @@ storiesOf('Input Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) // note: due to reused "Input Converged" story ID, TestWrapperDecoratorFixedWidth is also reused .addDecorator(story => ( - {story()} + {story()} )) .addStory('Size: small', () => ) .addStory('Size: large', () => ) diff --git a/apps/vr-tests-react-components/src/stories/Label.stories.tsx b/apps/vr-tests-react-components/src/stories/Label.stories.tsx index 7129463cf183ec..e7be90a5e6ba5b 100644 --- a/apps/vr-tests-react-components/src/stories/Label.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Label.stories.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Label } from '@fluentui/react-label'; storiesOf('Label Converged', module) .addDecorator(story => // prettier-ignore - {story()} - , + , ) .addStory('Root', () => , { includeRtl: true, diff --git a/apps/vr-tests-react-components/src/stories/Link.stories.tsx b/apps/vr-tests-react-components/src/stories/Link.stories.tsx index 9627393c11d628..102bc0f6f626d9 100644 --- a/apps/vr-tests-react-components/src/stories/Link.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; @@ -8,7 +8,7 @@ const ButtonLink = (props: LinkProps) => ; storiesOf('Link Converged - Rendered as anchor', module) .addDecorator(story => ( - {story()} - + )) .addStory('Stand-alone', () => Stand-alone link, { includeRtl: true, @@ -62,7 +62,7 @@ storiesOf('Link Converged - Rendered as anchor', module) // We put the disabled stories separately so they do not error on the focused step. storiesOf('Link Converged - Rendered as anchor', module) .addDecorator(story => ( - {story()} - + )) .addStory('Stand-alone Disabled', () => Stand-alone disabled link) .addStory('Inline Disabled', () => ( @@ -88,7 +88,7 @@ storiesOf('Link Converged - Rendered as anchor', module) storiesOf('Link Converged - Rendered as button', module) .addDecorator(story => ( - {story()} - + )) .addStory('Stand-alone', () => Stand-alone link, { includeRtl: true }) .addStory('Stand-alone Disabled Focusable', () => ( @@ -134,7 +134,7 @@ storiesOf('Link Converged - Rendered as button', module) // We put the disabled stories separately so they do not error on the focused step. storiesOf('Link Converged - Rendered as button', module) .addDecorator(story => ( - {story()} - + )) .addStory('Stand-alone Disabled', () => Stand-alone disabled link) .addStory('Inline Disabled', () => ( diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx index 04f5d24878ccf7..ccbd6d5f9cd572 100644 --- a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx @@ -3,7 +3,7 @@ import { FluentProvider } from '@fluentui/react-provider'; import { tokens, webLightTheme } from '@fluentui/react-theme'; import { storiesOf } from '@storybook/react'; import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; const useStyles = makeStyles({ box: { @@ -155,11 +155,11 @@ export const Propagation = () => ( storiesOf('MakeStyles', module) .addDecorator(story => ( - +
    {story()}
    -     + )) .addStory('RTL: two components in a single Provider', () => ( @@ -194,7 +194,7 @@ storiesOf('MakeStyles', module) storiesOf('MakeStyles (pseudo)', module) .addDecorator(story => ( - {story()}
    - + )) .addStory('insertion is ordered', () => ); diff --git a/apps/vr-tests-react-components/src/stories/Menu.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu.stories.tsx index 3042f445b1620b..9c16136f367aa0 100644 --- a/apps/vr-tests-react-components/src/stories/Menu.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu.stories.tsx @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Menu, MenuTrigger, @@ -18,9 +18,7 @@ import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react- storiesOf('Menu Converged - basic', module) .addDecorator(story => ( - - {story()} - + {story()} )) .addStory( 'default', @@ -44,9 +42,7 @@ storiesOf('Menu Converged - basic', module) storiesOf('Menu Converged - secondary content', module) .addDecorator(story => ( - - {story()} - + {story()} )) .addStory( 'default', @@ -73,7 +69,7 @@ storiesOf('Menu Converged - secondary content', module) ); storiesOf('Menu Converged - groups', module) - .addDecorator(story => {story()}) + .addDecorator(story => {story()}) .addStory( 'default', () => ( @@ -106,9 +102,9 @@ storiesOf('Menu Converged - groups', module) storiesOf('Menu Converged - selection', module) .addDecorator(story => ( - + {story()} - + )) .addStory( 'checkbox', @@ -138,9 +134,9 @@ storiesOf('Menu Converged - selection', module) storiesOf('Menu Converged - selection groups', module) .addDecorator(story => ( - + {story()} - + )) .addStory( 'default', @@ -187,7 +183,7 @@ storiesOf('Menu Converged - selection groups', module) storiesOf('Menu Converged - nested submenus', module) .addDecorator(story => ( // https://github.com/microsoft/fluentui/issues/19782 - {story()} + {story()} )) .addStory( 'default', @@ -225,7 +221,7 @@ storiesOf('Menu Converged - nested submenus', module) storiesOf('Menu Converged - split item', module) .addDecorator(story => ( // https://github.com/microsoft/fluentui/issues/19782 - {story()} + {story()} )) .addStory( 'default', @@ -311,7 +307,7 @@ const ContextMenuArea = React.forwardRef((props, ref) => { storiesOf('Menu nested within a MenuTrigger', module) .addDecorator(story => ( // https://github.com/microsoft/fluentui/issues/19782 - {story()} + {story()} )) .addStory('default', () => ( @@ -333,9 +329,7 @@ storiesOf('Menu nested within a MenuTrigger', module) // this places text in the icon slot to verify alignment when not using v9 icons storiesOf('Menu Converged - icon slotted content', module) .addDecorator(story => ( - - {story()} - + {story()} )) .addStory( 'default', @@ -366,11 +360,9 @@ storiesOf('Menu Converged - icon slotted content', module) // this places text in the submenuIndicator slot to verify alignment when not using v9 icons storiesOf('Menu Converged - submenuIndicator slotted content', module) .addDecorator(story => ( - + {story()} - + )) .addStory( 'default', diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx index 444c7289de3fac..a74b9f7f32335f 100644 --- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Persona } from '@fluentui/react-persona'; import type { PersonaProps } from '@fluentui/react-persona'; @@ -15,7 +15,7 @@ storiesOf('Persona Converged', module)
    )) .addDecorator(story => ( - {story()} + {story()} )) .addStory( 'basic', diff --git a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover.stories.tsx index 3b3c92092a1b0c..509369124bc275 100644 --- a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Popover.stories.tsx @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover'; import { tokens } from '@fluentui/react-theme'; import { TestWrapperDecorator } from '../utilities/index'; @@ -50,23 +50,20 @@ const PopoverPositioning: React.FC = () => { storiesOf('Popover Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - {story()} - + )) .addStory('positioning', () => , { includeRtl: true, includeHighContrast: true }); storiesOf('Popover Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - + {story()} - + )) .addStory('avoid scrolling', () => { return ( diff --git a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx index e51b2472645a4d..6908cfe61e4946 100644 --- a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx @@ -11,7 +11,7 @@ import { useMergedRefs } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import { storiesOf } from '@storybook/react'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; const useStyles = makeStyles({ wrapper: { @@ -343,25 +343,27 @@ const Arrow: React.FC = () => { const AutoSize = () => { const styles = useStyles(); + const [overflowBoundary, setOverflowBoundary] = React.useState(null); const { containerRef, targetRef } = usePositioning({ position: 'below', autoSize: true, + overflowBoundary, }); return (
    - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Porta @@ -591,8 +593,8 @@ storiesOf('Positioning', module) .addStory('target property', () => ) .addStory('imperative target', () => ) .addStory('visibility modifiers', () => ( - - + )) .addStory('arrow', () => , { includeRtl: true }); diff --git a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx deleted file mode 100644 index dbcb867f9375c8..00000000000000 --- a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import { Progress } from '@fluentui/react-progress'; - -storiesOf('Progress converged', module) - .addStory('Indeterminate', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Indeterminate with thickness large', () => ) - .addStory('Determinate', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Determinate with thickness large', () => ) - .addStory('Error', () => ) - .addStory('Warning', () => ) - .addStory('Success', () => ); diff --git a/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx b/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx new file mode 100644 index 00000000000000..3af10e14e95582 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { ProgressBar } from '@fluentui/react-progress'; + +storiesOf('ProgressBar converged', module) + .addStory('Indeterminate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Indeterminate with thickness large', () => ) + .addStory('Determinate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Determinate with thickness large', () => ) + .addStory('Error', () => ) + .addStory('Warning', () => ) + .addStory('Success', () => ); diff --git a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx index c64c4054c44449..c2f2066840eda3 100644 --- a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Radio, RadioGroup } from '@fluentui/react-radio'; import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; @@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato storiesOf('Radio Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('unchecked', () => , { includeDarkMode: true, @@ -35,7 +35,7 @@ storiesOf('Radio Converged', module) storiesOf('Radio Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} + {story()} )) .addStory('disabled+checked', () => , { includeDarkMode: true, diff --git a/apps/vr-tests-react-components/src/stories/Select.stories.tsx b/apps/vr-tests-react-components/src/stories/Select.stories.tsx index 59b41cebe3cc74..cdb5e7266b3b21 100644 --- a/apps/vr-tests-react-components/src/stories/Select.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Select.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Select } from '@fluentui/react-select'; import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; @@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato storiesOf('Select Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('Appearance: outline (default)', () => ( diff --git a/apps/vr-tests-react-components/src/stories/Slider.stories.tsx b/apps/vr-tests-react-components/src/stories/Slider.stories.tsx index 402482e1bdfd11..4504d844b9a6bc 100644 --- a/apps/vr-tests-react-components/src/stories/Slider.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Slider.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Slider } from '@fluentui/react-slider'; import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; @@ -7,7 +7,7 @@ import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; storiesOf('Slider Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - {story()} - + )) .addStory('Root', () => , { includeRtl: true, @@ -37,7 +37,7 @@ storiesOf('Slider Converged', module) storiesOf('Slider Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - {story()} + {story()} )) .addStory('Horizontal - 0%', () => , { includeRtl: true }) .addStory('Horizontal - 100%', () => , { includeRtl: true }) diff --git a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx index f196bb27f94ab3..554e9b3dab3c6b 100644 --- a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { SpinButton, spinButtonClassNames } from '@fluentui/react-spinbutton'; import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; @@ -9,7 +9,7 @@ const cropTo = '.testWrapper'; storiesOf('SpinButton Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('Appearance: outline (default)', () => , { includeRtl: true, @@ -88,7 +88,7 @@ storiesOf('SpinButton Converged', module) storiesOf('SpinButton Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('At Max Bound', () => , { includeRtl: true, @@ -128,7 +128,7 @@ storiesOf('SpinButton Converged', module) storiesOf('SpinButton Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('At Min Bound', () => , { includeRtl: true, @@ -166,7 +166,7 @@ storiesOf('SpinButton Converged', module) storiesOf('SpinButton Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) - .addDecorator(story => {story()}) + .addDecorator(story => {story()}) .addStory('Size: small', () => , { includeRtl: true, includeHighContrast: true, diff --git a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx index 2e2226dbe6e027..1fea769cea587a 100644 --- a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Switch } from '@fluentui/react-switch'; import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; @@ -7,7 +7,7 @@ import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; storiesOf('Switch Converged', module) .addDecorator(TestWrapperDecorator) .addDecorator(story => ( - {story()} - + )) .addStory( 'Enabled and unchecked', diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx index 28568e335128f2..27f9a826608e16 100644 --- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx @@ -26,7 +26,7 @@ import { } from '@fluentui/react-table'; import { Button } from '@fluentui/react-button'; import { storiesOf } from '@storybook/react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; const items = [ { @@ -595,7 +595,7 @@ const SubtleSelection: React.FC = ({ noNativeElements }) => ( const layoutName = noNativeElements ? 'flex' : 'table'; storiesOf(`Table layout ${layoutName} - cell actions`, module) .addDecorator(story => ( - {story()} + {story()} )) .addStory('default', () => , { includeDarkMode: true, @@ -690,15 +690,15 @@ const SubtleSelection: React.FC = ({ noNativeElements }) => ( storiesOf(`Table ${layoutName} - subtle selection`, module) .addDecorator(story => ( - + {story()} - + )) .addStory('rest', () => ); storiesOf(`Table layout ${layoutName} - headers`, module) .addDecorator(story => ( - = ({ noNativeElements }) => ( .end()} > {story()} - + )) .addStory('sortable', () => , { includeDarkMode: true, diff --git a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx index 0904453a7d4da4..19f5f9ff46d8b9 100644 --- a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx @@ -1,12 +1,12 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { TabList, Tab } from '@fluentui/react-tabs'; storiesOf('TabList and Tab Converged', module) .addDecorator(story => ( - {story()} - + )) .addStory( 'Default', diff --git a/apps/vr-tests-react-components/src/stories/Text.stories.tsx b/apps/vr-tests-react-components/src/stories/Text.stories.tsx index 52edf3df66c814..71ac3ff142b143 100644 --- a/apps/vr-tests-react-components/src/stories/Text.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Text.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { storiesOf } from '@storybook/react'; -import Screener from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { Body1, Caption1, @@ -17,11 +17,11 @@ import { storiesOf('Text Converged', module) .addDecorator((story: () => React.ReactNode) => ( - +
    {story()}
    -     + )) .addStory( 'Default', diff --git a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx index b27d34bd925613..d5dbef6f5cdae1 100644 --- a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Textarea } from '@fluentui/react-textarea'; import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; @@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato storiesOf('Textarea Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - {story()} - + )) .addStory('Appearance: outline (default)', () =>