fix: padding in dropdown and extra tooltip

sanity-io · May 26, 2023 · 8e6d515 · 8e6d515
1 parent f114091
commit 8e6d515
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/src/components/DocumentInternationalizationMenu.tsx b/src/components/DocumentInternationalizationMenu.tsx
@@ -87,13 +87,13 @@ export function DocumentInternationalizationMenu(
   }, [supportedLanguages])
 
   const content = (
-    <Card>
+    <Box padding={1}>
       {error ? (
-        <Card tone="critical" padding={2}>
+        <Card tone="critical" padding={1}>
           <Text>There was an error returning translations metadata</Text>
         </Card>
       ) : (
-        <Stack padding={1} space={1}>
+        <Stack space={1}>
           <LanguageManage id={metadata?._id} />
           {supportedLanguages.length > 4 ? (
             <TextInput
@@ -186,7 +186,7 @@ export function DocumentInternationalizationMenu(
           ) : null}
         </Stack>
       )}
-    </Card>
+    </Box>
   )
 
   const issueWithTranslations =

diff --git a/src/components/LanguageManage.tsx b/src/components/LanguageManage.tsx
@@ -1,5 +1,5 @@
 import {CogIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
+import {Box, Button, Stack, Text, Tooltip} from '@sanity/ui'
 
 import {METADATA_SCHEMA_NAME} from '../constants'
 import {useOpenInNewPane} from '../hooks/useOpenInNewPane'
@@ -13,12 +13,29 @@ export default function LanguageManage(props: LanguageManageProps) {
   const open = useOpenInNewPane(id, METADATA_SCHEMA_NAME)
 
   return (
-    <Button
-      disabled={!id}
-      mode="ghost"
-      text="Manage Translations"
-      icon={CogIcon}
-      onClick={() => open()}
-    />
+    <Tooltip
+      content={
+        id ? null : (
+          <Box padding={2}>
+            <Text muted size={1}>
+              Document has no other translations
+            </Text>
+          </Box>
+        )
+      }
+      fallbackPlacements={['right', 'left']}
+      placement="top"
+      portal
+    >
+      <Stack>
+        <Button
+          disabled={!id}
+          mode="ghost"
+          text="Manage Translations"
+          icon={CogIcon}
+          onClick={() => open()}
+        />
+      </Stack>
+    </Tooltip>
   )
 }