add padding to flip and shift middleware (#2189)

iTwin · Aug 8, 2024 · e1045a8 · e1045a8
1 parent 49679a8
commit e1045a8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/.changeset/tough-onions-dress.md b/.changeset/tough-onions-dress.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Floating elements will now have a few pixels of padding from the edge of the viewport.
diff --git a/...rkshop/cypress-visual-screenshots/baseline/AvatarGroup.test.ts-With Tooltip.png b/...rkshop/cypress-visual-screenshots/baseline/AvatarGroup.test.ts-With Tooltip.png
diff --git a/packages/itwinui-react/src/core/Popover/Popover.tsx b/packages/itwinui-react/src/core/Popover/Popover.tsx
@@ -202,17 +202,18 @@ export const usePopover = (options: PopoverOptions & PopoverInternalProps) => {
       () =>
         [
           middleware.offset !== undefined && offset(middleware.offset),
-          middleware.flip && flip(),
-          middleware.shift && shift(),
+          middleware.flip && flip({ padding: 4 }),
+          middleware.shift && shift({ padding: 4 }),
           matchWidth &&
             size({
+              padding: 4,
               apply: ({ rects }) => {
                 setReferenceWidth(rects.reference.width);
               },
             } as SizeOptions),
-          middleware.autoPlacement && autoPlacement(),
+          middleware.autoPlacement && autoPlacement({ padding: 4 }),
           middleware.inline && inline(),
-          middleware.hide && hide(),
+          middleware.hide && hide({ padding: 4 }),
         ].filter(Boolean),
       [matchWidth, middleware],
     ),

diff --git a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx
@@ -177,12 +177,12 @@ const useTooltip = (options: TooltipOptions = {}) => {
           middleware.offset !== undefined
             ? offset(middleware.offset)
             : offset(4),
-          middleware.flip && flip(),
-          middleware.shift && shift(),
-          middleware.size && size(),
-          middleware.autoPlacement && autoPlacement(),
+          middleware.flip && flip({ padding: 4 }),
+          middleware.shift && shift({ padding: 4 }),
+          middleware.size && size({ padding: 4 }),
+          middleware.autoPlacement && autoPlacement({ padding: 4 }),
           middleware.inline && inline(),
-          middleware.hide && hide(),
+          middleware.hide && hide({ padding: 4 }),
         ].filter(Boolean),
       [middleware],
     ),