diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 20919e8987a9fa..f87d1f368c5021 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -83,6 +83,7 @@ apps/test-bundles @microsoft/fluentui-react apps/public-docsite-v9 @microsoft/cxe-red @microsoft/cxe-coastal @microsoft/fluentui-react-build apps/theming-designer @microsoft/fluentui-react apps/ssr-tests-v9 @microsoft/fluentui-react-build +apps/stress-test @microsoft/cxe-red @spmonahan @micahgodbolt #### Packages packages/azure-themes @hyoshis @Jacqueline-ms @@ -161,7 +162,6 @@ packages/react-components/react-tabs @microsoft/cxe-coastal @geoffcoxmsft packages/react-components/react-text @microsoft/cxe-prg packages/react-components/react-textarea @microsoft/cxe-red @sopranopillow packages/react-components/react-tooltip @microsoft/cxe-red @behowell @khmakoto -packages/react-components/react-list @microsoft/teams-prg packages/react-components/react-toolbar @microsoft/teams-prg @chpalac @ling1726 packages/react-components/react-portal-compat @microsoft/teams-prg packages/react-components/react-alert @microsoft/teams-prg @@ -173,6 +173,10 @@ packages/react-components/babel-preset-global-context @microsoft/teams-prg packages/react-components/react-table @microsoft/teams-prg packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow +packages/react-components/react-avatar-context @microsoft/teams-prg +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 # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/.github/actions/build-to/action.yml b/.github/actions/build-to/action.yml new file mode 100644 index 00000000000000..d9ad0d14d64d39 --- /dev/null +++ b/.github/actions/build-to/action.yml @@ -0,0 +1,35 @@ +name: 'Build workspaces' +description: 'Runs the build command for specific workspaces.' +inputs: + # Because Github Actions doesn't support arrays as inputs we need to pass the workspaces as a string and split them + # by spaces https://github.com/community/community/discussions/11692 + workspaces: + required: true + description: 'The workspaces you want to build. This parameter accepts multiple workspaces separated by a space.' + # This is based on the backfill cache provider options: https://github.com/microsoft/backfill#set-up-remote-cache + backfill-cache-provider: + required: false + description: 'The backfill cache provider' + default: 'azure-blob' + # Depending on the chosen cache provider there are multiple types of available options. In our case we use Azure Blob + # Storage. https://github.com/microsoft/backfill#microsoft-azure-blob-storage + backfill-cache-provider-options: + required: false + description: 'The backfill cache provider options' + # Flag to toggle backfill remote caching on / off + lage-write-remote-cache: + required: true + description: 'Whether to write to the remote cache' + default: 'true' + +runs: + using: 'composite' + steps: + - name: build package dependency tree (scripts:build) + working-directory: . + shell: bash + run: yarn build --to ${{ inputs.workspaces }} + env: + BACKFILL_CACHE_PROVIDER: ${{ inputs.backfill-cache-provider }} + BACKFILL_CACHE_PROVIDER_OPTIONS: ${{ inputs.backfill-cache-provider-options }} + LAGE_WRITE_REMOTE_CACHE: ${{ inputs.lage-write-remote-cache }} diff --git a/.github/triage-bot.config.json b/.github/triage-bot.config.json new file mode 100644 index 00000000000000..1f081d6cd3d218 --- /dev/null +++ b/.github/triage-bot.config.json @@ -0,0 +1,21 @@ +{ + "$schema": "../scripts/triage-bot/triage-bot.schema.json", + "params": [ + { + "keyword": "(@fluentui/react-northstar)", + "labels": ["Fluent UI react-northstar (v0)"], + "assignees": [] + }, + { "keyword": "(@fluentui/react)", "labels": ["Fluent UI react (v8)"], "assignees": [] }, + { + "keyword": "(@fluentui/react-components)", + "labels": ["Fluent UI react-components (v9)"], + "assignees": [] + }, + { + "keyword": "(@fluentui/web-components)", + "labels": ["web-components"], + "assignees": ["chrisdholt"] + } + ] +} diff --git a/.github/workflows/check-packages.yml b/.github/workflows/check-packages.yml index e1b98fa7168a02..43ef1e696c728d 100644 --- a/.github/workflows/check-packages.yml +++ b/.github/workflows/check-packages.yml @@ -3,6 +3,38 @@ on: pull_request: jobs: + dependency-deduplication: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v3 + with: + node-version: 14.18.1 + cache: 'yarn' + + - uses: tj-actions/changed-files@v32 + id: changed-files-specific + with: + files: | + yarn.lock + + - name: Check package duplicates + if: steps.changed-files-specific.outputs.any_changed == 'true' + run: | + echo "yarn.lock changed! Verifying package deduplication ..." + + npx yarn-deduplicate --strategy fewer --list --fail + + if [[ $? -ne 0 ]]; then + echo "Your changes introduced package duplication 🚨" + echo "Run 'npx yarn-deduplicate --strategy fewer' to fix those." + else + echo "No duplicate packages introduced ✅" + fi + dependency-mismatches: runs-on: ubuntu-latest steps: diff --git a/.github/workflows/create-milestone.yml b/.github/workflows/create-milestone.yml index 1121fbe7c3314c..ad38254db1f9a8 100644 --- a/.github/workflows/create-milestone.yml +++ b/.github/workflows/create-milestone.yml @@ -5,6 +5,9 @@ on: schedule: - cron: '0 0 1 * *' +permissions: + issues: write + jobs: create-milestone: name: Create this month's milestone diff --git a/.github/workflows/docsite-publish-chromatic.yml b/.github/workflows/docsite-publish-chromatic.yml new file mode 100644 index 00000000000000..2369a9478b3038 --- /dev/null +++ b/.github/workflows/docsite-publish-chromatic.yml @@ -0,0 +1,55 @@ +# Workflow name +name: 'Docsite publish to Chromatic' + +on: + push: + branches: + - master + workflow_dispatch: + +jobs: + check: + runs-on: ubuntu-latest + if: ${{ contains(github.event.head_commit.message, 'applying package updates') || github.event_name == 'workflow_dispatch' }} + + outputs: + status: ${{ steps.verify-react-components-changed.outputs.any_changed == 'true' || github.event_name == 'workflow_dispatch' }} + + steps: + - uses: actions/checkout@v3 + name: Checkout [master] + + - name: Verify react-compoenents has changed + uses: tj-actions/changed-files@v23.1 + id: verify-react-components-changed + with: + files: | + packages/react-components/react-components/package.json + deploy: + runs-on: ubuntu-latest + needs: check + if: needs.check.outputs.status == 'true' + + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v3 + with: + node-version: 14.18.1 + cache: 'yarn' + + - name: Install packages + run: yarn install --frozen-lockfile + + - name: Build dependencies + uses: ./.github/actions/build-to + with: + workspaces: '@fluentui/public-docsite-v9' + backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }} + + - name: Publish to Chromatic + run: yarn workspace @fluentui/public-docsite-v9 chromatic + env: + CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml new file mode 100644 index 00000000000000..fa9e24a32e5143 --- /dev/null +++ b/.github/workflows/docsite-publish-ghpages.yml @@ -0,0 +1,76 @@ +# Workflow name +name: 'Docsite publish to Github Pages' + +on: + push: + branches: + - master + workflow_dispatch: + +jobs: + check: + runs-on: ubuntu-latest + if: ${{ contains(github.event.head_commit.message, 'applying package updates') || github.event_name == 'workflow_dispatch' }} + + outputs: + status: ${{ steps.verify-react-components-changed.outputs.any_changed == 'true' || github.event_name == 'workflow_dispatch' }} + + steps: + - uses: actions/checkout@v3 + name: Checkout [master] + + - name: Verify react-compoenents has changed + uses: tj-actions/changed-files@v23.1 + id: verify-react-components-changed + with: + files: | + packages/react-components/react-components/package.json + build: + runs-on: ubuntu-latest + needs: check + if: needs.check.outputs.status == 'true' + + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v3 + with: + node-version: 14.18.1 + cache: 'yarn' + + - name: Install packages + run: yarn install --frozen-lockfile + + - name: Build dependencies + uses: ./.github/actions/build-to + with: + workspaces: '@fluentui/public-docsite-v9' + backfill-cache-provider-options: ${{ secrets.BACKFILL_CACHE_PROVIDER_OPTIONS }} + + - name: Build storybook + run: yarn workspace @fluentui/public-docsite-v9 build-storybook + + - name: Upload Pages Artifact + uses: actions/upload-pages-artifact@v1 + with: + path: './apps/public-docsite-v9/dist/storybook/' + deploy: + runs-on: ubuntu-latest + needs: build + + # Grant GITHUB_TOKEN the permissions required to make a Pages deployment + permissions: + pages: write # to deploy to Pages + id-token: write # to verify the deployment originates from an appropriate source + + # Deploy to the github-pages environment + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/.github/workflows/docsite-publish.yml b/.github/workflows/docsite-publish.yml deleted file mode 100644 index 65cf799be56e93..00000000000000 --- a/.github/workflows/docsite-publish.yml +++ /dev/null @@ -1,61 +0,0 @@ -# Workflow name -name: 'Docsite publish' - -on: - push: - branches: - - master - workflow_dispatch: - # both inputs are required by chromaui/action - # https://github.com/chromaui/action#triggering-from-workflow_dispatch - inputs: - sha: - description: The SHA-1 hash referring to the commit which will be used for publishing. - required: true - ref: - description: The head branch associated with the pull request. - required: true - -jobs: - check: - runs-on: ubuntu-latest - if: ${{ contains(github.event.head_commit.message, 'applying package updates') || github.event_name == 'workflow_dispatch' }} - - outputs: - status: ${{ steps.verify-react-components-changed.outputs.any_changed == 'true' || github.event_name == 'workflow_dispatch' }} - - steps: - - uses: actions/checkout@v3 - name: Checkout [master] - - - name: Verify react-compoenents has changed - uses: tj-actions/changed-files@v23.1 - id: verify-react-components-changed - with: - files: | - packages/react-components/react-components/package.json - deploy: - runs-on: ubuntu-latest - needs: check - if: needs.check.outputs.status == 'true' - - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - uses: actions/setup-node@v3 - with: - node-version: 14.18.1 - cache: 'yarn' - - - name: Install packages - run: yarn install --frozen-lockfile - - - name: Build dependencies - run: yarn build --to @fluentui/public-docsite-v9 - - - name: Publish to Chromatic - run: yarn workspace @fluentui/public-docsite-v9 chromatic - env: - CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml new file mode 100644 index 00000000000000..6464862d7e3315 --- /dev/null +++ b/.github/workflows/issues.yml @@ -0,0 +1,21 @@ +name: Triage Bot +on: + issues: + types: + - opened + +jobs: + triage-issue: + runs-on: ubuntu-latest + + permissions: + issues: write + + steps: + - uses: actions/checkout@v2 + - uses: actions/github-script@v6 + with: + script: | + const config = require('./.github/triage-bot.config.json'); + const run = require('./scripts/triage-bot'); + await run({github,context,core,config}); diff --git a/.github/workflows/screener-build.yml b/.github/workflows/screener-build.yml index b4873c6550d88c..f4ddf2e6633f10 100644 --- a/.github/workflows/screener-build.yml +++ b/.github/workflows/screener-build.yml @@ -1,11 +1,11 @@ name: Screener build on: - pull_request: push: branches: - master - workflow_dispatch: + pull_request: + types: [opened, reopened, synchronize, ready_for_review] env: DEPLOYHOST: 'fluentuipr.z22.web.core.windows.net' @@ -15,27 +15,52 @@ jobs: runs-on: ubuntu-latest steps: - run: mkdir artifacts - ########################################### - # Environment variables are passed as an artifact so that the run workflow - # can download and access them. There are two workflows used- `screener-build.yml` - # and `screener-run.yml` so that the screener checks can also be triggered by - # pull requests from forks. Note: This is a temporary change. - ########################################### + ########################################### # 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 - # BUILD_SOURCEBRANCH = branch that triggered the workflow -> refs/pull//merge ########################################### - name: Set base env variables run: | cat <> artifacts/environment BROWSERSLIST_IGNORE_OLD_DATA=true - DEPLOYHOST='fluentuipr.z22.web.core.windows.net' BUILD_BUILDID=${{ github.run_id }} - BUILD_SOURCEBRANCH=${{ github.ref }} 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 @@ -49,31 +74,27 @@ jobs: run: | cat <> artifacts/environment SYSTEM_PULLREQUEST_TARGETBRANCH=${{ github.event.pull_request.base.ref }} - SYSTEM_PULLREQUEST_SOURCEBRANCH=${{ github.event.pull_request.head.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='merge' + BUILD_SOURCEBRANCHNAME=${{ github.event.pull_request.head.ref }} EOT - if: ${{startsWith(github.ref, 'refs/pull/')}} - - - 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: ${{!startsWith(github.ref, 'refs/pull/')}} + 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: @@ -137,6 +158,8 @@ jobs: 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: @@ -198,6 +221,8 @@ jobs: 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: diff --git a/.github/workflows/screener-run.yml b/.github/workflows/screener-run.yml index 5173978050c8c8..6ddd0a26c50bef 100644 --- a/.github/workflows/screener-run.yml +++ b/.github/workflows/screener-run.yml @@ -9,7 +9,26 @@ on: 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: @@ -87,6 +106,8 @@ jobs: 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: @@ -161,6 +182,8 @@ jobs: 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: diff --git a/.storybook/main.js b/.storybook/main.js index eaa33435ff1465..cce2e61868cd33 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -71,7 +71,8 @@ module.exports = /** @type {Omit} */ ({ */ enforce: 'post', test: /\.stories\.tsx$/, - include: /src/, + //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/, exclude: /node_modules/, use: { loader: 'babel-loader', diff --git a/.vscode/launch.json b/.vscode/launch.json index ad44b4feb3276b..743eeae1d54bdd 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -128,7 +128,7 @@ "protocol": "inspector", "cwd": "${workspaceRoot}", "args": [ - "${workspaceRoot}/scripts/updateReleaseNotes/index.ts", + "${workspaceRoot}/scripts/update-release-notes/index.ts", "--token", // For local testing, generate a personal access token (https://github.com/settings/tokens) // and replace "your token here" with the token. DO NOT COMMIT YOUR TOKEN! diff --git a/README.md b/README.md index 3c3ef4995ac908..4662d73f44d707 100644 --- a/README.md +++ b/README.md @@ -6,34 +6,34 @@ Fluent UI web represents a collection of utilities, React components, and web components for building web applications. -This repo is home to 3 separate projects today. Mixing components between projects is not currently supported. The goal of these projects is to dedupe functionality and enable interoperability over time. For now, choose the project that best suits your needs. +This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9. The following table will help you navigate the 3 projects and understand their differences. -| | React | React Northstar | Web Components | +| | React Components (v9) | React (v8) | Web Components | |---| ----- | --------------- | -------------- | -| **Overview** | Mature, refreshing with new concepts from react-northstar. | Newer, has concepts we're iterating on. | Web Component implementation of Fluent UI. | -| **Used By** | Office| Teams | Edge | -| **Read Me** | [README.md](/packages/react/README.md) | [README.md](/packages/fluentui/README.md) | [README.md](/packages/web-components/README.md) | -| **Changelog** | [CHANGELOG.md](/packages/react/CHANGELOG.md) | [CHANGELOG.md](/packages/fluentui/CHANGELOG.md) | [CHANGELOG.md](/packages/web-components/CHANGELOG.md) | -| **Repo** | [./packages/react](/packages/react) | [./packages/fluentui/react-northstar](/packages/fluentui/react-northstar) | [./packages/web-components](/packages/web-components) | -| **Quick Start** | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [Quick Start](https://fluentsite.z22.web.core.windows.net/quick-start) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) | -| **Docs** | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-react-northstar](https://aka.ms/fluentui-react-northstar) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) | -| **NPM** | `@fluentui/react` | `@fluentui/react-northstar` | `@fluentui/web-components` | -| **Version** | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/react-northstar?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-northstar) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components) | -| **Issues** | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI React Northstar GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-northstar?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-northstar%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) | +| **Overview** | New, future-proof and forward looking | Mature | Web Component implementation of Fluent UI. | +| **Used By** | Microsoft 365 | Office | Edge | +| **Read Me** | [README.md](/packages/react-components/react-components/README.md) | [README.md](/packages/react/README.md)| [README.md](/packages/web-components/README.md) | +| **Changelog** | [CHANGELOG.md](/packages/react-components/react-components/CHANGELOG.md) | [CHANGELOG.md](/packages/react/CHANGELOG.md) | [CHANGELOG.md](/packages/web-components/CHANGELOG.md) | +| **Repo** | [packages/react-components](/packages/react-components/react-components/CHANGELOG.md) | [./packages/react](/packages/react) | [./packages/web-components](/packages/web-components) | +| **Quick Start** | [Quick Start](https://react.fluentui.dev/?path=/docs/concepts-developer-quick-start--page) | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) | +| **Docs** | [https://react.fluentui.dev/](https://react.fluentui.dev/) | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) | +| **NPM** | `@fluentui/react-components` | `@fluentui/react`| `@fluentui/web-components` | +| **Version** | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components) | +| **Issues** | [![Fluent UI React Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) | -> Why are there two React versions? See the [FAQ on Fabric and Stardust](https://github.com/microsoft/fluentui/wiki/FAQ---Fabric-and-Stardust-to-Fluent-UI). +> Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https://react.fluentui.dev/?path=/docs/concepts-migration-overview--page). ## FluentUI Insights [Fluent UI Insights](https://docs.microsoft.com/en-us/shows/fluent-ui-insights?utm_source=github) is a series that describes the design and decisions behind the Fluent UI design system. -| EP01: Positioning | EP02: Styling | -| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -| Watch EP01: Positioning | Watch EP02: Styling | +| EP01: Positioning | EP02: Styling | EP03: Griffel | +| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| Watch EP01: Positioning | Watch EP02: Styling | Watch EP03: Griffel | ## Licenses @@ -53,6 +53,10 @@ The `office-ui-fabric-react` repo is now this repo (`fluentui` in the Microsoft We have a lot in store for Fluent UI - [Read our announcement here.](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/) +## Looking for Fluent UI React Northstar? + +Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about Fluent UI React Northstar, see its [README.md](/packages/fluentui/README.md). + --- This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. diff --git a/apps/perf-test-react-components/CHANGELOG.json b/apps/perf-test-react-components/CHANGELOG.json index e1c9f12db4893c..4ec673f75fc871 100644 --- a/apps/perf-test-react-components/CHANGELOG.json +++ b/apps/perf-test-react-components/CHANGELOG.json @@ -1,6 +1,78 @@ { "name": "@fluentui/perf-test-react-components", "entries": [ + { + "date": "Tue, 20 Sep 2022 20:55:45 GMT", + "tag": "@fluentui/perf-test-react-components_v9.0.0-rc.0", + "version": "9.0.0-rc.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-avatar to v9.1.1", + "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-button to v9.1.2", + "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-provider to v9.1.2", + "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-spinbutton to v9.0.2", + "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e" + } + ] + } + }, + { + "date": "Thu, 15 Sep 2022 09:50:08 GMT", + "tag": "@fluentui/perf-test-react-components_v9.0.0-rc.0", + "version": "9.0.0-rc.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-avatar to v9.1.0", + "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-button to v9.1.1", + "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-provider to v9.1.1", + "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-spinbutton to v9.0.1", + "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8" + }, + { + "author": "beachball", + "package": "@fluentui/perf-test-react-components", + "comment": "Bump @fluentui/react-theme to v9.1.0", + "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8" + } + ] + } + }, { "date": "Wed, 03 Aug 2022 16:04:10 GMT", "tag": "@fluentui/perf-test-react-components_v9.0.0-rc.0", diff --git a/apps/perf-test-react-components/CHANGELOG.md b/apps/perf-test-react-components/CHANGELOG.md index 9920d147de76be..02641ef682a434 100644 --- a/apps/perf-test-react-components/CHANGELOG.md +++ b/apps/perf-test-react-components/CHANGELOG.md @@ -1,11 +1,36 @@ # Change Log - @fluentui/perf-test-react-components -This log was last generated on Wed, 03 Aug 2022 16:04:10 GMT and should not be manually modified. +This log was last generated on Tue, 20 Sep 2022 20:55:45 GMT and should not be manually modified. ## [9.0.0-rc.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test-react-components_v9.0.0-rc.0) +Tue, 20 Sep 2022 20:55:45 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test-react-components_v9.0.0-rc.0..@fluentui/perf-test-react-components_v9.0.0-rc.0) + +### Patches + +- Bump @fluentui/react-avatar to v9.1.1 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball) +- Bump @fluentui/react-button to v9.1.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball) +- Bump @fluentui/react-provider to v9.1.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball) +- Bump @fluentui/react-spinbutton to v9.0.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball) + +## [9.0.0-rc.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test-react-components_v9.0.0-rc.0) + +Thu, 15 Sep 2022 09:50:08 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test-react-components_v9.0.0-rc.0..@fluentui/perf-test-react-components_v9.0.0-rc.0) + +### Patches + +- Bump @fluentui/react-avatar to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball) +- Bump @fluentui/react-button to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball) +- Bump @fluentui/react-provider to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball) +- Bump @fluentui/react-spinbutton to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball) +- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball) + +## [9.0.0-rc.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test-react-components_v9.0.0-rc.0) + Wed, 03 Aug 2022 16:04:10 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test-react-components_v9.0.0-rc.0..@fluentui/perf-test-react-components_v9.0.0-rc.0) diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 4929803a83c56e..55c092e105bb7d 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -15,12 +15,12 @@ "@fluentui/eslint-plugin": "*" }, "dependencies": { - "@griffel/core": "^1.5.1", - "@fluentui/react-avatar": "^9.0.4", - "@fluentui/react-button": "^9.1.0", - "@fluentui/react-provider": "^9.1.0", - "@fluentui/react-spinbutton": "^9.0.0", - "@fluentui/react-theme": "^9.0.0", + "@griffel/core": "^1.8.0", + "@fluentui/react-avatar": "^9.2.4", + "@fluentui/react-button": "^9.1.6", + "@fluentui/react-provider": "^9.1.5", + "@fluentui/react-spinbutton": "^9.0.6", + "@fluentui/react-theme": "^9.1.1", "@fluentui/scripts": "^1.0.0", "@microsoft/load-themed-styles": "^1.10.26", "flamegrill": "0.2.0", diff --git a/apps/perf-test/CHANGELOG.json b/apps/perf-test/CHANGELOG.json index a621b7ef9a3863..76d6b60ef11a4a 100644 --- a/apps/perf-test/CHANGELOG.json +++ b/apps/perf-test/CHANGELOG.json @@ -1,6 +1,111 @@ { "name": "@fluentui/perf-test", "entries": [ + { + "date": "Thu, 22 Sep 2022 07:43:45 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.96.1", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + } + ] + } + }, + { + "date": "Mon, 19 Sep 2022 07:47:30 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.96.0", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + } + ] + } + }, + { + "date": "Fri, 16 Sep 2022 07:37:32 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.95.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + } + ] + } + }, + { + "date": "Thu, 15 Sep 2022 19:15:27 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "minor": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.95.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + } + ] + } + }, + { + "date": "Tue, 13 Sep 2022 07:41:03 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.94.4", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + } + ] + } + }, + { + "date": "Thu, 08 Sep 2022 20:52:16 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.94.3", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + } + ] + } + }, + { + "date": "Wed, 07 Sep 2022 07:54:43 GMT", + "tag": "@fluentui/perf-test_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/perf-test", + "comment": "Bump @fluentui/react to v8.94.2", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + } + ] + } + }, { "date": "Mon, 05 Sep 2022 07:38:30 GMT", "tag": "@fluentui/perf-test_v1.0.0", diff --git a/apps/perf-test/CHANGELOG.md b/apps/perf-test/CHANGELOG.md index 60bdab6c4cef11..fde30b76358185 100644 --- a/apps/perf-test/CHANGELOG.md +++ b/apps/perf-test/CHANGELOG.md @@ -1,11 +1,74 @@ # Change Log - @fluentui/perf-test -This log was last generated on Mon, 05 Sep 2022 07:38:30 GMT and should not be manually modified. +This log was last generated on Thu, 22 Sep 2022 07:43:45 GMT and should not be manually modified. ## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) +Thu, 22 Sep 2022 07:43:45 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.96.1 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + +Mon, 19 Sep 2022 07:47:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.96.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + +Fri, 16 Sep 2022 07:37:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.95.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + +Thu, 15 Sep 2022 19:15:27 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Minor changes + +- Bump @fluentui/react to v8.95.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + +Tue, 13 Sep 2022 07:41:03 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.94.4 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + +Thu, 08 Sep 2022 20:52:16 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.94.3 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + +Wed, 07 Sep 2022 07:54:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.94.2 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/perf-test_v1.0.0) + Mon, 05 Sep 2022 07:38:30 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/perf-test_v1.0.0..@fluentui/perf-test_v1.0.0) diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 30395dabc9ecb4..ed23c3c006fa35 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -15,7 +15,8 @@ "@fluentui/eslint-plugin": "*" }, "dependencies": { - "@fluentui/react": "^8.94.1", + "@fluentui/example-data": "^8.4.2", + "@fluentui/react": "^8.98.8", "@fluentui/scripts": "^1.0.0", "@microsoft/load-themed-styles": "^1.10.26", "flamegrill": "0.2.0", diff --git a/apps/perf-test/src/scenarioIterations.js b/apps/perf-test/src/scenarioIterations.js index db017b5bbb8968..1e81dfe7943cbc 100644 --- a/apps/perf-test/src/scenarioIterations.js +++ b/apps/perf-test/src/scenarioIterations.js @@ -11,6 +11,11 @@ const scenarioIterations = { ComboBox: 1000, Persona: 1000, ContextualMenu: 1000, + /* List performance is generally more influenced by the size + * of the list rather than the number of lists on a page. + */ + GroupedList: 2, + GroupedListV2: 2, }; module.exports = scenarioIterations; diff --git a/apps/perf-test/src/scenarioRenderTypes.js b/apps/perf-test/src/scenarioRenderTypes.js index 2cdb377ceeced3..e30c3c4aaff06a 100644 --- a/apps/perf-test/src/scenarioRenderTypes.js +++ b/apps/perf-test/src/scenarioRenderTypes.js @@ -13,6 +13,8 @@ const DefaultRenderTypes = ['mount']; const scenarioRenderTypes = { ThemeProvider: AllRenderTypes, + GroupedList: AllRenderTypes, + GroupedListV2: AllRenderTypes, }; module.exports = { diff --git a/apps/perf-test/src/scenarios/GroupedList.tsx b/apps/perf-test/src/scenarios/GroupedList.tsx new file mode 100644 index 00000000000000..ed051e2130eea6 --- /dev/null +++ b/apps/perf-test/src/scenarios/GroupedList.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { createListItems, createGroups, IExampleItem } from '@fluentui/example-data'; +import { GroupedList, Selection, SelectionMode, DetailsRow, IGroup, IColumn } from '@fluentui/react'; + +const groupCount = 5; +const groupDepth = 5; +const items = createListItems(Math.pow(groupCount, groupDepth + 1)); +const groups = createGroups(groupCount, groupDepth, 0, groupCount); + +const columns = Object.keys(items[0]) + .slice(0, 3) + .map( + (key: string): IColumn => ({ + key: key, + name: key, + fieldName: key, + minWidth: 300, + }), + ); + +const selection = new Selection(); +selection.setItems(items); + +const onRenderCell = ( + nestingDepth?: number, + item?: IExampleItem, + itemIndex?: number, + group?: IGroup, +): React.ReactNode => { + return item && typeof itemIndex === 'number' && itemIndex > -1 ? ( + + ) : null; +}; + +const Scenario = () => { + return ( + + ); +}; + +export default Scenario; diff --git a/apps/perf-test/src/scenarios/GroupedListV2.tsx b/apps/perf-test/src/scenarios/GroupedListV2.tsx new file mode 100644 index 00000000000000..2e0d0123c6680f --- /dev/null +++ b/apps/perf-test/src/scenarios/GroupedListV2.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import { createListItems, createGroups, IExampleItem } from '@fluentui/example-data'; +import { + GroupedListV2_unstable as GroupedListV2, + Selection, + SelectionMode, + DetailsRow, + IGroup, + IColumn, +} from '@fluentui/react'; + +const groupCount = 5; +const groupDepth = 5; +const items = createListItems(Math.pow(groupCount, groupDepth + 1)); +const groups = createGroups(groupCount, groupDepth, 0, groupCount); + +const columns = Object.keys(items[0]) + .slice(0, 3) + .map( + (key: string): IColumn => ({ + key: key, + name: key, + fieldName: key, + minWidth: 300, + }), + ); + +const selection = new Selection(); +selection.setItems(items); + +const onRenderCell = ( + nestingDepth?: number, + item?: IExampleItem, + itemIndex?: number, + group?: IGroup, +): React.ReactNode => { + return item && typeof itemIndex === 'number' && itemIndex > -1 ? ( + + ) : null; +}; + +const Scenario = () => { + return ( + + ); +}; + +export default Scenario; diff --git a/apps/public-docsite-resources/CHANGELOG.json b/apps/public-docsite-resources/CHANGELOG.json index a5f082b6aa0eff..e1d52bd0546f5a 100644 --- a/apps/public-docsite-resources/CHANGELOG.json +++ b/apps/public-docsite-resources/CHANGELOG.json @@ -1,6 +1,294 @@ { "name": "@fluentui/public-docsite-resources", "entries": [ + { + "date": "Thu, 22 Sep 2022 07:43:45 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.96.1", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.5.3", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.10.3", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.7.3", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.3", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + } + ] + } + }, + { + "date": "Mon, 19 Sep 2022 07:47:30 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.96.0", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.5.2", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.10.2", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.7.2", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.2", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + } + ] + } + }, + { + "date": "Fri, 16 Sep 2022 07:37:32 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.95.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.5.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.10.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.7.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + } + ] + } + }, + { + "date": "Thu, 15 Sep 2022 19:15:27 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "minor": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.95.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.5.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.10.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.7.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + } + ] + } + }, + { + "date": "Tue, 13 Sep 2022 07:41:03 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.94.4", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.4.35", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.9.36", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.6.35", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.6.35", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + } + ] + } + }, + { + "date": "Mon, 12 Sep 2022 07:39:53 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.9.35", + "commit": "7f8bad094dadcdb671d5746848e96b5bd4b5791a" + } + ] + } + }, + { + "date": "Thu, 08 Sep 2022 20:52:16 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.94.3", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.4.34", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.9.34", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.6.34", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.6.34", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + } + ] + } + }, + { + "date": "Wed, 07 Sep 2022 07:54:43 GMT", + "tag": "@fluentui/public-docsite-resources_v8.1.41", + "version": "8.1.41", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react to v8.94.2", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/azure-themes to v8.4.33", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-docsite-components to v8.9.33", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/theme-samples to v8.6.33", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-resources", + "comment": "Bump @fluentui/react-monaco-editor to v1.6.33", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + } + ] + } + }, { "date": "Mon, 05 Sep 2022 07:38:30 GMT", "tag": "@fluentui/public-docsite-resources_v8.1.41", diff --git a/apps/public-docsite-resources/CHANGELOG.md b/apps/public-docsite-resources/CHANGELOG.md index 2c62094afe3458..84141735681a9f 100644 --- a/apps/public-docsite-resources/CHANGELOG.md +++ b/apps/public-docsite-resources/CHANGELOG.md @@ -1,11 +1,111 @@ # Change Log - @fluentui/public-docsite-resources -This log was last generated on Mon, 05 Sep 2022 07:38:30 GMT and should not be manually modified. +This log was last generated on Thu, 22 Sep 2022 07:43:45 GMT and should not be manually modified. ## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) +Thu, 22 Sep 2022 07:43:45 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react to v8.96.1 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) +- Bump @fluentui/azure-themes to v8.5.3 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) +- Bump @fluentui/react-docsite-components to v8.10.3 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) +- Bump @fluentui/theme-samples to v8.7.3 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.3 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Mon, 19 Sep 2022 07:47:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react to v8.96.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) +- Bump @fluentui/azure-themes to v8.5.2 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) +- Bump @fluentui/react-docsite-components to v8.10.2 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) +- Bump @fluentui/theme-samples to v8.7.2 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.2 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Fri, 16 Sep 2022 07:37:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react to v8.95.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) +- Bump @fluentui/azure-themes to v8.5.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) +- Bump @fluentui/react-docsite-components to v8.10.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) +- Bump @fluentui/theme-samples to v8.7.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Thu, 15 Sep 2022 19:15:27 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Minor changes + +- Bump @fluentui/react to v8.95.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) +- Bump @fluentui/azure-themes to v8.5.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) +- Bump @fluentui/react-docsite-components to v8.10.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) +- Bump @fluentui/theme-samples to v8.7.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Tue, 13 Sep 2022 07:41:03 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react to v8.94.4 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) +- Bump @fluentui/azure-themes to v8.4.35 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) +- Bump @fluentui/react-docsite-components to v8.9.36 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) +- Bump @fluentui/theme-samples to v8.6.35 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) +- Bump @fluentui/react-monaco-editor to v1.6.35 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Mon, 12 Sep 2022 07:39:53 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react-docsite-components to v8.9.35 ([PR #24746](https://github.com/microsoft/fluentui/pull/24746) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Thu, 08 Sep 2022 20:52:16 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react to v8.94.3 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) +- Bump @fluentui/azure-themes to v8.4.34 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) +- Bump @fluentui/react-docsite-components to v8.9.34 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) +- Bump @fluentui/theme-samples to v8.6.34 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) +- Bump @fluentui/react-monaco-editor to v1.6.34 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + +Wed, 07 Sep 2022 07:54:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) + +### Patches + +- Bump @fluentui/react to v8.94.2 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) +- Bump @fluentui/azure-themes to v8.4.33 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) +- Bump @fluentui/react-docsite-components to v8.9.33 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) +- Bump @fluentui/theme-samples to v8.6.33 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) +- Bump @fluentui/react-monaco-editor to v1.6.33 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) + +## [8.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-resources_v8.1.41) + Mon, 05 Sep 2022 07:38:30 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-resources_v8.1.41..@fluentui/public-docsite-resources_v8.1.41) diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 00590500e871ff..bf324b5371c9d1 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -85,6 +85,7 @@ module.exports = { 'TeachingBubble', 'Text', 'TextField', + 'TimePicker', 'Toggle', 'Tooltip', ], diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index e00fd26c30b901..9249a96baf9e33 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -32,15 +32,15 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.94.1", + "@fluentui/react": "^8.98.8", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.4.32", - "@fluentui/react-docsite-components": "^8.9.32", - "@fluentui/font-icons-mdl2": "^8.4.13", + "@fluentui/azure-themes": "^8.5.17", + "@fluentui/react-docsite-components": "^8.10.17", + "@fluentui/font-icons-mdl2": "^8.5.2", "@fluentui/set-version": "^8.2.2", - "@fluentui/theme-samples": "^8.6.32", - "@fluentui/react-monaco-editor": "^1.6.32", + "@fluentui/theme-samples": "^8.7.17", + "@fluentui/react-monaco-editor": "^1.7.17", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 4cd5dcd4bffbd7..4ef5cd53364386 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -485,6 +485,12 @@ export const AppDefinition: IAppDefinition = { name: 'TextField', url: '#/examples/textfield', }, + { + component: require('./components/pages/TimePickerPage').TimePickerPage, + key: 'TimePicker', + name: 'TimePicker', + url: '#/examples/timepicker', + }, { component: require('./components/pages/TogglePage').TogglePage, key: 'Toggle', diff --git a/apps/public-docsite-resources/src/components/pages/TimePickerPage.tsx b/apps/public-docsite-resources/src/components/pages/TimePickerPage.tsx new file mode 100644 index 00000000000000..989e34fcb57565 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/TimePickerPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../DemoPage'; + +import { TimePickerPageProps } from '@fluentui/react-examples/lib/react/TimePicker/TimePicker.doc'; + +export const TimePickerPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index b1cec15df3610a..a9ba66ecd41ff7 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -8,6 +8,7 @@ module.exports = /** @type {Omit pkgName.startsWith('@fluentui/') && !excludedDependencies.includes(pkgName)) .map(pkgName => { const name = pkgName.replace('@fluentui/', ''); - const storiesGlob = '/src/**/@(index.stories.@(ts|tsx)|*.stories.mdx)'; + const storiesGlob = '**/@(index.stories.@(ts|tsx)|*.stories.mdx)'; - return `../../../packages/react-components/${name}${storiesGlob}`; + //TODO: simplify once v9 migration [https://github.com/microsoft/fluentui/issues/24129] is complete. + if (fs.existsSync(`../../packages/react-components/${name}/stories/`)) { + return `../../../packages/react-components/${name}/stories/${storiesGlob}`; + } else { + return `../../../packages/react-components/${name}/src/${storiesGlob}`; + } }); } diff --git a/apps/public-docsite-v9/.storybook/manager-head.html b/apps/public-docsite-v9/.storybook/manager-head.html index 166e67ed6e6e76..f831e114550a3a 100644 --- a/apps/public-docsite-v9/.storybook/manager-head.html +++ b/apps/public-docsite-v9/.storybook/manager-head.html @@ -148,7 +148,7 @@ Usign suggested temporary workaround until storybook gets proper support See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing */ - [id*='accessibility-scenario'] { + [id*='accessibility-stories'] { display: none !important; } diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index 46bf91f54aff96..93c8712239c741 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -26,7 +26,7 @@ export const parameters = { 'Introduction', 'Developer', ['Quick Start', 'Styling Components', 'Positioning Components', 'Component Poster'], - 'Upgrading', + 'Migration', [ 'Overview', 'Important changes', diff --git a/apps/public-docsite-v9/CHANGELOG.json b/apps/public-docsite-v9/CHANGELOG.json index 3e4190ba3656b5..0bbc897dda9ef7 100644 --- a/apps/public-docsite-v9/CHANGELOG.json +++ b/apps/public-docsite-v9/CHANGELOG.json @@ -1,6 +1,168 @@ { "name": "@fluentui/public-docsite-v9", "entries": [ + { + "date": "Thu, 22 Sep 2022 07:43:45 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.96.1", + "commit": "483f160617f1037e672fe74b8e52abfee9378517" + } + ] + } + }, + { + "date": "Tue, 20 Sep 2022 07:47:16 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "undefined": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-components to v9.3.0", + "commit": "ead191a8368bf64ecabffce5ea0e02565f449a95" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-theme to v9.1.0", + "commit": "ead191a8368bf64ecabffce5ea0e02565f449a95" + } + ] + } + }, + { + "date": "Mon, 19 Sep 2022 07:47:30 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.96.0", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-components to v9.3.0", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-theme to v9.1.0", + "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d" + } + ] + } + }, + { + "date": "Fri, 16 Sep 2022 07:37:32 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.95.1", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-components to v9.3.0", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-theme to v9.1.0", + "commit": "9077e0a7d3911096a3337d76ec65591d191a780a" + } + ] + } + }, + { + "date": "Thu, 15 Sep 2022 19:15:27 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "minor": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.95.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-components to v9.3.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + }, + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react-theme to v9.1.0", + "commit": "682ead9953a1d519133193033aafe392173009f5" + } + ] + } + }, + { + "date": "Tue, 13 Sep 2022 07:41:03 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.94.4", + "commit": "a40ef34fa6d1122bdfdb708f79b90de9edb2827d" + } + ] + } + }, + { + "date": "Thu, 08 Sep 2022 20:52:16 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.94.3", + "commit": "38bd1c146cb2e635bc181cda1b2f11b17a07c4c4" + } + ] + } + }, + { + "date": "Wed, 07 Sep 2022 07:54:43 GMT", + "tag": "@fluentui/public-docsite-v9_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/public-docsite-v9", + "comment": "Bump @fluentui/react to v8.94.2", + "commit": "2f740624c4e43d6bfe1b488e9d479c95ed71da09" + } + ] + } + }, { "date": "Mon, 05 Sep 2022 07:38:30 GMT", "tag": "@fluentui/public-docsite-v9_v1.0.0", diff --git a/apps/public-docsite-v9/CHANGELOG.md b/apps/public-docsite-v9/CHANGELOG.md index b2c3c717b6b5d2..575049e94355c2 100644 --- a/apps/public-docsite-v9/CHANGELOG.md +++ b/apps/public-docsite-v9/CHANGELOG.md @@ -1,11 +1,80 @@ # Change Log - @fluentui/public-docsite-v9 -This log was last generated on Mon, 05 Sep 2022 07:38:30 GMT and should not be manually modified. +This log was last generated on Thu, 22 Sep 2022 07:43:45 GMT and should not be manually modified. ## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) +Thu, 22 Sep 2022 07:43:45 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.96.1 ([PR #24871](https://github.com/microsoft/fluentui/pull/24871) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + +Mon, 19 Sep 2022 07:47:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.96.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) +- Bump @fluentui/react-components to v9.3.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) +- Bump @fluentui/react-theme to v9.1.0 ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + +Fri, 16 Sep 2022 07:37:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.95.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) +- Bump @fluentui/react-components to v9.3.0 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) +- Bump @fluentui/react-theme to v9.1.0 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + +Thu, 15 Sep 2022 19:15:27 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Minor changes + +- Bump @fluentui/react to v8.95.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) +- Bump @fluentui/react-components to v9.3.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) +- Bump @fluentui/react-theme to v9.1.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + +Tue, 13 Sep 2022 07:41:03 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.94.4 ([PR #24615](https://github.com/microsoft/fluentui/pull/24615) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + +Thu, 08 Sep 2022 20:52:16 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.94.3 ([PR #24701](https://github.com/microsoft/fluentui/pull/24701) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + +Wed, 07 Sep 2022 07:54:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) + +### Patches + +- Bump @fluentui/react to v8.94.2 ([PR #24663](https://github.com/microsoft/fluentui/pull/24663) by beachball) + +## [1.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/public-docsite-v9_v1.0.0) + Mon, 05 Sep 2022 07:38:30 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/public-docsite-v9_v1.0.0..@fluentui/public-docsite-v9_v1.0.0) diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index 2170df9210ba2e..5faff2dd08c08d 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -2,7 +2,7 @@ "name": "@fluentui/public-docsite-v9", "version": "1.0.0", "private": true, - "description": "A collection of examples demonstrating how to upgrade from v8 to v9", + "description": "Fluent UI React v9 documentation", "scripts": { "build": "just-scripts build", "build-storybook": "build-storybook -o ./dist/storybook --docs && node ./.storybook/fix-title.js 'Fluent UI React v9' ../dist", @@ -21,15 +21,18 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.94.1", + "@fluentui/react": "^8.98.8", + "@fluentui/react-northstar": "^0.64.0", + "@fluentui/react-icons-northstar": "^0.64.0", "@fluentui/scripts": "^1.0.0", "@fluentui/storybook": "^1.0.0", - "@fluentui/react-components": "^9.2.0", + "@fluentui/react-components": "^9.6.1", "@fluentui/react-storybook-addon": "^9.0.0-rc.1", - "@fluentui/react-theme": "^9.0.0", - "@griffel/react": "^1.3.0", + "@fluentui/react-theme": "^9.1.1", + "@griffel/react": "^1.4.1", "react": "17.0.2", "react-dom": "17.0.2", + "react-window": "^1.8.6", "tslib": "^2.1.0" } } diff --git a/apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.stories.mdx b/apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.stories.mdx index 9c7c859aa92458..73015da4cab250 100644 --- a/apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/BrowserSupportMatrix.stories.mdx @@ -2,9 +2,18 @@ import { Meta } from '@storybook/addon-docs'; -## Browser Support Matrix +Defining a browser support matrix to account for all different consumer cases is a difficult undertaking. +This browser matrix takes into account various factors such as ECMAScript (ES), browser API, and CSS +feature compatibility across different browsers and across different versions of those browsers. +Fluent UI strives to find a balance that enables consumers who support modern browsers to reap the +full benefits of newer features while at the same time providing the necessary guidance to consumers who +support older browsers. Details of a full and partial browser support matrix as well as actions consumers +can take such as transpiling and polyfilling are outlined below. -FluentUI supports browsers that are at or above the indicated versions below: +## Full Browser Support Matrix + +Fluent UI fully supports browsers that are at or above the indicated versions below. Consumers who support these browsers +are poised to experience the full performance and bundlesize benefits that these modern browsers afford the Fluent UI React library. **Desktop Browsers:** @@ -18,14 +27,74 @@ FluentUI supports browsers that are at or above the indicated versions below: | ------------- | ------------------ | ------- | | >=14.5 | >=84 | >=16 | -FluentUI will ensure that no browser, EcmaScript(ES), or CSS features that are incompatible with the support matrix laid out above are introduced. -FluentUI will not be providing polyfills for features that we expect our browser support matrix to already support. This means that consumers who require the -use/support of older browsers that don't support certain browser, ES, or CSS features (i.e. `ResizeObserver`), -are expected to implement their own polyfills or use a third-party one. +Fluent UI will ensure that no browser or CSS features that are incompatible with the support matrix laid out above are introduced. The same goes for +ECMAScript features, Fluent UI will be targeting ES2020 and thus will be shipping an ES2020 compliant code which will be fully compatible with the +full browser support matrix. For consumers who require the use/support of older browsers, please see the partial support matrix and polyfill sections +below for more information on what will need to be done. + +## Partial Browser Support Matrix: + +Fluent UI introduces a new concept of a partial browser support matrix as a means to find that balance between supporting modern browsers and older browsers. +The partial browser matrix below will have limitations that require consumers to transpile down and/or use polyfills to cover the support gaps. The feature gaps +are listed below with subsequent recommendation on how to handle each case. + +**Desktop Browsers:** + +| Edge | Firefox | Chrome | Safari | Opera | Internet Explorer | +| ---- | ------- | ------ | ------ | ----- | ----------------- | +| >=79 | >=69 | >=79 | >=13.1 | >=64 | Not Supported | + +**Mobile Browsers:** + +| Safari on iOS | Chrome for Android | Samsung | +| ------------- | ------------------ | ------- | +| >=13.4 | >=79 | >=14 | + +List of features that are currently used in Fluent UI that aren't supported out of the box by the partial support matrix above: + +**Unsupported CSS Features:** + +- CSS features below are not supported by some browsers within the partial support matrix. The absence of these features will not crash consumer applications, + it will simply degrade the user interface. + +1. [Flex gap](https://caniuse.com/flexbox-gap): Unsupported by Chrome, Edge, Firefox, Opera, Safari, Safari on IOS, Chrome on Android +2. [CSS min, max, clamp](https://caniuse.com/css-math-functions): Unsupported by Firefox and Opera +3. [CSS revert value](https://caniuse.com/css-revert-value): Unsupported by Opera + +**Unsupported ECMAScript Features:** + +- As previously mentioned, Fluent UI will be targeting ES2020. Some ES2020 features are already present + in the library and the partial support matrix does not fully support ES2020. This means that consumers who follow the partial support matrix or any browser versions below it + will need to transpile down the Fluent UI library to make it work since the use of these ES2020 features results in the application crashing on the listed browsers below. + +1. Nullish Coalescing: Unsupported by Chrome, Edge, Firefox, Opera. +2. Optional Chaining: Unsupported by Chrome, Edge, Firefox, Opera. + +## Polyfills + +By default Fluent UI will not be providing polyfills for features we expect our full browser support matrix to already support. +The only instance that a polyfill may be provided is when Fluent UI's use of a feature causes an application to crash on +the partial support browser matrix. Other than that, consumers will need to implement their own polyfills or use a third party one for their +applications because: + +- handling polyfills on the application level ensures that those on modern browsers don't suffer from unnecessary overhead of + polyfills being shipped with the Fluent UI library by default +- prevents any unintended polyfill duplication from the library and app level +- gives consumers the flexibility to provide robust solutions such as shipping a bundle with the necessary polyfills to support older browsers and one with a lighter, + polyfill-free bundle to support modern browsers + +## Developer Expectations: + +1. Fluent UI developers and contributors are internally expected to develop against the partial browser support matrix. + This means that no code which causes applications to crash on the partially supported browsers (with the exception of ES syntax which are transpilable by the consumer) + should be present in the library. Should any application breaking errors be discovered in the future, Fluent UI will be responsible for fixing it internally. +2. Since Fluent UI will be transpiling down and shipping ES2020 code, Fluent UI developers will internally develop against the latest ECMA standards. +3. Fluent UI developers and contributors reserve the right to use features that fall in between the partial and full browser support matrices (like flex gap) as + long as they don't result in applications crashing. ## Browser Support Going Forward -With an eye towards being a modern library, FluentUI will follow a yearly audit process to evaluate and update the current browser support matrix to keep pace +With an eye towards being a modern library, Fluent UI will follow a yearly audit process to evaluate and update the current browser support matrix to keep pace with the ever evolving ecosystem of the web. This will allow the team to utilize modern tools and improve overall engineering efficiency while also providing -consumers with performance and bundlesize improvements. These yearly audits will give FluentUI a reasonable timeframe to evaluate, decide and give notice if browser support +consumers with performance and bundlesize improvements. These yearly audits will give Fluent UI a reasonable timeframe to evaluate, decide and give notice if browser support changes are made. diff --git a/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx b/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx index 10509ecc8593c3..b0133a0a28f573 100644 --- a/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/BuildTimeStyles.stories.mdx @@ -32,38 +32,44 @@ In your Webpack config, simply add the `@griffel/webpack-loader` to the list of ```js // webpack.config.js -module: { - rules: [ - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - // see https://github.com/microsoft/griffel/tree/main/packages/webpack-loader#configuring-babel-settings - babelOptions: { - presets: ['@babel/preset-typescript'], +module.exports = { + module: { + rules: [ + // 💡 We recommend adding the Griffel webpack loader after `babel-loader`, `ts-loader`, etc. + // + // The underlying Babel transforms used by the Webpack loader are configured by default to use + // the most basic language features. Therefore, to avoid extra configuration or parsing errors, + // using the Webpack loader after compilation is the required approach. + { + test: /\.(ts|tsx)$/, + exclude: /node_modules/, + use: { + loader: '@griffel/webpack-loader', + options: { + // see https://github.com/microsoft/griffel/tree/main/packages/webpack-loader#configuring-babel-settings + babelOptions: { + presets: ['@babel/preset-typescript'], + }, }, }, }, - }, - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - // or 'ts-loader' - loader: 'babel-loader', + { + test: /\.(ts|tsx)$/, + exclude: /node_modules/, + use: { + // or 'ts-loader' + loader: 'babel-loader', + }, }, - }, - ]; -} + ], + }, +}; ``` -**💡 NOTE: we recommend adding the Griffel webpack loader after babel-loader or ts-loader.**. The underlying babel transforms -used by the webpack loader are configured by default to use the most basic language features. Therefore to avoid -extra configuration or parsing errors, using the webpack loader after transpilation is the required approach. +> ℹ️ **Note**: A chain of webpack loaders is executed in reverse order +> [https://webpack.js.org/concepts/loaders/#loader-features](https://webpack.js.org/concepts/loaders/#loader-features) -#### Typescript (and additional transpilation) support +#### Typescript (and additional compilation) support The Webpack loader [evaluate styles at runtime](#build-time-style-evaluation). For typescript it's necessary to install `@babel/preset-typescript` and configure it in the [babelOptions](https://github.com/microsoft/griffel/tree/main/packages/webpack-loader#configuring-babel-settings) of the loader. Similarly diff --git a/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx b/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx index eff9c7b9333c1e..ec77bd58cc644d 100644 --- a/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/ChildWindow.stories.mdx @@ -10,7 +10,7 @@ In these cases, the target element is hosted in a different context, and thus ha ### Configuring rendering -We need to configure a renderer for `makeStyles()` and pass a `targetDocument` to `FluentProvider`: +We need to configure a renderer for `makeStyles()` and pass a `targetDocument` to `RendererProvider` & `FluentProvider`: ```js import { createDOMRenderer, FluentProvider, RendererProvider } from '@fluentui/react-components'; @@ -21,7 +21,7 @@ function MyComponent(props) { const renderer = React.useMemo(() => createDOMRenderer(targetDocument), [targetDocument]); return ( - + {children} ); diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Avatar.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx similarity index 95% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Avatar.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx index 4e69002ddd7a6b..fdc1c6af04b352 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Avatar.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Avatar Upgrade +# Avatar Migration ## Overview: @@ -26,7 +26,7 @@ const Component = () => ; | ------------------------- | -------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | variables, design, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | key, ref | keep it as is | | getInitials | use `initials` prop instead | | icon | keep it as is | @@ -41,7 +41,7 @@ const Component = () => ; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **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`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx new file mode 100644 index 00000000000000..70ae8f979e0309 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.stories.mdx @@ -0,0 +1,289 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Button Migration + +## Overview: + +Before: + +```tsx +import { Button } from '@fluentui/react-northstar'; +const Component = () => ; +``` + +## How to migrate props: + +| Button props | migrate guide | +| ----------------- | -------------------------------------------------------------------------------------------------------- | +| as, className | keep it as is | +| content | see Migrate content prop in this document | +| variables, styles | see Migrate style overrides in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | +| circular | replace with `shape="circular"` | +| disabled | keep it as is | +| disabledFocusable | keep it as is | +| flat | REMOVED: it's a default view now, we're moving away from shadows | +| fluid | replace with `block` | +| icon | keep it as is. See Button + Icon integration in this document | +| iconOnly | REMOVED: see Migrate iconOnly prop in this document | +| iconPosition | keep it as is | +| inverted | REMOVED: use styles and color tokens to set a proper styling \* | +| loader, loading | REMOVED: see Migrate loading and loader props in this document | +| primary | use `appearance="primary"` | +| secondary | REMOVED: the button appears with the default style | +| size | keep it as is. Values: `small`, `medium`(default) and `large` | +| text | use `appearance="transparent"` | +| tinted | REMOVED: use Default button instead | + +\* this may be changed +Here is comparison for both versions: [Sandbox](https://codesandbox.io/s/exciting-liskov-y5u5hy?file=/example.tsx) + +--- + +## Migrate `content` prop + +Move `content` to JSX children. + +Before: + +```tsx +import { Button } from '@fluentui/react-northstar'; +const Component = () => ; +``` + +## 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 { Button } from '@fluentui/react-northstar'; + +export const Component = () => ; +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles, tokens } from '@fluentui/react-components'; + +export const useStyles = makeStyles({ + actionButton: { + color: colors.colorNeutralForeground1, + }, +}); +``` + +### Example for migrate namespaced styles, with conditional styles via `variableProps`: + +Before: + +```tsx +// in COMPONENT_NAME.tsx +import { Button, useUIProviderContext } from '@fluentui/react-northstar'; + +export const Component = props => { + const { vars } = useUIProviderContext(); + const { enableUsingChatListGroupTitleAsHeader } = props; + return ( + + ); +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles } from '@fluentui/react-components'; + +export const useStyles = makeStyles({ + chatListGroupTitleAsHeader: { + height: '32px', + width: '32px', + minWidth: '32px', + }, +}); +``` + +### Migrate `iconOnly` prop + +Before: + +```tsx +import { Button } from '@fluentui/react-northstar'; +const Component1 = () => ; +``` + +**Usage with v0 Button:** + +For usage v9 Icon with v0 Button it's required to add additional styles to keep similar behaviour: + +```tsx +import { CalendarMonth } from '@fluentui/react-components-icons'; +import { buttonMigrationStyles } from '@fluentui/react-components'; +import { Button, useUIProviderContext } from '@fluentui/react-northstar'; + +const Component = () => { + const { vars } = useUIProviderContext(); + return + ); +}; +``` + +Live example is here: https://codesandbox.io/s/button-icon-migration-lkt6o5?file=/example.tsx + +### Migrate `loading` and `loader` props + +Props `loading` and `loader` were removed. To replace old functionality can be used this method: + +Before: + +```tsx +import { Button } from '@fluentui/react-northstar'; +const Component = () => +); +``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx new file mode 100644 index 00000000000000..6d814bd8e3a01a --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Checkbox.stories.mdx @@ -0,0 +1,71 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Checkbox Migration + +Fluent UI Northstar (v0) provides the `Checkbox` control to make a choice between two mutually exclusive options. Fluent UI v9 provides a `Checkbox` control, but has a different API. + +The main difference between v0 and v9 `Checkbox` is that v9 offers a circular variant and does not provide a toggle prop. + +## Examples + +### Basic Migration + +Basic usage of `Checkbox` v0 + +```tsx +import * as React from 'react'; +import { Checkbox } from '@fluentui/react-northstar'; + +const CheckboxV0BasicExample = () => { + return ( + <> + + + + + ); +}; +``` + +An equivalent `Checkbox` in v9 is + +```tsx +import * as React from 'react'; +import { Checkbox } from '@fluentui/react-components'; + +const CheckboxV9BasicExample = () => { + return ( + <> + + + + + ); +}; +``` + +## Prop Mapping + +This table maps `Checkbox` v0 props to the `Checkbox` v9 equivalent. + +| v0 | v9 | Notes | +| ---------------- | ---------------- | ----------------------------------------------------------- | +| `accessibility` | n/a | | +| `as` | n/a | | +| `checked` | `checked` | Mutually exclusive with `defaultChecked` | +| `className` | `className` | | +| `defaultChecked` | `defaultChecked` | Mutually exclusive with `checked` | +| `design` | n/a | | +| `disabled` | `disabled` | | +| `indicator` | `indicator` | | +| `key` | `key` | v9 uses the intrinsic React prop | +| `label` | `label` | | +| `labelPosition` | `labelPosition` | | +| `onChange` | `onChange` | | +| `onClick` | `onClick` | | +| `ref` | `ref` | | +| `styles` | `className` | | +| `toggle` | n/a | Refer to the `Switch` component in `@fluentui/react-switch` | +| `variables` | n/a | Use `FluentProvider` to customize themes | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx new file mode 100644 index 00000000000000..618f8c1c5a6478 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Divider.stories.mdx @@ -0,0 +1,119 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Divider Migration + +## Overview: + +Before: + +```tsx +import { Divider } from '@fluentui/react-northstar'; +const Component = () => ; +``` + +After: + +```tsx +import { Divider } from '@fluentui/react-components'; +const Component = () => ; +``` + +The default v0 Divider has paddings above/below for horizontal Divider, and left/right for vertical Divider. +v9 Divider has no such padding. Therefore v9 Divider appears similar to v0 ``. + +To add paddings on v9 Divider to match v0, please see style overrides in this [codesandbox](https://codesandbox.io/s/divider-migration-88ws6u?file=/DefaultDividerExample.jsx), _DefaultDividerExample.jsx_ `useMigrationStyles`. + +## How to migrate props: + +| Divider props | migrate guide | +| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| as, className, key, ref | keep it as is | +| vertical | keep it as is | +| fitted | simply remove it | +| content | see Migrate content prop in this document | +| variables, styles | see Migrate style overrides in this document | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | +| important | see Migrate important prop in this document | +| size | see Migrate size prop in this document | +| color | replace `color="brand"` with `appearance="brand"`. For other color value, add style override with makeStyles and color tokens | + +See this [codesandbox](https://codesandbox.io/s/divider-migration-88ws6u?file=/example.js) comparing v9 Divider with v0, including guides on adding v9 style overrides to match v0. + +--- + +## Migrate `content` prop + +Move `content` to JSX children. + +Before: + +```tsx +import { Divider } from '@fluentui/react-northstar'; +const Component = () => ; +``` + +After: + +```tsx +import { Divider } from '@fluentui/react-components'; +const Component = () => hi; +``` + +## Migrate `important` prop + +v0 `important` prop adds `fontWeight: "700"` on children. It can be achieved via style overrides, see [codesandbox](https://codesandbox.io/s/divider-migration-88ws6u?file=/ImportantDividerExample.jsx:312-329), _ImportantDividerExample.jsx_ `useMigrationStyles`. + +## Migrate `size` prop + +By default Divider is 1px, `size={1}` Divider is 2px, `size={2}` Divider is 3px. +v9 Divider size can be changed by updating its `:before`/`:after` pseudo element's `borderTopWidth`. + +See [codesandbox](https://codesandbox.io/s/divider-migration-88ws6u?file=/SizedDividerExample.jsx), _SizedDividerExample.jsx_ `useMigrationStyles`, for style overrides to match `size={1}` and `size={2}`, + +## 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 { Divider } from '@fluentui/react-northstar'; + +export const Component = () => ; + +// in divider-styles.ts +export const dividerStyles = { + root: ({ variables: { isCustomDivider } }) => ({ + ...(isCustomDivider && { + height: '3.2rem', + }), + }), +}; +``` + +After: + +```tsx +// in COMPONENT_NAME.tsx +import { Divider } from '@fluentui/react-components'; +import { useStyles } from './COMPONENT_NAME.styles.ts'; + +export const Component = () => { + const classes = useStyles(); + return ; +}; + +// in COMPONENT_NAME.styles.ts +import { makeStyles } from '@fluentui/react-components'; + +export const useStyles = makeStyles({ + chatEntityHeaderDivider: { + height: '32px', + }, +}); +``` diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Header.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx similarity index 95% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Header.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx index 09f6b72b7a03a6..15f8458955a6c2 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Header.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Header Upgrade +# Header Migration ## Overview: @@ -68,7 +68,7 @@ const Component = () => ( | className | keep it as is | | content | see Migrate content prop in this document | | variables, design, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | color | REMOVED: use styles and color tokens to set the color | | ref, key | keep it as is | @@ -96,7 +96,7 @@ const Component = () => Header content; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **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`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx new file mode 100644 index 00000000000000..14bd9ba66184a0 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx @@ -0,0 +1,102 @@ +import * as React from 'react'; +import { DismissRegular, InfoRegular } from '@fluentui/react-icons'; +import { makeStyles, shorthands, tokens, Button, mergeClasses, Tooltip } from '@fluentui/react-components'; +import { V0IconComponent, V9IconComponent } from './types'; + +const useIconTileStyles = makeStyles({ + root: { + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + ...shorthands.padding('5px', '0px'), + ...shorthands.gap('10px'), + ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), + maxHeight: '105px', + ':hover': { + backgroundColor: tokens.colorNeutralBackground2Hover, + }, + }, + + badge: { + position: 'absolute', + top: '5px', + right: '10px', + }, + + warning: { + color: tokens.colorPaletteDarkOrangeBackground3, + }, + + success: { + color: tokens.colorPaletteGreenBackground3, + }, + + v0: { + width: '16px', + height: '16px', + }, + + v9: { + width: '20px', + height: '20px', + }, + + tile: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + ...shorthands.gap('2px'), + }, + + buttonReset: { + resize: 'horizontal', + boxSizing: 'content-box', + backgroundColor: 'inherit', + color: 'inherit', + fontFamily: 'inherit', + fontSize: 'inherit', + lineHeight: 'normal', + ...shorthands.overflow('visible'), + ...shorthands.padding(0), + ...shorthands.borderStyle('none'), + WebkitAppearance: 'button', + textAlign: 'unset', + }, +}); + +interface IComparisonTileProps { + V0Icon: V0IconComponent; + V9Icon?: V9IconComponent; +} + +export const ComparisonTile: React.FC = ({ V0Icon, V9Icon }) => { + const noV9Icon = !V9Icon; + + const tooltipWarningContent =
    {noV9Icon &&
  • No equivalent icon available
    • }
; + + const styles = useIconTileStyles(); + return ( +
+ +
+ ); +}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx new file mode 100644 index 00000000000000..ae88d1f6d95f33 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx @@ -0,0 +1,111 @@ +import * as React from 'react'; +import { Provider, teamsV2Theme } from '@fluentui/react-northstar'; +import * as v0Icons from '@fluentui/react-icons-northstar'; +import * as v9Icons from '@fluentui/react-icons'; +import { makeStyles, Input, Switch, Label } from '@fluentui/react-components'; +import type { InputProps, SwitchProps } from '@fluentui/react-components'; +import { iconMapping as rawMapping } from './iconMapping'; +import { IconGrid } from './IconGrid'; +import { useDebounce } from './useDebounce'; +import { V0IconComponent, V9IconComponent } from './types'; + +const useStyles = makeStyles({ + searchPanel: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: '10px', + marginTop: '20px', + }, + + switch: { + display: 'flex', + alignItems: 'center', + }, +}); + +const _mapping = rawMapping + .map(entry => { + const v0IconName = `${entry.v0}`; + const v9IconName = `${entry.v9}Regular`; + const V0Icon = ((v0Icons as unknown) as Record)[v0IconName]; + const V9Icon = ((v9Icons as unknown) as Record)[v9IconName]; + + if (!V0Icon) { + return null; + } + + return { + v9Search: entry.v9?.toLowerCase(), + v0Search: entry.v0.toLowerCase(), + V0Icon, + V9Icon, + }; + }) + .filter(Boolean); +const mapping = _mapping.filter(Boolean) as Array>; + +const IconCatalogInner: React.FC = () => { + const styles = useStyles(); + const [searchTerm, setSearchTerm] = React.useState(undefined); + const [searchV0, setSearchV0] = React.useState(true); + + const updateSearch = React.useCallback( + (newSearchTerm: string) => { + setSearchTerm(newSearchTerm.toLowerCase()); + }, + [setSearchTerm], + ); + + const updateSearchDebounced = useDebounce(updateSearch, 220); + + const entries = React.useMemo( + () => + mapping.filter(entry => { + if (!searchTerm) { + return true; + } + + if (searchV0) { + return entry.v0Search.includes(searchTerm); + } + + return entry.v9Search?.includes(searchTerm); + }), + [searchTerm, searchV0], + ); + + const onInputChange: InputProps['onChange'] = React.useCallback((e, { value }) => updateSearchDebounced(value), [ + updateSearchDebounced, + ]); + const onSwitchChange: SwitchProps['onChange'] = React.useCallback((e, { checked }) => setSearchV0(checked), []); + + return ( + <> +
+
+ +
+ + +
+
+
+
{entries.length} icon entries
+ + + ); +}; + +// Simply hoists the northstar provider above the catalog to avoid unnecessarily +// re-rendering the provider. +const northstarTheme = { ...teamsV2Theme, staticStyles: [] }; +export const IconCatalog: React.FC = () => ( + + + +); diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx new file mode 100644 index 00000000000000..ff12cd383583e5 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { FixedSizeList as List } from 'react-window'; +import type { ListChildComponentProps } from 'react-window'; +import { ComparisonTile as ComparisonTileBase } from './ComparisonTile'; +import { V0IconComponent, V9IconComponent } from './types'; + +const ComparisonTile = React.memo(ComparisonTileBase); + +interface IIconGridProps { + entries: { + V0Icon: V0IconComponent; + V9Icon?: V9IconComponent; + }[]; +} + +const ROW_SIZE = 3; + +interface IRowProps extends ListChildComponentProps { + data: IIconGridProps['entries']; +} + +const Row = ({ index, style, data }: IRowProps) => { + const start = index * ROW_SIZE; + const items = data.slice(start, start + 3); + return ( +
+
+ {items.map(({ V0Icon, V9Icon }) => ( + + ))} +
+
+ ); +}; + +export const IconGrid: React.FC = ({ entries }) => { + return ( + + {Row} + + ); +}; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/iconMapping.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/iconMapping.ts new file mode 100644 index 00000000000000..929ca31553c6e6 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/iconMapping.ts @@ -0,0 +1,2131 @@ +/** + * This file is the source of truth for mapping of v0 icons to v9 icons. + * This mapping was generated manually, any updates should be made directly to this file + */ + +export const iconMapping = [ + { + v0: 'AcceptIcon', + v9: 'Checkmark', + }, + { + v0: 'AccessibilityIcon', + v9: 'Accessibility', + }, + { + v0: 'AddIcon', + v9: 'Add', + }, + { + v0: 'ApprovalsAppbarIcon', + v9: 'ApprovalsApp', + }, + { + v0: 'ArchiveIcon', + v9: 'Archive', + }, + { + v0: 'ArrowDownIcon', + v9: 'ArrowDown', + }, + { + v0: 'ArrowLeftIcon', + v9: 'ArrowLeft', + }, + { + v0: 'ArrowRightIcon', + v9: 'ArrowRight', + }, + { + v0: 'ArrowSyncIcon', + v9: 'ArrowSync', + }, + { + v0: 'ArrowUpIcon', + v9: 'ArrowUp', + }, + { + v0: 'AttendeeIcon', + v9: 'PeopleAudience', + }, + { + v0: 'AudienceIcon', + v9: 'PeopleAudience', + }, + { + v0: 'AudioLoadingIcon', + v9: 'MicSync', + }, + { + v0: 'AudioOffIcon', + v9: 'SpeakerOff', + }, + { + v0: 'BanIcon', + v9: 'Prohibited', + }, + { + v0: 'BellIcon', + v9: 'Alert', + }, + { + v0: 'BellSlashIcon', + v9: 'AlertOff', + }, + { + v0: 'BellSnoozeIcon', + v9: 'AlertSnooze', + }, + { + v0: 'BluetoothIcon', + v9: 'Bluetooth', + }, + { + v0: 'BoldIcon', + v9: 'TextBold', + }, + { + v0: 'BookmarkIcon', + v9: 'Bookmark', + }, + { + v0: 'BreakoutRoomIcon', + v9: 'BreakoutRoom', + }, + { + v0: 'BriefcaseIcon', + v9: 'Briefcase', + }, + { + v0: 'BroadcastIcon', + v9: 'Live', + }, + { + v0: 'BroadcastViewFullscreenIcon', + v9: 'RectangleLandscape', + }, + { + v0: 'BroadcastViewLeftIcon', + v9: '', + }, + { + v0: 'BuildingIcon', + v9: 'Building', + }, + { + v0: 'BulletsIcon', + v9: 'TextBulletListLtr', + }, + { + v0: 'CalendarAgendaIcon', + v9: 'CalendarAgenda', + }, + { + v0: 'CalendarIcon', + v9: 'CalendarLtr', + }, + { + v0: 'CallBlockedIcon', + v9: 'CallProhibited', + }, + { + v0: 'CallControlCloseTrayIcon', + v9: 'ShareCloseTray', + }, + { + v0: 'CallControlPresentNewIcon', + v9: 'ShareScreenStart', + }, + { + v0: 'CallControlReleaseIcon', + v9: 'CursorHoverOff', + }, + { + v0: 'CallControlRequestIcon', + v9: 'CursorHover', + }, + { + v0: 'CallControlShareIcon', + v9: 'ShareScreenStart', + }, + { + v0: 'CallControlStopPresentingNewIcon', + v9: 'ShareScreenStop', + }, + { + v0: 'CallDialpadIcon', + v9: 'Dialpad', + }, + { + v0: 'CallEndIcon', + v9: 'CallEnd', + }, + { + v0: 'CallIcon', + v9: 'Call', + }, + { + v0: 'CallMissedLineIcon', + v9: 'CallMissed', + }, + { + v0: 'CallParkingIcon', + v9: 'CallPark', + }, + { + v0: 'CallPstnIcon', + v9: 'PersonCall', + }, + { + v0: 'CallRecordingIcon', + v9: 'Record', + }, + { + v0: 'CallVideoIcon', + v9: 'Video', + }, + { + v0: 'CallVideoOffIcon', + v9: 'VideoOff', + }, + { + v0: 'CameraIcon', + v9: 'Camera', + }, + { + v0: 'CanvasAddPageIcon', + v9: 'DocumentAdd', + }, + { + v0: 'CartIcon', + v9: 'Cart', + }, + { + v0: 'CastingIcon', + v9: 'Cast', + }, + { + v0: 'ChannelShareIcon', + v9: 'ChannelShare', + }, + { + v0: 'ChatIcon', + v9: 'Chat', + }, + { + v0: 'ChatOffIcon', + v9: 'ChatOff', + }, + { + v0: 'CheckmarkCircleIcon', + v9: 'CheckmarkCircle', + }, + { + v0: 'ChevronDownIcon', + v9: 'ChevronDown', + }, + { + v0: 'ChevronDownMediumIcon', + v9: 'ChevronDown', + }, + { + v0: 'ChevronEndIcon', + v9: 'ChevronRight', + }, + { + v0: 'ChevronEndMediumIcon', + v9: 'ChevronRight', + }, + { + v0: 'ChevronStartIcon', + v9: 'ChevronLeft', + }, + { + v0: 'CircleIcon', + v9: 'Circle', + }, + { + v0: 'ClipboardCopiedToIcon', + v9: 'ClipboardPaste', + }, + { + v0: 'CloseIcon', + v9: 'Dismiss', + }, + { + v0: 'ClosedCaptionsIcon', + v9: 'ClosedCaption', + }, + { + v0: 'CodeSnippetIcon', + v9: 'Code', + }, + { + v0: 'CollapseIcon', + v9: 'ArrowMinimize', + }, + { + v0: 'CompanionIcon', + v9: 'PhoneDesktop', + }, + { + v0: 'ComposeIcon', + v9: 'Compose', + }, + { + v0: 'ComputerAudioOffIcon', + v9: 'DesktopSpeaker', + }, + { + v0: 'ConferenceRoomDeviceIcon', + v9: 'DeviceMeetingRoom', + }, + { + v0: 'ContactCardIcon', + v9: 'ContactCard', + }, + { + v0: 'ContactGroupCallIcon', + v9: 'PeopleCall', + }, + { + v0: 'ContactGroupIcon', + v9: 'PeopleTeam', + }, + { + v0: 'ContentIcon', + v9: 'ContentView', + }, + { + v0: 'CustomerHubIcon', + v9: 'ChatMail', + }, + { + v0: 'DesktopIcon', + v9: 'Desktop', + }, + { + v0: 'DoorArrowLeftIcon', + v9: 'DoorArrowLeft', + }, + { + v0: 'DownloadIcon', + v9: 'ArrowDownload', + }, + { + v0: 'EditIcon', + v9: 'Edit', + }, + { + v0: 'EmailIcon', + v9: 'Mail', + }, + { + v0: 'EmailWithDotIcon', + v9: 'MailUnread', + }, + { + v0: 'EmojiAddIcon', + v9: 'EmojiAdd', + }, + { + v0: 'EmojiIcon', + v9: 'Emoji', + }, + { + v0: 'EmojiSadIcon', + v9: 'EmojiSad', + }, + { + v0: 'EmojiSurprisedIcon', + v9: 'EmojiSurprise', + }, + { + v0: 'ErrorIcon', + v9: '', + }, + { + v0: 'ExcelColorIcon', + v9: '', + }, + { + v0: 'ExcelIcon', + v9: '', + }, + { + v0: 'ExclamationTriangleIcon', + v9: 'Warning', + }, + { + v0: 'ExpandIcon', + v9: 'Maximize', + }, + { + v0: 'EyeFriendlierIcon', + v9: 'Eye', + }, + { + v0: 'EyeIcon', + v9: 'Eye', + }, + { + v0: 'EyeSlashIcon', + v9: 'EyeOff', + }, + { + v0: 'FilesAftereffectsIcon', + v9: '', + }, + { + v0: 'FilesCodeIcon', + v9: '', + }, + { + v0: 'FilesEmptyIcon', + v9: '', + }, + { + v0: 'FilesErrorIcon', + v9: '', + }, + { + v0: 'FilesFlashIcon', + v9: '', + }, + { + v0: 'FilesGenericColoredIcon', + v9: '', + }, + { + v0: 'FilesGifIcon', + v9: '', + }, + { + v0: 'FilesHtmlColoredIcon', + v9: '', + }, + { + v0: 'FilesIllustratorIcon', + v9: '', + }, + { + v0: 'FilesImageIcon', + v9: '', + }, + { + v0: 'FilesIndesignIcon', + v9: '', + }, + { + v0: 'FilesOneNoteIcon', + v9: '', + }, + { + v0: 'FilesPdfColoredIcon', + v9: '', + }, + { + v0: 'FilesPdfIcon', + v9: '', + }, + { + v0: 'FilesPhotoshopIcon', + v9: '', + }, + { + v0: 'FilesPictureColoredIcon', + v9: '', + }, + { + v0: 'FilesSketchIcon', + v9: '', + }, + { + v0: 'FilesSoundIcon', + v9: '', + }, + { + v0: 'FilesTextColoredIcon', + v9: '', + }, + { + v0: 'FilesTxtIcon', + v9: '', + }, + { + v0: 'FilesUploadIcon', + v9: 'ArrowUpload', + }, + { + v0: 'FilesVideoIcon', + v9: '', + }, + { + v0: 'FilesZipIcon', + v9: '', + }, + { + v0: 'FilterIcon', + v9: 'Filter', + }, + { + v0: 'FlagIcon', + v9: 'Flag', + }, + { + v0: 'FluidFileIcon', + v9: '', + }, + { + v0: 'FluidIcon', + v9: 'Fluid', + }, + { + v0: 'FontColorIcon', + v9: 'TextColor', + }, + { + v0: 'FontSizeIcon', + v9: 'TextFontSize', + }, + { + v0: 'FormatIcon', + v9: 'TextEditStyle', + }, + { + v0: 'GalleryIcon', + v9: 'TableSimple', + }, + { + v0: 'GalleryNewIcon', + v9: 'TableSimple', + }, + { + v0: 'GalleryNewLargeIcon', + v9: 'Table', + }, + { + v0: 'GeofenceArrivesIcon', + v9: '', + }, + { + v0: 'GeofenceArrivesOrLeavesIcon', + v9: '', + }, + { + v0: 'GeofenceLeavesIcon', + v9: '', + }, + { + v0: 'GiphyIcon', + v9: 'Gif', + }, + { + v0: 'GlassesIcon', + v9: 'Glasses', + }, + { + v0: 'GridIcon', + v9: 'Grid', + }, + { + v0: 'GroupVideoCallGridIcon', + v9: 'TableSimple', + }, + { + v0: 'HandIcon', + v9: 'HandLeft', + }, + { + v0: 'HeadsetIcon', + v9: 'Headset', + }, + { + v0: 'HighlightIcon', + v9: 'Highlight', + }, + { + v0: 'HorizontalRuleIcon', + v9: '', + }, + { + v0: 'ImageAltTextIcon', + v9: 'ImageAltText', + }, + { + v0: 'ImageLibraryIcon', + v9: 'ImageMultiple', + }, + { + v0: 'ImageUnavailableIcon', + v9: 'ImageOff', + }, + { + v0: 'IndentIcon', + v9: 'TextIndentIncreaseLtr', + }, + { + v0: 'InfoIcon', + v9: 'Info', + }, + { + v0: 'ItalicIcon', + v9: 'TextItalic', + }, + { + v0: 'LeaveIcon', + v9: 'PersonArrowLeft', + }, + { + v0: 'LightningIcon', + v9: 'Flash', + }, + { + v0: 'LikeIcon', + v9: 'ThumbLike', + }, + { + v0: 'LinkIcon', + v9: 'Link', + }, + { + v0: 'LinkedInIcon', + v9: '', + }, + { + v0: 'ListIcon', + v9: 'List', + }, + { + v0: 'LiveIcon', + v9: 'Live', + }, + { + v0: 'LiveOffIcon', + v9: 'LiveOff', + }, + { + v0: 'LocationIcon', + v9: 'Location', + }, + { + v0: 'LockIcon', + v9: 'LockClosed', + }, + { + v0: 'MarkAsUnreadIcon', + v9: 'GlassesOff', + }, + { + v0: 'MeetingNewIcon', + v9: 'CalendarAdd', + }, + { + v0: 'MeetingTimeIcon', + v9: 'CalendarClock', + }, + { + v0: 'MentionIcon', + v9: 'Mention', + }, + { + v0: 'MenuIcon', + v9: 'Navigation', + }, + { + v0: 'MergeCallsIcon', + v9: 'Merge', + }, + { + v0: 'MessageSeenIcon', + v9: 'Eye', + }, + { + v0: 'MicIcon', + v9: 'Mic', + }, + { + v0: 'MicOffIcon', + v9: 'MicOff', + }, + { + v0: 'MicrophoneDisabledIcon', + v9: 'MicProhibited', + }, + { + v0: 'MicrosoftStreamIcon', + v9: '', + }, + { + v0: 'MoleculeIcon', + v9: 'Molecule', + }, + { + v0: 'MoreIcon', + v9: 'MoreHorizontal', + }, + { + v0: 'NoPresenterIcon', + v9: 'PresenterOff', + }, + { + v0: 'NotepadPersonIcon', + v9: 'NotepadPerson', + }, + { + v0: 'NotesIcon', + v9: 'Notepad', + }, + { + v0: 'NotificationsMutedIcon', + v9: 'AlertOff', + }, + { + v0: 'NumberListIcon', + v9: 'TextNumberListLtr', + }, + { + v0: 'NumberSymbolIcon', + v9: 'NumberSymbol', + }, + { + v0: 'OcrOffIcon', + v9: 'ScanTypeOff', + }, + { + v0: 'OcrOnIcon', + v9: 'ScanType', + }, + { + v0: 'OneDriveIcon', + v9: '', + }, + { + v0: 'OneNoteColorIcon', + v9: '', + }, + { + v0: 'OneNoteIcon', + v9: '', + }, + { + v0: 'OneNoteMonoIcon', + v9: '', + }, + { + v0: 'OpenOutsideIcon', + v9: 'WindowNew', + }, + { + v0: 'OptionsIcon', + v9: 'Options', + }, + { + v0: 'OutdentIcon', + v9: 'TextIndentDecreaseLtr', + }, + { + v0: 'OutlookColorIcon', + v9: '', + }, + { + v0: 'PageFitIcon', + v9: 'PageFit', + }, + { + v0: 'PanoramaIcon', + v9: 'Video360', + }, + { + v0: 'PanoramaOffIcon', + v9: 'Video360Off', + }, + { + v0: 'PaperclipIcon', + v9: 'Attach', + }, + { + v0: 'ParticipantRemoveIcon', + v9: 'PersonDelete', + }, + { + v0: 'PauseIcon', + v9: 'Pause', + }, + { + v0: 'PauseThickIcon', + v9: 'Pause', + }, + { + v0: 'PhoneArrowIcon', + v9: 'CallForward', + }, + { + v0: 'PhoneClockIcon', + v9: 'CallMissed', + }, + { + v0: 'PhoneIcon', + v9: 'Phone', + }, + { + v0: 'PlayIcon', + v9: 'Play', + }, + { + v0: 'PlugsIcon', + v9: 'Connector', + }, + { + v0: 'PollIcon', + v9: 'Poll', + }, + { + v0: 'PopupIcon', + v9: 'WindowNew', + }, + { + v0: 'PowerPointColorIcon', + v9: '', + }, + { + v0: 'PowerPointIcon', + v9: '', + }, + { + v0: 'PresenceAvailableIcon', + v9: 'PresenceAvailable', + }, + { + v0: 'PresenceStrokeIcon', + v9: 'PresenceUnknown', + }, + { + v0: 'PresenterIcon', + v9: 'Presenter', + }, + { + v0: 'QnaIcon', + v9: 'ChatBubblesQuestion', + }, + { + v0: 'QuestionCircleIcon', + v9: 'QuestionCircle', + }, + { + v0: 'QuoteIcon', + v9: 'TextQuote', + }, + { + v0: 'RadioButtonIcon', + v9: 'RadioButton', + }, + { + v0: 'RaiseHandColoredIcon', + v9: '', + }, + { + v0: 'RaiseHandDisabledIcon', + v9: 'HandRightOff', + }, + { + v0: 'RaiseHandIcon', + v9: 'HandRight', + }, + { + v0: 'ReactionsIcon', + v9: 'EmojiHand', + }, + { + v0: 'ReadAloudIcon', + v9: 'ReadAloud', + }, + { + v0: 'RedbangIcon', + v9: '', + }, + { + v0: 'RedoIcon', + v9: 'ArrowRedo', + }, + { + v0: 'RemoveFormatIcon', + v9: 'TextClearFormatting', + }, + { + v0: 'RetryIcon', + v9: 'ArrowClockwise', + }, + { + v0: 'RobotIcon', + v9: 'Bot', + }, + { + v0: 'ScreencastIcon', + v9: 'SquareMultiple', + }, + { + v0: 'SearchIcon', + v9: 'Search', + }, + { + v0: 'SendIcon', + v9: 'Send', + }, + { + v0: 'SettingsAudioIcon', + v9: 'Options', + }, + { + v0: 'SettingsIcon', + v9: 'Settings', + }, + { + v0: 'ShareAltIcon', + v9: 'Molecule', + }, + { + v0: 'ShareGenericIcon', + v9: 'Share', + }, + { + v0: 'ShareLocationIcon', + v9: 'LocationLive', + }, + { + v0: 'ShareToIcon', + v9: 'TvArrowRight', + }, + { + v0: 'ShieldKeyholeIcon', + v9: 'ShieldKeyhole', + }, + { + v0: 'Shift24hIcon', + v9: 'ShiftsDay', + }, + { + v0: 'ShiftActivityIcon', + v9: 'ShiftsActivity', + }, + { + v0: 'SignatureIcon', + v9: 'Signature', + }, + { + v0: 'SkypeColorIcon', + v9: '', + }, + { + v0: 'SkypeLogoIcon', + v9: '', + }, + { + v0: 'SpeakerMuteIcon', + v9: 'SpeakerMute', + }, + { + v0: 'SpeakerPersonIcon', + v9: 'PersonCircle', + }, + { + v0: 'SpotlightIcon', + v9: 'VideoPersonStar', + }, + { + v0: 'StarIcon', + v9: 'Star', + }, + { + v0: 'StickerIcon', + v9: 'Sticker', + }, + { + v0: 'StrikeIcon', + v9: 'TextStrikethrough', + }, + { + v0: 'SubtractIcon', + v9: 'Subtract', + }, + { + v0: 'SurveyIcon', + v9: '', + }, + { + v0: 'SwitchCameraIcon', + v9: 'VideoSwitch', + }, + { + v0: 'SyncIcon', + v9: 'ArrowSync', + }, + { + v0: 'TableAddIcon', + v9: 'TableAdd', + }, + { + v0: 'TableDeleteIcon', + v9: 'TableDismiss', + }, + { + v0: 'TableIcon', + v9: 'Table', + }, + { + v0: 'TabsIcon', + v9: 'Tabs', + }, + { + v0: 'TagIcon', + v9: 'Tag', + }, + { + v0: 'TaskListIcon', + v9: 'TaskListLtr', + }, + { + v0: 'TeamCreateIcon', + v9: 'PeopleAdd', + }, + { + v0: 'TeamsIcon', + v9: '', + }, + { + v0: 'TeamsMonochromeIcon', + v9: '', + }, + { + v0: 'TenantPersonalIcon', + v9: 'MultiselectLtr', + }, + { + v0: 'TenantWorkIcon', + v9: 'Toolbox', + }, + { + v0: 'TextBulletListTreeIcon', + v9: 'TextBulletListTree', + }, + { + v0: 'ThumbtackIcon', + v9: 'Pin', + }, + { + v0: 'ThumbtackSlashIcon', + v9: 'PinOff', + }, + { + v0: 'TiltPanZoomIcon', + v9: 'CubeRotate', + }, + { + v0: 'ToDoListIcon', + v9: 'TaskListSquareLtr', + }, + { + v0: 'TranscriptIcon', + v9: 'SlideText', + }, + { + v0: 'TranslationIcon', + v9: 'Translate', + }, + { + v0: 'TrashCanIcon', + v9: 'Delete', + }, + { + v0: 'TriangleDownIcon', + v9: 'TriangleDown', + }, + { + v0: 'TriangleEndIcon', + v9: 'CaretRight', + }, + { + v0: 'TriangleUpIcon', + v9: 'CaretUp', + }, + { + v0: 'TvIcon', + v9: 'Tv', + }, + { + v0: 'TwitterIcon', + v9: '', + }, + { + v0: 'UnderlineIcon', + v9: 'TextUnderline', + }, + { + v0: 'UndoIcon', + v9: 'ArrowUndo', + }, + { + v0: 'UrgentIcon', + v9: 'AlertUrgent', + }, + { + v0: 'UserBlurIcon', + v9: 'VideoBackgroundEffect', + }, + { + v0: 'UserFriendsIcon', + v9: 'People', + }, + { + v0: 'UserPhoneIcon', + v9: 'VideoPersonCall', + }, + { + v0: 'VideoCameraEmphasisIcon', + v9: 'Video', + }, + { + v0: 'VideoLoadingIcon', + v9: 'VideoSync', + }, + { + v0: 'VideomailIcon', + v9: 'VideoRecording', + }, + { + v0: 'VisioColorIcon', + v9: '', + }, + { + v0: 'VisioIcon', + v9: '', + }, + { + v0: 'VolumeDownIcon', + v9: 'Speaker0', + }, + { + v0: 'VolumeIcon', + v9: 'Speaker1', + }, + { + v0: 'VolumeUpIcon', + v9: 'Speaker2', + }, + { + v0: 'WandIcon', + v9: 'Wand', + }, + { + v0: 'WhiteboardIcon', + v9: 'Whiteboard', + }, + { + v0: 'WindowMaximizeIcon', + v9: 'Square', + }, + { + v0: 'WindowMinimizeIcon', + v9: 'Subtract', + }, + { + v0: 'WindowRestoreIcon', + v9: 'SquareMultiple', + }, + { + v0: 'WordColorIcon', + v9: '', + }, + { + v0: 'WordIcon', + v9: '', + }, + { + v0: 'WorkOrSchoolIcon', + v9: 'Guest', + }, + { + v0: 'YammerIcon', + v9: '', + }, + { + v0: 'ZoomInIcon', + v9: 'ZoomIn', + }, + { + v0: 'ZoomOutIcon', + v9: 'ZoomOut', + }, + { + v0: 'ZoomToFitIcon', + v9: '', + }, + { + v0: 'ActivityIcon', + v9: 'Pulse', + }, + { + v0: 'AngryFaceReactionIcon', + v9: '', + }, + { + v0: 'AnnotationIcon', + v9: '', + }, + { + v0: 'AppBarChatIcon', + v9: 'Chat', + }, + { + v0: 'AppFolderIcon', + v9: 'AppFolder', + }, + { + v0: 'AppsIcon', + v9: 'Apps', + }, + { + v0: 'ApplauseMeetingReactionIcon', + v9: '', + }, + { + v0: 'ArrowReplyDownIcon', + v9: 'ArrowReplyDown', + }, + { + v0: 'ArrowSortIcon', + v9: 'ArrowSort', + }, + { + v0: 'ArrowTrendingIcon', + v9: 'ArrowTrending', + }, + { + v0: 'AssignParticipantsIcon', + v9: 'CalendarPerson', + }, + { + v0: 'BookContactsIcon', + v9: 'BookContacts', + }, + { + v0: 'BorderDottedIcon', + v9: 'BorderNone', + }, + { + v0: 'BotAddIcon', + v9: 'BotAdd', + }, + { + v0: 'BreakoutRoomsIcon', + v9: 'BreakoutRoom', + }, + { + v0: 'BranchForkIcon', + v9: 'BranchFork', + }, + { + v0: 'CalendarDayIcon', + v9: 'CalendarDay', + }, + { + v0: 'CalendarNotesIcon', + v9: 'CalendarAgenda', + }, + { + v0: 'CalendarShareLinkIcon', + v9: 'Share', + }, + { + v0: 'CalendarTodayIcon', + v9: 'CalendarToday', + }, + { + v0: 'CalendarWeekIcon', + v9: 'Calendar3Day', + }, + { + v0: 'CalendarWorkWeekIcon', + v9: 'CalendarWorkWeek', + }, + { + v0: 'CallConnectingIcon', + v9: 'CallConnecting', + }, + { + v0: 'CallEndingIcon', + v9: 'CallExclamation', + }, + { + v0: 'CallMissedIcon', + v9: 'CallMissed', + }, + { + v0: 'CallTransferredIcon', + v9: 'CallTransfer', + }, + { + v0: 'CallTransferredRtlIcon', + v9: '', + }, + { + v0: 'CastIcon', + v9: 'Cast', + }, + { + v0: 'CameraClickIcon', + v9: 'Camera', + }, + { + v0: 'CameraEffectIcon', + v9: 'Wand', + }, + { + v0: 'CameraSwitchIcon', + v9: 'CameraSwitch', + }, + { + v0: 'CameraRecordingIcon', + v9: 'Camera', + }, + { + v0: 'ChannelAddIcon', + v9: 'ChannelAdd', + }, + { + v0: 'ChannelArrowLeftIcon', + v9: 'ChannelArrowLeft', + }, + { + v0: 'ChannelBlockIcon', + v9: 'ChannelSubtract', + }, + { + v0: 'ChannelIcon', + v9: 'Channel', + }, + { + v0: 'ChannelIconFilled', + v9: 'Channel', + }, + { + v0: 'ChartPersonIcon', + v9: 'ChartPerson', + }, + { + v0: 'Checkmark12Icon', + v9: 'Checkmark', + }, + { + v0: 'ChevronLeftIcon', + v9: 'ChevronLeft', + }, + { + v0: 'ChevronRightIcon', + v9: 'ChevronRight', + }, + { + v0: 'CleanupOnIcon', + v9: 'InprivateAccount', + }, + { + v0: 'CleanupOffIcon', + v9: '', + }, + { + v0: 'ClearBackgroundIcon', + v9: '', + }, + { + v0: 'ClockIcon', + v9: 'Clock', + }, + { + v0: 'ClockPauseIcon', + v9: 'ClockPause', + }, + { + v0: 'CoachCelebrationArtIcon', + v9: '', + }, + { + v0: 'CoachChartMarker', + v9: '', + }, + { + v0: 'CoachIcon', + v9: 'SlideMicrophone', + }, + { + v0: 'ComputerAudioIcon', + v9: 'DesktopSpeaker', + }, + { + v0: 'ComputerNoAudioIcon', + v9: 'DesktopSpeakerOff', + }, + { + v0: 'ContentViewGalleryIcon', + v9: 'ContentViewGallery', + }, + { + v0: 'ContentCameraIcon', + v9: 'ScanCamera', + }, + { + v0: 'ContentOnlyIcon', + v9: 'RectangleLandscape', + }, + { + v0: 'ContentSettingsIcon', + v9: 'ContentSettings', + }, + { + v0: 'CopyIcon', + v9: 'Copy', + }, + { + v0: 'CortanaIcon', + v9: '', + }, + { + v0: 'CortanaLightIcon', + v9: '', + }, + { + v0: 'CortanaDarkIcon', + v9: '', + }, + { + v0: 'CropParticipantIcon', + v9: 'ScaleFill', + }, + { + v0: 'CreateTeamOrgWideIcon', + v9: '', + }, + { + v0: 'D365MarketingIcon', + v9: '', + }, + { + v0: 'TimerIcon', + v9: 'Timer', + }, + { + v0: 'DemotePresenterIcon', + v9: 'PresenterOff', + }, + { + v0: 'DeviceAudioIcon', + v9: 'DeviceMeetingRoom', + }, + { + v0: 'DiamondIcon', + v9: 'Diamond', + }, + { + v0: 'DismissedCallTimelineIcon', + v9: 'CallDismiss', + }, + { + v0: 'GlobeClockIcon', + v9: 'GlobeClock', + }, + { + v0: 'MegaphoneLoudIcon', + v9: 'MegaphoneLoud', + }, + { + v0: 'PanelLeftIcon', + v9: 'PanelLeft', + }, + { + v0: 'PanelRightIcon', + v9: 'PanelRight', + }, + { + v0: 'TicketDiagonalIcon', + v9: 'TicketDiagonal', + }, + { + v0: 'RoomRemoteIcon', + v9: '', + }, + { + v0: 'DocumentIcon', + v9: 'Document', + }, + { + v0: 'EmojiAngryIcon', + v9: 'EmojiAngry', + }, + { + v0: 'EmojiEditIcon', + v9: 'EmojiEdit', + }, + { + v0: 'EmojiLaughIcon', + v9: 'EmojiLaugh', + }, + { + v0: 'EmojiSparkleIcon', + v9: 'EmojiSparkle', + }, + { + v0: 'EmptyIcon', + v9: '', + }, + { + v0: 'EncryptedIcon', + v9: 'ShieldLock', + }, + { + v0: 'ExchangeIcon', + v9: '', + }, + { + v0: 'ExclamationCircleIcon', + v9: 'ErrorCircle', + }, + { + v0: 'ExpandUpRightIcon', + v9: 'ExpandUpRight', + }, + { + v0: 'EyeFriendlierSlashIcon', + v9: 'EyeOff', + }, + { + v0: 'FeedbackIcon', + v9: '', + }, + { + v0: 'FluentOneDriveIcon', + v9: '', + }, + { + v0: 'FocusModeIcon', + v9: 'ContentView', + }, + { + v0: 'FullScreenIcon', + v9: 'PageFit', + }, + { + v0: 'ResetZoomIcon', + v9: 'PageFit', + }, + { + v0: 'GlobeIcon', + v9: 'Globe', + }, + { + v0: 'GoogleColorIcon', + v9: '', + }, + { + v0: 'HashTagIcon', + v9: 'NumberSymbol', + }, + { + v0: 'HeartIcon', + v9: 'Heart', + }, + { + v0: 'HeadsetVRIcon', + v9: '', + }, + { + v0: 'HeartMeetingReactionIcon', + v9: '', + }, + { + v0: 'HeartReactionIcon', + v9: '', + }, + { + v0: 'HolographicArrowIcon', + v9: '', + }, + { + v0: 'HolographicColorPickerIcon', + v9: 'Square', + }, + { + v0: 'HolographicColorPickerItemIcon', + v9: 'CircleSmall', + }, + { + v0: 'HolographicColorPickerItemSelectedIcon', + v9: '', + }, + { + v0: 'HolographicInkingIcon', + v9: 'Edit', + }, + { + v0: 'HoloLensIcon', + v9: '', + }, + { + v0: 'ImmersiveViewIcon', + v9: '', + }, + { + v0: 'IncomingCallIcon', + v9: 'CallInbound', + }, + { + v0: 'InvitePeopleIcon', + v9: '', + }, + { + v0: 'LargeGalleryIcon', + v9: 'Table', + }, + { + v0: 'LaughMeetingReactionIcon', + v9: '', + }, + { + v0: 'LaughReactionIcon', + v9: '', + }, + { + v0: 'LightBulbFilamentIcon', + v9: 'LightbulbFilament', + }, + { + v0: 'LightBulbIcon', + v9: 'LightbulbFilament', + }, + { + v0: 'LockClosedIcon', + v9: 'LockClosed', + }, + { + v0: 'LoopFileIcon', + v9: '', + }, + { + v0: 'LoopIcon', + v9: '', + }, + { + v0: 'MagicIcon', + v9: 'Wand', + }, + { + v0: 'MeetingNotesAppIcon', + v9: 'Notepad', + }, + { + v0: 'MeetingNotesIcon', + v9: 'Notepad', + }, + { + v0: 'MeetingReactionIcon', + v9: 'EmojiHand', + }, + { + v0: 'MegaphoneIcon', + v9: 'Megaphone', + }, + { + v0: 'MicDisabledIcon', + v9: 'MicProhibited', + }, + { + v0: 'MicMeterShadeIcon', + v9: '', + }, + { + v0: 'SmileyIcon', + v9: 'Emoji', + }, + { + v0: 'MicPulseIcon', + v9: 'MicPulse', + }, + { + v0: 'MicPulseOffIcon', + v9: 'MicPulseOff', + }, + { + v0: 'MicSpeakingIcon', + v9: '', + }, + { + v0: 'MicrosoftIcon', + v9: '', + }, + { + v0: 'MidiIcon', + v9: 'Midi', + }, + { + v0: 'MissedCallIcon', + v9: 'CallMissed', + }, + { + v0: 'MobileIcon', + v9: 'Phone', + }, + { + v0: 'MoonIcon', + v9: 'WeatherMoon', + }, + { + v0: 'MusicNoteIcon', + v9: 'MusicNote1', + }, + { + v0: 'MuteNotificationIcon', + v9: 'AlertOff', + }, + { + v0: 'NarrowModeIcon', + v9: '', + }, + { + v0: 'NewsAnchorIcon', + v9: 'ShareScreenPersonOverlay', + }, + { + v0: 'OneDriveOutlineIcon', + v9: '', + }, + { + v0: 'OneNotePageIcon', + v9: '', + }, + { + v0: 'OpenIcon', + v9: 'Open', + }, + { + v0: 'OrgChartIcon', + v9: 'Organization', + }, + { + v0: 'OrgWideIcon', + v9: '', + }, + { + v0: 'OutgoingCallIcon', + v9: 'CallOutbound', + }, + { + v0: 'OutlookIcon', + v9: '', + }, + { + v0: 'OfficeOutlookIcon', + v9: '', + }, + { + v0: 'PanelRightExpandIcon', + v9: 'PanelRightExpand', + }, + { + v0: 'PanelRightContractIcon', + v9: 'PanelRightContract', + }, + { + v0: 'PeopleListIcon', + v9: 'PeopleList', + }, + { + v0: 'PeopleAudienceIcon', + v9: 'PeopleAudience', + }, + { + v0: 'PeopleTeamIcon', + v9: 'PeopleTeam', + }, + { + v0: 'PeopleTeamIconFilled', + v9: 'PeopleTeam', + }, + { + v0: 'PersonAccountsIcon', + v9: 'PersonAccounts', + }, + { + v0: 'PersonAvailableIcon', + v9: 'PersonAvailable', + }, + { + v0: 'PersonIcon', + v9: 'Person', + }, + { + v0: 'PersonFeedbackIcon', + v9: 'PersonFeedback', + }, + { + v0: 'PinIcon', + v9: 'Pin', + }, + { + v0: 'PinOffIcon', + v9: 'PinOff', + }, + { + v0: 'PhoneAudioIcon', + v9: 'CallConnecting', + }, + { + v0: 'PlazaMisrecognized', + v9: 'InprivateAccount', + }, + { + v0: 'PowerPointMonoIcon', + v9: '', + }, + { + v0: 'PromoteAttendeeIcon', + v9: 'Presenter', + }, + { + v0: 'ProximityIcon', + v9: 'Cast', + }, + { + v0: 'QuadDetectionOnIcon', + v9: '', + }, + { + v0: 'QuadDetectionOffIcon', + v9: '', + }, + { + v0: 'RaiseHandColoredFluentIcon', + v9: '', + }, + { + v0: 'RecentIcon', + v9: 'History', + }, + { + v0: 'RecurrenceIcon', + v9: 'ArrowRepeatAll', + }, + { + v0: 'RenameIcon', + v9: 'Rename', + }, + { + v0: 'RichCallHistoryCallEndIcon', + v9: 'CallEnd', + }, + { + v0: 'RichCallHistoryForwardIcon', + v9: 'CallForward', + }, + { + v0: 'RichCallHistoryIncomingIcon', + v9: 'CallInbound', + }, + { + v0: 'RichCallHistoryMissedIcon', + v9: 'CallMissed', + }, + { + v0: 'RichCallHistoryOutgoingIcon', + v9: 'CallOutbound', + }, + { + v0: 'RichCallHistoryTransferIcon', + v9: 'CallOutbound', + }, + { + v0: 'RichCallHistoryVoicemailIcon', + v9: 'Voicemail', + }, + { + v0: 'RosterIcon', + v9: 'People', + }, + { + v0: 'RosterPermissionsIcon', + v9: 'Settings', + }, + { + v0: 'RotateIcon', + v9: 'ArrowRotateClockwise', + }, + { + v0: 'SadReactionIcon', + v9: '', + }, + { + v0: 'SaveIcon', + v9: 'Save', + }, + { + v0: 'ScdEndIcon', + v9: 'ScanType', + }, + { + v0: 'ScdStartIcon', + v9: 'ScanType', + }, + { + v0: 'ScreenshareIcon', + v9: 'WindowMultiple', + }, + { + v0: 'SearchMagnifierIcon', + v9: 'Search', + }, + { + v0: 'SeatAddIcon', + v9: '', + }, + { + v0: 'SeatIcon', + v9: '', + }, + { + v0: 'SFCIcon', + v9: '', + }, + { + v0: 'SharepointIcon', + v9: '', + }, + { + v0: 'ShareScreenPersonPIcon', + v9: 'ShareScreenPersonP', + }, + { + v0: 'ShieldErrorIcon', + v9: 'ShieldError', + }, + { + v0: 'ShiftIcon', + v9: 'Shifts', + }, + { + v0: 'SideBySideIcon', + v9: 'ShareScreenPersonOverlayInside', + }, + { + v0: 'SignLanguageIcon', + v9: 'HandWave', + }, + { + v0: 'SnapshotIcon', + v9: 'Screenshot', + }, + { + v0: 'SpeakerLouderIcon', + v9: 'Speaker2', + }, + { + v0: 'SpotlightStopIcon', + v9: 'VideoPersonStarOff', + }, + { + v0: 'StopRecordingIcon', + v9: 'RecordStop', + }, + { + v0: 'SuccessStarEmphasizedIcon', + v9: 'StarEmphasis', + }, + { + v0: 'SunIcon', + v9: 'WeatherSunny', + }, + { + v0: 'SurprisedReactionIcon', + v9: '', + }, + { + v0: 'SyncOffIcon', + v9: 'SyncOff', + }, + { + v0: 'TaskListSquareAddIcon', + v9: 'TaskListSquareAdd', + }, + { + v0: 'Teams2Icon', + v9: '', + }, + { + v0: 'TeamsForLifeIcon', + v9: '', + }, + { + v0: 'AppBarTeamsIcon', + v9: 'PeopleTeam', + }, + { + v0: 'TeamsLogoSmall', + v9: '', + }, + { + v0: 'TeamsMonochrome2Icon', + v9: '', + }, + { + v0: 'TentativeIcon', + v9: 'Question', + }, + { + v0: 'ThumbDislikeIcon', + v9: 'ThumbDislike', + }, + { + v0: 'ThumbLikeIcon', + v9: 'ThumbLike', + }, + { + v0: 'ShieldCheckmarkIcon', + v9: 'ShieldCheckmark', + }, + { + v0: 'ShieldTaskIcon', + v9: 'ShieldTask', + }, + { + v0: 'SparkleIcon', + v9: 'Sparkle', + }, + { + v0: 'SwitchIcon', + v9: 'ArrowSwap', + }, + { + v0: 'UncropParticipantIcon', + v9: 'ScaleFit', + }, + { + v0: 'UserBlockIcon', + v9: 'PersonSubtract', + }, + { + v0: 'VoicemailIcon', + v9: 'Voicemail', + }, + { + v0: 'VideoVideoAddIconClipIcon', + v9: 'VideoAdd', + }, + { + v0: 'VideoClipIcon', + v9: 'VideoClip', + }, + { + v0: 'VideoPersonIcon', + v9: 'VideoPerson', + }, + { + v0: 'VideoPersonSparkleIcon', + v9: 'VideoPersonSparkle', + }, + { + v0: 'VideoProhibitedIcon', + v9: 'VideoProhibited', + }, + { + v0: 'VideoChatIcon', + v9: 'VideoChat', + }, + { + v0: 'VivaInsightsIcon', + v9: '', + }, + { + v0: 'WeatherPersonIcon', + v9: 'ShareScreenPerson', + }, + { + v0: 'WebsiteIcon', + v9: 'Globe', + }, + { + v0: 'WifiIcon', + v9: 'Wifi1', + }, + { + v0: 'WhiteboardCameraIcon', + v9: '', + }, + { + v0: 'WindowClose2Icon', + v9: 'Dismiss', + }, + { + v0: 'WindowMaximize2Icon', + v9: 'Square', + }, + { + v0: 'WindowMinimize2Icon', + v9: 'Subtract', + }, + { + v0: 'WindowRestore2Icon', + v9: 'SquareMultiple', + }, + { + v0: 'WindowsOsIcon', + v9: '', + }, + { + v0: 'YesMeetingReactionIcon', + v9: '', + }, + { + v0: 'YesReactionIcon', + v9: '', + }, + { + v0: 'ScanThumbUp', + v9: 'ScanThumbUp', + }, + { + v0: 'ScanThumbUpOff', + v9: 'ScanThumbUpOff', + }, + { + v0: 'VoteIcon', + v9: 'Vote', + }, + { + v0: 'PaymentProviderSelectIcon', + v9: '', + }, + { + v0: 'CurrencyAmountIcon', + v9: '', + }, + { + v0: 'DesktopCursorIcon', + v9: 'DesktopCursor', + }, + { + v0: 'ReplyIcon', + v9: 'ArrowReplyDown', + }, + { + v0: 'BackspaceIcon', + v9: 'Backspace', + }, + { + v0: 'ParticipantAddIcon', + v9: 'PersonAdd', + }, + { + v0: 'RibbonIcon', + v9: 'Ribbon', + }, + { + v0: 'ChatDismissIcon', + v9: 'ChatDismiss', + }, +]; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/types.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/types.ts new file mode 100644 index 00000000000000..1074e295b45358 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/types.ts @@ -0,0 +1,6 @@ +import * as React from 'react'; +import type { SvgIconProps } from '@fluentui/react-icons-northstar'; +import type { FluentIconsProps } from '@fluentui/react-icons'; + +export type V0IconComponent = React.FunctionComponent; +export type V9IconComponent = React.FunctionComponent; diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/useDebounce.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/useDebounce.ts new file mode 100644 index 00000000000000..c00486012917cf --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/useDebounce.ts @@ -0,0 +1,15 @@ +import * as React from 'react'; + +export const useDebounce = (fn: (...args: unknown[]) => void, duration: number) => { + const timeoutRef = React.useRef(0); + + return React.useCallback( + (...args: unknown[]) => { + clearTimeout(timeoutRef.current); + timeoutRef.current = window.setTimeout(() => { + fn(...args); + }, duration); + }, + [duration, fn], + ); +}; diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Image.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx similarity index 94% rename from apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Image.stories.mdx rename to apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx index 12f0bafc5a81f8..41500c1a045f44 100644 --- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV0/Components/Image.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/addon-docs'; - + -# Image Upgrade +# Image Migration ## Overview: @@ -28,7 +28,7 @@ const Component = () => ; | src, alt, aria-label, key, ref | keep it as is | | aria-hidden | if `alt` property is empty and image is illustrative or not relevant for screen reader users, it's **required** to add `aria-hidden="true"` attribute (in v0 it was applied bt default) | | variables, design, styles | see Migrate style overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-upgrading-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page) | | fluid | replace with `fit="contain"` | | circular | replace with `shape="circular"` | | avatar | see Migrate avatar prop in this document | @@ -37,7 +37,7 @@ const Component = () => ; ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-upgrading-from-v0-custom-style-overrides--page). +⚠️ **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`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx new file mode 100644 index 00000000000000..542280e241e2a0 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx @@ -0,0 +1,81 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Input Migration + +Fluent UI Northstar (v0) provides the `Input` control to elicit input from users. Fluent UI v9 also provides an `Input` control but with a different API and feature set. + +## Examples + +### Basic Migration + +Basic usage of `Input` v0 looks like + +```tsx +import * as React from 'react'; +import { Input, Text, Flex } from '@fluentui/react-northstar'; + +const InputV0BasicExample = () => { + return ; +}; +``` + +An equivalent `Input` v9 usage is + +```tsx +import * as React from 'react'; +import { Label, Input } from '@fluentui/react-components/unstable'; +import { useId } from '@fluentui/react-utilities'; +import { makeStyles } from '@griffel/react'; + +const useLayoutStyles = makeStyles({ + root: { + maxWidth: '300px', + display: 'flex', + flexDirection: 'column', + }, +}); + +const InputV9BasicExample = () => { + const layoutStyles = useLayoutStyles(); + const inputId = useId('input'); + return ( +
+ + +
+ ); +}; +``` + +## Prop Mapping + +This table maps v0 `Input` props to the v9 `Input` equivalent. + +| v0 | v9 | Notes | +| ---------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | +| `accessibility` | n/a | | +| `as` | n/a | | +| `className` | `className` | | +| `clearable` | n/a | Use `contentBefore` or `contentAfter` slots to add a `Button` to implement this behavior | +| `defaultValue` | `defaultValue` | Mutually exclusive with `value` | +| `design` | n/a | | +| `error` | n/a | v9 `Input` does not handle error states | +| `errorIndicator` | n/a | Use `contentBefore` or `contentAfter` slots to insert custom indicators | +| `fluid` | n/a | | +| `icon` | Use `contentBefore` or `contentAfter` slots | | +| `iconPosition` | n/a | | +| `inline` | n/a | | +| `input` | `input` | This is a slot | +| `inputRef` | Pass a `ref` to the `input` slot | | +| `inverted` | `appearance` | | +| `label` | Use `Label` component | Be sure to associate `Label` with `Input` via `htmlFor` | +| `labelPosition` | n/a | | +| `onChange` | `onChange` | | +| `required` | `required` | This is the native HTML prop | +| `showSuccessIndicator` | n/a | Use `contentBefore` or `contentAfter` slots to insert custom indicators | +| `type` | `type` | Non text types like 'button' and 'checkbox' are not supported. Use `Button` or `Checkbox` component instead | +| `value` | `value` | Mutually exclusive with `defaultValue` | +| `variables` | n/a | Use `FluentProvider` to customize themes | +| `wrapper` | `root` | This is a slot | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx new file mode 100644 index 00000000000000..cfe17cf5cec40b --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Label.stories.mdx @@ -0,0 +1,58 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Label Migration + +Fluent UI Northstar (v0) provides the `Label` control to allow users to classify content. Fluent UI v9 also provides a `Label`, but has a different API. + +The main difference with v0's and v9's `Label` is that v9 doesn't provide an image and icon prop. v9 also accepts a custom required indicator that can be a string or JSX element. + +## Examples + +### Basic Migration + +Basic usage of `Label` v0 + +```tsx +import * as React from 'react'; +import { Label } from '@fluentui/react-northstar'; + +const LabelV0BasicExample = () => { + return