IconButtonView fixes and enhancements

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

@@ -36,6 +36,7 @@ export default function IconButtonView(props) {
         title={label}
         highlight
         onClick={onClick}
+        aria-label={`Button for ${icon}`}
       />
     );
   }
@@ -44,7 +45,7 @@ export default function IconButtonView(props) {
     return (
       <SquareButton
         title={label}
-        aria-label={icon}
+        aria-label={`Button for ${icon}`}
         onClick={onClick}
         {...getComponentProps(props, "button")}
       >
@@ -56,7 +57,8 @@ export default function IconButtonView(props) {
   return (
     <IconButton
       title={label}
-      aria-label={icon}
+      aria-label={`Button for ${icon}`}
+      size="small"
       {...getComponentProps(props, "button")}
       onClick={onClick}
     >

app/packages/operators/src/OperatorIcon.tsx

@@ -19,17 +19,19 @@ export default function OperatorIcon(props: CustomIconPropsType) {
 
   if (isIconFont(iconPath)) {
     return <MuiIconFont {...(iconProps as IconProps)} name={iconPath} />;
+  } else if (!iconPath || !canExecute) {
+    return Fallback ? <Fallback /> : null;
+  } else if (_builtIn) {
+    return <ImageIcon src={iconPath} />;
+  } else {
+    return (
+      <CustomOperatorIcon
+        pluginName={pluginName}
+        iconPath={iconPath}
+        iconProps={iconProps as JSX.IntrinsicElements["img"]}
+      />
+    );
   }
-
-  if (!iconPath || !canExecute) return Fallback ? <Fallback /> : null;
-  if (_builtIn) return <ImageIcon src={iconPath} />;
-  return (
-    <CustomOperatorIcon
-      pluginName={pluginName}
-      iconPath={iconPath}
-      iconProps={iconProps as JSX.IntrinsicElements["img"]}
-    />
-  );
 }
 
 function CustomOperatorIcon(props: CustomOperatorIconPropsType) {

app/packages/operators/src/Panel/register.tsx

@@ -1,8 +1,9 @@
 import { PluginComponentType, registerComponent } from "@fiftyone/plugins";
 import { defineCustomPanel } from "../CustomPanel";
 import OperatorIcon from "../OperatorIcon";
+import { ExecutionContext } from "../operators";
 
-export default function registerPanel(ctx) {
+export default function registerPanel(ctx: ExecutionContext) {
   registerComponent({
     type: PluginComponentType.Panel,
     name: ctx.params.panel_name,

app/packages/operators/src/built-in-operators.ts

@@ -955,24 +955,19 @@ class RegisterPanel extends Operator {
     return new OperatorConfig({
       name: "register_panel",
       label: "Register panel",
-      // unlisted: true,
+      unlisted: true,
     });
   }
   async resolveInput(ctx: ExecutionContext): Promise<types.Property> {
     const inputs = new types.Object();
     inputs.str("panel_name", { label: "Panel name", required: true });
     inputs.str("panel_label", { label: "Panel label", required: true });
-    inputs.str("on_load", {
-      label: "On load operator",
-      // required: true,
-    });
-    inputs.str("on_change", {
-      label: "On change operator",
-      // required: true,
-    });
-    inputs.str("on_unload", {
-      label: "On unload operator",
-    });
+    inputs.str("icon", { label: "Icon" });
+    inputs.str("dark_icon", { label: "Icon for dark mode" });
+    inputs.str("light_icon", { label: "Icon for light mode" });
+    inputs.str("on_load", { label: "On load operator" });
+    inputs.str("on_change", { label: "On change operator" });
+    inputs.str("on_unload", { label: "On unload operator" });
     inputs.bool("allow_duplicates", {
       label: "Allow duplicates",
       default: false,

fiftyone/operators/types.py

@@ -246,11 +246,53 @@ def view(self, name, view, **kwargs):
         """
         return self.define_property(name, Void(), view=view, **kwargs)
 
-    def btn(self, name, label, on_click=None, prompt=False, params=None):
-        """Defines a button to display to the user as a :class:`Button`."""
+    def btn(
+        self,
+        name,
+        label,
+        icon=None,
+        icon_variant=None,
+        on_click=None,
+        prompt=False,
+        params=None,
+    ):
+        """Defines a button or icon button to display to the user as a :class:`Button`.
+
+        Examples::
+
+            import fiftyone.operators.types as types
+
+            inputs = types.Object()
+            inputs.btn(
+                "greet",
+                label="Say Hi!",
+                icon="waving_hand",
+                on_click="print_stdout",
+                params={"msg": "Hi!"},
+            )
+
+        Args:
+            name: the name of the property
+            label: the label of the button
+            icon (None): the name of the icon to display
+            icon_variant (None): the optional variant of the icon. Can be ``"round"`` or
+                ``"square"``
+            on_click (None): the name of the operator to execute when the button is clicked
+            prompt (False): whether to prompt the user before executing the operator
+            params (None): the parameters to pass to the operator
+        """
         btn = Button(
             label=label, operator=on_click, prompt=prompt, params=params
         )
+        if icon:
+            btn = IconButtonView(
+                label=label,
+                operator=on_click,
+                prompt=prompt,
+                params=params,
+                icon=icon,
+                variant=icon_variant,
+            )
         return self.view(name, btn)
 
     def message(self, name, label, **kwargs):
@@ -1885,7 +1927,11 @@ class IconButtonView(Button):
 
     Args:
         icon (None): a icon for the button. See https://marella.me/material-icons/demo/
+        variant (None): the optional variant of the icon button. Can be either ``"round"``
+            or ``"square"``.
     """
 
     def __init__(self, **kwargs):
+        if "icon" not in kwargs or not isinstance(kwargs["icon"], str):
+            raise ValueError("The 'icon' parameter of type str is required.")
         super().__init__(**kwargs)