Merge branch 'master' into feat/ci_dry_run

apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.stories.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverSurface,
+  Button,
+  makeStyles,
+  tokens,
+  type PositioningRect,
+  useIsomorphicLayoutEffect,
+} from '@fluentui/react-components';
+
+const useClasses = makeStyles({
+  area: {
+    border: `2px solid ${tokens.colorStatusDangerBackground3}`,
+    padding: '60px 20px 20px 20px',
+    width: '300px',
+    height: '300px',
+
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'end',
+    justifyContent: 'space-between',
+    position: 'relative',
+
+    '::before': {
+      content: '"Container"',
+      position: 'absolute',
+      padding: `${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
+
+      top: 0,
+      left: 0,
+
+      color: tokens.colorStatusDangerBackground1,
+      backgroundColor: tokens.colorStatusDangerBackground3,
+    },
+  },
+  boundary: {
+    width: '320px',
+    height: '320px',
+    outline: `2px solid ${tokens.colorBrandBackground}`,
+
+    position: 'absolute',
+    top: '50px',
+    left: '10px',
+    pointerEvents: 'none',
+
+    '::before': {
+      content: '"Boundary"',
+      position: 'absolute',
+      padding: `${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
+
+      top: 0,
+      left: 0,
+
+      color: tokens.colorNeutralForegroundOnBrand,
+      backgroundColor: tokens.colorBrandBackground,
+    },
+  },
+});
+
+export const OverflowBoundaryRect = () => {
+  const classes = useClasses();
+
+  const boundaryRef = React.useRef<HTMLDivElement | null>(null);
+  const [boundaryRect, setBoundaryRect] = React.useState<PositioningRect | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    setBoundaryRect(boundaryRef.current?.getBoundingClientRect() ?? null);
+  }, []);
+
+  return (
+    <div className={classes.area}>
+      <div className={classes.boundary} ref={boundaryRef} />
+
+      <Popover
+        positioning={{
+          overflowBoundary: boundaryRect,
+          position: 'below',
+          align: 'start',
+        }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <Button>
+            <code>align: start</code>
+          </Button>
+        </PopoverTrigger>
+        <PopoverSurface>Stays within the defined rect</PopoverSurface>
+      </Popover>
+
+      <Popover
+        positioning={{
+          overflowBoundary: boundaryRect,
+          position: 'above',
+          align: 'start',
+        }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <Button>
+            <code>align: start</code>
+          </Button>
+        </PopoverTrigger>
+        <PopoverSurface>Stays within the defined rect</PopoverSurface>
+      </Popover>
+    </div>
+  );
+};
+
+OverflowBoundaryRect.parameters = {
+  docs: {
+    description: {
+      story: [
+        'Boundaries can be also defined as `Rect` objects. ',
+        'This is useful when a boundary is not an actual element, but some kind of computed values.',
+      ].join('\n'),
+    },
+  },
+};

apps/public-docsite-v9/src/Concepts/Positioning/index.stories.tsx

@@ -11,9 +11,10 @@ export { AnchorToTarget } from './PositioningAnchorToTarget.stories';
 export { ImperativeAnchorTarget } from './PositioningImperativeAnchorTarget.stories';
 export { ImperativePositionUpdate } from './PositioningImperativePositionUpdate.stories';
 export { OverflowBoundary } from './PositioningOverflowBoundary.stories';
-export { OverflowBoundaryPadding } from './OverflowBoundaryPadding.stories';
+export { OverflowBoundaryRect } from './PositioningOverflowBoundaryRect.stories';
+export { OverflowBoundaryPadding } from './PositioningOverflowBoundaryPadding.stories';
 export { FlipBoundary } from './PositioningFlipBoundary.stories';
-export { MatchTargetSize } from './MatchTargetSize.stories';
+export { MatchTargetSize } from './PositioningMatchTargetSize.stories';
 export { DisableTransform } from './PositioningDisableTransform.stories';
 export { ListenToUpdates } from './PositioningListenToUpdates.stories';
 export { AutoSizeForSmallViewport } from './PositioningAutoSize.stories';

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/"

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>
   );
 };

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}

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}