From 03f3735fba1fd4f1978b5431af9e67de3b6e7945 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Wed, 4 Sep 2024 06:49:25 +0800 Subject: [PATCH] Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton` (#9254) * add clear variant * add changeset * duplicate button * add changeset * tweak * tweak * format * add changeset --------- Co-authored-by: gradio-pr-bot --- .changeset/few-clowns-notice.md | 6 ++++++ gradio/components/button.py | 4 ++-- gradio/components/duplicate_button.py | 4 ++-- gradio/components/login_button.py | 4 ++-- js/button/shared/Button.svelte | 9 ++++++++- 5 files changed, 20 insertions(+), 7 deletions(-) create mode 100644 .changeset/few-clowns-notice.md diff --git a/.changeset/few-clowns-notice.md b/.changeset/few-clowns-notice.md new file mode 100644 index 0000000000000..f00461a09705a --- /dev/null +++ b/.changeset/few-clowns-notice.md @@ -0,0 +1,6 @@ +--- +"@gradio/button": minor +"gradio": minor +--- + +feat:Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton` diff --git a/gradio/components/button.py b/gradio/components/button.py index e53901092a02d..5791d9ae44590 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -28,7 +28,7 @@ def __init__( *, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, - variant: Literal["primary", "secondary", "stop"] = "secondary", + variant: Literal["primary", "secondary", "stop", "huggingface"] = "secondary", size: Literal["sm", "lg"] | None = None, icon: str | None = None, link: str | None = None, @@ -46,7 +46,7 @@ def __init__( value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component. every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. - variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. + variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for no background color (appears white in light mode, black in dark mode). size: Size of the button. Can be "sm" or "lg". icon: URL or path to the icon file to display within the button. If None, no icon will be displayed. link: URL to open when the button is clicked. If None, no link will be used. diff --git a/gradio/components/duplicate_button.py b/gradio/components/duplicate_button.py index 0094e57243efc..35ee8b0342fd3 100644 --- a/gradio/components/duplicate_button.py +++ b/gradio/components/duplicate_button.py @@ -29,7 +29,7 @@ def __init__( *, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, - variant: Literal["primary", "secondary", "stop"] = "secondary", + variant: Literal["primary", "secondary", "stop", "huggingface"] = "huggingface", size: Literal["sm", "lg"] | None = "sm", icon: str | None = None, link: str | None = None, @@ -48,7 +48,7 @@ def __init__( value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component. every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer. inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change. - variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. + variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for no background color (appears white in light mode, black in dark mode). size: Size of the button. Can be "sm" or "lg". icon: URL or path to the icon file to display within the button. If None, no icon will be displayed. link: URL to open when the button is clicked. If None, no link will be used. diff --git a/gradio/components/login_button.py b/gradio/components/login_button.py index 1a062a1ce4b9a..ca34d2ec34a57 100644 --- a/gradio/components/login_button.py +++ b/gradio/components/login_button.py @@ -33,7 +33,7 @@ def __init__( *, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, - variant: Literal["primary", "secondary", "stop"] = "secondary", + variant: Literal["primary", "secondary", "stop", "huggingface"] = "huggingface", size: Literal["sm", "lg"] | None = None, icon: str | None = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg", @@ -44,7 +44,7 @@ def __init__( elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | None = None, - scale: int | None = 0, + scale: int | None = None, min_width: int | None = None, ): """ diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte index 236332271d7ef..ecc7ef2443714 100644 --- a/js/button/shared/Button.svelte +++ b/js/button/shared/Button.svelte @@ -4,7 +4,8 @@ export let elem_id = ""; export let elem_classes: string[] = []; export let visible = true; - export let variant: "primary" | "secondary" | "stop" = "secondary"; + export let variant: "primary" | "secondary" | "stop" | "huggingface" = + "secondary"; export let size: "sm" | "lg" = "lg"; export let value: string | null = null; export let link: string | null = null; @@ -120,6 +121,12 @@ color: var(--button-secondary-text-color); } + .huggingface { + border: var(--button-border-width) solid + var(--button-secondary-border-color); + background: var(--background-fill-primary); + } + .secondary:hover, .secondary[disabled] { background: var(--button-secondary-background-fill-hover);