From 527451f1d40bc7a88fe16028d5acda3f5a40396b Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 16 Feb 2023 12:02:18 +0100 Subject: [PATCH 1/3] feat: Set overflow on positioned element when `autosize` is applied Adds `overflowX` and `overflowY` to the positioned element when the autosize dimension is used. It's counterintuitive that components should need to apply overflow styles for this. --- .../react-positioning/src/middleware/maxSize.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts index 1567df6e28a8e9..994c006562d592 100644 --- a/packages/react-components/react-positioning/src/middleware/maxSize.ts +++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts @@ -25,6 +25,7 @@ export function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSi Object.assign(elements.floating.style, { maxHeight: `${availableHeight}px`, boxSizing: 'border-box', + overflowY: 'auto', }); } @@ -32,6 +33,7 @@ export function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSi Object.assign(elements.floating.style, { maxWidth: `${availableWidth}px`, boxSizing: 'border-box', + overflowX: 'auto', }); } }, From 3be2467b378196facfd187c549578b048e0adcdb Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 16 Feb 2023 12:05:58 +0100 Subject: [PATCH 2/3] changefile --- ...t-positioning-6885ff72-725f-432d-95c5-37ccfe3dba48.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-positioning-6885ff72-725f-432d-95c5-37ccfe3dba48.json diff --git a/change/@fluentui-react-positioning-6885ff72-725f-432d-95c5-37ccfe3dba48.json b/change/@fluentui-react-positioning-6885ff72-725f-432d-95c5-37ccfe3dba48.json new file mode 100644 index 00000000000000..a6c43e61905f2d --- /dev/null +++ b/change/@fluentui-react-positioning-6885ff72-725f-432d-95c5-37ccfe3dba48.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Set overflow on positioned element when `autosize` is applied", + "packageName": "@fluentui/react-positioning", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} From 81bf78ffa8caa9aeb93e60fef23a3cb3c9e2be4d Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Thu, 16 Feb 2023 12:07:59 +0100 Subject: [PATCH 3/3] improve types --- .../react-positioning/src/middleware/maxSize.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts index 994c006562d592..c37ade24333bff 100644 --- a/packages/react-components/react-positioning/src/middleware/maxSize.ts +++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts @@ -22,7 +22,7 @@ export function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSi (rects.floating.height > availableHeight && (autoSize === true || autoSize === 'height')); if (applyMaxHeight) { - Object.assign(elements.floating.style, { + Object.assign>(elements.floating.style, { maxHeight: `${availableHeight}px`, boxSizing: 'border-box', overflowY: 'auto', @@ -30,7 +30,7 @@ export function maxSize(autoSize: PositioningOptions['autoSize'], options: MaxSi } if (applyMaxWidth) { - Object.assign(elements.floating.style, { + Object.assign>(elements.floating.style, { maxWidth: `${availableWidth}px`, boxSizing: 'border-box', overflowX: 'auto',