@gradio/uploadbutton 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @gradio/uploadbutton
 
+## 0.3.0
+
+### Features
+
+- [#6584](https://github.com/gradio-app/gradio/pull/6584) [`9bcb1da`](https://github.com/gradio-app/gradio/commit/9bcb1da189a9738d023ef6daad8c6c827e3f6371) - Feat: make UploadButton accept icon.  Thanks [@Justin-Xiang](https://github.com/Justin-Xiang)!
+
+## 0.2.2
+
+### Patch Changes
+
+- Updated dependencies [[`71f1a1f99`](https://github.com/gradio-app/gradio/commit/71f1a1f9931489d465c2c1302a5c8d768a3cd23a)]:
+  - @gradio/client@0.8.2
+  - @gradio/button@0.2.8
+  - @gradio/upload@0.5.1
+
 ## 0.2.1
 
 ### Patch Changes
@@ -192,4 +207,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 - Updated dependencies [[`61129052`](https://github.com/gradio-app/gradio/commit/61129052ed1391a75c825c891d57fa0ad6c09fc8), [`667875b2`](https://github.com/gradio-app/gradio/commit/667875b2441753e74d25bd9d3c8adedd8ede11cd), [`67265a58`](https://github.com/gradio-app/gradio/commit/67265a58027ef1f9e4c0eb849a532f72eaebde48), [`8b4eb8ca`](https://github.com/gradio-app/gradio/commit/8b4eb8cac9ea07bde31b44e2006ca2b7b5f4de36), [`37caa2e0`](https://github.com/gradio-app/gradio/commit/37caa2e0fe95d6cab8beb174580fb557904f137f)]:
   - @gradio/client@0.2.0
   - @gradio/upload@0.0.3
-  - @gradio/button@0.1.0
+  - @gradio/button@0.1.0

package/Index.svelte

@@ -17,6 +17,7 @@
 	export let root: string;
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
+	export let icon: string | null = null;
 	export let min_width: number | undefined = undefined;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let gradio: Gradio<{
@@ -25,6 +26,7 @@
 		click: never;
 	}>;
 	export let interactive: boolean;
+	export let proxy_url: null | string = null;
 
 	$: disabled = !interactive;
 
@@ -45,12 +47,14 @@
 	{file_types}
 	{size}
 	{scale}
+	{icon}
 	{min_width}
 	{root}
 	{value}
 	{disabled}
 	{variant}
 	{label}
+	{proxy_url}
 	on:click={() => gradio.dispatch("click")}
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}

package/UploadButton.stories.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import UploadButton from "./Index.svelte";
+</script>
+
+<Meta
+	title="Components/UploadButton"
+	component={UploadButton}
+	argTypes={{
+		label: {
+			control: "text",
+			description: "The text to display on the button",
+			name: "label",
+			value: "Gradio Button"
+		},
+		variant: {
+			options: ["primary", "secondary", "stop"],
+			description: "The variant of the button",
+			control: { type: "select" },
+			defaultValue: "primary"
+		},
+		size: {
+			options: ["sm", "lg"],
+			description: "The size of the button",
+			control: { type: "select" },
+			defaultValue: "lg"
+		},
+		visible: {
+			options: [true, false],
+			description: "Sets the visibility of the button",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		interactive: {
+			options: [true, false],
+			description: "If false, the button will be in a disabled state",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		disabled: {
+			options: [true, false],
+			control: { type: "boolean" },
+			defaultValue: false
+		},
+		scale: {
+			options: [null, 0.5, 1, 2],
+			description:
+				"relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.",
+			control: { type: "select" }
+		}
+	}}
+/>
+
+<Template let:args>
+	<UploadButton value="Gradio Button" {...args} />
+</Template>
+
+<Story
+	name="Primary"
+	args={{ label: "Upload", variant: "primary", size: "lg", scale: 1 }}
+/>
+<Story
+	name="Secondary"
+	args={{ label: "Upload", variant: "secondary", size: "lg" }}
+/>
+<Story name="Stop" args={{ label: "Upload", variant: "stop", size: "lg" }} />
+<Story
+	name="Button with external image icon"
+	args={{
+		label: "Upload",
+		icon: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+	}}
+/>
+<Story
+	name="Button with visible equal to false"
+	args={{
+		label: "Upload",
+		visible: false
+	}}
+/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/uploadbutton",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,9 +13,9 @@
   },
   "main": "./Index.svelte",
   "dependencies": {
-    "@gradio/button": "^0.2.7",
-    "@gradio/client": "^0.8.1",
+    "@gradio/button": "^0.2.9",
     "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.5.0"
+    "@gradio/upload": "^0.5.2",
+    "@gradio/client": "^0.8.2"
   }
 }

package/shared/UploadButton.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { tick, createEventDispatcher } from "svelte";
 	import { BaseButton } from "@gradio/button";
-	import { upload, prepare_files, type FileData } from "@gradio/client";
+	import {
+		upload,
+		prepare_files,
+		type FileData,
+		get_fetchable_url_or_file
+	} from "@gradio/client";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -12,10 +17,13 @@
 	export let file_types: string[] = [];
 	export let root: string;
 	export let size: "sm" | "lg" = "lg";
+	export let icon: string | null = null;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let disabled = false;
+	export let proxy_url: string | null = null;
+	$: icon_path = get_fetchable_url_or_file(icon, root, proxy_url);
 
 	const dispatch = createEventDispatcher();
 
@@ -95,6 +103,9 @@
 	{min_width}
 	{disabled}
 >
+	{#if icon}
+		<img class="button-icon" src={icon_path} alt={`${value} icon`} />
+	{/if}
 	<slot />
 </BaseButton>
 
@@ -102,4 +113,9 @@
 	.hide {
 		display: none;
 	}
+	.button-icon {
+		width: var(--text-xl);
+		height: var(--text-xl);
+		margin-right: var(--spacing-xl);
+	}
 </style>