diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 2d7b3cdd017cd7..5c768287f59afc 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -9,10 +9,6 @@ // Use -bullseye variants on local arm64/Apple Silicon. "args": { "VARIANT": "16" } }, - // Set *default* container specific settings.json values on container create. - "settings": {}, - // Add the IDs of extensions you want installed when the container is created. - "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"], // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. "remoteUser": "node", "features": { @@ -21,5 +17,10 @@ "containerEnv": { // Required Environment Variable to properly run Cypress "DISPLAY": "${localEnv:DISPLAY}" + }, + "customizations": { + "vscode": { + "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] + } } } diff --git a/.github/policies/botRules.yml b/.github/policies/botRules.yml new file mode 100644 index 00000000000000..6774b6aae2bc68 --- /dev/null +++ b/.github/policies/botRules.yml @@ -0,0 +1,975 @@ +id: +name: GitOps.PullRequestIssueManagement +description: GitOps.PullRequestIssueManagement primitive +owner: +resource: repository +disabled: false +where: +configuration: + resourceManagementConfiguration: + scheduledSearches: + - description: + frequencies: + - hourly: + hour: 3 + filters: + - hasLabel: + label: 'Resolution: Not An Issue' + - isIssue + - isOpen + - noActivitySince: + days: 1 + actions: + - addReply: + reply: "This issue has been marked as being beyond the support scope of Fluent UI's issues board. It will now be closed automatically for house-keeping purposes. " + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isIssue + - isOpen + - hasLabel: + label: 'Status: No Recent Activity' + - noActivitySince: + days: 3 + actions: + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isIssue + - isOpen + - hasLabel: + label: 'Needs: Author Feedback' + - noActivitySince: + days: 4 + - isNotLabeledWith: + label: 'Status: No Recent Activity' + actions: + - addLabel: + label: 'Status: No Recent Activity' + - addReply: + reply: This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for **4 days**. It will be closed if no further activity occurs **within 3 days of this comment**. Thank you for your contributions to Fluent UI! + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isPullRequest + - isOpen + - hasLabel: + label: 'Needs: Author Feedback' + - hasLabel: + label: 'Status: No Recent Activity' + - noActivitySince: + days: 5 + actions: + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isPullRequest + - isOpen + - hasLabel: + label: 'Needs: Author Feedback' + - noActivitySince: + days: 7 + - isNotLabeledWith: + label: 'Status: No Recent Activity' + actions: + - addLabel: + label: 'Status: No Recent Activity' + - addReply: + reply: This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for **7 days**. It will be closed if no further activity occurs **within 5 days of this comment**. Thank you for your contributions to Fluent UI! + - description: + frequencies: + - hourly: + hour: 3 + filters: + - hasLabel: + label: 'Needs: Attention' + - noActivitySince: + days: 14 + - isOpen + - isNotLabeledWith: + label: Issue Pinged + actions: + - addReply: + reply: "${assignees}\n\nGentle ping that this issue needs attention. " + - addLabel: + label: Issue Pinged + - description: + frequencies: + - hourly: + hour: 6 + filters: + - hasLabel: + label: 'Resolution: Duplicate' + - isOpen + - noActivitySince: + days: 3 + actions: + - addReply: + reply: Because this issue is marked as a duplicate and has not had activity for over 3 days, we're closing this issue for house-keeping purposes. Please refer to the issue that this issue was duplicated to for the purposes of tracking progress. Thank you. + - closeIssue + - description: + frequencies: + - hourly: + hour: 6 + filters: + - isOpen + - isIssue + - hasLabel: + label: 'Needs: Actionable Feedback :female_detective:' + - isNotLabeledWith: + label: 'Status: No Recent Activity' + - noActivitySince: + days: 2 + actions: + - addReply: + reply: This issue has been automatically marked as stale because it has marked as requiring actionable feedback but has not had any activity for **2 days**. It will be closed if no further activity occurs **within 3 days of this comment**. Thank you for your contributions to Fluent UI! + - addLabel: + label: 'Status: No Recent Activity' + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isOpen + - isIssue + - hasLabel: + label: "Resolution: Won't Fix" + - noActivitySince: + days: 3 + actions: + - closeIssue + - description: + frequencies: + - hourly: + hour: 6 + filters: + - isOpen + - hasLabel: + label: 'Resolution: By Design' + - noActivitySince: + days: 3 + actions: + - addReply: + reply: "Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes. " + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isOpen + - isIssue + - noActivitySince: + days: 150 + - isNotLabeledWith: + label: Needs Dev Input + - isNotLabeledWith: + label: Needs details + - isNotLabeledWith: + label: 'Needs: Actionable Feedback :female_detective:' + - isNotLabeledWith: + label: 'Needs: Attention' + - isNotLabeledWith: + label: 'Needs: Author Feedback' + - isNotLabeledWith: + label: 'Needs: Backlog review' + - isNotLabeledWith: + label: 'Needs: Design' + - isNotLabeledWith: + label: 'Needs: Discussion' + - isNotLabeledWith: + label: 'Needs: Investigation' + - isNotLabeledWith: + label: 'Needs: Project Proposal' + - isNotLabeledWith: + label: 'Needs: Prototyping' + - isNotLabeledWith: + label: 'Needs: Triage :mag:' + - isNotLabeledWith: + label: 'Area: Accessibility' + - isNotLabeledWith: + label: Help Wanted ✨ + - isNotLabeledWith: + label: 'Needs: Behavior Breaking Change' + - isNotLabeledWith: + label: Fluent UI vNext + - isNotLabeledWith: + label: 'Status: In PR' + - isNotLabeledWith: + label: Fluent UI react (v8) + - isNotLabeledWith: + label: Storybook + - isNotLabeledWith: + label: 'Area: Build System' + - isNotLabeledWith: + label: 'Needs: Repro' + - isNotLabeledWith: + label: 'Component: New' + actions: + - addReply: + reply: >- + Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes. + + + *Still require assistance? Please, create a new issue with up-to date details.* + - addLabel: + label: 'Resolution: Soft Close' + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isIssue + - isOpen + - noActivitySince: + days: 180 + actions: + - addLabel: + label: 'Resolution: Soft Close' + - addReply: + reply: >- + Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes. + + + *Still require assistance? Please, create a new issue with up-to date details.* + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isOpen + - isIssue + - hasLabel: + label: 'Status: Not on Roadmap' + - noActivitySince: + days: 150 + actions: + - addLabel: + label: 'Resolution: Soft Close' + - addReply: + reply: >- + Because this issue has not had activity for over 150 days and it is not on our roadmap - we are automatically closing it for house-keeping reasons. + + Please, follow our planned [FluentUI React Roadmap](https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-Roadmap). + + + *Still require assistance? Please, create a new issue with up-to date details.* + - closeIssue + - description: + frequencies: + - hourly: + hour: 3 + filters: + - isOpen + - isIssue + - noActivitySince: + days: 180 + - hasLabel: + label: 'Type: Bug :bug:' + actions: + - addReply: + reply: >- + Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons. + + + *Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.* + - addLabel: + label: 'Resolution: Soft Close' + - closeIssue + eventResponderTasks: + - if: + - payloadType: Pull_Request + then: + - if: + - targetsBranch: + branch: 5.0 + then: + - addLabel: + label: Fabric 5 + - if: + - targetsBranch: + branch: 7.0 + then: + - addLabel: + label: Fabric 7 + - if: + - targetsBranch: + branch: 6.0 + then: + - addLabel: + label: Fabric 6 + - if: + - targetsBranch: + branch: office-ui-fabric-react_v5.79.1 + then: + - addLabel: + label: Fabric 5 + description: Auto label pull requests based on branch + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + then: + - if: + - includesModifiedFiles: + files: + - packages/office-ui-fabric-react/src/components/pickers + - packages/react/src/components/pickers + excludedFiles: + - packages/office-ui-fabric-react/src/components/__snapshots__/ + - change + - common/changes + - packages/react-examples + then: + - addLabel: + label: 'Component: Pickers' + - if: + - includesModifiedFiles: + files: + - package.json + - scripts + - rush.json + - apps/vr-tests/screener.config.js + - apps/vr-tests/screener.local.config.js + - apps/pr-deploy-site + - apps/perf-test + - packages/tslint-rules + - packages/jest-serializer-merge-styles + - packages/prettier-rules + - packages/webpack-utils + - packages/codemods + - packages/monaco-editor + - packages/eslint-plugin + - lage.config.js + - tools + excludedFiles: + - change + - common/changes + - packages/react-examples + then: + - addLabel: + label: 'Area: Build System' + - if: + - includesModifiedFiles: + files: + - apps/fabric-website + - packages/example-app-base + - apps/fabric-website-resources + - packages/example-data + - packages/examples + - packages/tsx-editor + - packages/monaco-editor + - apps/public-docsite + - apps/public-docsite-resources + - packages/react-examples + - packages/react-monaco-editor + excludedFiles: + - change + - common/changes + - scripts + then: + - addLabel: + label: 'Area: Website' + - if: + - includesModifiedFiles: + files: + - packages/fluentui + excludedFiles: + - scripts + then: + - addLabel: + label: Fluent UI react-northstar + - if: + - includesModifiedFiles: + files: + - packages/tsx-editor + - packages/monaco-editor + - packages/react-monaco-editor + excludedFiles: + - change + then: + - addLabel: + label: 'Package: react-monaco-editor' + - if: + - includesModifiedFiles: + files: + - packages/icons + - packages/file-type-icons + - packages/react-icons + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Area: Icons' + - if: + - includesModifiedFiles: + files: + - packages/web-components + excludedFiles: + - change + - scripts + then: + - addLabel: + label: web-components + - if: + - includesModifiedFiles: + files: + - packages/react-button + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Button' + - if: + - includesModifiedFiles: + files: + - packages/react-avatar + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Avatar' + - if: + - includesModifiedFiles: + files: + - packages/react-checkbox + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Checkbox' + - if: + - includesModifiedFiles: + files: + - packages/react-link + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Link' + - if: + - includesModifiedFiles: + files: + - packages/react-tabs + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Pivot' + - if: + - includesModifiedFiles: + files: + - packages/react-slider + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Slider' + - if: + - includesModifiedFiles: + files: + - packages/react-toggle + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Component: Toggle' + - if: + - includesModifiedFiles: + files: + - packages/charting + - packages/react-charting + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Package: charting' + - if: + - includesModifiedFiles: + files: + - packages/date-time + - packages/date-time-utilities + - packages/react-date-time + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Package: date-time' + - if: + - includesModifiedFiles: + files: + - packages/experiments + - packages/react-experiments + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Package: experiments' + - if: + - includesModifiedFiles: + files: + - packages/styling + - packages/style-utilities + excludedFiles: + - change + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Package: styling' + description: Auto label pull requests based on path + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + then: + - if: + - filesMatchPattern: + pattern: packages/(?:office-ui-fabric-react|react(?:-(?!charting)\w+)?|date-time)/src/components/(?!pickers)([A-Z][a-zA-Z]*)/.* + excludedFiles: + - common/changes + - common/config/rush + - apps/vr-tests/src/stories + - packages/office-ui-fabric-react/src/components/__snapshots__/ + - packages/office-ui-fabric-react/etc + - change + - apps/a11y-tests/src/tests/__snapshots__/ComponentExamples.test.tsx.snap + - scripts + - packages/react/src/components/__snapshots__ + - packages/react-examples + - packages/react/etc + then: + - addLabel: + label: 'Component: $1' + - if: + - filesMatchPattern: + pattern: packages/(azure-themes|codemods|file-type-icons|fluent-theme|keyboard-key|lists|mdl2-theme|merge-styles|migration|react-hooks|utilities|eslint-plugin)/.* + excludedFiles: + - change + - common/changes + - scripts + - packages/react-examples + then: + - addLabel: + label: 'Package: $1' + description: Auto label pull requests based on path pattern matching + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + - or: + - includesModifiedFiles: + files: + - packages/styling/etc/styling.api.md + - includesModifiedFiles: + files: + - packages/utilities/etc/utilities.api.md + - includesModifiedFiles: + files: + - packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md + - includesModifiedFiles: + files: + - packages/date-time/etc/date-time.api.md + - includesModifiedFiles: + files: + - packages/foundation-scenarios/etc/foundation-scenarios.api.md + - includesModifiedFiles: + files: + - packages/merge-styles/etc/merge-styles.api.md + - includesModifiedFiles: + files: + - packages/react/etc/react.api.md + - includesModifiedFiles: + files: + - packages/style-utilities/etc/style-utilities.md + - includesModifiedFiles: + files: + - packages/theme/etc/theme.api.md + - or: + - isAction: + action: Opened + - isAction: + action: Synchronize + then: + - addLabel: + label: 'PR: API Modified' + description: 'Add "PR: API Modified" for all PRs that modifies api files' + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + - isAction: + action: Created + - isActivitySender: + issueAuthor: True + - hasLabel: + label: 'Needs: Author Feedback' + - isOpen + then: + - addLabel: + label: 'Needs: Attention' + - removeLabel: + label: 'Needs: Author Feedback' + description: Replace needs author feedback label with needs attention label when the author comments on an issue + triggerOnOwnActions: false + - if: + - payloadType: Issues + - not: + isAction: + action: Closed + - hasLabel: + label: 'Status: No Recent Activity' + - not: + labelAdded: + label: 'Status: No Recent Activity' + then: + - removeLabel: + label: 'Status: No Recent Activity' + description: Remove no recent activity label from issues + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + - hasLabel: + label: 'Status: No Recent Activity' + then: + - removeLabel: + label: 'Status: No Recent Activity' + description: Remove no recent activity label when an issue is commented on + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request_Review + - isAction: + action: Submitted + - isReviewState: + reviewState: Changes_requested + then: + - addLabel: + label: 'Needs: Author Feedback' + description: Add needs author feedback label to pull requests when changes are requested + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + - isActivitySender: + issueAuthor: True + - not: + isAction: + action: Closed + - hasLabel: + label: 'Needs: Author Feedback' + then: + - removeLabel: + label: 'Needs: Author Feedback' + description: Remove needs author feedback label when the author responds to a pull request + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + - isActivitySender: + issueAuthor: True + - hasLabel: + label: 'Needs: Author Feedback' + then: + - removeLabel: + label: 'Needs: Author Feedback' + description: Remove needs author feedback label when the author comments on a pull request + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request_Review + - isActivitySender: + issueAuthor: True + - hasLabel: + label: 'Needs: Author Feedback' + then: + - removeLabel: + label: 'Needs: Author Feedback' + description: Remove needs author feedback label when the author responds to a pull request review comment + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + - not: + isAction: + action: Closed + - hasLabel: + label: 'Status: No Recent Activity' + - not: + labelAdded: + label: 'Status: No Recent Activity' + then: + - removeLabel: + label: 'Status: No Recent Activity' + description: Remove no recent activity label from pull requests + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + - hasLabel: + label: 'Status: No Recent Activity' + then: + - removeLabel: + label: 'Status: No Recent Activity' + description: Remove no recent activity label when a pull request is commented on + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request_Review + - hasLabel: + label: 'Status: No Recent Activity' + then: + - removeLabel: + label: 'Status: No Recent Activity' + description: Remove no recent activity label when a pull request is reviewed + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + - hasLabel: + label: AutoMerge + then: + - enableAutoMerge: + mergeMethod: Squash + description: Automatically merge pull requests + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + - labelRemoved: + label: AutoMerge + then: + - disableAutoMerge + description: Automatically merge pull requests + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + then: + - inPrLabel: + label: 'Status: In PR' + description: Adds In-PR Label + triggerOnOwnActions: false + - if: + - payloadType: Issues + - or: + - isAction: + action: Opened + - isAction: + action: Reopened + - or: + - bodyContains: + pattern: ^\s*$ + isRegex: True + then: + - addReply: + reply: "Hi! Thanks for attempting to open an issue. Unfortunately, you didn't write anything in the body which makes it impossible to understand your concern. You are welcome to try again by opening a new issue. " + - closeIssue + description: Close issues with nothing in the body + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + - isAction: + action: Opened + - or: + - activitySenderHasAssociation: + association: FirstTimer + - activitySenderHasAssociation: + association: FirstTimeContributor + - activitySenderHasPermission: + permission: Write + then: [] + description: Friendly bot + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + - isActivitySender: + user: msft-github-bot + issueAuthor: False + - or: + - isAction: + action: Created + - isAction: + action: Edited + - commentContains: + pattern: Perf Analysis + isRegex: False + - commentContains: + pattern: Possible regression + isRegex: False + - not: + hasLabel: + label: 'PR: Possible Perf Regression :snail:' + then: + - addLabel: + label: 'PR: Possible Perf Regression :snail:' + description: Add possible regression label to perf tests with regressions. + triggerOnOwnActions: true + - if: + - payloadType: Issue_Comment + - isActivitySender: + user: msft-github-bot + issueAuthor: False + - or: + - isAction: + action: Edited + - hasLabel: + label: 'PR: Possible Perf Regression :snail:' + - not: + commentContains: + pattern: Possible regression + isRegex: False + - commentContains: + pattern: Component Perf Analysis + isRegex: False + then: + - removeLabel: + label: 'PR: Possible Perf Regression :snail:' + description: Remove possible regression label to perf tests without regressions. + triggerOnOwnActions: true + - if: + - payloadType: Issues + - labelAdded: + label: 'Needs: Actionable Feedback :female_detective:' + - isOpen + then: + - addReply: + reply: > + Thanks for taking the time to enter an issue. However, it seems that there aren't enough details here for this issue to be actionable. + + + When issues are created, we need details such as: + + 1. Which Fluent UI component is causing the issue + + 1. Which package name and version the component is from + + 1. Specific, complete steps to reproduce the issue + + 1. What behaviors and attributes are missing or incorrect + + 1. What you expected and what is actually happening + + 1. Confirmation that the problem reproduces in isolation + + + Without a clear understanding of these details, it's not possible to take clear action on issues. We are unable to meet your expectations, properly address the root cause, and make changes without affecting the expectations of other consumers. + + + Please provide these additional details as you are able. The default issue template provides an outline of these details and is viewable when creating a new issue. Additionally, if this is an accessibility issue, please see [Accessibility Troubleshooting](https://github.com/microsoft/fluentui/wiki/Accessibility-Troubleshooting) in our wiki for more guidance. If these details cannot be provided, please kindly close the issue. + + + Thank you for your patience. + description: 'Provide blurp when Needs: Actionable Feedback is added' + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + - isAction: + action: Created + - isActivitySender: + issueAuthor: True + - hasLabel: + label: 'Needs: Actionable Feedback :female_detective:' + - isOpen + then: + - removeLabel: + label: 'Needs: Actionable Feedback :female_detective:' + - addLabel: + label: 'Needs: Attention' + description: Replace needs actionable feedback label with needs attention label when the author comments on an issue + triggerOnOwnActions: false + - if: + - payloadType: Issue_Comment + then: + - cleanEmailReply + description: Cleanse emails + triggerOnOwnActions: false + - if: + - payloadType: Issues + - or: + - labelAdded: + label: 'Needs: Author Feedback' + - labelAdded: + label: 'Needs: Actionable Feedback :female_detective:' + - isOpen + then: + - removeLabel: + label: 'Needs: Triage :mag:' + - removeLabel: + label: 'Needs: Attention' + description: Remove needs triage if needs author feedback or needs actionable feedback label is added + triggerOnOwnActions: false + - if: + - payloadType: Issues + - hasLabel: + label: 'Type: Feature' + - not: + hasLabel: + label: 'Area: Accessibility' + - or: + - hasLabel: + label: 'Component: List' + - hasLabel: + label: 'Component: DetailsList' + - hasLabel: + label: 'Component: GroupedList' + - labelAdded: + label: "Resolution: Won't Fix" + then: + - addReply: + reply: Due to the complexity and dependencies of our List components, we are not able to take new feature requests at this time. + description: "List components: reply to won't fix feature requests" + triggerOnOwnActions: false + - if: + - payloadType: Issues + - hasLabel: + label: 'Type: Bug :bug:' + - not: + hasLabel: + label: 'Area: Accessibility' + - or: + - hasLabel: + label: 'Component: List' + - hasLabel: + label: 'Component: DetailsList' + - hasLabel: + label: 'Component: GroupedList' + - labelAdded: + label: "Resolution: Won't Fix" + then: + - addReply: + reply: Due to the complexity and dependencies of our List components, we are actively trying to minimize risk of regressions. We sincerely apologize that we won't be able to address this issue at this moment. + description: "List components: reply to won't fix bugs" + triggerOnOwnActions: false + - if: + - payloadType: Pull_Request + then: + - labelSync: + pattern: ^Area + - labelSync: + pattern: ^Component + description: Sync labels from issues to prs + triggerOnOwnActions: false +onFailure: +onSuccess: diff --git a/.github/triage-bot.config.json b/.github/triage-bot.config.json index 1f081d6cd3d218..35c33ebcc54a6f 100644 --- a/.github/triage-bot.config.json +++ b/.github/triage-bot.config.json @@ -3,13 +3,13 @@ "params": [ { "keyword": "(@fluentui/react-northstar)", - "labels": ["Fluent UI react-northstar (v0)"], + "labels": ["Fluent UI react-northstar (v0)", "Needs: Triage :mag:"], "assignees": [] }, - { "keyword": "(@fluentui/react)", "labels": ["Fluent UI react (v8)"], "assignees": [] }, + { "keyword": "(@fluentui/react)", "labels": ["Fluent UI react (v8)", "Needs: Triage :mag:"], "assignees": [] }, { "keyword": "(@fluentui/react-components)", - "labels": ["Fluent UI react-components (v9)"], + "labels": ["Fluent UI react-components (v9)", "Needs: Triage :mag:"], "assignees": [] }, { diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx index a4141467d2a5e1..17d5238e7e2c9e 100644 --- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx @@ -23,12 +23,43 @@ import { TableCellActions, TableProps, TableRowProps, + useTableColumnSizing_unstable, + useTableFeatures, + TableColumnDefinition, + createTableColumn, } from '@fluentui/react-table'; import { Button } from '@fluentui/react-button'; import { storiesOf } from '@storybook/react'; import { Steps, StoryWright } from 'storywright'; -const items = [ +type FileCell = { + label: string; + icon: JSX.Element; +}; + +type LastUpdatedCell = { + label: string; + timestamp: number; +}; + +type LastUpdateCell = { + label: string; + icon: JSX.Element; +}; + +type AuthorCell = { + label: string; + status: PresenceBadgeStatus; +}; + +type Item = { + file: FileCell; + author: AuthorCell; + lastUpdated: LastUpdatedCell; + lastUpdate: LastUpdateCell; +}; + +const items: Item[] = [ { file: { label: 'Meeting notes', icon: }, author: { label: 'Max Mustermann', status: 'available' }, @@ -74,6 +105,25 @@ const columns = [ { columnKey: 'lastUpdate', label: 'Last update' }, ]; +const columnsDef: TableColumnDefinition[] = [ + createTableColumn({ + columnId: 'file', + renderHeaderCell: () => <>File, + }), + createTableColumn({ + columnId: 'author', + renderHeaderCell: () => <>Author, + }), + createTableColumn({ + columnId: 'lastUpdated', + renderHeaderCell: () => <>Last updated, + }), + createTableColumn({ + columnId: 'lastUpdate', + renderHeaderCell: () => <>Last update, + }), +]; + interface SharedVrTestArgs { noNativeElements: TableProps['noNativeElements']; selectedRowAppearance?: TableRowProps['appearance']; @@ -634,6 +684,85 @@ const Truncate: React.FC = ({ noNativ ); +const ResizableColumns: React.FC = ({ + noNativeElements, + scrollToEnd, +}) => { + const [columnSizingOptions] = React.useState({ + file: { + idealWidth: 300, + minWidth: 300, + }, + }); + + const { columnSizing_unstable: columnSizing, tableRef } = useTableFeatures( + { + columns: columnsDef, + items, + }, + [ + useTableColumnSizing_unstable({ + columnSizingOptions, + }), + ], + ); + return ( +
+ + + + {columns.map(column => ( + + {column.label} + + ))} + + + + {items.map((item, i) => ( + + + + {item.file.label} + +
+
+ ); +}; + ([true, false] as const).forEach(noNativeElements => { const layoutName = noNativeElements ? 'flex' : 'table'; storiesOf(`Table layout ${layoutName} - cell actions`, module) @@ -760,4 +889,8 @@ const Truncate: React.FC = ({ noNativ .addStory('default (disabled)', () => ) .addStory('false', () => ) .addStory('true', () => ); + + storiesOf(`Table layout ${layoutName} - resizable columns`, module) + .addStory('default', () => ) + .addStory('end', () => ); }); diff --git a/change/@fluentui-azure-themes-cfae358f-02a7-46ba-8e4d-ee45180e9eb8.json b/change/@fluentui-azure-themes-cfae358f-02a7-46ba-8e4d-ee45180e9eb8.json deleted file mode 100644 index a5bac08b613cbe..00000000000000 --- a/change/@fluentui-azure-themes-cfae358f-02a7-46ba-8e4d-ee45180e9eb8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Updated focus state border for detailslist", - "packageName": "@fluentui/azure-themes", - "email": "30805892+Jacqueline-ms@users.noreply.github.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json b/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json new file mode 100644 index 00000000000000..7a572d97670d1b --- /dev/null +++ b/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Small Button now uses token for its border radius", + "packageName": "@fluentui/react-button", + "email": "mehars.6925@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-card-97d7abde-06d9-46cc-a71a-147630a0431e.json b/change/@fluentui-react-card-97d7abde-06d9-46cc-a71a-147630a0431e.json new file mode 100644 index 00000000000000..d76c2bf465e4b1 --- /dev/null +++ b/change/@fluentui-react-card-97d7abde-06d9-46cc-a71a-147630a0431e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: CardHeader grid layout ignoring line-height of content", + "packageName": "@fluentui/react-card", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-charting-fb2207fd-522a-4790-b398-e9546a11aec2.json b/change/@fluentui-react-charting-fb2207fd-522a-4790-b398-e9546a11aec2.json new file mode 100644 index 00000000000000..024a8c8e4a4c78 --- /dev/null +++ b/change/@fluentui-react-charting-fb2207fd-522a-4790-b398-e9546a11aec2.json @@ -0,0 +1,10 @@ +{ + "type": "patch", + "comment": { + "title": "", + "value": "" + }, + "packageName": "@fluentui/react-charting", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-6b3fa56a-0bb9-4dd2-8e10-4f60933b6573.json b/change/@fluentui-react-components-6b3fa56a-0bb9-4dd2-8e10-4f60933b6573.json deleted file mode 100644 index 36a4b814999b5e..00000000000000 --- a/change/@fluentui-react-components-6b3fa56a-0bb9-4dd2-8e10-4f60933b6573.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Export DataGridContextProvider.", - "packageName": "@fluentui/react-components", - "email": "esteban.230@hotmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json b/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json new file mode 100644 index 00000000000000..8f9e3778407650 --- /dev/null +++ b/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix(react-infobutton): Making InfoButton's PopoverSurface inline by default.", + "packageName": "@fluentui/react-infobutton", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json b/change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json deleted file mode 100644 index 451c24e7879c3f..00000000000000 --- a/change/@fluentui-react-jsx-runtime-abd74045-0eb2-4e91-ba62-6a5c8bb5f7cd.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "chore: decrease bundle size & adds fixtures", - "packageName": "@fluentui/react-jsx-runtime", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-popover-734b13f1-e9b6-48f6-8424-854c2b01268e.json b/change/@fluentui-react-popover-734b13f1-e9b6-48f6-8424-854c2b01268e.json new file mode 100644 index 00000000000000..b1091c25284bfa --- /dev/null +++ b/change/@fluentui-react-popover-734b13f1-e9b6-48f6-8424-854c2b01268e.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add closeOnIframeFocus prop to Popover", + "packageName": "@fluentui/react-popover", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json b/change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json deleted file mode 100644 index 11d3927c387372..00000000000000 --- a/change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus.", - "packageName": "@fluentui/react-popover", - "email": "esteban.230@hotmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json b/change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json new file mode 100644 index 00000000000000..e5b367f414a594 --- /dev/null +++ b/change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Improve visuals when Table/DataGrid overflows it's parent", + "packageName": "@fluentui/react-table", + "email": "jirivyhnalek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-28ca67b3-8bb9-4572-87a2-8ee58c0d19a0.json b/change/@fluentui-react-table-28ca67b3-8bb9-4572-87a2-8ee58c0d19a0.json deleted file mode 100644 index 0910a9391e7675..00000000000000 --- a/change/@fluentui-react-table-28ca67b3-8bb9-4572-87a2-8ee58c0d19a0.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Export DataGridContextProvider.", - "packageName": "@fluentui/react-table", - "email": "esteban.230@hotmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json b/change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json new file mode 100644 index 00000000000000..8de4bb6b3d6b13 --- /dev/null +++ b/change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tag with secondary text has no top border under windows high contrast", + "packageName": "@fluentui/react-tags-preview", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json b/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json new file mode 100644 index 00000000000000..f97c7d413eb9e5 --- /dev/null +++ b/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: use regular icon for dismiss", + "packageName": "@fluentui/react-tags-preview", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-79e44460-a719-40d8-9aeb-cc3737e454a2.json b/change/@fluentui-react-tooltip-79e44460-a719-40d8-9aeb-cc3737e454a2.json deleted file mode 100644 index 579c862ff0b7e1..00000000000000 --- a/change/@fluentui-react-tooltip-79e44460-a719-40d8-9aeb-cc3737e454a2.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape", - "packageName": "@fluentui/react-tooltip", - "email": "behowell@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-utilities-62a5aa48-dba4-4ff0-974d-d5ea0a87b2fc.json b/change/@fluentui-react-utilities-62a5aa48-dba4-4ff0-974d-d5ea0a87b2fc.json deleted file mode 100644 index b9f36d0543d33e..00000000000000 --- a/change/@fluentui-react-utilities-62a5aa48-dba4-4ff0-974d-d5ea0a87b2fc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: `useOnClickOutside` should consider text selection starting inside and finishing outside as an inside click", - "packageName": "@fluentui/react-utilities", - "email": "yuanboxue@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-utilities-8a73f07d-6553-402e-b292-938e7141264a.json b/change/@fluentui-react-utilities-8a73f07d-6553-402e-b292-938e7141264a.json deleted file mode 100644 index f21e13631a15df..00000000000000 --- a/change/@fluentui-react-utilities-8a73f07d-6553-402e-b292-938e7141264a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: create a new useAnimationFrame hook", - "packageName": "@fluentui/react-utilities", - "email": "marcosvmmoura@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-utilities-b19f3b01-374f-42a8-810c-33ad335e5e79.json b/change/@fluentui-react-utilities-b19f3b01-374f-42a8-810c-33ad335e5e79.json new file mode 100644 index 00000000000000..432c0da4114a97 --- /dev/null +++ b/change/@fluentui-react-utilities-b19f3b01-374f-42a8-810c-33ad335e5e79.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add disabledFocusOnIframe for useOnClickOutside()", + "packageName": "@fluentui/react-utilities", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index 89561a79ad4cec..9a3ceb1ded2d73 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,51 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Mon, 28 Aug 2023 07:36:25 GMT", + "tag": "@fluentui/azure-themes_v8.6.33", + "version": "8.6.33", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.111.1", + "commit": "5d42a5f3e0515660da3f8dbe1de82a109191dd79" + } + ] + } + }, + { + "date": "Fri, 25 Aug 2023 07:35:37 GMT", + "tag": "@fluentui/azure-themes_v8.6.32", + "version": "8.6.32", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.111.0", + "commit": "846a45467d7e70f3960950b6eb42d3a1d3cef2e5" + } + ] + } + }, + { + "date": "Thu, 24 Aug 2023 07:33:35 GMT", + "tag": "@fluentui/azure-themes_v8.6.31", + "version": "8.6.31", + "comments": { + "patch": [ + { + "author": "30805892+Jacqueline-ms@users.noreply.github.com", + "package": "@fluentui/azure-themes", + "commit": "7b1585f0bfd58428c5511262b5fb97686b481812", + "comment": "Updated focus state border for detailslist" + } + ] + } + }, { "date": "Wed, 23 Aug 2023 07:36:23 GMT", "tag": "@fluentui/azure-themes_v8.6.30", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index aec95974e7d32b..3815aab5bbf7a9 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,36 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Wed, 23 Aug 2023 07:36:23 GMT and should not be manually modified. +This log was last generated on Mon, 28 Aug 2023 07:36:25 GMT and should not be manually modified. +## [8.6.33](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.33) + +Mon, 28 Aug 2023 07:36:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.32..@fluentui/azure-themes_v8.6.33) + +### Patches + +- Bump @fluentui/react to v8.111.1 ([PR #28589](https://github.com/microsoft/fluentui/pull/28589) by beachball) + +## [8.6.32](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.32) + +Fri, 25 Aug 2023 07:35:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.31..@fluentui/azure-themes_v8.6.32) + +### Patches + +- Bump @fluentui/react to v8.111.0 ([PR #28978](https://github.com/microsoft/fluentui/pull/28978) by beachball) + +## [8.6.31](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.31) + +Thu, 24 Aug 2023 07:33:35 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.30..@fluentui/azure-themes_v8.6.31) + +### Patches + +- Updated focus state border for detailslist ([PR #28966](https://github.com/microsoft/fluentui/pull/28966) by 30805892+Jacqueline-ms@users.noreply.github.com) + ## [8.6.30](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.30) Wed, 23 Aug 2023 07:36:23 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index d3663a6c5e4e90..1a36489294a3b8 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.6.30", + "version": "8.6.33", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.110.15", + "@fluentui/react": "^8.111.1", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" } diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index 868781540b11b9..e35509db02133e 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.109", + "version": "8.4.111", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index 5ca830f3ec41ee..5c6f0f12b41f37 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Mon, 28 Aug 2023 07:36:25 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.37", + "version": "8.107.37", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.111.1", + "commit": "5d42a5f3e0515660da3f8dbe1de82a109191dd79" + } + ] + } + }, + { + "date": "Fri, 25 Aug 2023 07:35:37 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.36", + "version": "8.107.36", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.111.0", + "commit": "846a45467d7e70f3960950b6eb42d3a1d3cef2e5" + } + ] + } + }, { "date": "Wed, 23 Aug 2023 07:36:23 GMT", "tag": "@fluentui/fluent2-theme_v8.107.35", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index 620299307c602a..63f235296b341a 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Wed, 23 Aug 2023 07:36:23 GMT and should not be manually modified. +This log was last generated on Mon, 28 Aug 2023 07:36:25 GMT and should not be manually modified. +## [8.107.37](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.37) + +Mon, 28 Aug 2023 07:36:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.36..@fluentui/fluent2-theme_v8.107.37) + +### Patches + +- Bump @fluentui/react to v8.111.1 ([PR #28589](https://github.com/microsoft/fluentui/pull/28589) by beachball) + +## [8.107.36](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.36) + +Fri, 25 Aug 2023 07:35:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.35..@fluentui/fluent2-theme_v8.107.36) + +### Patches + +- Bump @fluentui/react to v8.111.0 ([PR #28978](https://github.com/microsoft/fluentui/pull/28978) by beachball) + ## [8.107.35](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.35) Wed, 23 Aug 2023 07:36:23 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index 5763cbaa5ae3c9..f39c6a364ad677 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.107.35", + "version": "8.107.37", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.110.15", + "@fluentui/react": "^8.111.1", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" } diff --git a/packages/fluentui/react-bindings/src/hooks/useOnIFrameFocus.ts b/packages/fluentui/react-bindings/src/hooks/useOnIFrameFocus.ts index 86640e7293040b..002bdfb0d74535 100644 --- a/packages/fluentui/react-bindings/src/hooks/useOnIFrameFocus.ts +++ b/packages/fluentui/react-bindings/src/hooks/useOnIFrameFocus.ts @@ -2,7 +2,7 @@ import { useIFrameFocusDispatch } from './useIFrameFocusDispatch'; import { useIFrameListener } from './useIFrameListener'; /** - * It enabables a interval to check if the iframe is focused and executes the callback function. + * A hook that creates an interval to check if the iframe is focused and executes the callback function once it happens. */ export const useOnIFrameFocus = ( enableFrameFocusDispatch: boolean, diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 2d680c245b950a..ee42015a1799f9 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Mon, 28 Aug 2023 07:36:25 GMT", + "tag": "@fluentui/react-cards_v0.205.110", + "version": "0.205.110", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.111.1", + "commit": "5d42a5f3e0515660da3f8dbe1de82a109191dd79" + } + ] + } + }, + { + "date": "Fri, 25 Aug 2023 07:35:37 GMT", + "tag": "@fluentui/react-cards_v0.205.109", + "version": "0.205.109", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.111.0", + "commit": "846a45467d7e70f3960950b6eb42d3a1d3cef2e5" + } + ] + } + }, { "date": "Wed, 23 Aug 2023 07:36:23 GMT", "tag": "@fluentui/react-cards_v0.205.108", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index f1887b725b514f..5fcab8a523caf2 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/react-cards -This log was last generated on Wed, 23 Aug 2023 07:36:23 GMT and should not be manually modified. +This log was last generated on Mon, 28 Aug 2023 07:36:25 GMT and should not be manually modified. +## [0.205.110](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.110) + +Mon, 28 Aug 2023 07:36:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.109..@fluentui/react-cards_v0.205.110) + +### Patches + +- Bump @fluentui/react to v8.111.1 ([PR #28589](https://github.com/microsoft/fluentui/pull/28589) by beachball) + +## [0.205.109](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.109) + +Fri, 25 Aug 2023 07:35:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.108..@fluentui/react-cards_v0.205.109) + +### Patches + +- Bump @fluentui/react to v8.111.0 ([PR #28978](https://github.com/microsoft/fluentui/pull/28978) by beachball) + ## [0.205.108](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.108) Wed, 23 Aug 2023 07:36:23 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index 63d6b125cab933..1a76e567af0336 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.108", + "version": "0.205.110", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,7 +34,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.110.15", + "@fluentui/react": "^8.111.1", "@fluentui/foundation-legacy": "^8.2.44", "@fluentui/set-version": "^8.2.11", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json index 1d01fb5c132ef2..88964248d2ef68 100644 --- a/packages/react-charting/CHANGELOG.json +++ b/packages/react-charting/CHANGELOG.json @@ -1,6 +1,60 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Mon, 28 Aug 2023 07:36:25 GMT", + "tag": "@fluentui/react-charting_v5.17.4", + "version": "5.17.4", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.110", + "commit": "5d42a5f3e0515660da3f8dbe1de82a109191dd79" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.111.1", + "commit": "5d42a5f3e0515660da3f8dbe1de82a109191dd79" + } + ] + } + }, + { + "date": "Fri, 25 Aug 2023 07:35:36 GMT", + "tag": "@fluentui/react-charting_v5.17.3", + "version": "5.17.3", + "comments": { + "patch": [ + { + "author": "yushsingla@microsoft.com", + "package": "@fluentui/react-charting", + "commit": "78808a4e906580cd2b7a946b8be359eb548206bc", + "comment": "Fixed the focus indicator bug in horizontal bar chart and multi stack bar chart" + }, + { + "author": "yushsingla@microsoft.com", + "package": "@fluentui/react-charting", + "commit": "b0e9dad9f173b1e87c3a1fffbc8a4cba768400b3", + "comment": "fixed accessibility issues in pie chart" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.109", + "commit": "846a45467d7e70f3960950b6eb42d3a1d3cef2e5" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.111.0", + "commit": "846a45467d7e70f3960950b6eb42d3a1d3cef2e5" + } + ] + } + }, { "date": "Wed, 23 Aug 2023 07:36:23 GMT", "tag": "@fluentui/react-charting_v5.17.2", diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md index 598271da2cbd98..5d90f7e04ddcb0 100644 --- a/packages/react-charting/CHANGELOG.md +++ b/packages/react-charting/CHANGELOG.md @@ -1,9 +1,31 @@ # Change Log - @fluentui/react-charting -This log was last generated on Wed, 23 Aug 2023 07:36:23 GMT and should not be manually modified. +This log was last generated on Mon, 28 Aug 2023 07:36:25 GMT and should not be manually modified. +## [5.17.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.17.4) + +Mon, 28 Aug 2023 07:36:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.17.3..@fluentui/react-charting_v5.17.4) + +### Patches + +- Bump @fluentui/theme-samples to v8.7.110 ([PR #28589](https://github.com/microsoft/fluentui/pull/28589) by beachball) +- Bump @fluentui/react to v8.111.1 ([PR #28589](https://github.com/microsoft/fluentui/pull/28589) by beachball) + +## [5.17.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.17.3) + +Fri, 25 Aug 2023 07:35:36 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.17.2..@fluentui/react-charting_v5.17.3) + +### Patches + +- Fixed the focus indicator bug in horizontal bar chart and multi stack bar chart ([PR #28414](https://github.com/microsoft/fluentui/pull/28414) by yushsingla@microsoft.com) +- fixed accessibility issues in pie chart ([PR #28504](https://github.com/microsoft/fluentui/pull/28504) by yushsingla@microsoft.com) +- Bump @fluentui/theme-samples to v8.7.109 ([PR #28978](https://github.com/microsoft/fluentui/pull/28978) by beachball) +- Bump @fluentui/react to v8.111.0 ([PR #28978](https://github.com/microsoft/fluentui/pull/28978) by beachball) + ## [5.17.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.17.2) Wed, 23 Aug 2023 07:36:23 GMT diff --git a/packages/react-charting/docs/TestPlans/AreaChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/AreaChart/ComponentTests.md new file mode 100644 index 00000000000000..32d9c22cf47190 --- /dev/null +++ b/packages/react-charting/docs/TestPlans/AreaChart/ComponentTests.md @@ -0,0 +1,61 @@ +**Area Chart – Component test plan** + +**Sub-components: Area, x-axis, y-axis and Legend** + +1. **Line: Area data, Area color (multi colors), Area label (show/hide)** +1. **Legends: show/hide legends, highlight the corresponding Area on legend hover** +1. **Callout: Default/custom callout** +1. **Labels: x-Axis labels, y-Axis labels** + +| **Test steps** | **Validation** | **Tool used** | +| :-------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-----------: | +| Test 1: [Snapshot testing] | | | +| - With only data prop, numerical data on x-axis. | Renders Area chart correctly | RTL | +| - With only data prop, date data on x-axis. | Renders Area chart correctly | RTL | +| - With only data prop, string data on x-axis. | Should not render area chart | Pending | +| - With HideLegend prop set to “true” | Should hide legends | Enzyme | +| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme | +| - With EnabledLegendsWrapLines set to “true” | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line | Enzyme | +| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme | +| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme | +| - With yAxisTickFormat set to “%d” |

Should render the y-axis ticks in the format specified

| Enzyme | +| - With single point | Should render Area chat with single point | Enzyme | +| - With Default color | Should render with default colors when line color not provided | Enzyme | +| - With specific colors | Should render areas with specified colors | RTL | +| - With optimizeLargeData set to “true” | Should not render circles when optimizeLargeData is true | Enzyme | +| Test 2: Basic props testing | | | +| - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme | +| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme | +| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme | +| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme | +| - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | Enzyme | +| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme | +| - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme | +| Test 3: Render calling with respective to props | | | +| - No prop changes: Mount Area chart and then set the same props again | Render function should have been called twice | Enzyme | +| - Prop changes: Mount Area chart and then set some other prop | Render function should have been called twice | Enzyme | +| Test 4: Mouse events | | | +| - Mouse over on Area | Should render callout correctly on mouseover | Enzyme | +| - Mouse move from one area to other area | Should render callout correctly on mouse move | Enzyme | +| - Mouse over on a area with customized callout | Should render customized callout on mouseover | Enzyme | +| - Customized callout on area from one area to other area | Should render customized callout for stack on mouseover | Enzyme | +| Test 5: Render empty chart aria label div when chart is empty | | | +| - Area chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme | +| - Area chart mounted with empty data | Empty chart aria label div rendered | Enzyme | +| Test 6: [Sub-Component]: Legends | | | +| - Hover mouse over area legends | Should reduce the opacity of the other Areas | RTL | +| - Hover mouse over area legends | Should reduce the opacity of the other lines in area chart and opacity of the selected area line should be zero | RTL | +| - Hover mouse over area legends | Should reduce the opacity of the other legends | RTL | +| - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL | +| - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL | +| Test 7: [Sub-Component]: Callout | | | +| - Hover mouse over a single area | Should show the default callout over that Area | RTL | +| - Hover mouse over a stacked area | Should show the default stacked callout over that Area | RTL | +| - Specify custom callout and hover mouse over a Area | Should show the custom callout over that Area | RTL | +| Test 8: [Sub-Component]: x-axis labels | | | +| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL | +| - Rotate x-axis labels | Should rotate the x-axis labels by 39 degrees | RTL | +| Test 9: [Sub-Component]: Screen resolution | | | +| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL | +| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL | +| Test 10: Theme changed to Dark Theme | Should reflect theme change | RTL | diff --git a/packages/react-charting/docs/TestPlans/LineChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/LineChart/ComponentTests.md new file mode 100644 index 00000000000000..ac967d10d1b38e --- /dev/null +++ b/packages/react-charting/docs/TestPlans/LineChart/ComponentTests.md @@ -0,0 +1,63 @@ +**Line Chart – Component test plan** + +**Sub-components: Line, x-axis, y-axis, Event, Time Range, Callout, Drop down and Legend** + +1. **Line: Line data, Line color (multi colors), Line label (show/hide)** +1. **Legends: show/hide legends, highlight the corresponding line on legend hover** +1. **Callout: Default/custom callout** +1. **Labels: x-Axis labels** + +| **Test steps** | **Validation** | **Tool used** | +| :---------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: | +| Test 1: [Snapshot testing] | | | +| - With only data prop, numerical data on x-axis. | Renders line chart correctly | RTL | +| - With only data prop, date data on x-axis. | Renders line chart correctly | RTL | +| - With only data prop, string data on x-axis. | Should not render area chart | Pending | +| - With allowMultipleShapesForPoints set to “true” | Should render line chart with multiple shapes for chart points | RTL | +| - With HideLegend prop set to “true” | Should hide legends | Enzyme | +| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme | +| - With EnabledLegendsWrapLines set to “true” | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line | Enzyme | +| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme | +| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme | +| - With yAxisTickFormat set to “%d” |

Should render the y-axis ticks in the format specified

| Enzyme | +| - With canSelectMultipleLegends set to “true” | Should select multiple legends | RTL | +| Test 2: Basic props testing | | | +| - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme | +| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme | +| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme | +| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme | +| Test 3: Render calling with respective to props | | | +| - No prop changes: Mount line chart and then set the same props again | Render function should have been called twice | Enzyme | +| - Prop changes: Mount line chart and then set some other prop | Render function should have been called twice | Enzyme | +| Test 4: Mouse events | | | +| - Mouse over on a line | Should render callout correctly on mouseover | Enzyme | +| - Mouse move from one line to other line | Should render callout correctly on mouse move | Enzyme | +| - Mouse over on a line with customized callout | Should render customized callout on mouseover | Enzyme | +| - Customized callout on a line | Should render customized callout correctly on mouseover | Enzyme | +| - Customized callout on a line from one line to other line | Should render customized callout for stack on mouseover | Enzyme | +| Test 5: Render empty chart aria label div when chart is empty | | | +| - Line chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme | +| - Line chart mounted with empty data | Empty chart aria label div rendered | Enzyme | +| Test 6: Render empty chart calling with respective to props | | | +| - No prop changes: Mount line chart with non-empty data and then set the same props again | Render function should have been called twice | Enzyme | +| - prop changes: Mount line chart with empty data and then set the props | Render function should have been called 3 times | Enzyme | +| Test 7: [Sub-Component]: Line | | | +| - Specify lines with specified colors | Should render lines with the color provided in data | RTL | +| - Specify line data with gaps | Should render the lines with specified gaps | RTL | +| Test 8: [Sub-Component]: Legends | | | +| - Hover mouse over line legends | Should highlight the corresponding line on mouse over on legend | RTL | +| - Mouse leave on legends | Should reset the highlighted line on mouse leave on legends | RTL | +| - Single mouse click on legends | Should select legend on single mouse click on respective legend | RTL | +| - Double mouse click on legends | Should deselect legend on double mouse click on respective legend | RTL | +| Test 9: [Sub-Component]: Time Range(Color fill bars) | | | +| - Line chart with time range | Should render time range with specified data | RTL | +| - Single mouse click on time range legend | Should highlight corresponding time range on legend click | RTL | +| Test 10: [Sub-Component]: x-axis labels | | | +| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL | +| - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL | +| Test 11: [Sub-Component]: Event | | | +| - Line chart with Events data | Should render line chart with events | RTL | +| Test 12: [Sub-Component]: Screen resolution | | | +| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL | +| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL | +| Test 13: Theme changed to Dark Theme | Should reflect theme change | RTL | diff --git a/packages/react-charting/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md new file mode 100644 index 00000000000000..92d269c99e870d --- /dev/null +++ b/packages/react-charting/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md @@ -0,0 +1,73 @@ +**Vertical Stacked Bar Chart – Component test plan** + +**Sub-components: Bar, Line, Legends, Callout, Labels** + +1. **Bar: Bar data, Bar color (single/multiple), bar label** +1. **Line: show/hide line, highlight data points on line and show callout** +1. **Legends: show/hide legends, highlight the corresponding bar/line on legend hover** +1. **Callout: Default/custom callout** +1. **Labels: x-Axis labels default/rotated** + +| **Test steps** | **Validation** | **Tool used** | +| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: | +| Test 1: [Snapshot testing] | | | +| - With only data prop, numerical data on x-axis. | Renders VerticalStackedBar chart correctly | RTL | +| - With HideLegend prop set to “true” | Should hide legends | Enzyme | +| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme | +| - With EnabledLegendsWrapLines set to “true” | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line | Enzyme | +| - With ShowXAxisLablesTooltip set to “true” | Should truncate x axis labels and show tooltip on x axis labels | Enzyme | +| - With WrapXAxisLables set to “true” | Should wrap x axis label values | Enzyme | +| - With isCalloutForStack set to “true” | Should render callout for stack properly | Enzyme | +| - With yAxisTickFormat set to “%d” |

Should render the y-axis ticks in the format specified

| Enzyme | +| - With hideLabels set to “true” | Should hide bar labels | Enzyme | +| Test 2: Basic props testing | | | +| - HideLegend prop set to “true” | Should not mount legend when hideLegend is true | Enzyme | +| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme | +| - HideTooltip prop set to “true” | Should not mount callout when hideTootip is true | Enzyme | +| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme | +| - onRenderCalloutPerStack prop is not given | Should not render onRenderCalloutPerStack | Enzyme | +| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme | +| - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme | +| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme | +| Test 3: Render calling with respective to props | | | +| - No prop changes: Mount VerticalStackedBar chart and then set the same props again | Render function should have been called twice | Enzyme | +| - Prop changes: Mount VerticalStackedBar chart and then set some other prop | Render function should have been called twice | Enzyme | +| Test 4: Mouse events | | | +| - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme | +| - Mouse move from one bar to other bar | Should render callout correctly on mouse move | Enzyme | +| - Mouse over on a bar with customized callout | Should render customized callout on mouseover | Enzyme | +| - Customized callout per stack on mouse over | Should render customized callout per stack correctly on mouseover | Enzyme | +| - Customized callout on a bar from one bar to other bar | Should render customized callout for stack on mouseover | Enzyme | +| Test 5: [Sub-Component]: Line | | | +| - Specify line data | Should render line with the data provided | RTL | +| Test 6: [Sub-Component]: Bar | | | +| - Specify bar color | Should render bar with the specified color | RTL | +| - Specify separate bars in a single bar | Should render stacked bar with specified data | RTL | +| - setMinimumBarHeight to “x” | Should render bars properly, bars below this height will be displayed at this height | RTL | +| - set barWidth to “x” | Should render bars with specified bar width | RTL | +| - set barGapMax to “x” | Should render bars with specified bar gap | RTL | +| - set barCornerRadius | Should render top bar with specified bar corner radius | RTL | +| Test 7: [Sub-Component]: Legends | | | +| - Hide legends | Should not show any rendered legends | RTL | +| - Hover mouse over line legends | Should reduce the opacity of the other lines/bars | RTL | +| - Hover mouse over bar legends | Should reduce the opacity of the other lines/bars | RTL | +| - Mouse move from one Legend to another Legend | Should reset the opacity of the lines on mouse leave a bar legend | RTL | +| - Single mouse click on bar legends | Should select legend on single mouse click on respective legend | RTL | +| - Double mouse click on bar legends | Should deselect legend on double mouse click on respective legend | RTL | +| - Single mouse click on line legends | Should select legend on single mouse click on respective legend | RTL | +| - Double mouse click on line legends | Should deselect legend on double mouse click on respective legend | RTL | +| Test 8: [Sub-Component]: Callout | | | +| - Hover mouse over a bar | Should call the handler on mouse over bar | RTL | +| - Hover mouse over a bar to display callout | Should show the default callout over that bar | RTL | +| - Hover mouse over a stacked bar | Should show the default stacked call out | RTL | +| - Hover mouse over the line | Should show the default callout over that line | RTL | +| - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL | +| - Specify custom callout and hover mouse over the line | Should show the custom callout over that line | RTL | +| - Mouse click on bar | Should call the handler on mouse click on the bar | RTL | +| Test 9: [Sub-Component]: x-axis labels | | | +| - Truncate x-axis labels | Should show the x-axis labels tooltip when hovered | RTL | +| - Rotate x-axis labels | Should rotate the x-axis labels by 45 degrees | RTL | +| Test 10: [Sub-Component]: Screen resolution | | | +| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL | +| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL | +| Test 11: Theme changed to Dark Theme | Should reflect theme change | RTL | diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index fe10275d7e34a0..f5de57bcfa6766 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.17.2", + "version": "5.17.4", "description": "Experimental React charting components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -38,7 +38,7 @@ }, "dependencies": { "@fluentui/react-focus": "^8.8.31", - "@fluentui/theme-samples": "^8.7.108", + "@fluentui/theme-samples": "^8.7.110", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "1.2.1", "@types/d3-axis": "1.0.10", @@ -64,7 +64,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.110.15", + "@fluentui/react": "^8.111.1", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 5a03d7c585b7c5..22adbd700a7e5f 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -293,7 +293,7 @@ export class AreaChartBase extends React.Component { this._onLegendClick(singleChartData.legend); }, @@ -890,7 +890,7 @@ export class AreaChartBase extends React.Component { + private _getAriaLabel(lineIndex: number, pointIndex: number): string { const line = this.props.data.lineChartData![lineIndex]; const point = line.data[pointIndex]; const formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x; @@ -898,7 +898,7 @@ export class AreaChartBase extends React.Component { expect(tree).toMatchSnapshot(); }); - it('renders hideLegend hhh correctly', async () => { + it('renders hideLegend correctly', async () => { wrapper = mount(); await new Promise(resolve => setTimeout(resolve)); wrapper.update(); diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx index 69b422bd6cfa8b..b1dee2e3204b73 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx @@ -1,22 +1,492 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { render, screen, fireEvent, act } from '@testing-library/react'; import * as React from 'react'; -import { queryAllByAttribute, render, waitFor } from '@testing-library/react'; -import { chartPoints, emptyChartPoints } from './AreaChart.test'; -import { AreaChart } from './index'; +import { DarkTheme } from '@fluentui/theme-samples'; +import { ThemeProvider } from '@fluentui/react'; +import { AreaChart, IAreaChartProps } from './index'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; + +import { getByClass, getById, testWithWait, testWithoutWait } from '../../utilities/TestUtility.test'; +import { AreaChartBase } from './AreaChart.base'; + +const beforeAll = () => { + jest.spyOn(AreaChartBase.prototype as any, '_getAriaLabel').mockReturnValue('08/25/2023'); +}; + +const chart1Points = [ + { + x: 20, + y: 9, + }, + { + x: 25, + y: 14, + }, + { + x: 30, + y: 14, + }, + { + x: 35, + y: 23, + }, + { + x: 40, + y: 20, + }, + { + x: 45, + y: 31, + }, + { + x: 50, + y: 29, + }, + { + x: 55, + y: 27, + }, + { + x: 60, + y: 37, + }, + { + x: 65, + y: 51, + }, +]; + +const chart2Points = [ + { + x: 20, + y: 21, + }, + { + x: 25, + y: 25, + }, + { + x: 30, + y: 10, + }, + { + x: 35, + y: 10, + }, + { + x: 40, + y: 14, + }, + { + x: 45, + y: 18, + }, + { + x: 50, + y: 9, + }, + { + x: 55, + y: 23, + }, + { + x: 60, + y: 7, + }, + { + x: 65, + y: 55, + }, +]; + +const chart3Points = [ + { + x: 20, + y: 30, + }, + { + x: 25, + y: 35, + }, + { + x: 30, + y: 33, + }, + { + x: 35, + y: 40, + }, + { + x: 40, + y: 10, + }, + { + x: 45, + y: 40, + }, + { + x: 50, + y: 34, + }, + { + x: 55, + y: 40, + }, + { + x: 60, + y: 60, + }, + { + x: 65, + y: 40, + }, +]; + +const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + color: 'green', + }, + { + legend: 'legend2', + data: chart2Points, + color: 'yellow', + }, + { + legend: 'legend3', + data: chart3Points, + color: 'blue', + }, +]; + +const chartData = { + chartTitle: 'Area chart multiple example', + lineChartData: chartPoints, +}; + +const chart1PointsWithDate = [ + { + x: new Date('01/06/2018'), + y: 5, + }, + { + x: new Date('01/08/2018'), + y: 16, + }, + { + x: new Date('01/16/2018'), + y: 6, + }, + { + x: new Date('02/06/2018'), + y: 30, + }, + { + x: new Date('02/16/2018'), + y: 10, + }, +]; + +const chart2PointsWithDate = [ + { + x: new Date('01/06/2018'), + y: 10, + }, + { + x: new Date('01/08/2018'), + y: 33, + }, + { + x: new Date('01/16/2018'), + y: 21, + }, + { + x: new Date('02/06/2018'), + y: 44, + }, + { + x: new Date('02/16/2018'), + y: 22, + }, +]; + +const chartPointsWithDate = [ + { + legend: 'legend1', + data: chart1PointsWithDate, + color: '#0099BC', + opacity: 0.7, + lineOptions: { + strokeWidth: 2, + strokeDasharray: '5 5', + }, + }, + { + legend: 'legend2', + data: chart2PointsWithDate, + color: '#77004D', + opacity: 0.8, + lineOptions: { + strokeWidth: 5, + stroke: DefaultPalette.blueDark, + }, + }, +]; + +const chartDataWithDates = { + chartTitle: 'Area chart styled example', + lineChartData: chartPointsWithDate, + pointOptions: { r: 10, strokeWidth: 3, opacity: 1, stroke: DefaultPalette.blueDark }, + pointLineOptions: { strokeWidth: 2, strokeDasharray: '10 10', stroke: DefaultPalette.blueDark }, +}; describe('Area chart rendering', () => { - test('Should re-render the Area chart with data', async () => { - // Arrange - const { container, rerender } = render(); - const getById = queryAllByAttribute.bind(null, 'id'); + testWithoutWait( + 'Should render the area chart with numeric x-axis data', + AreaChart, + { data: chartData }, + container => { + expect(container).toMatchSnapshot(); + }, + ); + + testWithoutWait( + 'Should render the area chart with date x-axis data', + AreaChart, + { data: chartDataWithDates }, + container => { + expect(container).toMatchSnapshot(); + }, + undefined, + beforeAll, + ); +}); + +describe('Area chart - Subcomponent Area', () => { + testWithoutWait('Should render the Areas with the specified colors', AreaChart, { data: chartData }, container => { + const areas = getById(container, /graph-areaChart/i); // Assert - expect(container).toMatchSnapshot(); - expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1); - // Act - rerender(); - await waitFor(() => { + expect(areas[0].getAttribute('fill')).toEqual('green'); + expect(areas[1].getAttribute('fill')).toEqual('yellow'); + expect(areas[2].getAttribute('fill')).toEqual('blue'); + }); +}); + +describe('Area chart - Subcomponent legend', () => { + testWithoutWait( + 'Should highlight the corresponding Area on mouse over on legends', + AreaChart, + { data: chartData }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + fireEvent.mouseOver(legend!); // Assert - expect(container).toMatchSnapshot(); - expect(getById(container, /_AreaChart_empty/i)).toHaveLength(0); + const areas = getById(container, /graph-areaChart/i); + expect(areas[0].getAttribute('fill-opacity')).toEqual('0.7'); + expect(areas[1].getAttribute('fill-opacity')).toEqual('0.1'); + expect(areas[2].getAttribute('fill-opacity')).toEqual('0.1'); + }, + ); + + testWithoutWait( + 'Should reduce opacity of the other lines in Area chat and opacity should be zero for selected Area', + AreaChart, + { data: chartData }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + fireEvent.mouseOver(legend!); + // Assert + const areaLines = getById(container, /line-areaChart/i); + expect(areaLines[0].getAttribute('opacity')).toEqual('0'); + expect(areaLines[1].getAttribute('opacity')).toEqual('0.1'); + expect(areaLines[2].getAttribute('opacity')).toEqual('0.1'); + }, + ); + + testWithoutWait( + 'Should highlight the corresponding Legend on mouse over on legends', + AreaChart, + { data: chartData }, + container => { + const legend1 = screen.queryByText('legend1'); + expect(legend1).toBeDefined(); + fireEvent.mouseOver(legend1!); + // Assert + expect(screen.queryByText('legend2')).toHaveStyle('opacity: 0.67'); + }, + ); + + testWithoutWait( + 'Should select legend on single mouse click on legends', + AreaChart, + { data: chartData, hideLegend: false }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + fireEvent.click(legend!); + // Assert + expect(getById(container, /graph-areaChart/i)[1]).toHaveAttribute('fill-opacity', '0.1'); + const firstLegend = screen.queryByText('legend1')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); + }, + ); + + testWithoutWait( + 'Should deselect legend on double mouse click on legends', + AreaChart, + { data: chartData, hideLegend: false }, + container => { + const legend = screen.queryByText('legend1'); + expect(legend).toBeDefined(); + + //single click on first legend + fireEvent.click(legend!); + expect(getById(container, /graph-areaChart/i)[1]).toHaveAttribute('fill-opacity', '0.1'); + const firstLegend = screen.queryByText('legend1')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); + // double click on same first legend + fireEvent.click(legend!); + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'false'); + }, + ); +}); + +describe('Area chart - Subcomponent callout', () => { + testWithWait( + 'Should show the callout over the area on mouse over', + AreaChart, + { data: chartData, calloutProps: { doNotLayer: true } }, + container => { + // Arrange + const areas = getById(container, /graph-areaChart/i); + fireEvent.mouseOver(areas[0]); + // Assert + expect(getById(container, /toolTipcallout/i)).toBeDefined(); + }, + ); + + testWithWait( + 'Should show the stacked callout over the are on mouse over', + AreaChart, + { data: chartData, calloutProps: { doNotLayer: true } }, + container => { + // Arrange + const areas = getById(container, /graph-areaChart/i); + expect(areas).toHaveLength(3); + fireEvent.mouseOver(areas[0]); + // Assert + expect(getByClass(container, /calloutlegendText/i)).toBeDefined(); + expect(getByClass(container, /calloutlegendText/i)).toHaveLength(3); + }, + ); + + testWithWait( + 'Should show the custom callout over the Area on mouse over', + AreaChart, + { + data: chartData, + calloutProps: { doNotLayer: true }, + onRenderCalloutPerDataPoint: (props: IAreaChartProps) => + props ? ( +
+

Custom Callout Content

+
+ ) : null, + }, + container => { + const areas = getById(container, /graph-areaChart/i); + fireEvent.mouseOver(areas[0]); + // Assert + expect(getById(container, /toolTipcallout/i)).toBeDefined(); + }, + ); +}); + +describe('Area chart - Subcomponent xAxis Labels', () => { + testWithWait( + 'Should show the x-axis labels tooltip when hovered', + AreaChart, + { data: chartDataWithDates, showXAxisLablesTooltip: true }, + container => { + const xAxisLabels = getById(container, /showDots/i); + fireEvent.mouseOver(xAxisLabels[0]); + // Assert + expect(getById(container, /showDots/i)[0]!.textContent!).toEqual('Jan ...'); + }, + undefined, + beforeAll, + ); + + testWithWait( + 'Should show rotated x-axis labels', + AreaChart, + { data: chartDataWithDates, rotateXAxisLables: true }, + container => { + // Assert + expect(getByClass(container, /tick/i)[0].getAttribute('transform')).toContain('translate(39.03658536585366,0)'); + }, + undefined, + beforeAll, + ); +}); + +describe('Screen resolution', () => { + const originalInnerWidth = global.innerWidth; + const originalInnerHeight = global.innerHeight; + afterEach(() => { + global.innerWidth = originalInnerWidth; + global.innerHeight = originalInnerHeight; + act(() => { + global.dispatchEvent(new Event('resize')); }); }); + + testWithWait( + 'Should remain unchanged on zoom in', + AreaChart, + { data: chartData, rotateXAxisLables: true, width: 300, height: 300 }, + container => { + // Arrange + global.innerWidth = window.innerWidth / 2; + global.innerHeight = window.innerHeight / 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + // Assert + expect(container).toMatchSnapshot(); + }, + ); + + testWithWait( + 'Should remain unchanged on zoom out', + AreaChart, + { data: chartData, rotateXAxisLables: true, width: 300, height: 300 }, + container => { + // Arrange + global.innerWidth = window.innerWidth * 2; + global.innerHeight = window.innerHeight * 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + // Assert + expect(container).toMatchSnapshot(); + }, + ); +}); + +test('Should reflect theme change', () => { + // Arrange + const { container } = render( + + + , + ); + // Assert + expect(container).toMatchSnapshot(); }); diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index 516d988614d009..beb2e89879ac67 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -3150,7 +3150,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1` `; -exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = ` +exports[`AreaChart snapShot testing renders hideLegend correctly 1`] = `
- -`; - -exports[`Area chart rendering Should re-render the Area chart with data 2`] = ` +exports[`Area chart rendering Should render the area chart with date x-axis data 1`] = `
-
-
- - - - - - -`; - -exports[`AreaChart - mouse events Should render callout correctly on mouseover 1`] = ` - -`; - -exports[`AreaChart snapShot testing Should not render circles when optimizeLargeData is true 1`] = ` - -`; - -exports[`AreaChart snapShot testing Should render with default colors when line color is not provided 1`] = ` - -`; - -exports[`AreaChart snapShot testing renders Areachart correctly 1`] = ` -