@gradio/button 0.6.2 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/Button.stories.svelte +81 -76
  2. package/CHANGELOG.md +13 -0
  3. package/package.json +7 -7
package/Button.stories.svelte CHANGED
@@ -1,98 +1,103 @@
1
- <script>
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3
- import Button from "./Index.svelte";
4
- </script>
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import Button from "./shared/Button.svelte";
5
4
 
6
- <Meta
7
- title="Components/Button"
8
- component={Button}
9
- argTypes={{
10
- label: {
11
- control: "text",
12
- description: "The text to display on the button",
13
- name: "label",
14
- value: "Gradio Button"
15
- },
16
- variant: {
17
- options: ["primary", "secondary", "stop"],
18
- description: "The variant of the button",
19
- control: { type: "select" },
20
- defaultValue: "primary"
21
- },
22
- size: {
23
- options: ["sm", "lg"],
24
- description: "The size of the button",
25
- control: { type: "select" },
26
- defaultValue: "lg"
27
- },
28
- visible: {
29
- options: [true, false],
30
- description: "Sets the visibility of the button",
31
- control: { type: "boolean" },
32
- defaultValue: true
33
- },
34
- interactive: {
35
- options: [true, false],
36
- description: "If false, the button will be in a disabled state",
37
- control: { type: "boolean" },
38
- defaultValue: true
39
- },
40
- disabled: {
41
- options: [true, false],
42
- control: { type: "boolean" },
43
- defaultValue: false
44
- },
45
- scale: {
46
- options: [null, 0.5, 1, 2],
47
- description:
48
- "relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. Only applies in Rows, or top-level Components in Blocks where fill_height=True. ",
49
- control: { type: "select" }
5
+ const { Story } = defineMeta({
6
+ title: "Components/Button",
7
+ component: Button,
8
+ tags: ["autodocs"],
9
+ argTypes: {
10
+ value: {
11
+ control: "text",
12
+ description: "The text to display on the button"
13
+ },
14
+ variant: {
15
+ options: ["primary", "secondary", "stop", "huggingface"],
16
+ description: "The variant of the button",
17
+ control: { type: "select" }
18
+ },
19
+ size: {
20
+ options: ["sm", "md", "lg"],
21
+ description: "The size of the button",
22
+ control: { type: "select" }
23
+ },
24
+ visible: {
25
+ description: "Sets the visibility of the button",
26
+ control: { type: "boolean" }
27
+ },
28
+ disabled: {
29
+ description: "If true, the button will be in a disabled state",
30
+ control: { type: "boolean" }
31
+ },
32
+ scale: {
33
+ options: [null, 0.5, 1, 2],
34
+ description: "Relative size compared to adjacent components",
35
+ control: { type: "select" }
36
+ },
37
+ link: {
38
+ control: "text",
39
+ description: "URL to navigate to when clicked"
40
+ }
50
41
  }
51
- }}
52
- />
42
+ });
43
+ </script>
53
44
 
54
- <Template let:args>
55
- <Button value="Gradio Button" {...args} />
56
- </Template>
45
+ {#snippet template(args)}
46
+ <Button {...args}>{args.value}</Button>
47
+ {/snippet}
57
48
 
58
49
  <Story
59
50
  name="Primary"
60
- args={{ variant: "primary", size: "lg", scale: 1, interactive: true }}
51
+ args={{ variant: "primary", size: "lg", value: "Primary Button" }}
52
+ {template}
61
53
  />
62
54
  <Story
63
55
  name="Secondary"
64
- args={{ variant: "secondary", size: "lg", interactive: true }}
56
+ args={{ variant: "secondary", size: "lg", value: "Secondary Button" }}
57
+ {template}
65
58
  />
66
- <Story name="Stop" args={{ variant: "stop", size: "lg", interactive: true }} />
67
59
  <Story
68
- name="Button with link"
69
- args={{ link: "https://huggingface.co/welcome", interactive: true }}
60
+ name="Stop"
61
+ args={{ variant: "stop", size: "lg", value: "Stop Button" }}
62
+ {template}
70
63
  />
71
64
  <Story
72
- name="Button with external image icon"
73
- args={{
74
- interactive: true,
75
- icon: {
76
- url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
77
- path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
78
- }
79
- }}
65
+ name="Small"
66
+ args={{ variant: "primary", size: "sm", value: "Small Button" }}
67
+ {template}
80
68
  />
81
69
  <Story
82
- name="Button with external image icon and no text"
70
+ name="Medium"
71
+ args={{ variant: "primary", size: "md", value: "Medium Button" }}
72
+ {template}
73
+ />
74
+ <Story
75
+ name="Disabled"
83
76
  args={{
84
- interactive: true,
85
- icon: {
86
- url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
87
- path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
88
- },
89
- value: ""
77
+ variant: "primary",
78
+ size: "lg",
79
+ disabled: true,
80
+ value: "Disabled Button"
90
81
  }}
82
+ {template}
91
83
  />
92
-
93
84
  <Story
94
- name="Button with visible equal to false"
85
+ name="Button with link"
95
86
  args={{
96
- visible: false
87
+ variant: "primary",
88
+ size: "lg",
89
+ link: "https://huggingface.co",
90
+ value: "Link Button"
97
91
  }}
92
+ {template}
93
+ />
94
+ <Story
95
+ name="Huggingface variant"
96
+ args={{ variant: "huggingface", size: "lg", value: "Huggingface Button" }}
97
+ {template}
98
+ />
99
+ <Story
100
+ name="Hidden"
101
+ args={{ variant: "primary", visible: false, value: "Hidden Button" }}
102
+ {template}
98
103
  />
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @gradio/button
2
2
 
3
+ ## 0.6.3
4
+
5
+ ### Fixes
6
+
7
+ - [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons. Thanks @freddyaboulton!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/utils@0.11.2
12
+ - @gradio/upload@0.17.4
13
+ - @gradio/client@2.0.3
14
+ - @gradio/image@0.25.1
15
+
3
16
  ## 0.6.2
4
17
 
5
18
  ### Fixes
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@gradio/button",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
7
7
  "license": "ISC",
8
8
  "private": false,
9
9
  "dependencies": {
10
- "@gradio/upload": "^0.17.3",
11
- "@gradio/image": "^0.25.0",
12
- "@gradio/client": "^2.0.2",
13
- "@gradio/utils": "^0.11.1"
10
+ "@gradio/client": "^2.0.3",
11
+ "@gradio/image": "^0.25.1",
12
+ "@gradio/upload": "^0.17.4",
13
+ "@gradio/utils": "^0.11.2"
14
14
  },
15
15
  "devDependencies": {
16
- "@gradio/preview": "^0.15.1"
16
+ "@gradio/preview": "^0.15.2"
17
17
  },
18
18
  "main": "./Index.svelte",
19
19
  "main_changeset": true,
@@ -26,7 +26,7 @@
26
26
  }
27
27
  },
28
28
  "peerDependencies": {
29
- "svelte": "^5.43.4"
29
+ "svelte": "^5.48.0"
30
30
  },
31
31
  "repository": {
32
32
  "type": "git",