Merge branch 'master' of https://github.com/microsoft/fluentui into r…

…esponsive-charts-v8-2
microsoft · Jan 27, 2025 · dd7b69d · dd7b69d
2 parents bf8d0ba + 0230517
commit dd7b69d
Show file tree

Hide file tree

Showing 768 changed files with 20,250 additions and 3,465 deletions.
diff --git a/.github/ISSUE_TEMPLATE/01-react-components-bug-report.yml b/.github/ISSUE_TEMPLATE/01-react-components-bug-report.yml
@@ -26,8 +26,15 @@ body:
         - Breadcrumb
         - Button
         - Card
+        - CardFooter
+        - CardHeader
+        - CardPreview
+        - Carousel
+        - CarouselNav
         - Checkbox
         - Combobox
+        - CompoundButton
+        - Counter Badge
         - DataGrid
         - Dialog
         - Divider
@@ -38,14 +45,19 @@ body:
         - Image
         - InfoLabel
         - Input
+        - InteractionTag
         - Label
         - Link
+        - List
         - Menu
+        - MenuButton
+        - MenuList
         - MessageBar
         - Overflow
         - Persona
         - Popover
         - Portal
+        - PresenceBadge
         - ProgressBar
         - RadioGroup
         - Rating
@@ -56,32 +68,37 @@ body:
         - Slider
         - SpinButton
         - Spinner
+        - SplitButton
         - SwatchPicker
         - Switch
-        - Table
         - TabList
+        - Table
         - Tag
+        - TagGroup
         - TagPicker
         - TeachingPopover
         - Text
         - Textarea
         - Toast
+        - ToggleButton
         - Toolbar
         - Tooltip
         - Tree
+        - ColorPicker (Preview)
+        - Nav (Preview)
+        - Virtualizer (Preview)
+        - VirtualizerScrollView (Preview)
+        - VirtualizerScrollViewDynamic (Preview)
         - Calendar (Compat)
         - DatePicker (Compat)
         - TimePicker (Compat)
-        - Carousel (Preview)
-        - List (Preview)
-        - Nav (Preview)
-        - Virtualizer (Preview)
-        - Motion
         - Icons
-        - Theme/Tokens
-        - Utilities (utilities we provide besides Components, e.g. apis from react-utilities)
-        - Migration Shims v0
-        - Migration Shims v8
+        - Migration Shims V0
+        - Migration Shims V8
+        - Motion
+        - Theme
+        - Tokens
+        - Utilities
         - Other...
     validations:
       required: true

diff --git a/.github/workflows/pr-vrt-comment.yml b/.github/workflows/pr-vrt-comment.yml
@@ -4,6 +4,10 @@ on:
     workflows: ['VRT CI']
     types:
       - completed
+    branches:
+      - master
+      # remove following once CRT testing is done
+      - vrt-gha-testing
 
 concurrency:
   # see https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-only-cancel-in-progress-jobs-or-runs-for-the-current-workflow

diff --git a/.github/workflows/pr-vrt.yml b/.github/workflows/pr-vrt.yml
@@ -1,6 +1,9 @@
 name: VRT CI
 on:
   pull_request:
+    # TODO: once testing is done enable pull_request on all branches again
+    branches:
+      - vrt-gha-testing
 
 concurrency:
   # see https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-only-cancel-in-progress-jobs-or-runs-for-the-current-workflow

diff --git a/README.md b/README.md
@@ -17,8 +17,8 @@ The following table will help you navigate the 3 projects and understand their d
 | **Used By**     | Microsoft 365 | Office | Edge |
 | **Read Me**     | [README.md](/packages/react-components/react-components/README.md) | [README.md](/packages/react/README.md)| [README.md](/packages/web-components/README.md) |
 | **Changelog** | [CHANGELOG.md](/packages/react-components/react-components/CHANGELOG.md) | [CHANGELOG.md](/packages/react/CHANGELOG.md) | [CHANGELOG.md](/packages/web-components/CHANGELOG.md) |
-| **Repo**        | [packages/react-components](/packages/react-components/react-components/CHANGELOG.md) | [./packages/react](/packages/react) | [./packages/web-components](/packages/web-components) |
-| **Quick Start** | [Quick Start](https://react.fluentui.dev/?path=/docs/concepts-developer-quick-start--page) | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) |
+| **Repo**        | [packages/react-components](/packages/react-components/react-components) | [./packages/react](/packages/react) | [./packages/web-components](/packages/web-components) |
+| **Quick Start** | [Quick Start](https://react.fluentui.dev/?path=/docs/concepts-developer-quick-start--docs) | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) |
 | **Docs**        | [https://react.fluentui.dev/](https://react.fluentui.dev/) | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) |
 | **NPM**         | `@fluentui/react-components` | `@fluentui/react`| `@fluentui/web-components` |
 | **Version**     | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components/beta?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components/v/3.0.0-beta.15) |

diff --git a/apps/chart-docsite/.eslintrc.json b/apps/chart-docsite/.eslintrc.json
@@ -4,7 +4,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
-    "deprecation/deprecation": "off",
+    "@typescript-eslint/no-deprecated": "off",
     "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
   }
 }
diff --git a/apps/public-docsite-resources/.eslintrc.json b/apps/public-docsite-resources/.eslintrc.json
@@ -5,7 +5,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/member-ordering": "off",
-    "deprecation/deprecation": "off",
-    "no-restricted-globals": "off"
+    "no-restricted-globals": "off",
+    "@typescript-eslint/no-deprecated": "off"
   }
 }
diff --git a/apps/public-docsite-v9/.eslintrc.json b/apps/public-docsite-v9/.eslintrc.json
@@ -4,7 +4,7 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
-    "deprecation/deprecation": "off",
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
+    "@typescript-eslint/no-deprecated": "off"
   }
 }
diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx
@@ -22,7 +22,7 @@ No matter what theme is used, the component styles are always the same. The only
 
 Those tokens are resolved to CSS variables. The `FluentProvider` component is responsible for setting the values of the CSS variables in DOM and changing them when the theme changes. When the theme is switched, only the variables are changed, all styles remain the same.
 
-Place a `<FluentProvider />` at the root of your app and pass a theme to the `theme` prop. The provider will render a `div` and set all tokens as CSS variables on that element. The provider also propagates CCS variables to React portals created with [Portal component](?path=/docs/components-portal--default).
+Place a `<FluentProvider />` at the root of your app and pass a theme to the `theme` prop. The provider will render a `div` and set all tokens as CSS variables on that element. The provider also propagates CSS variables to React portals created with [Portal component](?path=/docs/components-portal--default).
 
 ```jsx
 import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';

diff --git a/apps/public-docsite/.eslintrc.json b/apps/public-docsite/.eslintrc.json
@@ -3,10 +3,10 @@
   "root": true,
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
-    "deprecation/deprecation": "off",
     "import/no-webpack-loader-syntax": "off", // ok in this project
     "prefer-const": "off",
     "react/jsx-no-bind": "off",
-    "no-restricted-globals": "off"
+    "no-restricted-globals": "off",
+    "@typescript-eslint/no-deprecated": "off"
   }
 }
diff --git a/apps/theming-designer/.eslintrc.json b/apps/theming-designer/.eslintrc.json
@@ -3,8 +3,8 @@
   "root": true,
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
-    "deprecation/deprecation": "off",
     "prefer-const": "off",
-    "no-restricted-globals": "off"
+    "no-restricted-globals": "off",
+    "@typescript-eslint/no-deprecated": "off"
   }
 }
diff --git a/apps/vr-tests-react-components/.eslintrc.json b/apps/vr-tests-react-components/.eslintrc.json
@@ -7,8 +7,8 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/naming-convention": "off",
     "@typescript-eslint/jsx-no-bind": "off",
-    "deprecation/deprecation": "off",
     "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
-    "@nx/workspace-no-restricted-globals": "off"
+    "@nx/workspace-no-restricted-globals": "off",
+    "@typescript-eslint/no-deprecated": "off"
   }
 }
diff --git a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
@@ -29,7 +29,7 @@ export const Basic = () => {
   return (
     <div style={{ padding: 10 }}>
       <DonutChart
-        culture={window.navigator.language}
+        culture="en-US"
         data={data}
         innerRadius={55}
         href="https://developer.microsoft.com/en-us/"

diff --git a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
@@ -129,7 +129,7 @@ export const Basic = () => {
 
   return (
     <div style={{ padding: '10px' }}>
-      <HorizontalBarChart culture={window.navigator.language} data={data} hideRatio={hideRatio} width={600} />
+      <HorizontalBarChart culture="en-US" data={data} hideRatio={hideRatio} width={600} />
     </div>
   );
 };

diff --git a/apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx
@@ -149,7 +149,7 @@ export const Basic = () => {
   return (
     <div style={rootStyle}>
       <LineChart
-        culture={window.navigator.language}
+        culture="en-US"
         data={data}
         legendsOverflowText={'Overflow Items'}
         yMinValue={200}

diff --git a/apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx
@@ -115,7 +115,7 @@ export const BasicSecondaryYAxis = () => {
   return (
     <div style={rootStyle}>
       <VerticalBarChart
-        culture={window.navigator.language}
+        culture="en-US"
         chartTitle="Vertical bar chart basic example "
         data={points}
         width={650}

diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { ColorPicker } from '@fluentui/react-color-picker-preview';
+import { ColorPicker, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview';
 import { SampleColorPicker } from './utils';
 import { Steps } from 'storywright';
 
@@ -15,6 +15,22 @@ export default {
 
 export const Default = () => <SampleColorPicker color={{ h: 109, s: 1, v: 0.91 }} />;
 
+export const ColorSliders = () => (
+  <>
+    <ColorSlider color={{ h: 109, s: 1, v: 0.9 }} />
+    <ColorSlider color={{ h: 184, s: 1, v: 0.9 }} vertical />
+  </>
+);
+
+export const AlphaSliders = () => (
+  <>
+    <AlphaSlider color={{ h: 12, s: 1, v: 0.9, a: 0.7 }} />
+    <AlphaSlider color={{ h: 59, s: 1, v: 1 }} vertical />
+    <AlphaSlider color={{ h: 276, s: 1, v: 0.9, a: 0.2 }} transparency />
+    <AlphaSlider color={{ h: 332, s: 1, v: 0.9, a: 0.1 }} transparency vertical />
+  </>
+);
+
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);

diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx
@@ -6,11 +6,24 @@ import {
   ColorSlider,
   type ColorPickerProps,
 } from '@fluentui/react-color-picker-preview';
+import { makeStyles } from '@griffel/react';
 
-export const SampleColorPicker = (props: ColorPickerProps) => (
-  <ColorPicker {...props}>
-    <ColorArea />
-    <ColorSlider />
-    <AlphaSlider />
-  </ColorPicker>
-);
+const useStyles = makeStyles({
+  example: {
+    width: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+});
+
+export const SampleColorPicker = (props: ColorPickerProps) => {
+  const styles = useStyles();
+  return (
+    <ColorPicker className={styles.example} {...props}>
+      <ColorArea />
+      <ColorSlider />
+      <AlphaSlider />
+    </ColorPicker>
+  );
+};