make icon in panel table have circle background on hover (#5197)

* make icon in panel table have circle background on hover

* cleanup

* fix icon

Author: CamronStaley

app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx

@@ -77,9 +77,13 @@ function Action(props: ActionPropsType) {
   const { label, name, onClick, icon, variant, mode, color, size, tooltip } =
     props;
   const resolvedColor = color ? getColorByCode(color) : undefined;
-
   const Icon = icon ? (
-    <MuiIconFont name={icon} sx={{ color: resolvedColor }} />
+    <MuiIconFont
+      name={icon}
+      sx={{
+        color: resolvedColor,
+      }}
+    />
   ) : null;
 
   const handleClick = useCallback(
@@ -91,18 +95,30 @@ function Action(props: ActionPropsType) {
 
   const content =
     mode === "inline" ? (
-      <Button
-        variant={variant}
-        startIcon={Icon}
-        onClick={handleClick}
-        sx={{
-          color: resolvedColor,
-          padding: size === "small" ? 0 : undefined,
-          minWidth: size === "small" ? 40 : undefined,
-        }}
-      >
-        {label}
-      </Button>
+      label ? (
+        <Button
+          variant={variant}
+          startIcon={Icon}
+          onClick={handleClick}
+          sx={{
+            color: resolvedColor,
+            padding: size === "small" ? 0 : undefined,
+            minWidth: size === "small" ? 40 : undefined,
+          }}
+        >
+          {label}
+        </Button>
+      ) : (
+        <IconButton
+          onClick={handleClick}
+          size={size}
+          sx={{
+            color: resolvedColor,
+          }}
+        >
+          {Icon}
+        </IconButton>
+      )
     ) : (
       <MenuItem onClick={handleClick}>
         {Icon && <ListItemIcon>{Icon}</ListItemIcon>}

app/packages/core/src/plugins/SchemaIO/components/TableView.tsx

@@ -222,12 +222,14 @@ export default function TableView(props: ViewPropsType) {
                             : "unset",
                         }}
                       >
-                        {currentRowHasActions && (
+                        {currentRowHasActions ? (
                           <ActionsMenu
                             actions={getRowActions(rowIndex)}
                             size={size}
                             maxInline={max_inline_actions}
                           />
+                        ) : (
+                          <Box sx={{ minHeight: "32px" }} />
                         )}
                       </TableCell>
                     )}