diff --git a/app/packages/core/src/plugins/SchemaIO/components/Button.tsx b/app/packages/core/src/plugins/SchemaIO/components/Button.tsx index d0ad29a6458..3cb1c36d944 100644 --- a/app/packages/core/src/plugins/SchemaIO/components/Button.tsx +++ b/app/packages/core/src/plugins/SchemaIO/components/Button.tsx @@ -2,8 +2,10 @@ import React from "react"; import { ButtonProps, Button as MUIButton } from "@mui/material"; export default function Button(props: ButtonProps) { + const { variant } = props; return ( diff --git a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx index d590c2d0a9e..104eea025a5 100644 --- a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx +++ b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx @@ -1,11 +1,9 @@ -import React from "react"; +import usePanelEvent from "@fiftyone/operators/src/usePanelEvent"; +import { usePanelId } from "@fiftyone/spaces"; import { Box } from "@mui/material"; -import { useOperatorExecutor } from "@fiftyone/operators"; -import Button from "./Button"; +import React from "react"; import { getComponentProps } from "../utils"; -import { useCustomPanelState, usePanelId } from "@fiftyone/spaces"; -import { usePromptOperatorInput } from "@fiftyone/operators/src/state"; -import usePanelEvent from "@fiftyone/operators/src/usePanelEvent"; +import Button from "./Button"; export default function ButtonView(props) { return props?.schema?.view?.operator ? ( @@ -18,11 +16,11 @@ export default function ButtonView(props) { function BaseButtonView(props) { const { schema, onClick } = props; const { view = {} } = schema; - const { label, href } = view; + const { label, href, variant } = view; return ( + ); + } + return ( {Icon || label} @@ -78,3 +94,21 @@ const SquareButton = styled(Link)` border-top-right-radius: 3px; padding: 0.25rem; `; + +function getVariantSx(variant: VariantType): SxProps { + if (variant === "round") return {}; + if (variant === "contained") { + return { + color: (theme) => theme.palette.common.white, + }; + } + if (variant === "outlined") { + return { + color: (theme) => theme.palette.secondary.main, + }; + } + return { + color: (theme) => theme.palette.primary.main, + }; +} +type VariantType = "round" | "square" | "contained" | "outlined" | "default"; diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py index dab72122b22..ba238a89509 100644 --- a/fiftyone/operators/types.py +++ b/fiftyone/operators/types.py @@ -252,10 +252,11 @@ def btn( name, label, icon=None, - icon_variant=None, + variant=None, on_click=None, prompt=False, params=None, + href=None, ): """Defines a button or icon button to display to the user as a :class:`Button`. @@ -268,6 +269,7 @@ def btn( "greet", label="Say Hi!", icon="waving_hand", + variant="round", on_click="print_stdout", params={"msg": "Hi!"}, ) @@ -275,15 +277,22 @@ def btn( Args: name: the name of the property label: the label of the button + variant (None): the variant of the button. Can be ``"contained"``, ``"outlined"``, + ``"text"``. Additionally, when ``"icon"`` is provided, the variant can also be + ``"round"`` or ``"square"`` 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 + href (None): the URL to navigate to when the button is clicked """ btn = Button( - label=label, operator=on_click, prompt=prompt, params=params + label=label, + operator=on_click, + prompt=prompt, + params=params, + variant=variant, + href=href, ) if icon: btn = IconButtonView( @@ -292,7 +301,8 @@ def btn( prompt=prompt, params=params, icon=icon, - variant=icon_variant, + variant=variant, + href=href, ) return self.view(name, btn) @@ -1111,6 +1121,7 @@ class Button(View): operator (None): the name of the operator to execute when the button is clicked params (None): the parameters to pass to the operator + href (None): the URL to navigate to when the button is clicked """ def __init__(self, **kwargs): @@ -1119,6 +1130,7 @@ def __init__(self, **kwargs): self.operator = kwargs.get("operator", None) self.prompt = kwargs.get("prompt", False) self.params = kwargs.get("params", None) + self.href = kwargs.get("href", None) def to_json(self): return _convert_callables_to_operator_uris( @@ -1128,6 +1140,7 @@ def to_json(self): "operator": self.operator, "params": self.params, "prompt": self.prompt, + "href": self.href, } ) @@ -2021,8 +2034,15 @@ 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"``. + variant (None): the optional variant of the icon button. Can be ``"round"``, ``"square"``, + ``"outlined"``, or ``"contained"``. + label (None): a label for the button + description (None): a description for the button + caption (None): a caption for the button + operator (None): the name of the operator to execute when the button is + clicked + params (None): the parameters to pass to the operator + href (None): the URL to navigate to when the button is clicked """ def __init__(self, **kwargs):