fix(field): fix z-index issues of tooltip and revert dialog (#2449)

sanity-io · Apr 28, 2021 · ba32ea1 · ba32ea1 · vercel · Apr 28, 2021
1 parent a7413ac
commit ba32ea1
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 97 deletions.
diff --git a/packages/@sanity/base/package.json b/packages/@sanity/base/package.json
@@ -45,7 +45,7 @@
     "@sanity/structure": "2.9.1",
     "@sanity/transaction-collator": "2.7.4",
     "@sanity/types": "2.9.1",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "@sanity/util": "2.9.1",
     "@sanity/validation": "2.9.1",
     "boundless-arrow-key-navigation": "^1.1.0",

diff --git a/packages/@sanity/default-layout/package.json b/packages/@sanity/default-layout/package.json
@@ -34,7 +34,7 @@
     "@sanity/client": "2.8.0",
     "@sanity/generate-help-url": "2.2.6",
     "@sanity/types": "2.9.1",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "@sanity/util": "2.9.1",
     "classnames": "^2.2.5",
     "is-hotkey": "^0.1.4",

diff --git a/packages/@sanity/desk-tool/package.json b/packages/@sanity/desk-tool/package.json
@@ -33,7 +33,7 @@
     "@sanity/react-hooks": "2.9.1",
     "@sanity/structure": "2.9.1",
     "@sanity/types": "2.9.1",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "@sanity/util": "2.9.1",
     "@sanity/uuid": "^3.0.1",
     "boundless-arrow-key-navigation": "^1.1.0",

diff --git a/packages/@sanity/field/package.json b/packages/@sanity/field/package.json
@@ -31,7 +31,7 @@
     "@sanity/diff": "2.7.4",
     "@sanity/react-hooks": "2.9.1",
     "@sanity/types": "2.9.1",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "@sanity/util": "2.9.1",
     "date-fns": "^2.16.1",
     "sanity-diff-patch": "^1.0.9",

diff --git a/packages/@sanity/field/src/diff/components/ChangeList.tsx b/packages/@sanity/field/src/diff/components/ChangeList.tsx
@@ -104,31 +104,33 @@ export function ChangeList({diff, fields, schemaType}: Props): React.ReactElemen
               </Button>
             </div>
           )}
-
-          {confirmRevertAllOpen && (
-            <PopoverDialog
-              actions={[
-                {
-                  color: 'danger',
-                  action: revertAllChanges,
-                  title: 'Revert all',
-                },
-                {
-                  kind: 'simple',
-                  action: closeRevertAllChangesConfirmDialog,
-                  title: 'Cancel',
-                },
-              ]}
-              onAction={handleConfirmDialogAction}
-              onClickOutside={closeRevertAllChangesConfirmDialog}
-              referenceElement={revertAllContainerElement}
-              size="small"
-            >
-              Are you sure you want to revert all {changes.length} changes?
-            </PopoverDialog>
-          )}
         </div>
       )}
+
+      {confirmRevertAllOpen && (
+        <LegacyLayerProvider zOffset="paneFooter">
+          <PopoverDialog
+            actions={[
+              {
+                color: 'danger',
+                action: revertAllChanges,
+                title: 'Revert all',
+              },
+              {
+                kind: 'simple',
+                action: closeRevertAllChangesConfirmDialog,
+                title: 'Cancel',
+              },
+            ]}
+            onAction={handleConfirmDialogAction}
+            onClickOutside={closeRevertAllChangesConfirmDialog}
+            referenceElement={revertAllContainerElement}
+            size="small"
+          >
+            Are you sure you want to revert all {changes.length} changes?
+          </PopoverDialog>
+        </LegacyLayerProvider>
+      )}
     </div>
   )
 }

diff --git a/packages/@sanity/field/src/diff/components/DiffTooltip.tsx b/packages/@sanity/field/src/diff/components/DiffTooltip.tsx
@@ -1,4 +1,4 @@
-import {UserAvatar} from '@sanity/base/components'
+import {LegacyLayerProvider, UserAvatar} from '@sanity/base/components'
 import {useUser, useTimeAgo} from '@sanity/base/hooks'
 import {Path} from '@sanity/types'
 import React from 'react'
@@ -52,14 +52,16 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
   )
 
   return (
-    <Tooltip
-      content={content}
-      placement={placement}
-      portal
-      allowedAutoPlacements={['top', 'bottom']}
-    >
-      {children}
-    </Tooltip>
+    <LegacyLayerProvider zOffset="paneFooter">
+      <Tooltip
+        content={content}
+        placement={placement}
+        portal
+        allowedAutoPlacements={['top', 'bottom']}
+      >
+        {children}
+      </Tooltip>
+    </LegacyLayerProvider>
   )
 }
 

diff --git a/packages/@sanity/field/src/diff/components/FieldChange.tsx b/packages/@sanity/field/src/diff/components/FieldChange.tsx
@@ -80,44 +80,44 @@ export function FieldChange({change}: {change: FieldChangeNode}) {
           )}
 
           {isComparingCurrent && (
-            <>
-              <div className={styles.revertChangesButtonContainer}>
-                <RevertChangesButton
-                  onClick={handleRevertChangesConfirm}
-                  onMouseEnter={handleRevertButtonMouseEnter}
-                  onMouseLeave={handleRevertButtonMouseLeave}
-                  ref={setRevertButtonElement}
-                  selected={confirmRevertOpen}
-                />
-              </div>
-
-              {confirmRevertOpen && (
-                <PopoverDialog
-                  actions={[
-                    {
-                      color: 'danger',
-                      action: handleRevertChanges,
-                      title: 'Revert change',
-                    },
-                    {
-                      kind: 'simple',
-                      action: closeRevertChangesConfirmDialog,
-                      title: 'Cancel',
-                    },
-                  ]}
-                  onAction={handleConfirmDialogAction}
-                  onClickOutside={closeRevertChangesConfirmDialog}
-                  portal
-                  referenceElement={revertButtonElement}
-                  size="small"
-                >
-                  Are you sure you want to revert the changes?
-                </PopoverDialog>
-              )}
-            </>
+            <div className={styles.revertChangesButtonContainer}>
+              <RevertChangesButton
+                onClick={handleRevertChangesConfirm}
+                onMouseEnter={handleRevertButtonMouseEnter}
+                onMouseLeave={handleRevertButtonMouseLeave}
+                ref={setRevertButtonElement}
+                selected={confirmRevertOpen}
+              />
+            </div>
           )}
         </DiffInspectWrapper>
       </FieldWrapper>
+
+      {confirmRevertOpen && (
+        <LegacyLayerProvider zOffset="paneFooter">
+          <PopoverDialog
+            actions={[
+              {
+                color: 'danger',
+                action: handleRevertChanges,
+                title: 'Revert change',
+              },
+              {
+                kind: 'simple',
+                action: closeRevertChangesConfirmDialog,
+                title: 'Cancel',
+              },
+            ]}
+            onAction={handleConfirmDialogAction}
+            onClickOutside={closeRevertChangesConfirmDialog}
+            portal
+            referenceElement={revertButtonElement}
+            size="small"
+          >
+            Are you sure you want to revert the changes?
+          </PopoverDialog>
+        </LegacyLayerProvider>
+      )}
     </div>
   )
 }
diff --git a/packages/@sanity/field/src/diff/components/GroupChange.tsx b/packages/@sanity/field/src/diff/components/GroupChange.tsx
@@ -1,4 +1,5 @@
 import {DialogAction} from '@sanity/base/__legacy/@sanity/components'
+import {LegacyLayerProvider} from '@sanity/base/components'
 import classNames from 'classnames'
 import {useDocumentOperation} from '@sanity/react-hooks'
 import PopoverDialog from 'part:@sanity/components/dialogs/popover'
@@ -77,29 +78,6 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
               selected={confirmRevertOpen}
             />
           </div>
-
-          {confirmRevertOpen && (
-            <PopoverDialog
-              actions={[
-                {
-                  color: 'danger',
-                  action: handleRevertChanges,
-                  title: 'Revert change',
-                },
-                {
-                  kind: 'simple',
-                  action: closeRevertChangesConfirmDialog,
-                  title: 'Cancel',
-                },
-              ]}
-              onAction={handleConfirmDialogAction}
-              // portal
-              referenceElement={revertButtonElement}
-              size="small"
-            >
-              Are you sure you want to revert the changes?
-            </PopoverDialog>
-          )}
         </>
       )}
     </div>
@@ -117,6 +95,31 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
           {content}
         </FieldWrapper>
       )}
+
+      {confirmRevertOpen && (
+        <LegacyLayerProvider zOffset="paneFooter">
+          <PopoverDialog
+            actions={[
+              {
+                color: 'danger',
+                action: handleRevertChanges,
+                title: 'Revert change',
+              },
+              {
+                kind: 'simple',
+                action: closeRevertChangesConfirmDialog,
+                title: 'Cancel',
+              },
+            ]}
+            onAction={handleConfirmDialogAction}
+            // portal
+            referenceElement={revertButtonElement}
+            size="small"
+          >
+            Are you sure you want to revert the changes?
+          </PopoverDialog>
+        </LegacyLayerProvider>
+      )}
     </div>
   )
 }
diff --git a/packages/@sanity/form-builder/package.json b/packages/@sanity/form-builder/package.json
@@ -29,7 +29,7 @@
     "@sanity/mutator": "2.2.6",
     "@sanity/portable-text-editor": "0.1.25",
     "@sanity/types": "2.9.1",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "@sanity/util": "2.9.1",
     "@sanity/uuid": "^3.0.1",
     "attr-accept": "^1.1.0",

diff --git a/packages/@sanity/storybook/package.json b/packages/@sanity/storybook/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "@sanity/base": "2.9.1",
     "@sanity/server": "2.9.1",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "@sanity/webpack-integration": "2.9.1",
     "@storybook/addon-actions": "^3.4.11",
     "@storybook/addon-knobs": "^3.2.8",

diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "@sanity/icons": "^1.0.5",
-    "@sanity/ui": "^0.33.18",
+    "@sanity/ui": "^0.33.19",
     "classnames": "^2.2.5",
     "codemirror": "^5.47.0",
     "moment": "^2.19.1",