Merge branch 'master' of https://github.com/microsoft/fluentui into usr/agupta/v9/fixDoublePaddingIssue

Anush · Anush · commit 298df8b1be9b · 2025-11-19T17:36:52.000+05:30
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
@@ -11,7 +11,7 @@
     "lint": "just-scripts lint",
     "start": "storybook dev -p 3000",
     "type-check": "tsc -p . --noEmit --baseUrl .",
-    "test-vr": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters"
+    "test-vr": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters --bailOnStoriesError"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
diff --git a/apps/vr-tests/src/stories/ComboBox.stories.tsx b/apps/vr-tests/src/stories/ComboBox.stories.tsx
@@ -50,7 +50,7 @@ export default {
         .snapshot('hover', { cropTo: '.testWrapper' })
         .click('.ms-Button-flexContainer')
         .hover('.ms-Button-flexContainer')
-        .snapshot('click', { cropTo: '.ms-Layer' }) // Dropdown extends beyond testWrapper
+        .snapshot('click') // Dropdown extends beyond testWrapper
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx b/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenu.stories.tsx
@@ -243,12 +243,12 @@ export default {
   parameters: {
     storyWright: {
       steps: new Steps()
-        .snapshot('default', { cropTo: '.ms-Layer' })
+        .snapshot('default')
         .hover('.ms-ContextualMenu-linkContent')
-        .snapshot('hover', { cropTo: '.ms-Layer' })
+        .snapshot('hover')
         .click('.ms-ContextualMenu-linkContent')
         .hover('.ms-ContextualMenu-linkContent')
-        .snapshot('click', { cropTo: '.ms-Layer' })
+        .snapshot('click')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx b/apps/vr-tests/src/stories/ContextutalMenu/ContextualMenuSubmenus.stories.tsx
@@ -56,13 +56,13 @@ export default {
     storyWright: {
       steps: new Steps()
         .click('#button')
-        .snapshot('menu opened', { cropTo: '.ms-Layer' })
+        .snapshot('menu opened')
         .hover('#parent')
-        .snapshot('parent hovered', { cropTo: '.ms-Layer' })
+        .snapshot('parent hovered')
         .hover('#item1')
-        .snapshot('item1 hovered', { cropTo: '.ms-Layer' })
+        .snapshot('item1 hovered')
         .hover('#item2')
-        .snapshot('item2 hovered', { cropTo: '.ms-Layer' })
+        .snapshot('item2 hovered')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx b/apps/vr-tests/src/stories/DatePicker/DatePicker.stories.tsx
@@ -39,11 +39,11 @@ export default {
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
         .click('.ms-DatePicker')
         .hover('.ms-DatePicker')
-        .snapshot('click', { cropTo: '.ms-Layer' })
+        .snapshot('click')
         .hover(daySelector)
-        .snapshot('hover day', { cropTo: '.ms-Layer' })
+        .snapshot('hover day')
         .hover(monthSelector)
-        .snapshot('hover month', { cropTo: '.ms-Layer' })
+        .snapshot('hover month')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx b/apps/vr-tests/src/stories/DatePicker/DatePickerDisabled.stories.tsx
@@ -37,7 +37,7 @@ export default {
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
         .click('.ms-DatePicker')
         .hover('.ms-DatePicker')
-        .snapshot('click', { cropTo: '.ms-Layer' })
+        .snapshot('click')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx b/apps/vr-tests/src/stories/DatePicker/DatePickerNoMonthOption.stories.tsx
@@ -38,9 +38,9 @@ export default {
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
         .click('.ms-DatePicker')
         .hover('.ms-DatePicker')
-        .snapshot('click', { cropTo: '.ms-Layer' })
+        .snapshot('click')
         .hover(daySelector)
-        .snapshot('hover day', { cropTo: '.ms-Layer' })
+        .snapshot('hover day')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx b/apps/vr-tests/src/stories/Dropdown/Dropdown.stories.tsx
@@ -23,9 +23,9 @@ export default {
         .snapshot('hover', { cropTo: '.testWrapper' })
         .click('.ms-Dropdown')
         .hover('.ms-Dropdown')
-        .snapshot('click', { cropTo: '.ms-Layer' })
+        .snapshot('click')
         .hover('.ms-Dropdown-item')
-        .snapshot('hover item', { cropTo: '.ms-Layer' })
+        .snapshot('hover item')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx b/apps/vr-tests/src/stories/Dropdown/DropdownDisabled.stories.tsx
@@ -17,7 +17,7 @@ export default {
         .snapshot('hover', { cropTo: '.testWrapper' })
         .click('.ms-Dropdown')
         .hover('.ms-Dropdown')
-        .snapshot('click', { cropTo: '.ms-Layer' })
+        .snapshot('click')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/HoverCard.stories.tsx b/apps/vr-tests/src/stories/HoverCard.stories.tsx
@@ -28,8 +28,8 @@ export default {
     storyWright: {
       steps: new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('.ms-HoverCard-content')
-        .snapshot('hover', { cropTo: '.testWrapper' })
+        .click('.ms-HoverCard-host')
+        .snapshot('fully expanded with test content')
         .end(),
     },
   } satisfies StoryParameters,
diff --git a/apps/vr-tests/src/stories/Layer.stories.tsx b/apps/vr-tests/src/stories/Layer.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
   decorators: [TestWrapperDecorator],
   parameters: {
-    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.ms-Layer' }).end() },
+    storyWright: { steps: new Steps().snapshot('default').end() },
   } satisfies StoryParameters,
 };
 
diff --git a/apps/vr-tests/src/stories/PivotOverflow.stories.tsx b/apps/vr-tests/src/stories/PivotOverflow.stories.tsx
@@ -23,17 +23,17 @@ export default {
   parameters: {
     storyWright: {
       steps: new Steps()
-        .executeScript('document.getElementById("testWrapper").style.width = "500px"')
+        .executeScript('document.querySelector(".testWrapper").style.width = "500px"')
         .snapshot('Medium', { cropTo: '.testWrapper' })
-        .executeScript('document.getElementById("testWrapper").style.width = "750px"')
+        .executeScript('document.querySelector(".testWrapper").style.width = "750px"')
         .snapshot('Wide', { cropTo: '.testWrapper' })
-        .executeScript('document.getElementById("testWrapper").style.width = "250px"')
+        .executeScript('document.querySelector(".testWrapper").style.width = "250px"')
         .click('.ms-Pivot-overflowMenuButton')
-        .wait(1500)
+        .wait(2500)
         .click('.ms-Pivot-linkInMenu[data-last-tab]')
         .snapshot('Narrow - Last tab selected', { cropTo: '.testWrapper' })
         .click('.ms-Pivot-overflowMenuButton')
-        .wait(1500)
+        .wait(2500)
         .hover('.ms-Pivot-overflowMenuButton')
         .snapshot('Narrow - Overflow menu', { cropTo: '.testWrapper' })
         .end(),
diff --git a/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx b/apps/vr-tests/src/stories/react-charting/AreaChart.stories.tsx
@@ -18,7 +18,11 @@ export default {
 
 const stepsWithHover = new Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
-  .hover('.ms-AreaChart-line')
+  // to hover over the area charts and show the callout
+  .executeScript(
+    // eslint-disable-next-line @fluentui/max-len
+    `document.querySelector('rect').dispatchEvent(new MouseEvent('mouseover',{bubbles: true,cancelable: true,clientX:400,clientY:100}))`,
+  )
   .snapshot('hover', { cropTo: '.testWrapper' })
   .end();
 
diff --git a/change/@fluentui-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json b/change/@fluentui-react-charts-6ab85af9-ef9d-4b32-bbc9-d62ce02b63b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add support for x rounded tick values ",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-style-utilities-34d5c2fa-c014-4bb0-a072-688ffb3b876d.json b/change/@fluentui-style-utilities-34d5c2fa-c014-4bb0-a072-688ffb3b876d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "cdn url change to support latest vault/list filetype icons",
+  "packageName": "@fluentui/style-utilities",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.tsx
@@ -217,6 +217,8 @@ export const CartesianChart: React.FunctionComponent<ModifiedCartesianChartProps
       containerWidth: containerWidth,
       hideTickOverlap: props.rotateXAxisLables ? false : hideTickOverlap,
       calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
+      xMinValue: props.xMinValue,
+      xMaxValue: props.xMaxValue,
       ...props.xAxis,
     };
 
diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -214,6 +214,18 @@ const getYMinMaxValues = (series: Data, layout: Partial<Layout> | undefined) =>
   return {};
 };
 
+const getXMinMaxValues = (series: Data, layout: Partial<Layout> | undefined) => {
+  const range = getXAxisProperties(series, layout)?.range;
+  if (range && range.length === 2) {
+    return {
+      xMinValue: range[0],
+      xMaxValue: range[1],
+      showRoundOffXTickValues: false,
+    };
+  }
+  return {};
+};
+
 const getYAxisProperties = (series: Data, layout: Partial<Layout> | undefined): Partial<LayoutAxis> | undefined => {
   return layout?.yaxis;
 };
@@ -1486,6 +1498,7 @@ export const transformPlotlyJsonToVSBCProps = (
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
     roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
     ...yAxisTickFormat,
@@ -1660,6 +1673,8 @@ export const transformPlotlyJsonToGVBCProps = (
     hideLegend,
     roundCorners: true,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(processedInput.data[0], processedInput.layout),
     ...getTitles(processedInput.layout),
     ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout),
     ...getYMinMaxValues(processedInput.data[0], processedInput.layout),
@@ -1771,6 +1786,8 @@ export const transformPlotlyJsonToVBCProps = (
     hideLegend,
     roundCorners: true,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getYMinMaxValues(input.data[0], input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
@@ -2051,6 +2068,8 @@ const transformPlotlyJsonToScatterTraceProps = (
     wrapXAxisLabels: shouldWrapLabels,
     optimizeLargeData: numDataPoints > 1000,
     showYAxisLables: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
     ...yAxisTickFormat,
@@ -2068,7 +2087,6 @@ const transformPlotlyJsonToScatterTraceProps = (
   } else {
     return {
       data: isScatterChart ? scatterChartProps : chartProps,
-      roundedTicks: true,
       ...commonProps,
       ...yMinMax,
       ...(isScatterChart
@@ -2158,6 +2176,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (
     showYAxisLablesTooltip: true,
     hideLegend,
     roundCorners: true,
+    roundedTicks: true,
+    ...getXMinMaxValues(input.data[0], input.layout),
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getBarProps(input.data, input.layout, true),
diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap
@@ -334,6 +334,8 @@ Object {
   "hideTickOverlap": true,
   "mode": "plotly",
   "roundCorners": true,
+  "roundedTicks": true,
+  "showRoundOffXTickValues": false,
   "showYAxisLables": true,
   "width": 850,
   "wrapXAxisLables": true,
@@ -345,6 +347,8 @@ Object {
     "May",
   ],
   "xAxisTitle": "Votes",
+  "xMaxValue": 1830.6731869091736,
+  "xMinValue": -198.2562959184288,
   "yAxisCategoryOrder": Array [
     2000,
     2100,
@@ -3037,12 +3041,16 @@ Object {
   "hideTickOverlap": true,
   "noOfCharsToTruncate": 20,
   "roundCorners": true,
+  "roundedTicks": true,
   "secondaryYAxistitle": "",
+  "showRoundOffXTickValues": false,
   "showYAxisLables": true,
   "showYAxisLablesTooltip": true,
   "width": 850,
   "xAxisCategoryOrder": "data",
   "xAxisTitle": "Votes",
+  "xMaxValue": 1830.6731869091736,
+  "xMinValue": -198.2562959184288,
   "yAxisCategoryOrder": Array [
     "Laravel",
     "Symfony2",
@@ -5039,6 +5047,7 @@ Object {
   "hideTickOverlap": true,
   "mode": "tonexty",
   "optimizeLargeData": false,
+  "roundedTicks": true,
   "showYAxisLables": true,
   "supportNegativeData": true,
   "useUTC": false,
@@ -5479,6 +5488,7 @@ Object {
   "maxBarWidth": 50,
   "mode": "histogram",
   "roundCorners": true,
+  "roundedTicks": true,
   "showYAxisLables": true,
   "width": undefined,
   "wrapXAxisLables": false,
diff --git a/packages/charts/react-charts/library/src/utilities/utilities.ts b/packages/charts/react-charts/library/src/utilities/utilities.ts
@@ -176,6 +176,8 @@ export interface IXAxisParams extends AxisProps {
   containerWidth: number;
   hideTickOverlap?: boolean;
   calcMaxLabelWidth: (x: (string | number)[]) => number;
+  xMaxValue?: number;
+  xMinValue?: number;
 }
 export interface ITickParams {
   tickValues?: Date[] | number[] | string[];
@@ -263,8 +265,12 @@ export function createNumericXAxis(
     tick0,
     tickText,
   } = xAxisParams;
+  const dStartValue = domainNRangeValues.dStartValue as number;
+  const dEndValue = domainNRangeValues.dEndValue as number;
+  const finalXmin = xAxisParams.xMinValue !== undefined ? Math.min(dStartValue, xAxisParams.xMinValue) : dStartValue;
+  const finalXmax = xAxisParams.xMaxValue !== undefined ? Math.max(dEndValue, xAxisParams.xMaxValue) : dEndValue;
   const xAxisScale = createNumericScale(scaleType)
-    .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
+    .domain([finalXmin, finalXmax])
     .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
   showRoundOffXTickValues && xAxisScale.nice();
 
diff --git a/packages/style-utilities/etc/style-utilities.api.md b/packages/style-utilities/etc/style-utilities.api.md
@@ -85,7 +85,7 @@ export { DefaultPalette }
 export const EdgeChromiumHighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
 
 // @public (undocumented)
-export const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20251010.003";
+export const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20251107.003";
 
 // @public
 export function focusClear(): IRawStyle;
diff --git a/packages/style-utilities/src/cdn.ts b/packages/style-utilities/src/cdn.ts
@@ -1 +1 @@
-export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20251010.003';
+export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20251107.003';
