@gradio/button 0.2.51 → 0.3.0-beta.2

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 (6) hide show
  1. package/Button.stories.svelte +11 -4
  2. package/CHANGELOG.md +21 -0
  3. package/dist/shared/Button.svelte +38 -8
  4. package/dist/shared/Button.svelte.d.ts +1 -1
  5. package/package.json +4 -4
  6. package/shared/Button.svelte +40 -9
package/Button.stories.svelte CHANGED
@@ -55,16 +55,23 @@
55
55
  <Button value="Gradio Button" {...args} />
56
56
  </Template>
57
57
 
58
- <Story name="Primary" args={{ variant: "primary", size: "lg", scale: 1 }} />
59
- <Story name="Secondary" args={{ variant: "secondary", size: "lg" }} />
60
- <Story name="Stop" args={{ variant: "stop", size: "lg" }} />
58
+ <Story
59
+ name="Primary"
60
+ args={{ variant: "primary", size: "lg", scale: 1, interactive: true }}
61
+ />
62
+ <Story
63
+ name="Secondary"
64
+ args={{ variant: "secondary", size: "lg", interactive: true }}
65
+ />
66
+ <Story name="Stop" args={{ variant: "stop", size: "lg", interactive: true }} />
61
67
  <Story
62
68
  name="Button with link"
63
- args={{ link: "https://huggingface.co/welcome" }}
69
+ args={{ link: "https://huggingface.co/welcome", interactive: true }}
64
70
  />
65
71
  <Story
66
72
  name="Button with external image icon"
67
73
  args={{
74
+ interactive: true,
68
75
  icon: {
69
76
  url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
70
77
  path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @gradio/button
2
2
 
3
+ ## 0.3.0-beta.2
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/upload@0.13.0-beta.2
8
+ - @gradio/client@1.6.0-beta.2
9
+ - @gradio/utils@0.7.0-beta.2
10
+
11
+ ## 0.3.0-beta.1
12
+
13
+ ### Features
14
+
15
+ - [#9167](https://github.com/gradio-app/gradio/pull/9167) [`e9e737e`](https://github.com/gradio-app/gradio/commit/e9e737eeeb61d0bbf43277c75b6ffed8b34aa445) - Redesign `gr.Button()`. Thanks @hannahblair!
16
+ - [#9254](https://github.com/gradio-app/gradio/pull/9254) [`03f3735`](https://github.com/gradio-app/gradio/commit/03f3735fba1fd4f1978b5431af9e67de3b6e7945) - Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`. Thanks @abidlabs!
17
+
18
+ ### Dependency updates
19
+
20
+ - @gradio/utils@0.7.0-beta.1
21
+ - @gradio/client@1.6.0-beta.1
22
+ - @gradio/upload@0.12.4-beta.1
23
+
3
24
  ## 0.2.51
4
25
 
5
26
  ### Fixes
package/dist/shared/Button.svelte CHANGED
@@ -60,21 +60,24 @@ export let min_width = void 0;
60
60
  justify-content: center;
61
61
  align-items: center;
62
62
  transition: var(--button-transition);
63
- box-shadow: var(--button-shadow);
64
63
  padding: var(--size-0-5) var(--size-2);
65
64
  text-align: center;
66
65
  }
67
66
 
67
+ button:hover {
68
+ transform: var(--button-transform);
69
+ transition: all 0.2s;
70
+ }
71
+
68
72
  button:hover,
69
73
  button[disabled],
70
74
  a:hover,
71
75
  a.disabled {
72
- box-shadow: var(--button-shadow-hover);
73
76
  }
74
77
 
75
78
  button:active,
76
79
  a:active {
77
- box-shadow: var(--button-shadow-active);
80
+ transform: var(--button-active-transform);
78
81
  }
79
82
 
80
83
  button[disabled],
@@ -82,6 +85,7 @@ export let min_width = void 0;
82
85
  opacity: 0.5;
83
86
  filter: grayscale(30%);
84
87
  cursor: not-allowed;
88
+ transform: none;
85
89
  }
86
90
 
87
91
  .hidden {
@@ -95,11 +99,18 @@ export let min_width = void 0;
95
99
  }
96
100
  .primary:hover,
97
101
  .primary[disabled] {
98
- border-color: var(--button-primary-border-color-hover);
99
102
  background: var(--button-primary-background-fill-hover);
100
103
  color: var(--button-primary-text-color-hover);
101
104
  }
102
105
 
106
+ .primary:hover {
107
+ border-color: var(--button-primary-border-color-hover);
108
+ }
109
+
110
+ .primary[disabled] {
111
+ border-color: var(--button-primary-border-color);
112
+ }
113
+
103
114
  .secondary {
104
115
  border: var(--button-border-width) solid
105
116
  var(--button-secondary-border-color);
@@ -107,24 +118,43 @@ export let min_width = void 0;
107
118
  color: var(--button-secondary-text-color);
108
119
  }
109
120
 
121
+ .huggingface {
122
+ border: var(--button-border-width) solid
123
+ var(--button-secondary-border-color);
124
+ background: var(--background-fill-primary);
125
+ }
126
+
110
127
  .secondary:hover,
111
128
  .secondary[disabled] {
112
- border-color: var(--button-secondary-border-color-hover);
113
129
  background: var(--button-secondary-background-fill-hover);
114
130
  color: var(--button-secondary-text-color-hover);
115
131
  }
116
132
 
133
+ .secondary:hover {
134
+ border-color: var(--button-secondary-border-color-hover);
135
+ }
136
+
137
+ .secondary[disabled] {
138
+ border-color: var(--button-secondary-border-color);
139
+ }
140
+
117
141
  .stop {
118
- border: var(--button-border-width) solid var(--button-cancel-border-color);
119
142
  background: var(--button-cancel-background-fill);
120
143
  color: var(--button-cancel-text-color);
144
+ border: var(--button-border-width) solid var(--button-cancel-border-color);
121
145
  }
122
146
 
123
147
  .stop:hover,
124
148
  .stop[disabled] {
125
- border-color: var(--button-cancel-border-color-hover);
126
149
  background: var(--button-cancel-background-fill-hover);
127
- color: var(--button-cancel-text-color-hover);
150
+ }
151
+
152
+ .stop:hover {
153
+ border-color: var(--button-cancel-border-color-hover);
154
+ }
155
+
156
+ .stop[disabled] {
157
+ border-color: var(--button-cancel-border-color);
128
158
  }
129
159
 
130
160
  .sm {
package/dist/shared/Button.svelte.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const __propDef: {
5
5
  elem_id?: string | undefined;
6
6
  elem_classes?: string[] | undefined;
7
7
  visible?: boolean | undefined;
8
- variant?: ("primary" | "secondary" | "stop") | undefined;
8
+ variant?: ("primary" | "secondary" | "stop" | "huggingface") | undefined;
9
9
  size?: ("sm" | "lg") | undefined;
10
10
  value?: (string | null) | undefined;
11
11
  link?: (string | null) | undefined;
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@gradio/button",
3
- "version": "0.2.51",
3
+ "version": "0.3.0-beta.2",
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/client": "^1.5.2",
11
- "@gradio/utils": "^0.6.1",
12
- "@gradio/upload": "^0.12.4"
10
+ "@gradio/client": "^1.6.0-beta.2",
11
+ "@gradio/utils": "^0.7.0-beta.2",
12
+ "@gradio/upload": "^0.13.0-beta.2"
13
13
  },
14
14
  "devDependencies": {
15
15
  "@gradio/preview": "^0.11.1"
package/shared/Button.svelte CHANGED
@@ -4,7 +4,8 @@
4
4
  export let elem_id = "";
5
5
  export let elem_classes: string[] = [];
6
6
  export let visible = true;
7
- export let variant: "primary" | "secondary" | "stop" = "secondary";
7
+ export let variant: "primary" | "secondary" | "stop" | "huggingface" =
8
+ "secondary";
8
9
  export let size: "sm" | "lg" = "lg";
9
10
  export let value: string | null = null;
10
11
  export let link: string | null = null;
@@ -62,21 +63,24 @@
62
63
  justify-content: center;
63
64
  align-items: center;
64
65
  transition: var(--button-transition);
65
- box-shadow: var(--button-shadow);
66
66
  padding: var(--size-0-5) var(--size-2);
67
67
  text-align: center;
68
68
  }
69
69
 
70
+ button:hover {
71
+ transform: var(--button-transform);
72
+ transition: all 0.2s;
73
+ }
74
+
70
75
  button:hover,
71
76
  button[disabled],
72
77
  a:hover,
73
78
  a.disabled {
74
- box-shadow: var(--button-shadow-hover);
75
79
  }
76
80
 
77
81
  button:active,
78
82
  a:active {
79
- box-shadow: var(--button-shadow-active);
83
+ transform: var(--button-active-transform);
80
84
  }
81
85
 
82
86
  button[disabled],
@@ -84,6 +88,7 @@
84
88
  opacity: 0.5;
85
89
  filter: grayscale(30%);
86
90
  cursor: not-allowed;
91
+ transform: none;
87
92
  }
88
93
 
89
94
  .hidden {
@@ -97,11 +102,18 @@
97
102
  }
98
103
  .primary:hover,
99
104
  .primary[disabled] {
100
- border-color: var(--button-primary-border-color-hover);
101
105
  background: var(--button-primary-background-fill-hover);
102
106
  color: var(--button-primary-text-color-hover);
103
107
  }
104
108
 
109
+ .primary:hover {
110
+ border-color: var(--button-primary-border-color-hover);
111
+ }
112
+
113
+ .primary[disabled] {
114
+ border-color: var(--button-primary-border-color);
115
+ }
116
+
105
117
  .secondary {
106
118
  border: var(--button-border-width) solid
107
119
  var(--button-secondary-border-color);
@@ -109,24 +121,43 @@
109
121
  color: var(--button-secondary-text-color);
110
122
  }
111
123
 
124
+ .huggingface {
125
+ border: var(--button-border-width) solid
126
+ var(--button-secondary-border-color);
127
+ background: var(--background-fill-primary);
128
+ }
129
+
112
130
  .secondary:hover,
113
131
  .secondary[disabled] {
114
- border-color: var(--button-secondary-border-color-hover);
115
132
  background: var(--button-secondary-background-fill-hover);
116
133
  color: var(--button-secondary-text-color-hover);
117
134
  }
118
135
 
136
+ .secondary:hover {
137
+ border-color: var(--button-secondary-border-color-hover);
138
+ }
139
+
140
+ .secondary[disabled] {
141
+ border-color: var(--button-secondary-border-color);
142
+ }
143
+
119
144
  .stop {
120
- border: var(--button-border-width) solid var(--button-cancel-border-color);
121
145
  background: var(--button-cancel-background-fill);
122
146
  color: var(--button-cancel-text-color);
147
+ border: var(--button-border-width) solid var(--button-cancel-border-color);
123
148
  }
124
149
 
125
150
  .stop:hover,
126
151
  .stop[disabled] {
127
- border-color: var(--button-cancel-border-color-hover);
128
152
  background: var(--button-cancel-background-fill-hover);
129
- color: var(--button-cancel-text-color-hover);
153
+ }
154
+
155
+ .stop:hover {
156
+ border-color: var(--button-cancel-border-color-hover);
157
+ }
158
+
159
+ .stop[disabled] {
160
+ border-color: var(--button-cancel-border-color);
130
161
  }
131
162
 
132
163
  .sm {