[desk-tool] Wrap document pane with the Card component

sanity-io · Jan 19, 2021 · f2c60f0 · f2c60f0 · vercel · Jan 19, 2021
1 parent 7eebdd0
commit f2c60f0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/@sanity/desk-tool/package.json b/packages/@sanity/desk-tool/package.json
@@ -33,6 +33,7 @@
     "@sanity/structure": "2.1.4",
     "@sanity/types": "2.1.4",
     "@sanity/util": "2.1.4",
+    "@sanity/ui": "^0.32.6",
     "@sanity/uuid": "^3.0.1",
     "boundless-arrow-key-navigation": "^1.1.0",
     "classnames": "^2.2.5",

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css
@@ -3,8 +3,12 @@
 .root {
   background: var(--component-bg);
   height: 100%;
-  display: flex;
   flex-direction: column;
+
+  /* override @sanity/ui */
+  @nest &.root:not([hidden]) {
+    display: flex;
+  }
 }
 
 .headerContainer {

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx
@@ -1,4 +1,5 @@
 import {MenuItemGroup, BoundaryElementProvider} from '@sanity/base/__legacy/@sanity/components'
+import {Card} from '@sanity/ui'
 import classNames from 'classnames'
 import {PortalProvider, usePortal} from 'part:@sanity/components/portal'
 import {ScrollContainer} from 'part:@sanity/components/scroll'
@@ -112,7 +113,7 @@ export function DocumentPanel(props: DocumentPanelProps) {
   const margins = screenIsNarrow ? narrowScreenMargins : DEFAULT_MARGINS
 
   return (
-    <div className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
+    <Card className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
       <div className={styles.headerContainer}>
         <DocumentPanelHeader
           activeViewId={props.activeViewId}
@@ -188,6 +189,6 @@ export function DocumentPanel(props: DocumentPanelProps) {
           </div>
         </BoundaryElementProvider>
       </PortalProvider>
-    </div>
+    </Card>
   )
 }