fix(insert-menu): remove border and extra spacing when there are no o…

…ptions (#1660) * chore(insert-menu): add workshop options * fix(insert-menu): remove border and extra spacing when there are no options Fixes #1659
sanity-io · Jun 14, 2024 · 5dc50e3 · 5dc50e3
1 parent 67988f9
commit 5dc50e3
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 59 deletions.
diff --git a/packages/insert-menu/src/InsertMenu.tsx b/packages/insert-menu/src/InsertMenu.tsx
@@ -91,61 +91,71 @@ export function InsertMenu(props: InsertMenuProps): React.JSX.Element {
   })
   const filteredSchemaTypes = filterSchemaTypes(props.schemaTypes, state.query, state.groups)
   const selectedView = state.views.find((view) => view.selected)
+  const showingFilterOrViews = props.filter || state.views.length > 1
+  const showingTabs = state.groups && state.groups.length > 0
+  const showingAnyOptions = showingFilterOrViews || showingTabs
 
   return (
     <Menu padding={0}>
       <Flex direction="column" height="fill">
-        {/* filter and views button */}
-        <Flex flex="none" align="center" padding={1} gap={1}>
-          {props.filter ? (
-            <Box flex={1}>
-              <TextInput
-                autoFocus
-                border={false}
-                fontSize={1}
-                icon={SearchIcon}
-                onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                  send({type: 'change query', query: event.target.value})
-                }}
-                placeholder={props.labels['insert-menu.search.placeholder']}
-                value={state.query}
-              />
-            </Box>
-          ) : null}
-          {state.views.length > 1 ? (
-            <Box flex="none">
-              <ViewToggle
-                views={state.views}
-                onToggle={(name) => {
-                  send({type: 'toggle view', name})
-                }}
-                labels={props.labels}
-              />
-            </Box>
-          ) : null}
-        </Flex>
-
-        {/* tabs */}
         <Box
-          paddingX={1}
-          paddingBottom={1}
-          style={{borderBottom: '1px solid var(--card-border-color)'}}
+          {...(showingAnyOptions
+            ? {
+                style: {borderBottom: '1px solid var(--card-border-color)'},
+                paddingBottom: 1,
+              }
+            : {})}
         >
-          {state.groups && state.groups.length > 0 ? (
-            <TabList space={1}>
-              {state.groups.map((group) => (
-                <Tab
-                  id={`${group.name}-tab`}
-                  aria-controls={`${group.name}-panel`}
-                  key={group.name}
-                  label={group.title ?? group.name}
-                  selected={group.selected}
-                  onClick={() => {
-                    send({type: 'select group', name: group.name})
-                  }}
-                />
-              ))}
-            </TabList>
+          {/* filter and views button */}
+          {showingFilterOrViews ? (
+            <Flex flex="none" align="center" paddingTop={1} paddingX={1} gap={1}>
+              {props.filter ? (
+                <Box flex={1}>
+                  <TextInput
+                    autoFocus
+                    border={false}
+                    fontSize={1}
+                    icon={SearchIcon}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      send({type: 'change query', query: event.target.value})
+                    }}
+                    placeholder={props.labels['insert-menu.search.placeholder']}
+                    value={state.query}
+                  />
+                </Box>
+              ) : null}
+              {state.views.length > 1 ? (
+                <Box flex="none">
+                  <ViewToggle
+                    views={state.views}
+                    onToggle={(name) => {
+                      send({type: 'toggle view', name})
+                    }}
+                    labels={props.labels}
+                  />
+                </Box>
+              ) : null}
+            </Flex>
+          ) : null}
+
+          {/* tabs */}
+          {showingTabs ? (
+            <Box paddingTop={1} paddingX={1}>
+              <TabList space={1}>
+                {state.groups.map((group) => (
+                  <Tab
+                    id={`${group.name}-tab`}
+                    aria-controls={`${group.name}-panel`}
+                    key={group.name}
+                    label={group.title ?? group.name}
+                    selected={group.selected}
+                    onClick={() => {
+                      send({type: 'select group', name: group.name})
+                    }}
+                  />
+                ))}
+              </TabList>
+            </Box>
           ) : null}
         </Box>
 

diff --git a/packages/insert-menu/src/__workshop__/full.tsx b/packages/insert-menu/src/__workshop__/full.tsx
@@ -1,7 +1,7 @@
 import {CommentIcon, DesktopIcon, EnvelopeIcon, InfoOutlineIcon, SyncIcon} from '@sanity/icons'
 import type {ObjectSchemaType} from '@sanity/types'
 import {Box, Card, LayerProvider} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
+import {useAction, useSelect} from '@sanity/ui-workshop'
 
 import {InsertMenu, type InsertMenuProps} from '../InsertMenu'
 
@@ -70,25 +70,25 @@ const views: InsertMenuProps['views'] = [
 ]
 
 export default function FullStory() {
+  const iconsEnabled = useSelect('icons', {true: true, false: false}, true)
+  const filterEnabled = useSelect('filter', {true: true, false: false}, true)
+  const groupsEnabled = useSelect('groups', {true: true, false: false}, true)
+  const viewsEnabled = useSelect('views', {true: true, false: false}, true)
+
   const onSelect = useAction('onSelect')
 
   return (
     <Box padding={4}>
       <Card radius={3} shadow={3}>
         <LayerProvider>
           <InsertMenu
-            //
-            filter
-            groups={groups}
+            icons={iconsEnabled}
+            filter={filterEnabled}
+            groups={groupsEnabled ? groups : undefined}
+            views={viewsEnabled ? views : undefined}
             labels={labels}
             onSelect={onSelect}
             schemaTypes={schemaTypes}
-            views={views}
-            // groups?: Array<{name: string; title?: string; of?: Array<string>}>
-            // /** defaultValue `true` */
-            // icons?: boolean
-            // /** @defaultValue `[{name: 'list'}]` */
-            // views?: Array<{name: 'list'} | {name: 'grid'; previewUrl: (schemaTypeName: string) => string}></string>
           />
         </LayerProvider>
       </Card>