Allow buttons to take null value (#7126)

* allow buttons to take null value * add changeset * add story * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Jan 24, 2024 · 5727b92 · 5727b92
1 parent 7d53aa1
commit 5727b92
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 10 deletions.
diff --git a/.changeset/all-sites-yell.md b/.changeset/all-sites-yell.md
@@ -0,0 +1,8 @@
+---
+"@gradio/button": patch
+"@gradio/uploadbutton": patch
+"@gradio/utils": patch
+"gradio": patch
+---
+
+fix:Allow buttons to take null value
diff --git a/js/button/Index.svelte b/js/button/Index.svelte
@@ -10,7 +10,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: string;
+	export let value: string | null;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let interactive: boolean;
 	export let size: "sm" | "lg" = "lg";
@@ -41,5 +41,5 @@
 	disabled={!interactive}
 	on:click={() => gradio.dispatch("click")}
 >
-	{gradio.i18n(value)}
+	{value ? gradio.i18n(value) : ""}
 </Button>
diff --git a/js/uploadbutton/Index.svelte b/js/uploadbutton/Index.svelte
@@ -10,7 +10,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let label: string;
+	export let label: string | null;
 	export let value: null | FileData | FileData[];
 	export let file_count: string;
 	export let file_types: string[] = [];
@@ -59,5 +59,5 @@
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}
 >
-	{gradio.i18n(label)}
+	{label ? gradio.i18n(label) : ""}
 </UploadButton>
diff --git a/js/uploadbutton/UploadButton.stories.svelte b/js/uploadbutton/UploadButton.stories.svelte
@@ -78,3 +78,9 @@
 		visible: false
 	}}
 />
+<Story
+	name="Button with null label (should be collapsed)"
+	args={{
+		label: null
+	}}
+/>
diff --git a/js/uploadbutton/shared/UploadButton.svelte b/js/uploadbutton/shared/UploadButton.svelte
@@ -12,7 +12,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let label: string;
+	export let label: string | null;
 	export let value: null | FileData | FileData[];
 	export let file_count: string;
 	export let file_types: string[] = [];

diff --git a/js/utils/src/utils.ts b/js/utils/src/utils.ts
@@ -151,11 +151,6 @@ async function copy_to_clipboard(value: string): Promise<boolean> {
 	return copied;
 }
 
-// import { format } from "svelte-i18n";
-import { get } from "svelte/store";
-
-// const x = get(format);
-
 export type I18nFormatter = any;
 export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	#id: number;