[components, form-builder] fix asset menu styling (#2082)

sanity-io · Oct 21, 2020 · f59ad6c · f59ad6c · vercel · Oct 21, 2020
1 parent 6029ef1
commit f59ad6c
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 27 deletions.
diff --git a/packages/@sanity/components/src/buttons/DropDownButton.css b/packages/@sanity/components/src/buttons/DropDownButton.css
@@ -59,6 +59,10 @@
   display: flex;
   align-items: center;
   padding: calc(var(--medium-padding) - var(--extra-small-padding)) var(--medium-padding);
+
+  @nest &[data-color='danger'] {
+    color: var(--state-danger-color);
+  }
 }
 
 .menuItem__iconContainer {

diff --git a/packages/@sanity/components/src/buttons/DropDownButton.tsx b/packages/@sanity/components/src/buttons/DropDownButton.tsx
@@ -11,6 +11,7 @@ import {ButtonProps} from './types'
 interface DropdownItem {
   title: string
   icon?: React.ComponentType<Record<string, unknown>>
+  color?: string
 }
 
 interface DropdownButtonProps {
@@ -68,7 +69,7 @@ const DropdownMenuItem = forwardRef(
         {renderItem ? (
           renderItem(item)
         ) : (
-          <div className={styles.menuItem__inner}>
+          <div className={styles.menuItem__inner} data-color={item.color}>
             {item.icon && (
               <div className={styles.menuItem__iconContainer}>{createElement(item.icon)}</div>
             )}

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/AssetMenu.css b/packages/@sanity/form-builder/src/inputs/ImageInput/AssetMenu.css
diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/AssetMenu.tsx b/packages/@sanity/form-builder/src/inputs/ImageInput/AssetMenu.tsx
@@ -5,8 +5,6 @@ import DropDownButton from 'part:@sanity/components/buttons/dropdown'
 import React from 'react'
 import {AssetAction} from './types'
 
-import styles from './AssetMenu.css'
-
 const menuItems: AssetAction[] = [
   {
     name: 'showRefs',
@@ -21,18 +19,6 @@ const menuItems: AssetAction[] = [
   }
 ]
 
-function MenuItem(item: {color?: 'danger'; icon: React.ComponentType; title: string}) {
-  const {color, title, icon} = item
-  const Icon = icon
-
-  return (
-    <div className={color === 'danger' ? styles.menuItemDanger : styles.menuItem}>
-      <span>{icon && <Icon />}</span>
-      <span>{title}</span>
-    </div>
-  )
-}
-
 export default function AssetMenu({
   isSelected,
   onAction
@@ -47,7 +33,6 @@ export default function AssetMenu({
       placement="bottom-end"
       showArrow={false}
       items={isSelected ? menuItems.filter(item => item.name !== 'delete') : menuItems}
-      renderItem={MenuItem}
       onAction={onAction}
     />
   )