From 4edb514f6795b09cf403110a671d68f1a3478465 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 3 Sep 2024 21:53:55 +0800 Subject: [PATCH 1/8] add clear variant --- gradio/components/button.py | 4 ++-- gradio/components/login_button.py | 4 ++-- js/button/shared/Button.svelte | 7 ++++++- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index e53901092a02d..bcc5c814a3a27 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", "clear"] = "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, 'clear' for no background color. 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..1b4041f345bb8 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", "clear"] = "clear", 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..48af275854a24 100644 --- a/js/button/shared/Button.svelte +++ b/js/button/shared/Button.svelte @@ -4,7 +4,7 @@ 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" | "clear" = "secondary"; export let size: "sm" | "lg" = "lg"; export let value: string | null = null; export let link: string | null = null; @@ -120,6 +120,11 @@ color: var(--button-secondary-text-color); } + .clear{ + border: var(--button-border-width) solid + var(--button-secondary-border-color); + } + .secondary:hover, .secondary[disabled] { background: var(--button-secondary-background-fill-hover); From 0ce7c6f836a928a07df42043b33b08f16dd047df Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Tue, 3 Sep 2024 13:58:19 +0000 Subject: [PATCH 2/8] add changeset --- .changeset/few-clowns-notice.md | 6 ++++++ 1 file changed, 6 insertions(+) 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..95713fef368f3 --- /dev/null +++ b/.changeset/few-clowns-notice.md @@ -0,0 +1,6 @@ +--- +"@gradio/button": minor +"gradio": minor +--- + +feat:Adds a "clear" button variant, and makes it the default for `gr.LoginButton` From 94f13460f86c1ef4add4e129dd4dafd4ef8686a7 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 3 Sep 2024 22:46:40 +0800 Subject: [PATCH 3/8] duplicate button --- gradio/components/duplicate_button.py | 2 +- js/button/shared/Button.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/gradio/components/duplicate_button.py b/gradio/components/duplicate_button.py index 0094e57243efc..6f65455de4320 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", "clear"] = "clear", size: Literal["sm", "lg"] | None = "sm", icon: str | None = None, link: str | None = None, diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte index 48af275854a24..9fa6d9f208d31 100644 --- a/js/button/shared/Button.svelte +++ b/js/button/shared/Button.svelte @@ -120,7 +120,7 @@ color: var(--button-secondary-text-color); } - .clear{ + .clear { border: var(--button-border-width) solid var(--button-secondary-border-color); } From 907e3202c5258b826a2c5816d2821f2dc4921bba Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Tue, 3 Sep 2024 14:47:51 +0000 Subject: [PATCH 4/8] add changeset --- .changeset/few-clowns-notice.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-clowns-notice.md b/.changeset/few-clowns-notice.md index 95713fef368f3..aa8296a4fe3f0 100644 --- a/.changeset/few-clowns-notice.md +++ b/.changeset/few-clowns-notice.md @@ -3,4 +3,4 @@ "gradio": minor --- -feat:Adds a "clear" button variant, and makes it the default for `gr.LoginButton` +feat:Adds a "clear" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton` From 907ef5af0a3f61c1e83e272ddcd7bb36ef308774 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 3 Sep 2024 23:31:54 +0800 Subject: [PATCH 5/8] tweak --- js/button/shared/Button.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte index 9fa6d9f208d31..6c7ca46547636 100644 --- a/js/button/shared/Button.svelte +++ b/js/button/shared/Button.svelte @@ -123,6 +123,8 @@ .clear { border: var(--button-border-width) solid var(--button-secondary-border-color); + background: var(--background-fill-primary); + } .secondary:hover, From 0b6c354997c8fa0f961df9d08e2515bc09719776 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 3 Sep 2024 23:34:01 +0800 Subject: [PATCH 6/8] tweak --- js/button/shared/Button.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte index 6c7ca46547636..150baf21892a7 100644 --- a/js/button/shared/Button.svelte +++ b/js/button/shared/Button.svelte @@ -124,7 +124,6 @@ border: var(--button-border-width) solid var(--button-secondary-border-color); background: var(--background-fill-primary); - } .secondary:hover, From 1c12c96b14681cb46817fae030d8477ffb46f33e Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 3 Sep 2024 23:44:09 +0800 Subject: [PATCH 7/8] format --- gradio/components/button.py | 4 ++-- gradio/components/duplicate_button.py | 4 ++-- gradio/components/login_button.py | 2 +- js/button/shared/Button.svelte | 5 +++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index bcc5c814a3a27..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", "clear"] = "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, 'clear' for no background color. + 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 6f65455de4320..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", "clear"] = "clear", + 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 1b4041f345bb8..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", "clear"] = "clear", + 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", diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte index 150baf21892a7..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" | "clear" = "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,7 +121,7 @@ color: var(--button-secondary-text-color); } - .clear { + .huggingface { border: var(--button-border-width) solid var(--button-secondary-border-color); background: var(--background-fill-primary); From c236e82e823ac4316532e69bd1994048d9225301 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Tue, 3 Sep 2024 15:45:36 +0000 Subject: [PATCH 8/8] add changeset --- .changeset/few-clowns-notice.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-clowns-notice.md b/.changeset/few-clowns-notice.md index aa8296a4fe3f0..f00461a09705a 100644 --- a/.changeset/few-clowns-notice.md +++ b/.changeset/few-clowns-notice.md @@ -3,4 +3,4 @@ "gradio": minor --- -feat:Adds a "clear" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton` +feat:Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`