Merge branch 'master' into chore/remove-export-star-2

Author: layershifter

apps/public-docsite-v9/package.json

@@ -44,6 +44,7 @@
     "react-hook-form": "^5.7.2",
     "@fluentui/react-nav-preview": "*",
     "@fluentui/react-motion-components-preview": "*",
-    "@fluentui/react-icons-compat": "*"
+    "@fluentui/react-icons-compat": "*",
+    "@fluentui/react-color-picker-preview": "*"
   }
 }

apps/public-docsite-v9/src/Concepts/Slots/Slots.stories.mdx

@@ -174,7 +174,7 @@ If you need to replace the slot's entire content, including the containing eleme
 pass a render function as the children.
 
 This is an escape hatch in the slots API, so prefer the other techniques whenever possible.
-If you replace the entire slot, very accessibility, layout, and styling still work properly.
+If you replace the entire slot, verify accessibility, layout, and styling still work properly.
 
 By passing `renderBigLetterIcon` as the `children`, the `span` that normally contains the icon is replaced with an `b` (bold).
 

change/@fluentui-react-charting-1fd94ef3-bdd1-4473-b5cf-5a5f67f3a547.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "enable negativeData prop in declarative charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-b2076988-12cf-4ef9-9ee6-8ef16ea4a242.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(Collapse): add margin to whitespace animation",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charts-preview-803c5a15-3686-44e2-827f-e70720369036.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(motion): Refactor scale, migrate to new variant structure",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-components-preview-19d4910b-6f0a-4f0f-a0c4-d668280c25c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor(Toast): replace custom component with CollapseDelayed",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-components-preview-e2694b39-2078-4d73-ae64-e1515473b8e0.json

@@ -1,6 +1,57 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Fri, 06 Dec 2024 07:21:16 GMT",
+      "tag": "@fluentui/react-charting_v5.23.21",
+      "version": "5.23.21",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "f42240c92b9d09297a5cb21b195604ed7526d192",
+            "comment": "support negative y values in Vertical Bar chart"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 Dec 2024 07:23:45 GMT",
+      "tag": "@fluentui/react-charting_v5.23.20",
+      "version": "5.23.20",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "fe4dad5c896b6a08aa571cfcd5eabebc8cbc0c8a",
+            "comment": "feat: add plotly adapter for histogram"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 03 Dec 2024 07:20:27 GMT",
+      "tag": "@fluentui/react-charting_v5.23.19",
+      "version": "5.23.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "99e5e6a9d394d6be64a58ac4ffb38b11023bcb72",
+            "comment": "Create declarative chart component"
+          },
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "f97d1c3965fcd9dc372123b7a9c47f2c8220fd1d",
+            "comment": "Add grouped vertical bar chart plotly adapter"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 02 Dec 2024 07:20:01 GMT",
       "tag": "@fluentui/react-charting_v5.23.18",

change/@fluentui-react-toast-d5b54519-be81-485d-af06-6b728958fd45.json

@@ -1,9 +1,37 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Mon, 02 Dec 2024 07:20:01 GMT and should not be manually modified.
+This log was last generated on Fri, 06 Dec 2024 07:21:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.21)
+
+Fri, 06 Dec 2024 07:21:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.20..@fluentui/react-charting_v5.23.21)
+
+### Patches
+
+- support negative y values in Vertical Bar chart ([PR #33377](https://github.com/microsoft/fluentui/pull/33377) by [email protected])
+
+## [5.23.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.20)
+
+Thu, 05 Dec 2024 07:23:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.19..@fluentui/react-charting_v5.23.20)
+
+### Patches
+
+- feat: add plotly adapter for histogram ([PR #33399](https://github.com/microsoft/fluentui/pull/33399) by [email protected])
+
+## [5.23.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.19)
+
+Tue, 03 Dec 2024 07:20:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.18..@fluentui/react-charting_v5.23.19)
+
+### Patches
+
+- Create declarative chart component ([PR #33348](https://github.com/microsoft/fluentui/pull/33348) by [email protected])
+- Add grouped vertical bar chart plotly adapter ([PR #33383](https://github.com/microsoft/fluentui/pull/33383) by [email protected])
+
 ## [5.23.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.18)
 
 Mon, 02 Dec 2024 07:20:01 GMT 

packages/charts/react-charting/CHANGELOG.json

@@ -293,6 +293,7 @@ export interface ICartesianChartProps {
     showXAxisLablesTooltip?: boolean;
     strokeWidth?: number;
     styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+    supportNegativeData?: boolean;
     svgProps?: React_2.SVGProps<SVGSVGElement>;
     theme?: ITheme;
     tickFormat?: string;
@@ -1043,7 +1044,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined) => ScaleBand<string>;
     // Warning: (ae-forgotten-export) The symbol "IYAxisParams" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "IAxisData" needs to be exported by the entry point index.d.ts
-    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean) => ScaleLinear<number, number, never>;
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean) => ScaleLinear<number, number, never>;
     culture?: string;
     customizedCallout?: any;
     datasetForXAxisDomain?: string[];

packages/charts/react-charting/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.18",
+  "version": "5.23.21",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/charts/react-charting/etc/react-charting.api.md

@@ -268,6 +268,158 @@ const chartPointsWithDate = [
   },
 ];
 
+const negativeChart1Points = [
+  {
+    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 negativeChart2Points = [
+  {
+    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 negativeChart3Points = [
+  {
+    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 negativeChartPoints = [
+  {
+    legend: 'legend1',
+    data: negativeChart1Points,
+    color: 'green',
+  },
+  {
+    legend: 'legend2',
+    data: negativeChart2Points,
+    color: 'yellow',
+  },
+  {
+    legend: 'legend3',
+    data: negativeChart3Points,
+    color: 'blue',
+  },
+];
+
+const negativeChartData = {
+  chartTitle: 'Area chart multiple negative y value example',
+  lineChartData: negativeChartPoints,
+};
+
 const tickValues = [
   new Date('2020-01-06T00:00:00.000Z'),
   new Date('2020-01-08T00:00:00.000Z'),
@@ -350,6 +502,16 @@ describe('Area chart rendering', () => {
       expect(container).toMatchSnapshot();
     },
   );
+
+  testWithoutWait(
+    'Should render the Area Chart with negative y values',
+    AreaChart,
+    { data: negativeChartData, supportNegativeData: true },
+    container => {
+      //Asset
+      expect(container).toMatchSnapshot();
+    },
+  );
 });
 
 describe('Area chart - Subcomponent Area', () => {