feat: update radix-ui to latest

felixmosh · Jul 28, 2022 · 62a6eac · 62a6eac
1 parent 349a9d2
commit 62a6eac
Show file tree

Hide file tree

Showing 4 changed files with 278 additions and 263 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -31,8 +31,8 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@radix-ui/react-alert-dialog": "^0.1.7",
-    "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "@radix-ui/react-alert-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.14",
     "@types/react-paginate": "^7.1.1",

diff --git a/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.module.css b/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.module.css
@@ -1,42 +1,42 @@
 .trigger {
-  padding: .5em .65em;
+  padding: 0.5em 0.65em;
   margin-bottom: 0.25em;
   justify-self: flex-end;
 }
 
 .content {
   background: #fff;
-  box-shadow: 0 2px 3px 0 rgba(34,36,38 ,0.15);
-  border: 1px solid rgba(34,36,38,.15);
-  border-radius: .28571429rem;
-  padding-top: .25rem;
-  padding-bottom: .25rem;
-  font-size: .875rem;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
   min-width: 150px;
+  z-index: 100;
 }
 
-
 .item {
   display: block;
-  color: rgba(0,0,0,.87);
-  padding: .5rem 1rem;
+  color: rgba(0, 0, 0, 0.87);
+  padding: 0.5rem 1rem;
   font-weight: 400;
   white-space: nowrap;
   cursor: pointer;
 }
 
 .item > svg {
   float: none;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   width: 1.18em;
   height: 1em;
   vertical-align: middle;
   fill: #718096;
 }
 
 .item:hover {
-  color: rgba(0,0,0,.95);
+  color: rgba(0, 0, 0, 0.95);
   background: #e2e8f0;
 }
diff --git a/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.tsx b/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.tsx
@@ -1,5 +1,5 @@
 import { AppQueue } from '@bull-board/api/typings/app';
-import { Content, Item, Root, Trigger } from '@radix-ui/react-dropdown-menu';
+import { Content, Item, Root, Trigger, Portal } from '@radix-ui/react-dropdown-menu';
 import React from 'react';
 import { Store } from '../../hooks/useStore';
 import { EllipsisVerticalIcon } from '../Icons/EllipsisVertical';
@@ -22,23 +22,27 @@ export const QueueDropdownActions = ({
       </Button>
     </Trigger>
 
-    <Content className={s.content} align="end">
-      <Item
-        className={s.item}
-        onSelect={queue.isPaused ? actions.resumeQueue(queue.name) : actions.pauseQueue(queue.name)}
-      >
-        {queue.isPaused ? (
-          <>
-            <PlayIcon />
-            Resume
-          </>
-        ) : (
-          <>
-            <PauseIcon />
-            Pause
-          </>
-        )}
-      </Item>
-    </Content>
+    <Portal>
+      <Content className={s.content} align="end">
+        <Item
+          className={s.item}
+          onSelect={
+            queue.isPaused ? actions.resumeQueue(queue.name) : actions.pauseQueue(queue.name)
+          }
+        >
+          {queue.isPaused ? (
+            <>
+              <PlayIcon />
+              Resume
+            </>
+          ) : (
+            <>
+              <PauseIcon />
+              Pause
+            </>
+          )}
+        </Item>
+      </Content>
+    </Portal>
   </Root>
 );