From fd1d80626098bc8ac1089667f8c1e44ba1912b0f Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 3 Aug 2023 16:03:22 +0200 Subject: [PATCH 01/19] add icons and link params --- gradio/components/button.py | 12 ++++++ js/app/src/components/Button/Button.svelte | 24 +++++++++-- js/button/package.json | 1 + js/button/src/Button.svelte | 49 +++++++++++++++------- js/button/src/LinkWrapper.svelte | 11 +++++ 5 files changed, 80 insertions(+), 17 deletions(-) create mode 100644 js/button/src/LinkWrapper.svelte diff --git a/gradio/components/button.py b/gradio/components/button.py index 4d932c75becc1..f07b10ce943a6 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -30,6 +30,8 @@ def __init__( *, variant: Literal["primary", "secondary", "stop"] = "secondary", size: Literal["sm", "lg"] | None = None, + icon: str | None = None, + link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, @@ -43,6 +45,8 @@ 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. variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. size: Size of the button. Can be "sm" or "lg". + icon: URL or path to the icon file, or a PIL.Image object representing the icon. + link: URL to open when the button is clicked. visible: If False, component will be hidden. interactive: If False, the Button will be in a disabled state. elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. @@ -66,12 +70,16 @@ def __init__( variant = "secondary" self.variant = variant self.size = size + self.icon = icon + self.link = link def get_config(self): return { "value": self.value, "variant": self.variant, "size": self.size, + "icon": self.icon, + "link": self.link, "interactive": self.interactive, "scale": self.scale, "min_width": self.min_width, @@ -83,6 +91,8 @@ def update( value: str | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE, variant: Literal["primary", "secondary", "stop"] | None = None, size: Literal["sm", "lg"] | None = None, + icon: str | None = None, + link: str | None = None, visible: bool | None = None, interactive: bool | None = None, scale: int | None = None, @@ -93,6 +103,8 @@ def update( "size": size, "visible": visible, "value": value, + "icon": icon, + "link": link, "interactive": interactive, "scale": scale, "min_width": min_width, diff --git a/js/app/src/components/Button/Button.svelte b/js/app/src/components/Button/Button.svelte index 5c278c1b52292..6ac8c0a1f77d1 100644 --- a/js/app/src/components/Button/Button.svelte +++ b/js/app/src/components/Button/Button.svelte @@ -1,24 +1,42 @@ + + + diff --git a/js/button/src/LinkWrapper.svelte b/js/button/src/LinkWrapper.svelte new file mode 100644 index 0000000000000..de9925bcd5d29 --- /dev/null +++ b/js/button/src/LinkWrapper.svelte @@ -0,0 +1,11 @@ + + +{#if link && link.length > 0} +
+ +
+{:else} + +{/if} From d3e21342d00364b2f5a650162d9f21e79ae5bfcb Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 3 Aug 2023 16:29:35 +0200 Subject: [PATCH 02/19] tweak --- js/button/src/Button.svelte | 1 - js/button/src/LinkWrapper.svelte | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/js/button/src/Button.svelte b/js/button/src/Button.svelte index 4e3780f9350af..1a10aef7c4aac 100644 --- a/js/button/src/Button.svelte +++ b/js/button/src/Button.svelte @@ -32,7 +32,6 @@ {`${value}-icon`} {/if} diff --git a/js/button/src/LinkWrapper.svelte b/js/button/src/LinkWrapper.svelte index de9925bcd5d29..36731db1a9cbf 100644 --- a/js/button/src/LinkWrapper.svelte +++ b/js/button/src/LinkWrapper.svelte @@ -3,9 +3,9 @@ {#if link && link.length > 0} -
+ -
+ {:else} {/if} From 4905e412a62074c54b71d584366e63f6ad00b201 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Thu, 3 Aug 2023 14:50:26 +0000 Subject: [PATCH 03/19] add changeset --- .changeset/witty-suns-marry.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/witty-suns-marry.md diff --git a/.changeset/witty-suns-marry.md b/.changeset/witty-suns-marry.md new file mode 100644 index 0000000000000..fe37356409c31 --- /dev/null +++ b/.changeset/witty-suns-marry.md @@ -0,0 +1,7 @@ +--- +"@gradio/app": minor +"@gradio/button": minor +"gradio": minor +--- + +feat:WIP: Add icon and link params to `gr.Button` From 83af029a551d5d80f288da74328f2e77e9dd13fd Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 09:27:25 +0200 Subject: [PATCH 04/19] prepend icon param with /file= --- js/app/src/components/Button/Button.svelte | 16 ++-------------- js/button/src/Button.svelte | 10 +++------- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/js/app/src/components/Button/Button.svelte b/js/app/src/components/Button/Button.svelte index 6ac8c0a1f77d1..1ef5ef0eddec0 100644 --- a/js/app/src/components/Button/Button.svelte +++ b/js/app/src/components/Button/Button.svelte @@ -11,21 +11,9 @@ export let mode: "static" | "dynamic" = "dynamic"; export let size: "sm" | "lg" = "lg"; export let scale: number | null = null; - export let icon: FileData | null = null; + export let icon: string | null = null; export let link: string | null = null; - export let root: string; - export let root_url: null | string; export let min_width: number | undefined = undefined; - - let _icon: FileData | null = null; - - $: { - if (icon) { - _icon = normalise_file(icon, root, root_url) as FileData; - } else { - _icon = null; - } - } From c5c468ef954152db1aab22be5a2af6fc071722e0 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 10:08:31 +0200 Subject: [PATCH 05/19] prepend icon with /file= --- .../components/Button/Button.stories.svelte | 36 ++++++++++++++----- js/app/src/components/Button/Button.svelte | 3 +- js/button/src/Button.svelte | 2 +- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/js/app/src/components/Button/Button.stories.svelte b/js/app/src/components/Button/Button.stories.svelte index f9650419b64b6..3b958cdd822b6 100644 --- a/js/app/src/components/Button/Button.stories.svelte +++ b/js/app/src/components/Button/Button.stories.svelte @@ -1,6 +1,7 @@ @@ -58,3 +59,22 @@ + + + diff --git a/js/app/src/components/Button/Button.svelte b/js/app/src/components/Button/Button.svelte index 1ef5ef0eddec0..f1f0f9f7dfb7f 100644 --- a/js/app/src/components/Button/Button.svelte +++ b/js/app/src/components/Button/Button.svelte @@ -1,7 +1,6 @@ + + + + + + + + + + + From 349d399620f2697f3a9b35933a3ba79b168e84d0 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Fri, 4 Aug 2023 08:31:38 +0000 Subject: [PATCH 07/19] add changeset --- .changeset/witty-suns-marry.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/witty-suns-marry.md b/.changeset/witty-suns-marry.md index fe37356409c31..45f4a97182004 100644 --- a/.changeset/witty-suns-marry.md +++ b/.changeset/witty-suns-marry.md @@ -1,7 +1,6 @@ --- -"@gradio/app": minor "@gradio/button": minor "gradio": minor --- -feat:WIP: Add icon and link params to `gr.Button` +feat:Add icon and link params to `gr.Button` From 2cba08f39f53bdada0aec905a12dbbb8ada3e0d4 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 10:32:56 +0200 Subject: [PATCH 08/19] param description tweak --- gradio/components/button.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index f07b10ce943a6..d63924e9cdbb4 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -45,7 +45,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. variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. size: Size of the button. Can be "sm" or "lg". - icon: URL or path to the icon file, or a PIL.Image object representing the icon. + icon: URL or path to the icon file to display within the button. link: URL to open when the button is clicked. visible: If False, component will be hidden. interactive: If False, the Button will be in a disabled state. From 9e25ced05e53170c0ffc0f0a4760e7a6d594d9c9 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 10:34:26 +0200 Subject: [PATCH 09/19] tweak param description --- gradio/components/button.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index d63924e9cdbb4..21820949233ea 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -45,8 +45,8 @@ 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. variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button. size: Size of the button. Can be "sm" or "lg". - icon: URL or path to the icon file to display within the button. - link: URL to open when the button is clicked. + 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. visible: If False, component will be hidden. interactive: If False, the Button will be in a disabled state. elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. From b74937379af8bae8b93d628ab5301d8d77edc439 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 11:09:11 +0200 Subject: [PATCH 10/19] type tweak --- js/button/static/Button.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/button/static/Button.svelte b/js/button/static/Button.svelte index 43de0bbff8722..9d2693a0e4f4e 100644 --- a/js/button/static/Button.svelte +++ b/js/button/static/Button.svelte @@ -6,7 +6,7 @@ export let visible = true; export let variant: "primary" | "secondary" | "stop" = "secondary"; export let size: "sm" | "lg" = "lg"; - export let value: string; + export let value: string | null = null; export let link: string | null = null; export let icon: string | null = null; export let disabled = false; From ec0aa95cc18bf7d95c6e899e491217addf69a312 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 12:24:24 +0200 Subject: [PATCH 11/19] fix i18n in story --- gradio/components/button.py | 5 +- js/button/Button.stories.svelte | 8 +-- js/button/static/StaticButton.svelte | 2 +- js/storybook/public/HF_logo.svg | 73 ++++++++++++++++++++++++++++ 4 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 js/storybook/public/HF_logo.svg diff --git a/gradio/components/button.py b/gradio/components/button.py index 21820949233ea..1cc4081dab697 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -70,7 +70,10 @@ def __init__( variant = "secondary" self.variant = variant self.size = size - self.icon = icon + + if icon is not None: + icon = "/file=" + icon + self.link = link def get_config(self): diff --git a/js/button/Button.stories.svelte b/js/button/Button.stories.svelte index d70201558160f..ae5478d6dfa63 100644 --- a/js/button/Button.stories.svelte +++ b/js/button/Button.stories.svelte @@ -1,7 +1,9 @@ @@ -75,6 +77,6 @@ name="Button with local icon file" source args={{ - icon: logo, + icon: "./HF_logo.svg", }} /> diff --git a/js/button/static/StaticButton.svelte b/js/button/static/StaticButton.svelte index f35a321245ab8..966b56c4de78a 100644 --- a/js/button/static/StaticButton.svelte +++ b/js/button/static/StaticButton.svelte @@ -23,7 +23,7 @@ {size} {scale} {link} - icon={icon && `/file=${icon}`} + {icon} {min_width} {visible} disabled={mode === "static"} diff --git a/js/storybook/public/HF_logo.svg b/js/storybook/public/HF_logo.svg new file mode 100644 index 0000000000000..ef36d62b6ce13 --- /dev/null +++ b/js/storybook/public/HF_logo.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + From 5e95e7f7b687921c491507a0a1ab900c8f295bcc Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 10:32:55 +0000 Subject: [PATCH 12/19] fix formatting --- gradio/components/button.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index 1cc4081dab697..7bb984bad60ab 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -70,7 +70,7 @@ def __init__( variant = "secondary" self.variant = variant self.size = size - + if icon is not None: icon = "/file=" + icon From 1f1c408672c6e6a1d13536c1fa511da851ff9fe4 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 11:03:44 +0000 Subject: [PATCH 13/19] fix test --- gradio/components/clear_button.py | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/gradio/components/clear_button.py b/gradio/components/clear_button.py index 56652e731ae43..959a9c11ca579 100644 --- a/gradio/components/clear_button.py +++ b/gradio/components/clear_button.py @@ -29,6 +29,8 @@ def __init__( value: str = "Clear", variant: Literal["primary", "secondary", "stop"] = "secondary", size: Literal["sm", "lg"] | None = None, + icon: str | None = None, + link: str | None = None, visible: bool = True, interactive: bool = True, elem_id: str | None = None, @@ -41,6 +43,8 @@ def __init__( value, variant=variant, size=size, + icon=icon + link=link visible=visible, interactive=interactive, elem_id=elem_id, From 5a7c1ae959e44b3e5d4fc25f248d1a364d669c74 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 11:07:23 +0000 Subject: [PATCH 14/19] tweak --- gradio/components/clear_button.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gradio/components/clear_button.py b/gradio/components/clear_button.py index 959a9c11ca579..33d122e12c9df 100644 --- a/gradio/components/clear_button.py +++ b/gradio/components/clear_button.py @@ -43,8 +43,8 @@ def __init__( value, variant=variant, size=size, - icon=icon - link=link + icon=icon, + link=link, visible=visible, interactive=interactive, elem_id=elem_id, From 4ae7aa9b2db30af16d86cc77c408bc3ce2ac3e5d Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 11:08:41 +0000 Subject: [PATCH 15/19] fix typo --- gradio/components/button.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index 7bb984bad60ab..1d0e67243ee06 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -72,7 +72,7 @@ def __init__( self.size = size if icon is not None: - icon = "/file=" + icon + icon = "/file=" + self.icon self.link = link From 9eb89f7af109edc345e121a375b3f06b1257d926 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 11:18:40 +0000 Subject: [PATCH 16/19] fix icon bug --- gradio/components/button.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index 1d0e67243ee06..134afd285574c 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -72,7 +72,9 @@ def __init__( self.size = size if icon is not None: - icon = "/file=" + self.icon + self.icon = "/file=" + icon + else: + self.icon = icon self.link = link From 3c4c722f7320a7bc20c69a72db96cb4b6c8a6595 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 14:22:03 +0200 Subject: [PATCH 17/19] fix inconsistent width --- js/button/static/Button.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/js/button/static/Button.svelte b/js/button/static/Button.svelte index 9d2693a0e4f4e..97e4a818d3292 100644 --- a/js/button/static/Button.svelte +++ b/js/button/static/Button.svelte @@ -43,6 +43,7 @@ box-shadow: var(--button-shadow); padding: var(--size-0-5) var(--size-2); text-align: center; + width: var(--size-full); } button:hover, From 95338873def20ac8153496a96b8a5abe3811e26d Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 14:32:48 +0200 Subject: [PATCH 18/19] remove target --- gradio/components/button.py | 5 +---- js/button/static/LinkWrapper.svelte | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/gradio/components/button.py b/gradio/components/button.py index 134afd285574c..087f688729719 100644 --- a/gradio/components/button.py +++ b/gradio/components/button.py @@ -71,10 +71,7 @@ def __init__( self.variant = variant self.size = size - if icon is not None: - self.icon = "/file=" + icon - else: - self.icon = icon + self.icon = icon if icon is None else "/file=" + icon self.link = link diff --git a/js/button/static/LinkWrapper.svelte b/js/button/static/LinkWrapper.svelte index 36731db1a9cbf..c8fc74d42b33a 100644 --- a/js/button/static/LinkWrapper.svelte +++ b/js/button/static/LinkWrapper.svelte @@ -3,7 +3,7 @@ {#if link && link.length > 0} - + {:else} From c66fe4a0548b2827bda890f8aedff6a3f170c636 Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 4 Aug 2023 16:59:32 +0200 Subject: [PATCH 19/19] styling changes + add story --- js/button/Button.stories.svelte | 19 ++++++++++--- js/button/static/Button.svelte | 42 ++++++++++++++++++++++------- js/button/static/LinkWrapper.svelte | 11 -------- 3 files changed, 48 insertions(+), 24 deletions(-) delete mode 100644 js/button/static/LinkWrapper.svelte diff --git a/js/button/Button.stories.svelte b/js/button/Button.stories.svelte index ae5478d6dfa63..82893189ab8b3 100644 --- a/js/button/Button.stories.svelte +++ b/js/button/Button.stories.svelte @@ -60,22 +60,33 @@ - + + + + + - import LinkWrapper from "./LinkWrapper.svelte"; - export let elem_id = ""; export let elem_classes: string[] = []; export let visible = true; @@ -14,7 +12,28 @@ export let min_width: number | undefined = undefined; - +{#if link && link.length > 0} + + {#if icon} + {`${value}-icon`} + {/if} + + +{:else} - +{/if}