diff --git a/.devops/templates/deployE2E.yml b/.devops/templates/deployE2E.yml index 19d4a1a605630c..ec8943d21fe0bb 100644 --- a/.devops/templates/deployE2E.yml +++ b/.devops/templates/deployE2E.yml @@ -6,6 +6,10 @@ steps: filePath: yarn-ci.sh displayName: yarn + - script: | + yarn cypress verify + displayName: verify cypress install + # this also builds FUI N* docs if appropriate - script: | yarn bundle $(sinceArg) @@ -20,14 +24,20 @@ steps: yarn workspace @fluentui/pr-deploy-site generate:site displayName: generate PR Deploy Site - - task: AzureUpload@2 + - task: AzureCLI@2 displayName: Upload PR deploy site inputs: azureSubscription: $(azureSubscription) - BlobPrefix: $(deployBasePath) - ContainerName: '$web' - SourcePath: 'apps/pr-deploy-site/dist' - storage: $(azureStorage) + scriptType: 'bash' + scriptLocation: 'inlineScript' + inlineScript: | + az storage blob upload-batch \ + --destination '$web' \ + --source apps/pr-deploy-site/dist \ + --account-name $(azureStorage) \ + --destination-path $(deployBasePath) \ + --auth-mode login \ + --overwrite - task: GithubPRStatus@0 displayName: 'Update PR deploy site github status' diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml index 9bb108e8af6023..99f5a7a6ca2dac 100644 --- a/.devops/templates/tools.yml +++ b/.devops/templates/tools.yml @@ -35,5 +35,6 @@ steps: echo 'deployUrl "$(deployUrl)"' echo 'isPR "$(isPR)"' echo 'targetBranch "$(targetBranch)"' + echo number of CPUs "$(getconf _NPROCESSORS_ONLN)" displayName: Log environment variables (Linux) condition: eq(variables['Agent.OS'], 'Linux') diff --git a/.devops/templates/variables.yml b/.devops/templates/variables.yml index 956f2390216d51..98a88e1def59a1 100644 --- a/.devops/templates/variables.yml +++ b/.devops/templates/variables.yml @@ -23,7 +23,7 @@ variables: deployUrl: 'https://$(deployHost)/$(deployBasePath)' # This service principal ("subscription" is a misleading name) only has access to the fluentuipr storage account - azureSubscription: Azure PR deploy + azureSubscription: Azure PR deploy - NEW azureStorage: fluentuipr ${{ if not(startsWith(variables['Build.SourceBranch'], 'refs/heads/')) }}: diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 3289d4a1d67e0e..cb4578295d477a 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -54,9 +54,7 @@ /jest.preset.ts @microsoft/fluentui-react-build /jest.config.js @microsoft/fluentui-react-build /jest.config.ts @microsoft/fluentui-react-build -/lerna.json @microsoft/fluentui-react-build /package.json @microsoft/fluentui-react-build -/sizeauditor.json @microsoft/fluentui-react-build /tsconfig.json @microsoft/fluentui-react-build /tsconfig.*.json @microsoft/fluentui-react-build /tsconfig.base.json @microsoft/fluentui-react-build @@ -103,7 +101,6 @@ scripts/update-release-notes @microsoft/fluentui-react-build scripts/utils @microsoft/fluentui-react-build scripts/webpack @microsoft/fluentui-react-build scripts/perf-test-flamegrill @microsoft/fluentui-react-build -scripts/bundle-size-auditor @microsoft/fluentui-react-build #### Fluent UI N* packages/a11y-rules @microsoft/fluentui-northstar @@ -240,20 +237,21 @@ packages/react-components/react-storybook-addon-export-to-sandbox @microsoft/flu packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build packages/react-components/react-jsx-runtime @microsoft/teams-prg packages/react-components/react-toast @microsoft/teams-prg -packages/react-components/react-search-preview @microsoft/cxe-red +packages/react-components/react-search @microsoft/cxe-red @smhigley packages/react-components/react-colorpicker-compat @microsoft/cxe-red @sopranopillow packages/react-components/react-nav-preview @microsoft/cxe-red @mltejera packages/react-components/react-motion-preview @microsoft/cxe-prg @marcosmoura packages/react-components/react-message-bar @microsoft/teams-prg -packages/react-components/react-rating-preview @microsoft/cxe-red @tomi-msft +packages/react-components/react-rating @microsoft/cxe-red @tomi-msft packages/react-components/react-swatch-picker-preview @microsoft/cxe-prg packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillow packages/react-components/react-infolabel @microsoft/cxe-red @sopranopillow packages/react-components/react-list-preview @microsoft/teams-prg packages/react-components/react-motions-preview @microsoft/teams-prg -packages/react-components/react-teaching-popover-preview @microsoft/xc-uxe @Mitch-At-Work +packages/react-components/react-teaching-popover @microsoft/xc-uxe @Mitch-At-Work packages/react-components/react-timepicker-compat @microsoft/teams-prg packages/react-components/react-icons-compat @microsoft/cxe-red @tomi-msft +packages/react-components/react-tag-picker-preview @microsoft/teams-prg # <%= NX-CODEOWNER-PLACEHOLDER %> ## Components @@ -325,3 +323,8 @@ packages/react-experiments/src/components/TileList @ThomasMichon **/api-extractor.json @microsoft/fluentui-react-build **/api-extractor.unstable.json @microsoft/fluentui-react-build **/.swcrc @microsoft/fluentui-react-build + +## Docs +/rfcs/ @microsoft/cxe-red @microsoft/cxe-prg @microsoft/teams-prg +/rfcs/shared/build-system/ @microsoft/fluentui-react-build +/docs/ @microsoft/cxe-red @microsoft/cxe-prg @microsoft/teams-prg diff --git a/.github/workflows/create-milestone.yml b/.github/workflows/create-milestone.yml index 3773a423de711c..f8101f60aa8728 100644 --- a/.github/workflows/create-milestone.yml +++ b/.github/workflows/create-milestone.yml @@ -21,7 +21,7 @@ jobs: year=$(date +"%Y") title="${month} Project Cycle Q${quarter} ${year}" due_on=$(date -d "$(date -d "next month" +%Y-%m-01) -1 day" +"%Y-%m-%dT%H:%M:%S%z") - echo "Using title '${title}' and setting due date: '${due-on}'" - gh api --method POST repos/microsoft/fluentui/milestones -f title="${title} -f due_on="${due_on}" + echo "Using title '${title}' and setting due date: '${due_on}'" + gh api --method POST repos/microsoft/fluentui/milestones -f title="${title}" -f due_on="${due_on}" env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index c6754268744c0e..37ca26594019f9 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,8 @@ stats/ # northstar README lives in packages/fluentui and is automatically copied to react-northstar during build packages/fluentui/react-northstar/README.md +monosize-report.md + # Windows image file caches Thumbs.db ehthumbs.db @@ -59,6 +61,7 @@ dist.stats.json bower_components node_modules temp +tmp lib lib-amd lib-commonjs diff --git a/.nxignore b/.nxignore index a68ee7011fbc9c..b0c3abba5efdb2 100644 --- a/.nxignore +++ b/.nxignore @@ -7,7 +7,6 @@ packages/fluentui/setup-local-development.md packages/fluentui/CHANGELOG.md packages/fluentui/CONTRIBUTING.md packages/fluentui/README.md -packages/fluentui/lerna.json -packages/fluentui/package.json +packages/fluentui/.browserslistrc **/dist/** diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css index e63734059f187a..1b2149ddc7f30a 100644 --- a/.storybook/docs-root.css +++ b/.storybook/docs-root.css @@ -181,6 +181,7 @@ #docs-root a.sbdocs-a { color: #0078d4; + text-decoration: underline; } /* */ diff --git a/.storybook/main.js b/.storybook/main.js index da228e5d881428..589f14d8725c13 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -88,7 +88,7 @@ module.exports = /** @type {Omit} */ ({ if ((process.env.CI || process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) && config.plugins) { // Disable ProgressPlugin in PR/CI builds to reduce log verbosity (warnings and errors are still logged) - config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin'); + config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin'); } return config; diff --git a/.storybook/preview.js b/.storybook/preview.js index f58d6eda11b0d0..e9d735bb68ed75 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -41,12 +41,12 @@ export const parameters = { }, }, exportToSandbox: { - provider: 'codesandbox-browser', - bundler: 'cra', + provider: 'stackblitz-cloud', + bundler: 'vite', requiredDependencies: { // for React - react: '^17', - 'react-dom': '^17', + react: '^18', + 'react-dom': '^18', // necessary for FluentProvider: '@fluentui/react-components': '^9.0.0', }, diff --git a/.verdaccio/config.yml b/.verdaccio/config.yml new file mode 100644 index 00000000000000..2e2fae63e4858a --- /dev/null +++ b/.verdaccio/config.yml @@ -0,0 +1,37 @@ +# path to a directory with all packages +storage: ../tmp/local-registry/storage + +# a list of other known repositories we can talk to +uplinks: + npmjs: + url: https://registry.npmjs.org/ + maxage: 60m + +packages: + # scoped packages + '@*/*': + access: $all + publish: $all + unpublish: $all + + # if package is not available locally, proxy requests to npm registry + proxy: npmjs + + '**': + # give all users (including non-authenticated users) full access + # because it is a local registry + access: $all + publish: $all + unpublish: $all + + # if package is not available locally, proxy requests to npm registry + proxy: npmjs + +# log settings +log: + type: stdout + format: pretty + level: warn + +publish: + allow_offline: true # set offline to true to allow publish offline diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 0d1349ca192cf4..f98c52df93be55 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,6 +4,8 @@ "recommendations": [ // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode" + "esbenp.prettier-vscode", + "streetsidesoftware.code-spell-checker", + "nrwl.angular-console" ] } diff --git a/CredScanSuppressions.json b/CredScanSuppressions.json index 9af57020c37196..abe9296a60a982 100644 --- a/CredScanSuppressions.json +++ b/CredScanSuppressions.json @@ -32,6 +32,10 @@ { "file": "node_modules/rollup-plugin-filesize/node_modules/node-gyp/test/fixtures/server.key", "_justification": "External dependency rollup-plugin-filesize has dependency node-gyp with test certs, not shipping these files" + }, + { + "file": "node_modules/node-gyp/test/fixtures/server.key", + "_justification": "External dependency node-gyp, not shipping these files" } ] } diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 41cdbe054ed6a7..afbed1bce4688a 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -25,6 +25,7 @@ "@fluentui/react-persona": "*", "@fluentui/react-provider": "*", "@fluentui/react-spinbutton": "*", + "@fluentui/react-swatch-picker-preview": "*", "@fluentui/react-theme": "*", "@griffel/core": "^1.14.1", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx b/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx new file mode 100644 index 00000000000000..f38eae0b622606 --- /dev/null +++ b/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-swatch-picker-preview'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; + +const Scenario = () => ( + + + + + +); + +Scenario.decorator = (props: { children: React.ReactNode }) => ( + {props.children} +); + +export default Scenario; diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index ef7da777e61ffc..89d7c24ab1d5c9 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -12,7 +12,11 @@ module.exports = /** @type {Omit ; | ------------------------- | -------------------------------------------------------------------------------------------------------- | | 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-migrating-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-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-migrating-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-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx index eab9286d2e49cc..62ce6347a4b908 100755 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx @@ -27,8 +27,8 @@ const Component = () => ; | Box props | migrate guide | | ------------------------- | -------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | -| variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| content | see [Migrate content prop](##migrate-content-prop) in this document | +| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | --- 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 index ef10b76cc927fa..46fa8e3f90edec 100644 --- 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 @@ -29,7 +29,7 @@ const Component = () => ; | 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) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | circular | replace with `shape="circular"` | | disabled | keep it as is | | disabledFocusable | keep it as is | @@ -71,7 +71,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-migrating-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-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx index 9f48013a060432..4e4dcc09ee1ff2 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx @@ -26,7 +26,7 @@ const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicin | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | variables, styles | see Migrate `style` overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page). Also check the focusMode new prop | | centered | REMOVED: see Migrate `centered` prop in this document | | compact | use `size="small"` | | disabled | REMOVED: No equivalent functionality. Can be created by overriding the styles. | @@ -39,7 +39,7 @@ const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicin ## 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). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx index a2424498a07644..6b837ff1f4e2a0 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx @@ -28,12 +28,12 @@ const Component = () => ; | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | variables, styles | see Migrate `style` overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page). Also check the focusMode new prop | | fitted | REMOVED: By default, all Footers are fitted | ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx index 186602ac8c0cb2..c54be2bc5519d0 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx @@ -28,12 +28,12 @@ const Component = () => ; | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | variables, styles | see Migrate `style` overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page). Also check the focusMode new prop | | fitted | REMOVED: by default, all headers are fitted | ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx index 2d4766c606c4a6..29f1275d335391 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx @@ -36,13 +36,13 @@ const Component = () => ( | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | variables, styles | see Migrate `style` overrides in this document | -| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page). Also check the focusMode new prop | | fitted | REMOVED: by default, all Previews are fitted | | horizontal | REMOVED: no longer supported | ## Migrate style overrides -⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: 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 index 618f8c1c5a6478..5b3a4b7271da2f 100644 --- 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 @@ -34,7 +34,7 @@ To add paddings on v9 Divider to match v0, please see style overrides in this [c | 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) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-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 | @@ -74,7 +74,7 @@ See [codesandbox](https://codesandbox.io/s/divider-migration-88ws6u?file=/SizedD ## 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). +⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.stories.mdx index ec3a6d674f529e..8a19cd31fed31f 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Flex.stories.mdx @@ -24,21 +24,21 @@ const Component = () => ; ## How to migrate props: -| `Flex` props | migrate guide | -| ------------------------- | -------------------------------------------------------------------------- | -| className | keep it as is | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | -| variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | -| debug | not supported, use custom style overrides if needed | -| column | keep it as is | -| fill | keep it as is | -| gap | keep it as is | -| hAlign | keep it as is | -| inline | keep it as is | -| padding | keep it as is | -| space | keep it as is | -| vAlign | keep it as is | -| wrap | keep it as is | +| `Flex` props | migrate guide | +| ------------------------- | ------------------------------------------------------------------------ | +| className | keep it as is | +| content | see [Migrate content prop](##migrate-content-prop) in this document | +| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | +| debug | not supported, use custom style overrides if needed | +| column | keep it as is | +| fill | keep it as is | +| gap | keep it as is | +| hAlign | keep it as is | +| inline | keep it as is | +| padding | keep it as is | +| space | keep it as is | +| vAlign | keep it as is | +| wrap | keep it as is | --- diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.stories.mdx index f82d37dd4b040c..2bfcb1d2d3112a 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/FlexItem.stories.mdx @@ -52,16 +52,16 @@ If you are using `Flex` with horizontal direction, please use `pushRow` instead ## How to migrate props: -| `FlexItem` props | migrate guide | -| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| className | apply on the child component | -| variables, design, styles | apply on the child component (see corresponding migration guide for the particular component | -| align | use `flexItem.align()` mixin in child component's style file | -| flexDirection | ignore | -| grow | use `flexItem.grow()` mixin in child component's style file | -| push | use `flexItem.pushRow()` or `flexItem.pushColumn()` mixin in child component's style file depending on the parent Flex direction | -| shrink | use `flexItem.shrink()` mixin in child component's style file | -| size | use `flexItem.size()` mixin in child component's style file. For arbitrary (pixel or rem) values, use style overrides as described in [Migrate style overrides](#./Migrate-style-overrides). | +| `FlexItem` props | migrate guide | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| className | apply on the child component | +| variables, design, styles | apply on the child component (see corresponding migration guide for the particular component | +| align | use `flexItem.align()` mixin in child component's style file | +| flexDirection | ignore | +| grow | use `flexItem.grow()` mixin in child component's style file | +| push | use `flexItem.pushRow()` or `flexItem.pushColumn()` mixin in child component's style file depending on the parent Flex direction | +| shrink | use `flexItem.shrink()` mixin in child component's style file | +| size | use `flexItem.size()` mixin in child component's style file. For arbitrary (pixel or rem) values, use style overrides as described in [Migrate style overrides](#migrate-style-overrides). | --- diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.stories.mdx index ca11164c289978..2795de2478490b 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Grid.stories.mdx @@ -27,11 +27,11 @@ const Component = () => ; | `Grid` props | migrate guide | | ------------------------- | -------------------------------------------------------------------------------------------------------- | | className | keep it as is | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | -| variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| content | see [Migrate content prop](#migrate-content-prop) in this document | +| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | -| columns | see [Migrate columns and rows](#./Migrate-columns-and-rows) | -| rows | see [Migrate columns and rows](#./Migrate-columns-and-rows) | +| columns | see [Migrate columns and rows](#migrate-columns-and-rows) | +| rows | see [Migrate columns and rows](#migrate-columns-and-rows) | --- diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx index 15f8458955a6c2..29cf478d655b31 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.stories.mdx @@ -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-migrating-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-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-migrating-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-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx index 41500c1a045f44..5bfb8e5900484b 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Image.stories.mdx @@ -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-migrating-from-v0-custom-accessibility--page) | +| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-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-migrating-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-migration-from-v0-custom-style-overrides--page). ### Example for migrate boolean `variables`: diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.stories.mdx index 4d7f458fc55ce4..32cd6d837ac7e6 100755 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/ItemLayout.stories.mdx @@ -32,8 +32,8 @@ const Component = () => ; | `ItemLayout` props | migrate guide | | ------------------------- | -------------------------------------------------------------------------------------------------------- | | className | keep it as is | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | -| variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| content | see [Migrate content prop](##migrate-content-prop) in this document | +| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | --- diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.stories.mdx index 616136342a2d0f..6d484051bddcb6 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.stories.mdx @@ -30,7 +30,7 @@ The `Spinner` in V9 looks slightly different than the `Loader` in V0 but it is e | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | as, className | keep it as is | -| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document | | delay | not supported | | indicator | not supported | | inline | use mixin `inline` | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.stories.mdx index 8d20f5f751120f..2f279265c177d5 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Menu.stories.mdx @@ -41,7 +41,7 @@ export const Component = () => { | `MenuButton` props | migrate guide | | ------------------------- | -------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | -| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | ref, key | keep it as is | | contextMenu | use `openOnContext` instead | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx index e307968f5830e6..ccbafc852de223 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.stories.mdx @@ -43,9 +43,9 @@ const Component = () => ( `align`, `autoSize`, `flipBoundary`, `offset`,`overflowBoundary`,`popperRef`,`position`,`positionFixed`,`target`, `unstable_disableTether`, `unstable_pinned` are now attributes of the `positioning` prop. -v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `` can be migrate to a string like ``. +v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `` can be migrated to a string like ``. -See [Migrate positioning props](?path=/docs/concepts-migrating-from-v0-positioning--page) for more. +See [Migrate positioning props](?path=/docs/concepts-migration-from-v0-positioning--page) for more. #### Removed props: @@ -123,7 +123,7 @@ export const useStyles = makeStyles({ }); ``` -⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). +⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ### Nested popups diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.stories.mdx index ba687782110e6d..572ec5e0b023e6 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Segment.stories.mdx @@ -34,7 +34,7 @@ export const Component = () => { | ------------------------- | -------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | content | move `content` to JSX children. | -| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | ref, key | keep it as is | | color | REMOVED: use styles and color tokens to style it properly | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.stories.mdx index 7c895e11188650..2ccf1db313fd72 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.stories.mdx @@ -42,7 +42,7 @@ Slider upgrade doc in V9: [Slider upgrade to V9](https://react.fluentui.dev/docs | step | keep it as is | | value | keep it as is | | vertical | keep it as is | -| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document | Here is comparison for both versions: [Sandbox](https://codesandbox.io/s/slider-migration-fluentui-forked-e3zdj5?file=/example.tsx) diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.stories.mdx index 3994a5f4ce2030..0233af67bdb873 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.stories.mdx @@ -66,7 +66,7 @@ More examples: [Sandbox](https://codesandbox.io/s/splitbutton-migration-fluentui | as, className | keep it as is | | align, autoSize | use `positioning` on `Menu` component; see [Migrate positioning props](../migrate-positioning.md) | | button | use `primaryActionButton` instead | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | +| content | see [Migrate content prop](##migrate-content-prop) in this document | | defaultOpen | move `defaultOpen` prop to `Menu` component | | disabled | keep it as is | | flat | use `appearance` prop with `outline` as a value | @@ -82,7 +82,7 @@ More examples: [Sandbox](https://codesandbox.io/s/splitbutton-migration-fluentui | secondary | it's the default value without any prop needed | | size | keep it as is | | toggleButton | use `ToggleButton` component | -| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document | | unstable_disableTether, unstable_pinned | use `positioning` on `Menu` component | Postioning props: `align`, `autoSize`, `flipBoundary`, `offset`,`overflowBoundary`,`popperRef`,`position`,`positionFixed`,`target`, `unstable_disableTether`, `unstable_pinned` are now attributes of the `positioning` prop. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.stories.mdx index 4b84e561cd14ca..860ff7e74e54a3 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/TabList.stories.mdx @@ -42,7 +42,7 @@ const Component = props => ( | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | | accessibility | remove tabListBehavior and see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | -| variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, design, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | | activeIndex | replace with `selectedValue` prop | | disabled | you can either disable the entire `TabList` or individual `TabItem` components | | defaultActiveIndex | replace with `defaultSelectedValue` prop | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.stories.mdx index f5b8489b1d74c7..427239faee13b9 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Text.stories.mdx @@ -26,7 +26,7 @@ const Component = () => Test; | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | as, className | keep it as is | | content | see [Migrate content prop](#Migrate-`content`-prop) in this document | -| variables, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | color | REMOVED: use styles and color tokens to set a text's color | | align, atMention, disabled, error, important, success, temporary, timestamp | keep it as is | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx index 5a0c1e5532b591..a073ff0f3c6963 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Toolbar.stories.mdx @@ -225,9 +225,9 @@ const Component = () => { | `Toolbar` props | migrate guide | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | -| variables, styles, design | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| variables, styles, design | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | +| content | see [Migrate content prop](##migrate-content-prop) in this document | | ref, key | keep it as is | | getOverflowItems | REMOVED: Use @fluentui/react-overflow to render overflow items | | items | REMOVED: Only supports children API | @@ -241,8 +241,8 @@ const Component = () => { | `ToolbarItem` props | migrate guide | | ------------------- | ------------------------------------------------------------------------------------------------------------------- | | as, className | keep it as is | -| content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | -| variables, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | +| content | see [Migrate content prop](##migrate-content-prop) in this document | +| variables, styles | see [Migrate style overrides](#migrate-style-overrides) in this document | | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | circular | replace with `shape="circular"` | | disabled | keep it as is | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx index 04af3668070069..69e52c19961414 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.stories.mdx @@ -45,8 +45,8 @@ const Component = () => ( | dismissOnContentMouseEnter | Use controlled `visible` prop with custom `onMouseEnter` handler on `content` ([codesandbox example](https://codesandbox.io/s/tooltip-migration-2gy8r1?file=/DismissOnContentMouseEnterExample.jsx:246-279)) | Postioning props: `align`, `autoSize`, `flipBoundary`, `offset`,`overflowBoundary`,`popperRef`,`position`,`positionFixed`,`target`, `unstable_disableTether`, `unstable_pinned` are now attributes of the `positioning` prop. -v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `` can be migrate to a string like ``. -See [Migrate positioning props](?path=/docs/concepts-migrating-from-v0-positioning--page) for more. +v9 positioning shorthand is recommended when only `positon` or/and `align` is used: `` can be migrated to a string like ``. +See [Migrate positioning props](?path=/docs/concepts-migration-from-v0-positioning--page) for more. Here's a [codesandbox](https://codesandbox.io/s/tooltip-migration-2gy8r1?file=/example.js) comparing v0 and v9 Tooltip. @@ -119,7 +119,7 @@ export const useStyles = makeStyles({ }); ``` -⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migrating-from-v0-custom-style-overrides--page). +⚠️ **If this is your first time migrating style overrides**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). ## Migrate accessibility diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx index 6cf1149e8e1f28..d9279010f52b45 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-positioning.stories.mdx @@ -13,7 +13,7 @@ In v9, these props are grouped together under `positioning` prop. ## Recommended: positioning shorthand -If only `position` or `align` or both prop is used, for example ``, it can be migrate to a string like `positioning="below-end"`. +If only `position` or `align` or both prop is used, for example ``, it can be migrated to a string like `positioning="below-end"`. This is v9 positioning shorthand syntax, which avoids using a full blown javascript object. See more on [v9 docsite example](?path=/docs/concepts-developer-positioning-components--default#shorthand-positions). diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx index 00adc2a0f1ba07..a7ff4fed119161 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ComponentMapping.stories.mdx @@ -27,6 +27,7 @@ Check out the latest schedule information on the [v9 Component Roadmap](https:// | CompoundButton | [CompoundButton](/docs/components-button-compoundbutton--default) | | Calendar | | | Callout | [Popover](/docs/components-popover--default) | +| Charts | [Migration Guide](/docs/concepts-migration-from-v8-components-charts-migration--page) | | Checkbox | [Checkbox](/docs/components-checkbox--default) | | ChoiceGroup | [Radio](/docs/components-radio--default) | | Coachmark | | diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.stories.mdx new file mode 100644 index 00000000000000..33ea0e629412c8 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Charts.stories.mdx @@ -0,0 +1,156 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Charts Migration Guide + +`Fluent Charting` controls are built on fluent v8 stack. +But they work across v8 and v9 themes by using the v8ThemeShim. + +Currently charts are brand invariant and don't require a BrandVariant palette to render correctly. +This would evolve as we onboard new products and their unique theme requirements. + +Richer integration with v9 components is WIP and coming soon. + +Complete [this](https://aka.ms/chartingv9survey) short survey to share your data viz scenarios for v9. + +See below examples for different v9 use cases with charts. + +Refer to [Fluent v8 charts](https://aka.ms/fluentCharting) for detailed examples and code snippets of available charts. + +You can reach out to the charting team by tagging `@microsoft/charting-team` in [discussion](https://github.com/microsoft/fluentui/discussions) items. + +## Examples + +### Basic Donut Chart + +```tsx +import { createV8Theme } from '@fluentui/react-migration-v8-v9'; +import { ThemeProvider } from '@fluentui/react'; +import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts'; +import React from 'react'; +import { Theme, BrandVariants, webLightTheme } from '@fluentui/react-components'; +import { DonutChart, IChartProps } from '@fluentui/react-charting'; +import * as d3Color from 'd3-color'; + +const brandInvariant: BrandVariants = { + 10: '', + 20: '', + 30: '', + 40: '', + 50: '', + 60: '', + 70: '', + 80: '', + 90: '', + 100: '', + 110: '', + 120: '', + 130: '', + 140: '', + 150: '', + 160: '', +}; + +const data: IChartProps = { + chartTitle: 'Donut chart fluent v9 example', + chartData: [ + { legend: 'first', data: 40, color: '#0099BC' }, + { legend: 'second', data: 20, color: '#77004D' }, + { legend: 'third', data: 30, color: '#4f67ed' }, + { legend: 'fourth', data: 10, color: '#ae8c00' }, + ], +}; + +export function ChartWrapperDocsite() { + let parentV9Theme = React.useContext(V9ThemeContext) as Theme; + let v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme; + let backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1); + let foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1); + const myV8Theme = createV8Theme(brandInvariant, v9Theme, backgroundColor.l < foregroundColor.l); // For dark theme background color is darker than foreground color + return ( + + + + ); +} +``` + +### Custom styling with color tokens + +```tsx +const customStyles: IVerticalStackedBarChartProps['styles'] = () => { + return { + xAxis: { + selectors: { + text: { fill: tokens.colorPaletteGreenForeground1, fontSize: tokens.fontSizeBase200 }, + }, + }, + yAxis: { + selectors: { + text: { fill: tokens.colorPaletteRedForeground2, fontSize: tokens.fontSizeBase300 }, + }, + }, + chartLabel: { + color: DefaultPalette.blueMid, + ...DefaultFontStyles.large, + }, + xAxisText: { + ...textStyle, + }, + }; +}; +``` + +### Custom jsx control + +Wrap any custom jsx element like `HoverCard`, or `Callout` in an explicit `FluentProvider` context. + +```tsx +import { useBarChartHoverCardClasses } from './BarChartHoverCard.styles'; +import { BarChartHoverCardProps } from './BarChartHoverCard.types'; +import { getDayName, getHourlyTimeframe } from './BarChartHoverCard.utils'; +import { FluentProvider, webLightTheme } from '@fluentui/react-components'; + +export default function BarChartHoverCard(props: BarChartHoverCardProps) { + const classes = useBarChartHoverCardClasses(); + const { calloutData } = props; + const usageValue = calloutData.chartData.reduce((sum, item) => sum + item.data, 0); + const usageStatus = calloutData.xAxisCalloutData; + + return ( + +
+
+
{getDayName(calloutData.xAxisPoint)}
+
{getHourlyTimeframe(calloutData.xAxisPoint)}
+
+ {usageStatus && ( +
+
Icon
+
Status
+
+ )} +
+
+
+
Usage
+
{usageValue.toFixed(1)}
+
+
+
+ + ); +} +``` + +Refer to the [sample application](https://github.com/microsoft/fluentui-charting-contrib/tree/main/tools/v9-migration) for complete source code to use charts in v9 context. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.stories.mdx new file mode 100644 index 00000000000000..d019a812e9e6de --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/GroupedList.stories.mdx @@ -0,0 +1,26 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# GroupedList Migration + +Fluent UI v8 provides the `GroupedList` component for grouping hierarchical grid data (the component has a [`treegrid` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role)). + +Fluent UI v9 does not have a one-to-one migration from v8's `GroupedList` so this guide will help you decide which v9 component makes the most sense for you to migrate to based on your usage of `GroupedList`. + +### I'm using `GroupedList` to display hierarchical data that expands and collapses + +In this case consider migrating to [Fluent UI v9's `Tree` component](?path=/docs/components-tree--default) which is a hierarchical list control for displaying expandable and collapsable data. + +### I'm using `GroupedList` to display a flat or nested list of items that does not expand or collapse + +For lists, look at migrating to [Fluent UI v9's `List` component](?path=/docs/preview-components-list--default) which renders vertically list elements that can be interactive or non-interactive. + +### I'm using `GroupedList` to display tabular data + +For tabular data (i.e., a grid), consider migrating to [Fluent UI v9's `Table` component](?path=/docs/components-table--default) or [`DataGrid` component](?path=/docs/components-datagrid--default). +Both components are designed to render tabular data and support selection. + +### I'm using `GroupedList` in some other way + +Contact us on [Github](https://github.com/microsoft/fluentui) and we can talk about your situation. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts index c3ad070c95fd0d..0d764b9701415c 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts @@ -208,10 +208,17 @@ export const alias = { colorBrandBackground2: 'brand[160]', colorBrandBackground2Hover: 'brand[150]', colorBrandBackground2Pressed: 'brand[130]', + colorBrandBackground3Static: 'brand[60]', + colorBrandBackground4Static: 'brand[40]', colorBrandBackgroundInverted: 'white', colorBrandBackgroundInvertedHover: 'brand[160]', colorBrandBackgroundInvertedPressed: 'brand[140]', colorBrandBackgroundInvertedSelected: 'brand[150]', + colorNeutralCardBackground: 'grey[98]', + colorNeutralCardBackgroundHover: 'white', + colorNeutralCardBackgroundPressed: 'grey[96]', + colorNeutralCardBackgroundSelected: 'grey[92]', + colorNeutralCardBackgroundDisabled: 'grey[94]', colorNeutralStrokeAccessible: 'grey[38]', colorNeutralStrokeAccessibleHover: 'grey[34]', colorNeutralStrokeAccessiblePressed: 'grey[30]', diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx index ae7074dc8c324e..ca164c8fa58076 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Troubleshooting.stories.mdx @@ -43,6 +43,29 @@ function App() { } ``` +## "I tried uing a layered v8 component like Callout in a layered v9 component like Dialog and my Callout appears beneath my Dialog. What's going on?" + +Both v9 and v8 layers set the same `z-index` value by default, which means the document order will resolve their z-positioning. +This can lead to inconsistent behavior because z-positioning depends on the order in which elements appear in the DOM. +Moreover, v8 `Layer` hosts have a tendency to linger in the DOM even after the element they are hosting is closed, which can add to this inconsistency. + +Use `PortalMountNodeProvider` to handle this issue. + +```jsx +import { FluentProvider, PortalMountNodeProvider } from '@fluentui/react-components'; + +function App() { + // Get a reference to the v8 layer host + const mountNode = document.getElementById('fluent-default-layer-host'); + + return ( + + {/* your components */} + + ); +} +``` + ## "I managed to get the theme working but the components look different than they did previously, why is that?" We are modernizing our components in version 9 to adhere to the latest guidelines in the Fluent Design Language. That is the reason for any visual differences you might notice. @@ -54,3 +77,7 @@ The styling story in version 9 is very different to what existed in version 8. F We are also moving away from `mergeStyles` in favor of `makeStyles` from [`@griffel/react`](https://github.com/microsoft/griffel), a new in-house CSS-in-JS solution that allows for things like atomic classes and build-time optimization of styles. If you want to learn more, read our [guide on how to style components](?path=/story/concepts-developer-styling-components--page). + +``` + +``` diff --git a/apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx b/apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx index 24a1ca1a792c1e..a5506451178a93 100644 --- a/apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/QuickStart.stories.mdx @@ -16,15 +16,35 @@ Fluent UI components are styled using CSS in JS. This technique requires a style Place a `` at the root of your app and pass theme as a prop. +### React 18 + +```jsx +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import { FluentProvider, webLightTheme } from '@fluentui/react-components'; + +import App from './App'; + +const root = createRoot(document.getElementById('root')); + +root.render( + + + , +); +``` + +### React 17 + ```jsx import React from 'react'; import ReactDOM from 'react-dom'; -import { FluentProvider, teamsLightTheme } from '@fluentui/react-components'; +import { FluentProvider, webLightTheme } from '@fluentui/react-components'; import App from './App'; ReactDOM.render( - + , document.getElementById('root'), diff --git a/apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.stories.mdx b/apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.stories.mdx index faea4aa655cc42..f8175173ed4c94 100644 --- a/apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/SSR/NextJSAppDir.stories.mdx @@ -39,8 +39,13 @@ import { useServerInsertedHTML } from 'next/navigation'; export function Providers({ children }: { children: React.ReactNode }) { const [renderer] = React.useState(() => createDOMRenderer()); + const didRenderRef = React.useRef(false); useServerInsertedHTML(() => { + if (didRenderRef.current) { + return; + } + didRenderRef.current = true; return <>{renderToStyleElements(renderer)}; }); diff --git a/apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx b/apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx index da56b8f2d12082..b7ab8ab8a9464b 100644 --- a/apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx @@ -54,7 +54,7 @@ Later in this topic, you will find examples covering each of these scenarios. Some components conditionally render slots. For example, Avatar has a `label` slot that only renders when there is no image provided. -t also defines an `icon` slot that only renders when neither an image nor a name are provided. +It also defines an `icon` slot that only renders when neither an image nor a name are provided. ### What about children? diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx index 108926744da185..fc4f326821cf44 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -37,7 +37,7 @@ export const AppRoot = ({children}) => ( Import `tokens` to style a component using `makeStyles` ```jsx -import { tokens } from '@fluentui/react-theme'; +import { tokens } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { display: 'flex' }, diff --git a/apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.stories.mdx b/apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.stories.mdx new file mode 100644 index 00000000000000..6f19016d8720dd --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/WebComponentsInterop/UsingFluentReactWithWebComponents.stories.mdx @@ -0,0 +1,148 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Using Fluent React with Web Components + +Fluent React v9's extensible architecture and use of web platform features like CSS custom properties +allow it to be extended to work well with [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), +particularly [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). + +It is necessary to modify Fluent React v9's default behavior to better interoperate with Web Components. The +implementation lives in the [Fluent UI Contrib repository](https://github.com/microsoft/fluentui-contrib). + +## Rendering Fluent React in shadow DOM + +Fluent React components can be rendered inside shadow DOM with styles being set on the shadow root's `adoptedStyleSheets` +property. + +```tsx +import { root } from '@fluentui-contrib/react-shadow'; +import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components'; + + + {/* This is the shadow root */} + + + +; +``` + +In the above example, note that `FluentProvider` sits outside the shadow DOM. When `FluentProvider` is inside the shadow +DOM styling/theming will not work as expected. + +```tsx +// ❌ This will not render correctly, for example purposes only ❌ +import { root } from '@fluentui-contrib/react-shadow'; +import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components'; + +/* This is the shadow root */ + + + + +; +``` + +To render a provider inside shadow DOM, use `ThemelessFluentProvider` instead. + +## `ThemelessFluentProvider` + +`ThemelessFluentProvider` is a special version of `FluentProvider` that is designed to integrate with +shadow DOM. It supports the same features as `FluentProvider` except: + +1. It does not insert styles into the DOM +2. It removes the themeing related contexts + +Because `ThemelessFluentProvider` provides no styles for the theme you must provide them yourself. +This means creating a CSS rule that defines all the CSS custom properties needed for a Fluent theme. +The theme can be created in React or another part of the application. The CSS custom properties just need to be +defined in such a way that they will pierce the shadow DOM (e.g., on the `:root` selector). + +```tsx +import { createCSSStyleSheetFromTheme, ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider'; +import { root } from '@fluentui-contrib/react-shadow'; +import { webLightTheme, Button } from '@fluentui/react-components'; + +// Create theme styles outside of React component rendering +const themeSheet = createCSSStyleSheetFromTheme(':root', webLightTheme); +document.adoptedStyleSheets = [...document.adoptedStyleSheets, themeSheet]; + +// Render Fluent components +const ShadowDOMApp = () => { + return ( + + {/* This is the shadow root */} + + + + + ); +}; +``` + +## Keyboarding + +Fluent React uses [Tabster](https://tabster.io/) to control keyboarding and it must be able to "see" the entire DOM +of a page to function correctly. Since shadow DOM "hides" parts of the DOM from Tabster, you must opt into +shadow DOM support when using shadow DOM and Tabster together. + +```tsx +import { useShadowDOMSupport } from '@fluentui-contrib/pierce-dom'; +import { root } from '@fluentui-contrib/react-shadow'; +import { createCSSStyleSheetFromTheme, ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider'; +import { webLightTheme, Button } from '@fluentui/react-components'; + +const themeSheet = createCSSStyleSheetFromTheme(':root', webLightTheme); +document.adoptedStyleSheets = [...document.adoptedStyleSheets, themeSheet]; + +const AppComponent = () => { + // This must be called _before_ you render any Fluent React controls + useShadowDOMSupport(); + + {/* This is the shadow root */} + + + + + ; +}; +``` + +# Insertion Point + +Fluent uses Griffel for authoring styles and it provides the [mergeClasses](https://griffel.js.org/react/api/merge-classes) +function for controlling style specificity. `mergeClasses` can accept any CSS class name but it only performs rule ordering +for class names generated by Griffel. This can lead to CSS specificity issues when you want to use CSS classes that were +not generated by Griffel (for example, application utility classes). + +For those cases, use the insertion point API to control the specificity of styles via document order. + +```tsx +import { createRoot } from '@fluentui-contrib/react-shadow'; +import { createCSSStyleSheetFromTheme, ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider'; +import { webLightTheme, Button } from '@fluentui/react-components'; + +const themeSheet = createCSSStyleSheetFromTheme(':root', webLightTheme); +document.head.adoptedStyleSheets = [...document.adoptedStyleSheets, themeSheet]; + +// This `CSSStyleSheet` acts as a sentinel for inserting Griffel styles. +// Griffel styles are inserted after `insertionPoint`. +const insertionPoint = new CSSStyleSheet(); +const root = createRoot({ insertionPoint }); + +// These styles are not generated by Griffel. +const nonGriffelStyles = new CSSStyleSheet(); +nonGriffelStyles.insertRule('.my-style-from-outside-fluent: { color: red; }'); + +// Griffel styles will be inserted after `insertionPoint` and +// before `nonGriffelStyles`, allowing styles defined in `nonGriffelStyles` +// to "win" specificity by appearing later in the document order. +const externalStyleSheets = [insertionPoint, nonGriffelStyles]; + + + + + +; +``` diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx index dbab08e8835e50..2734cd91731f8b 100644 --- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx +++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx @@ -11,7 +11,7 @@ import { Stories, } from '@storybook/addon-docs'; import { makeStyles, shorthands } from '@griffel/react'; -import { tokens } from '@fluentui/react-components'; +import { tokens, Link, Text } from '@fluentui/react-components'; import { DIR_ID, THEME_ID, themes } from '@fluentui/react-storybook-addon'; import { DirSwitch } from './DirSwitch.stories'; import { ThemePicker } from './ThemePicker.stories'; @@ -44,8 +44,57 @@ const useStyles = makeStyles({ columnGap: tokens.spacingHorizontalXXXL, display: 'flex', }, + description: { + display: 'flex', + }, +}); + +const useVideoClasses = makeStyles({ + container: { + display: 'flex', + flexDirection: 'column', + ...shorthands.gap(tokens.spacingHorizontalMNudge), + }, + preview: { + ...shorthands.borderRadius(tokens.borderRadiusSmall), + display: 'flex', + flexDirection: 'column', + ...shorthands.gap(tokens.spacingHorizontalM), + ...shorthands.padding(tokens.spacingHorizontalM), + backgroundColor: tokens.colorNeutralBackground2, + + ':hover': { + backgroundColor: tokens.colorNeutralBackground2Hover, + }, + }, + image: { + width: '200px', + }, }); +const VideoPreviews: React.FC<{ + videos: { + href: string; + preview: string; + source: 'youtube'; + title: string; + }[]; +}> = props => { + const { videos } = props; + const classes = useVideoClasses(); + + return ( +
+ {videos.map(video => ( + + {`Video: + {video.title} + + ))} +
+ ); +}; + export const FluentDocsPage = () => { const context = React.useContext(DocsContext); @@ -53,6 +102,7 @@ export const FluentDocsPage = () => { const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]); const stories = context.componentStories(); const primaryStory = stories[0]; + const videos = context.parameters?.videos ?? null; const styles = useStyles(); // DEBUG // console.log('FluentDocsPage', context); @@ -77,7 +127,10 @@ export const FluentDocsPage = () => {
- +
+ + {videos && } +
{primaryStory.name} diff --git a/apps/public-docsite-v9/src/DocsComponents/ReactIconGrid.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/ReactIconGrid.stories.tsx new file mode 100644 index 00000000000000..1ec66932c2d564 --- /dev/null +++ b/apps/public-docsite-v9/src/DocsComponents/ReactIconGrid.stories.tsx @@ -0,0 +1,268 @@ +import * as ReactIcons from '@fluentui/react-icons'; +import { + Button, + Field, + Input, + Link, + makeStyles, + MessageBar, + Radio, + RadioGroup, + shorthands, + Toast, + Toaster, + ToastTitle, + tokens, + useId, + useIsomorphicLayoutEffect, + useScrollbarWidth, + useToastController, +} from '@fluentui/react-components'; +import * as React from 'react'; +import { FixedSizeGrid, type GridChildComponentProps } from 'react-window'; + +const ICON_CELL_WIDTH = 250; +const UNSIZED_ICON_SIZE = 48; + +const ICONS_LIST: React.FC[] = Object.keys(ReactIcons) + .map(iconName => (ReactIcons as any)[iconName]) + .filter(icon => !!icon && !!icon.displayName); + +const useClasses = makeStyles({ + controls: { + display: 'grid', + gridTemplateColumns: '1fr auto', + ...shorthands.gap(tokens.spacingVerticalL, tokens.spacingHorizontalL), + marginBottom: tokens.spacingVerticalM, + }, + + inputControl: { + display: 'flex', + alignSelf: 'center', + }, + + input: { + width: '100%', + }, + + radioControl: { + ...shorthands.borderRadius(tokens.borderRadiusSmall), + boxShadow: tokens.shadow2, + ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalL), + backgroundColor: tokens.colorNeutralBackground1, + }, + + radioLabel: { + marginLeft: tokens.spacingHorizontalS, + }, + + message: { + marginBottom: tokens.spacingVerticalM, + }, + + pane: { + ...shorthands.borderRadius(tokens.borderRadiusSmall), + boxShadow: tokens.shadow2, + }, + + iconCell: { + alignItems: 'center', + backgroundColor: tokens.colorNeutralBackground2, + display: 'grid', + justifyItems: 'center', + gridTemplateColumns: '1fr', + gridTemplateRows: '1fr auto', + ...shorthands.gap(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge), + fontSize: `${UNSIZED_ICON_SIZE}px`, + ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), + ...shorthands.overflow('hidden'), + boxShadow: tokens.shadow2, + ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS), + ...shorthands.borderRadius(tokens.borderRadiusSmall), + }, + iconCopyButton: { + ...shorthands.gridArea('1', '1', '2', '2'), + zIndex: 1, + justifySelf: 'end', + }, + iconGlyph: { + ...shorthands.gridArea('1', '1', '2', '2'), + }, + iconCode: { + ...shorthands.gridArea('2', '1', '3', '2'), + + '> code': { + fontSize: `${tokens.fontSizeBase200} !important`, + display: 'block !important', + }, + }, +}); + +type IconCellData = { + classes: ReturnType; + + columnCount: number; + icons: typeof ICONS_LIST; + + onCopy: (iconName: string) => void; +}; + +const renderIconCell = (itemProps: GridChildComponentProps & { data: IconCellData }) => { + const { columnIndex, data: _data, rowIndex, style } = itemProps; + const { classes, columnCount, icons, onCopy } = _data as IconCellData; + + const Icon = icons[rowIndex * columnCount + columnIndex]; + + if (!Icon) { + return
; + } + + return ( +
+
+
+
+ +
+ {Icon.displayName} +
+
+
+ ); +}; + +const ReactIconGrid = () => { + const classes = useClasses(); + const scrollBarWidth = useScrollbarWidth({ targetDocument: document }) ?? 0; + + const toasterId = useId('toaster'); + const { dispatchToast } = useToastController(toasterId); + + const [searchQuery, setSearchQuery] = React.useState(''); + const [size, setSize] = React.useState('Unsized'); + + const areaRef = React.useRef(null); + const [width, setWidth] = React.useState(1000); + + const filteredIcons = React.useMemo( + () => + ICONS_LIST.filter(icon => { + if (size === 'Unsized') { + return ( + icon.displayName! && + !/\d/.test(icon.displayName.toLowerCase()) && + icon.displayName?.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1 + ); + } + + return ( + icon.displayName?.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1 && + icon.displayName?.indexOf(String(size)) !== -1 + ); + }), + [searchQuery, size], + ); + + const columnCount = Math.floor(width / ICON_CELL_WIDTH); + const rowHeight = Math.max(30, size === 'Unsized' ? UNSIZED_ICON_SIZE : Number(size)) + 55; + const height = Math.min(Math.ceil(filteredIcons.length / columnCount) * rowHeight + 10, 1000); + + const iconCellData: IconCellData = { + icons: filteredIcons, + classes, + columnCount, + onCopy: (iconName: string) => { + navigator.clipboard.writeText(`<${iconName} />`); + + dispatchToast( + + Icon was copied to clipboard + , + { intent: 'success' }, + ); + }, + }; + + useIsomorphicLayoutEffect(() => { + const observer = new ResizeObserver(entries => { + setWidth(entries[0].contentRect.width); + }); + + if (areaRef.current) { + observer.observe(areaRef.current); + + return () => { + observer.disconnect(); + }; + } + }, []); + + return ( +
+ + +
+
+ setSearchQuery(data.value)} + placeholder="Icon name..." + size="large" + value={searchQuery} + /> +
+ +
+ + What icon set to use? Check docs + + ), + }} + > + setSize(data.value)} value={size}> + + {[16, 20, 24, 28, 32, 48].map(option => ( + + ))} + + +
+
+ + {filteredIcons.length === 0 ? ( + + No icons found for the search query. Try another one. + + ) : ( +
+ + {renderIconCell} + +
+ )} +
+ ); +}; + +export default ReactIconGrid; diff --git a/apps/public-docsite-v9/src/Icons/Icons.stories.tsx b/apps/public-docsite-v9/src/Icons/Icons.stories.tsx new file mode 100644 index 00000000000000..ff4ab569a293f7 --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/Icons.stories.tsx @@ -0,0 +1,54 @@ +import { SendRegular } from '@fluentui/react-icons'; +import descriptionMd from './IconsDescription.md'; + +export { Default } from './IconsDefault.stories'; +export { BundleIcon as bundleIcon } from './IconsBundleIcon.stories'; +export { Styling } from './IconsStyling.stories'; +export { FontSize } from './IconsFontSize.stories'; + +export default { + title: 'Icons/Overview', + component: SendRegular, + parameters: { + docs: { + description: { + component: descriptionMd, + }, + }, + videos: [ + { + href: 'https://www.youtube.com/watch?v=XSPwgmUZ4Tw', + preview: './social/fluent-trainings-ep03.webp', + source: 'youtube', + title: 'Fluent UI React Trainings: Styling best practices and icons', + }, + ], + }, + argTypes: { + className: { + control: false, + description: 'Used to style the icon', + table: { defaultValue: '' }, + type: { name: 'string' }, + }, + filled: { + control: false, + description: + 'Used to determine whether the filled or unfilled version of an icon is the default when `bundleIcon` is used', + table: { defaultValue: { summary: 'false' } }, + type: { name: 'boolean' }, + }, + primaryFill: { + control: false, + description: 'Used to change the primary fill of the icon', + table: { defaultValue: { summary: 'currentColor' } }, + type: { name: 'string' }, + }, + title: { + control: false, + description: 'Specifies the title attribute for the svg', + table: { defaultValue: '' }, + type: { name: 'string' }, + }, + }, +}; diff --git a/apps/public-docsite-v9/src/Icons/IconsBundleIcon.stories.md b/apps/public-docsite-v9/src/Icons/IconsBundleIcon.stories.md new file mode 100644 index 00000000000000..5941c10e27f538 --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsBundleIcon.stories.md @@ -0,0 +1 @@ +`bundleIcon()` is used to combine the `Regular` and `Filled` versions of icons and could be used to toggle between them on hover. Some of Fluent UI React component have also "fill-on-hover" behavior built-in, for example `Button` & `MenuItem`. diff --git a/apps/public-docsite-v9/src/Icons/IconsBundleIcon.stories.tsx b/apps/public-docsite-v9/src/Icons/IconsBundleIcon.stories.tsx new file mode 100644 index 00000000000000..cdc723e47d3a6c --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsBundleIcon.stories.tsx @@ -0,0 +1,68 @@ +import { + AccessTimeFilled, + AccessTimeRegular, + bundleIcon, + iconFilledClassName, + iconRegularClassName, +} from '@fluentui/react-icons'; +import { Body1Stronger, makeStyles, shorthands, tokens } from '@fluentui/react-components'; +import * as React from 'react'; + +import description from './IconsBundleIcon.stories.md'; + +const useClasses = makeStyles({ + container: { + ...shorthands.padding('10px'), + ...shorthands.border('2px', 'solid', tokens.colorBrandStroke1), + boxSizing: 'border-box', + width: '200px', + borderBottomLeftRadius: tokens.borderRadiusMedium, + borderBottomRightRadius: tokens.borderRadiusMedium, + + fontSize: '32px', + ':hover': { + [`& .${iconFilledClassName}`]: { + display: 'block', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + }, + }, + description: { + display: 'block', + width: '200px', + boxSizing: 'border-box', + backgroundColor: tokens.colorBrandStroke1, + color: tokens.colorNeutralForegroundOnBrand, + + ...shorthands.padding('4px'), + borderTopLeftRadius: tokens.borderRadiusMedium, + borderTopRightRadius: tokens.borderRadiusMedium, + }, +}); + +const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular); + +export const BundleIcon = () => { + const classes = useClasses(); + + return ( + <> +
+ Hover a box below +
+
+ +
+ + ); +}; + +BundleIcon.parameters = { + docs: { + description: { + story: description, + }, + }, +}; diff --git a/packages/react-components/react-components/stories/Concepts/Icons/IconTable.stories.mdx b/apps/public-docsite-v9/src/Icons/IconsCatalog.stories.mdx similarity index 63% rename from packages/react-components/react-components/stories/Concepts/Icons/IconTable.stories.mdx rename to apps/public-docsite-v9/src/Icons/IconsCatalog.stories.mdx index 7b4b6ba895951e..8764f5e8f1d4af 100644 --- a/packages/react-components/react-components/stories/Concepts/Icons/IconTable.stories.mdx +++ b/apps/public-docsite-v9/src/Icons/IconsCatalog.stories.mdx @@ -1,16 +1,16 @@ import { Meta } from '@storybook/addon-docs'; import { Spinner } from '@fluentui/react-spinner'; - + -### Available Icons +

Icons catalog

This page contains a list of available icons under `@fluentui/react-icons` package. To use icons install the package and select an icon to use. For example: ```tsx -import { DismissSquareRegular } from `@fluentui/react-icons`; +import { DismissSquareRegular } from '@fluentui/react-icons'; function App() { return ; @@ -18,5 +18,5 @@ function App() { ``` }> - {React.createElement(React.lazy(() => import('../../../src/Concepts/Icons/ReactIconGrid')))} + {React.createElement(React.lazy(() => import('../DocsComponents/ReactIconGrid.stories')))} diff --git a/apps/public-docsite-v9/src/Icons/IconsDefault.stories.tsx b/apps/public-docsite-v9/src/Icons/IconsDefault.stories.tsx new file mode 100644 index 00000000000000..0ae680a20a24ff --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsDefault.stories.tsx @@ -0,0 +1,33 @@ +import { makeStyles, shorthands } from '@fluentui/react-components'; +import { SendRegular, SendFilled } from '@fluentui/react-icons'; +import * as React from 'react'; + +const useClasses = makeStyles({ + container: { + display: 'flex', + ...shorthands.gap('5px'), + }, + + icon24: { fontSize: '24px' }, + icon32: { fontSize: '32px' }, + icon48: { fontSize: '48px' }, +}); + +export const Default = () => { + const classes = useClasses(); + + return ( + <> +
+ + + +
+
+ + + +
+ + ); +}; diff --git a/apps/public-docsite-v9/src/Icons/IconsDescription.md b/apps/public-docsite-v9/src/Icons/IconsDescription.md new file mode 100644 index 00000000000000..56d770e487e18d --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsDescription.md @@ -0,0 +1,13 @@ +The `@fluentui/react-icons` package provides [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) icon set. Each icon within this set is encapsulated within a React component, utilizing SVG-based graphics. Icons are available in two distinct styles: `Filled` and `Regular`. + +
+Sized icons vs unsized icons? + +- **Unsized** icons (e.g., `SendRegular`, `SendFilled`, etc.) are set to `1em` in size and can be adjusted proportionally using the `fontSize` property. +- **Sized** icons (e.g., `Send24Regular`, `Send32Regular`) are fixed to predetermined sizes and do not scale. + +As a general guideline, it's recommended to utilize unsized icons since the same instance of an icon can be reused multiple times. However, there are instances where icons may not scale effectively. For example, icons containing logos and signs often have varied glyph sizes. In such cases, it's advisable to opt for sized icons. + +
+ +You can preview all icons in the catalog. diff --git a/apps/public-docsite-v9/src/Icons/IconsFontSize.stories.tsx b/apps/public-docsite-v9/src/Icons/IconsFontSize.stories.tsx new file mode 100644 index 00000000000000..b689085f4c528e --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsFontSize.stories.tsx @@ -0,0 +1,30 @@ +import { AccessTimeFilled } from '@fluentui/react-icons'; +import { makeStyles, shorthands } from '@fluentui/react-components'; +import * as React from 'react'; + +const useClasses = makeStyles({ + container: { + display: 'flex', + ...shorthands.gap('10px'), + }, +}); + +export const FontSize = () => { + const classes = useClasses(); + + return ( +
+ + +
+ ); +}; + +FontSize.parameters = { + docs: { + description: { + story: + 'As icons are SVG elements they can be styled using [`fontSize` prop](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size).', + }, + }, +}; diff --git a/apps/public-docsite-v9/src/Icons/IconsStyling.stories.tsx b/apps/public-docsite-v9/src/Icons/IconsStyling.stories.tsx new file mode 100644 index 00000000000000..93a60abca19462 --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsStyling.stories.tsx @@ -0,0 +1,38 @@ +import { AccessTimeFilled, SendRegular } from '@fluentui/react-icons'; +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; +import * as React from 'react'; + +const useClasses = makeStyles({ + container: { + display: 'flex', + ...shorthands.gap('10px'), + }, + + iconAccessTime: { + color: tokens.colorPaletteLightGreenForeground2, + fontSize: '32px', + }, + iconSend: { + color: tokens.colorPaletteDarkOrangeForeground2, + fontSize: '64px', + }, +}); + +export const Styling = () => { + const classes = useClasses(); + + return ( +
+ + +
+ ); +}; + +Styling.parameters = { + docs: { + description: { + story: 'Colors & sizes of icons could be tweaked using CSS. Bundled icons can be styled the same way.', + }, + }, +}; diff --git a/apps/public-docsite-v9/src/Icons/IconsUsage.stories.mdx b/apps/public-docsite-v9/src/Icons/IconsUsage.stories.mdx new file mode 100644 index 00000000000000..123c184950c235 --- /dev/null +++ b/apps/public-docsite-v9/src/Icons/IconsUsage.stories.mdx @@ -0,0 +1,53 @@ +import { Meta } from '@storybook/addon-docs'; + + + +

Advanced Usage

+ +### Fluent icons as fonts + +Fluent icons can also be consumed as a font. The API is the same as the React element icons, and there are tools to allow you to more seamlessly integrate the font icons +into your application. You will also be able to only bundle the font icons you need in your application using the `@fluentui/react-icons-font-subsetting-webpack-plugin` package. + +If `optimization.usedExports` is enabled (as it is by default), this plugin will subset the font files to only include the glyphs actually used by your build. +Here is how you set up your webpack configuration to use font files in your application: + +```js +// webpack.config.js +const { + default: FluentUIReactIconsFontSubsettingPlugin, +} = require('@fluentui/react-icons-font-subsetting-webpack-plugin'); + +module.exports = { + module: { + rules: [ + // Treat the font files as webpack assets + { + test: /\.(ttf|woff2?)$/, + type: 'asset', + }, + ], + }, + resolve: { + // Include 'fluentIconFont' to use the font implementation of the Fluent icons + conditionNames: ['fluentIconFont', 'import'], + }, + plugins: [ + // Include this plugin + new FluentUIReactIconsFontSubsettingPlugin(), + ], +}; +``` + +#### Pros & cons + +Pros: + +- Improved rendering performance in applications due to font files being downloaded upon application load and rendered as images. +- The font subsetting webpack plugin identifies the icons utilized in your application, downloading only those necessary. + +Cons: + +- Font files are loaded in advance and include all glyphs used in your application, potentially increasing initial loading times. +- Slight reduction in visual fidelity of font icons, though generally imperceptible at most sizes. +- Requires additional setup compared to SVG-based icons, such as configuring the Webpack plugin. diff --git a/apps/public-docsite-v9/src/Concepts/ThemeDesigner.stories.mdx b/apps/public-docsite-v9/src/Theming/ThemeDesigner.stories.mdx similarity index 100% rename from apps/public-docsite-v9/src/Concepts/ThemeDesigner.stories.mdx rename to apps/public-docsite-v9/src/Theming/ThemeDesigner.stories.mdx diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index b7fe950bca4746..a2e17488f0f85f 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -127,10 +127,17 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorBrandBackground2: palette.themeLighterAlt, colorBrandBackground2Hover: palette.themeLighterAlt, colorBrandBackground2Pressed: palette.themeLighterAlt, + colorBrandBackground3Static: palette.themeDark, + colorBrandBackground4Static: palette.themeDarker, colorBrandBackgroundInverted: palette.white, colorBrandBackgroundInvertedHover: palette.themeLighterAlt, colorBrandBackgroundInvertedPressed: palette.themeLight, colorBrandBackgroundInvertedSelected: palette.themeLighter, + colorNeutralCardBackground: inverted ? grey[20] : grey[98], + colorNeutralCardBackgroundHover: inverted ? grey[24] : palette.white, + colorNeutralCardBackgroundPressed: inverted ? grey[18] : grey[96], + colorNeutralCardBackgroundSelected: inverted ? grey[22] : grey[92], + colorNeutralCardBackgroundDisabled: inverted ? grey[8] : grey[94], colorNeutralStrokeAccessible: palette.neutralSecondary, colorNeutralStrokeAccessibleHover: palette.neutralSecondary, colorNeutralStrokeAccessiblePressed: palette.neutralSecondary, diff --git a/apps/public-docsite-v9/tsconfig.app.json b/apps/public-docsite-v9/tsconfig.app.json index ef06ccd867c65b..491efe8eb81140 100644 --- a/apps/public-docsite-v9/tsconfig.app.json +++ b/apps/public-docsite-v9/tsconfig.app.json @@ -7,7 +7,7 @@ "outDir": "lib", "jsx": "react", "sourceMap": true, - "types": ["webpack-env"] + "types": ["static-assets", "webpack-env"] }, "include": ["src"] } diff --git a/apps/recipes-react-components/package.json b/apps/recipes-react-components/package.json index 72748d9ec1879b..bd58e829c07ea4 100644 --- a/apps/recipes-react-components/package.json +++ b/apps/recipes-react-components/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@fluentui/react-components": "*", - "@fluentui/react-icons": "^2.0.224", + "@fluentui/react-icons": "^2.0.235", "@fluentui/react-theme": "*", "@fluentui/react-provider": "*", "@fluentui/react-storybook-addon": "*", diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index 11a85b673fe17d..7c350abcc0b9a6 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -12,7 +12,7 @@ "dependencies": { "@fluentui/react": "*", "@fluentui/react-components": "*", - "@fluentui/react-icons": "^2.0.224", + "@fluentui/react-icons": "^2.0.235", "@fluentui/web-components": "*", "@microsoft/fast-element": "^1.11.1", "afterframe": "1.0.2", diff --git a/apps/stress-test/src/renderers/wc/btn/wcBasicButton.ts b/apps/stress-test/src/renderers/wc/btn/wcBasicButton.ts index 0e2d2b2ac22e7d..87e8f6b12cccf9 100644 --- a/apps/stress-test/src/renderers/wc/btn/wcBasicButton.ts +++ b/apps/stress-test/src/renderers/wc/btn/wcBasicButton.ts @@ -2,13 +2,11 @@ import { DOMSelectorTreeComponentRenderer } from '../../../shared/vanilla/types' declare global { interface Document { - // eslint-disable-next-line - adoptedStyleSheets: any[]; + adoptedStyleSheets: CSSStyleSheet[]; } interface ShadowRoot { - // eslint-disable-next-line - adoptedStyleSheets: any[]; + adoptedStyleSheets: CSSStyleSheet[]; } interface CSSStyleSheet { diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 61614353572efe..5970a49400a7dd 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -34,7 +34,7 @@ "@fluentui/react-divider": "*", "@fluentui/react-drawer": "*", "@fluentui/react-field": "*", - "@fluentui/react-icons": "^2.0.224", + "@fluentui/react-icons": "^2.0.235", "@fluentui/react-image": "*", "@fluentui/react-infolabel": "*", "@fluentui/react-input": "*", @@ -49,7 +49,6 @@ "@fluentui/react-progress": "*", "@fluentui/react-provider": "*", "@fluentui/react-radio": "*", - "@fluentui/react-search-preview": "*", "@fluentui/react-select": "*", "@fluentui/react-shared-contexts": "*", "@fluentui/react-skeleton": "*", @@ -58,6 +57,7 @@ "@fluentui/react-spinbutton": "*", "@fluentui/react-storybook-addon": "*", "@fluentui/react-storybook-addon-export-to-sandbox": "*", + "@fluentui/react-swatch-picker-preview": "*", "@fluentui/react-switch": "*", "@fluentui/react-table": "*", "@fluentui/react-tabs": "*", @@ -75,6 +75,9 @@ "react": "17.0.2", "react-dom": "17.0.2", "tslib": "^2.1.0", - "@fluentui/react-breadcrumb": "*" + "@fluentui/react-breadcrumb": "*", + "@fluentui/react-rating": "*", + "@fluentui/react-search": "*", + "@fluentui/react-teaching-popover": "*" } } diff --git a/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx index 0b237f2954af68..be6014897e6af5 100644 --- a/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx @@ -133,6 +133,16 @@ storiesOf('Combobox Converged', module)
)) + .addStory('When rendering inline, it should render on top of relatively positioned elements', () => ( +
+ + + + + + +
+ )) .addStory('Option with long content', () => (
diff --git a/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx b/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx index 9140191c9fd338..8b49ccff11923d 100644 --- a/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx @@ -138,6 +138,16 @@ storiesOf('Dropdown Converged', module) )) + .addStory('When rendering inline, it should render on top of relatively positioned elements', () => ( + <> + + + + + + + + )) .addStory('Option with long content', () => (