fix(Callout): Update useMaxHeight to check if the provided maxHeight …

…is larger than the bounds (#27558)
microsoft · Apr 14, 2023 · 97a9295 · 97a9295
1 parent 92dd947
commit 97a9295
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/change/@fluentui-react-5d4582c1-8b8f-41aa-8f38-13a0481fda22.json b/change/@fluentui-react-5d4582c1-8b8f-41aa-8f38-13a0481fda22.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Callout): Update useMaxHeight to check if the provided maxHeight will make the callout get cut off.",
+  "packageName": "@fluentui/react",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Callout/CalloutContent.base.tsx b/packages/react/src/components/Callout/CalloutContent.base.tsx
@@ -124,13 +124,19 @@ function useMaxHeight(
 
   React.useEffect(() => {
     const { top: topBounds, bottom: bottomBounds } = getBounds() ?? {};
+    let calculatedHeight: number | undefined;
 
-    if (!calloutMaxHeight && !hidden) {
-      if (typeof top === 'number' && bottomBounds) {
-        setMaxHeight(bottomBounds - top);
-      } else if (typeof bottom === 'number' && typeof topBounds === 'number' && bottomBounds) {
-        setMaxHeight(bottomBounds - topBounds - bottom);
-      }
+    if (typeof top === 'number' && bottomBounds) {
+      calculatedHeight = bottomBounds - top;
+    } else if (typeof bottom === 'number' && typeof topBounds === 'number' && bottomBounds) {
+      calculatedHeight = bottomBounds - topBounds - bottom;
+    }
+
+    if (
+      (!calloutMaxHeight && !hidden) ||
+      (calloutMaxHeight && calculatedHeight && calloutMaxHeight > calculatedHeight)
+    ) {
+      setMaxHeight(calculatedHeight);
     } else if (calloutMaxHeight) {
       setMaxHeight(calloutMaxHeight);
     } else {
@@ -476,7 +482,7 @@ export const CalloutContentBase: React.FunctionComponent<ICalloutProps> = React.
     const classNames = getClassNames(styles!, {
       theme: props.theme!,
       className,
-      overflowYHidden: overflowYHidden,
+      overflowYHidden,
       calloutWidth,
       positions,
       beakWidth,

diff --git a/packages/react/src/components/Callout/CalloutContent.styles.ts b/packages/react/src/components/Callout/CalloutContent.styles.ts
@@ -77,7 +77,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
       },
       getBeakStyle(beakWidth),
       backgroundColor && {
-        backgroundColor: backgroundColor,
+        backgroundColor,
       },
     ],
     beakCurtain: [
@@ -106,7 +106,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
         overflowY: 'hidden',
       },
       backgroundColor && {
-        backgroundColor: backgroundColor,
+        backgroundColor,
       },
     ],
   };