fix: popover outline and margin (#1220)

xgeekshq · Mar 9, 2023 · ae400aa · ae400aa
1 parent f5f69f9
commit ae400aa
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/frontend/src/components/Primitives/ConfirmationDialog.spec.tsx b/frontend/src/components/Primitives/ConfirmationDialog.spec.tsx
@@ -56,11 +56,13 @@ describe('Components/Primitives/ConfirmationDialog', () => {
 
     fireEvent.click(getByRole('button'));
 
-    await waitFor(async () => {
+    await waitFor(() => {
       expect(getByRole('alertdialog')).toBeInTheDocument();
+    });
 
-      fireEvent.click(getByText('Confirm'));
+    fireEvent.click(getByText('Confirm'));
 
+    await waitFor(() => {
       expect(mockConfirmationHandler).toBeCalled();
     });
   });

diff --git a/frontend/src/components/Primitives/Select.tsx b/frontend/src/components/Primitives/Select.tsx
@@ -97,7 +97,7 @@ type Option = {
 type ContentProps = { options: Option[] };
 
 export const SelectContent = ({ options }: ContentProps) => (
-  <StyledContent position="popper" collisionPadding={{ bottom: 100, top: 100 }}>
+  <StyledContent position="popper" collisionPadding={100}>
     <ScrollArea.Root type="auto">
       <SelectPrimitive.Viewport>
         <ScrollArea.Viewport>

diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.spec.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { libraryMocks } from '@/utils/testing/mocks';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, waitFor } from '@testing-library/react';
 import { TeamFactory } from '@/utils/factories/team';
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import PopoverRoleSettings, { PopoverRoleSettingsProps } from './PopoverRoleSettings';
@@ -11,7 +11,7 @@ const render = (props: PopoverRoleSettingsProps) =>
   renderWithProviders(<PopoverRoleSettings {...props} />, { routerOptions: mockRouter });
 
 describe('Components/Teams/Team/TeamMemberItem/PopoverRoleSettings', () => {
-  it('should render correctly', () => {
+  it('should render correctly', async () => {
     // Arrange
     const team = TeamFactory.create();
     const popoverRoleSettingsProps = {
@@ -26,8 +26,10 @@ describe('Components/Teams/Team/TeamMemberItem/PopoverRoleSettings', () => {
     if (trigger) fireEvent.click(trigger);
 
     // Assert
-    expect(getByText('Team Member')).toBeInTheDocument();
-    expect(getByText('Team Admin')).toBeInTheDocument();
-    expect(getByText('Stakeholder')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(getByText('Team Member')).toBeInTheDocument();
+      expect(getByText('Team Admin')).toBeInTheDocument();
+      expect(getByText('Stakeholder')).toBeInTheDocument();
+    });
   });
 });
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.tsx
@@ -79,7 +79,11 @@ const PopoverRoleSettings: React.FC<PopoverRoleSettingsProps> = React.memo(
         <PopoverTrigger variant="dark" size="sm" data-testid="popoverRoleSettingsTrigger">
           <Icon name="arrow-down" />
         </PopoverTrigger>
-        <PopoverContent css={{ width: '$360', height: '$316' }}>
+        <PopoverContent
+          css={{ width: '$360', height: '$316' }}
+          collisionPadding={32}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <PopoverClose>
             <PopoverItem
               align="end"