@spark-web/button 1.4.3 → 1.4.5
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.
- package/CHANGELOG.md +348 -0
- package/README.md +9 -5
- package/dist/declarations/src/{BaseButton.d.ts → base-button.d.ts} +0 -0
- package/dist/declarations/src/{ButtonLink.d.ts → button-link.d.ts} +0 -0
- package/dist/declarations/src/{Button.d.ts → button.d.ts} +0 -0
- package/dist/declarations/src/index.d.ts +8 -8
- package/dist/declarations/src/{resolveButtonChildren.d.ts → resolve-button-children.d.ts} +0 -0
- package/dist/declarations/src/types.d.ts +1 -1
- package/dist/declarations/src/{useButtonStyles.d.ts → use-button-styles.d.ts} +1 -1
- package/dist/spark-web-button.cjs.dev.js +59 -72
- package/dist/spark-web-button.cjs.prod.js +59 -72
- package/dist/spark-web-button.esm.js +59 -72
- package/package.json +19 -12
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
# @spark-web/button
|
|
2
|
+
|
|
3
|
+
## 1.4.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#274](https://github.com/brighte-labs/spark-web/pull/274)
|
|
8
|
+
[`b6976e3`](https://github.com/brighte-labs/spark-web/commit/b6976e36ab0a577ba700660c5dc8d2d1251082bb)
|
|
9
|
+
Thanks [@szhang-brighte](https://github.com/szhang-brighte)! - update
|
|
10
|
+
@spark-web/link version
|
|
11
|
+
|
|
12
|
+
## 1.4.4
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#245](https://github.com/brighte-labs/spark-web/pull/245)
|
|
17
|
+
[`21c6e08`](https://github.com/brighte-labs/spark-web/commit/21c6e08e821ada32feea7c34f1bf451573b5023d)
|
|
18
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove explicit
|
|
19
|
+
JSX.Element return types
|
|
20
|
+
|
|
21
|
+
- [#218](https://github.com/brighte-labs/spark-web/pull/218)
|
|
22
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
|
|
23
|
+
Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
|
|
24
|
+
|
|
25
|
+
- [#222](https://github.com/brighte-labs/spark-web/pull/222)
|
|
26
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
|
|
27
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
28
|
+
dependencies
|
|
29
|
+
|
|
30
|
+
- [#242](https://github.com/brighte-labs/spark-web/pull/242)
|
|
31
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
|
|
32
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
|
|
33
|
+
and repository keys to package.json
|
|
34
|
+
- Add CHANGELOG and README to files key in package.json
|
|
35
|
+
- Updated dependencies
|
|
36
|
+
[[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b),
|
|
37
|
+
[`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c),
|
|
38
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
|
|
39
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
|
|
40
|
+
[`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
|
|
41
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
|
|
42
|
+
- @spark-web/box@1.1.0
|
|
43
|
+
- @spark-web/icon@1.2.2
|
|
44
|
+
- @spark-web/text@1.1.2
|
|
45
|
+
- @spark-web/a11y@1.3.2
|
|
46
|
+
- @spark-web/link@1.0.10
|
|
47
|
+
- @spark-web/spinner@1.0.8
|
|
48
|
+
- @spark-web/theme@3.1.0
|
|
49
|
+
- @spark-web/utils@1.2.3
|
|
50
|
+
|
|
51
|
+
## 1.4.3
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- [#204](https://github.com/brighte-labs/spark-web/pull/204)
|
|
56
|
+
[`76522bd`](https://github.com/brighte-labs/spark-web/commit/76522bd266e8d07f0a2c003c0f78314ab002cf40)
|
|
57
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Export
|
|
58
|
+
`ButtonChildrenProps`, `ButtonProminence`, `ButtonSize` and `ButtonTone`
|
|
59
|
+
types.
|
|
60
|
+
|
|
61
|
+
## 1.4.2
|
|
62
|
+
|
|
63
|
+
### Patch Changes
|
|
64
|
+
|
|
65
|
+
- [#208](https://github.com/brighte-labs/spark-web/pull/208)
|
|
66
|
+
[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
|
|
67
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
|
|
68
|
+
node version
|
|
69
|
+
|
|
70
|
+
- Updated dependencies
|
|
71
|
+
[[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
|
|
72
|
+
- @spark-web/a11y@1.3.1
|
|
73
|
+
- @spark-web/box@1.0.9
|
|
74
|
+
- @spark-web/icon@1.2.1
|
|
75
|
+
- @spark-web/link@1.0.9
|
|
76
|
+
- @spark-web/spinner@1.0.7
|
|
77
|
+
- @spark-web/text@1.1.1
|
|
78
|
+
- @spark-web/theme@3.0.6
|
|
79
|
+
- @spark-web/utils@1.2.2
|
|
80
|
+
|
|
81
|
+
## 1.4.1
|
|
82
|
+
|
|
83
|
+
### Patch Changes
|
|
84
|
+
|
|
85
|
+
- [#197](https://github.com/brighte-labs/spark-web/pull/197)
|
|
86
|
+
[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
|
|
87
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
|
|
88
|
+
|
|
89
|
+
- Updated dependencies
|
|
90
|
+
[[`51b6c7a`](https://github.com/brighte-labs/spark-web/commit/51b6c7a43f441e02b90403b13af9cfa11e5438ef),
|
|
91
|
+
[`9ff0c4b`](https://github.com/brighte-labs/spark-web/commit/9ff0c4b4cc83e0e1ab609d0bcdb01458b654263e),
|
|
92
|
+
[`07286b5`](https://github.com/brighte-labs/spark-web/commit/07286b52f897909b1a806d736e1040351c93078f),
|
|
93
|
+
[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
|
|
94
|
+
- @spark-web/a11y@1.3.0
|
|
95
|
+
- @spark-web/text@1.1.0
|
|
96
|
+
- @spark-web/icon@1.2.0
|
|
97
|
+
- @spark-web/box@1.0.8
|
|
98
|
+
- @spark-web/link@1.0.8
|
|
99
|
+
- @spark-web/spinner@1.0.6
|
|
100
|
+
- @spark-web/theme@3.0.5
|
|
101
|
+
- @spark-web/utils@1.2.1
|
|
102
|
+
|
|
103
|
+
## 1.4.0
|
|
104
|
+
|
|
105
|
+
### Minor Changes
|
|
106
|
+
|
|
107
|
+
- [#188](https://github.com/brighte-labs/spark-web/pull/188)
|
|
108
|
+
[`891f839`](https://github.com/brighte-labs/spark-web/commit/891f839c5a5608d771183189cb12116a60f66209)
|
|
109
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Move
|
|
110
|
+
aria-disabled logic from Button onto underlying BaseButton
|
|
111
|
+
|
|
112
|
+
* [#188](https://github.com/brighte-labs/spark-web/pull/188)
|
|
113
|
+
[`891f839`](https://github.com/brighte-labs/spark-web/commit/891f839c5a5608d771183189cb12116a60f66209)
|
|
114
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Export
|
|
115
|
+
useButtonStyles hook
|
|
116
|
+
|
|
117
|
+
### Patch Changes
|
|
118
|
+
|
|
119
|
+
- Updated dependencies
|
|
120
|
+
[[`7b0cfdf`](https://github.com/brighte-labs/spark-web/commit/7b0cfdf6fb4d32b86e00050d8869ac2b9787cf41)]:
|
|
121
|
+
- @spark-web/theme@3.0.4
|
|
122
|
+
|
|
123
|
+
## 1.3.1
|
|
124
|
+
|
|
125
|
+
### Patch Changes
|
|
126
|
+
|
|
127
|
+
- [#185](https://github.com/brighte-labs/spark-web/pull/185)
|
|
128
|
+
[`82413df`](https://github.com/brighte-labs/spark-web/commit/82413df8f27ba2508911d0edb4380d3d366c75c0)
|
|
129
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove "cursor:
|
|
130
|
+
pointer" when buttons are disabled
|
|
131
|
+
|
|
132
|
+
## 1.3.0
|
|
133
|
+
|
|
134
|
+
### Minor Changes
|
|
135
|
+
|
|
136
|
+
- [#181](https://github.com/brighte-labs/spark-web/pull/181)
|
|
137
|
+
[`be99536`](https://github.com/brighte-labs/spark-web/commit/be99536abb56dd26e5c9a1703e6df9c7860b449b)
|
|
138
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add disabled
|
|
139
|
+
styles for buttons
|
|
140
|
+
|
|
141
|
+
Move aria-disabled logic from Button onto underlying BaseButton
|
|
142
|
+
|
|
143
|
+
* [#179](https://github.com/brighte-labs/spark-web/pull/179)
|
|
144
|
+
[`d935c57`](https://github.com/brighte-labs/spark-web/commit/d935c57c2302700e8a2332b757d38220b9c47f84)
|
|
145
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Accept number as
|
|
146
|
+
child for button
|
|
147
|
+
|
|
148
|
+
### Patch Changes
|
|
149
|
+
|
|
150
|
+
- [#173](https://github.com/brighte-labs/spark-web/pull/173)
|
|
151
|
+
[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
|
|
152
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
|
|
153
|
+
dependency
|
|
154
|
+
|
|
155
|
+
- Updated dependencies
|
|
156
|
+
[[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
|
|
157
|
+
[`be99536`](https://github.com/brighte-labs/spark-web/commit/be99536abb56dd26e5c9a1703e6df9c7860b449b),
|
|
158
|
+
[`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
|
|
159
|
+
- @spark-web/a11y@1.2.0
|
|
160
|
+
- @spark-web/box@1.0.7
|
|
161
|
+
- @spark-web/icon@1.1.5
|
|
162
|
+
- @spark-web/link@1.0.7
|
|
163
|
+
- @spark-web/spinner@1.0.5
|
|
164
|
+
- @spark-web/text@1.0.7
|
|
165
|
+
- @spark-web/theme@3.0.3
|
|
166
|
+
- @spark-web/utils@1.2.0
|
|
167
|
+
|
|
168
|
+
## 1.2.0
|
|
169
|
+
|
|
170
|
+
### Minor Changes
|
|
171
|
+
|
|
172
|
+
- [#153](https://github.com/brighte-labs/spark-web/pull/153)
|
|
173
|
+
[`e17ddb6`](https://github.com/brighte-labs/spark-web/commit/e17ddb6328a792bd5905cff20ced5907ca055f82)
|
|
174
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Create BaseButton
|
|
175
|
+
and focus button on click to address Safari bug
|
|
176
|
+
|
|
177
|
+
### Patch Changes
|
|
178
|
+
|
|
179
|
+
- [#167](https://github.com/brighte-labs/spark-web/pull/167)
|
|
180
|
+
[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
|
|
181
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
182
|
+
|
|
183
|
+
- Updated dependencies
|
|
184
|
+
[[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
|
|
185
|
+
[`f524009`](https://github.com/brighte-labs/spark-web/commit/f5240098cf731b0a2e351b7b585711e893a33736),
|
|
186
|
+
[`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
|
|
187
|
+
- @spark-web/a11y@1.1.0
|
|
188
|
+
- @spark-web/box@1.0.6
|
|
189
|
+
- @spark-web/icon@1.1.4
|
|
190
|
+
- @spark-web/link@1.0.6
|
|
191
|
+
- @spark-web/spinner@1.0.4
|
|
192
|
+
- @spark-web/text@1.0.6
|
|
193
|
+
- @spark-web/theme@3.0.2
|
|
194
|
+
- @spark-web/utils@1.1.5
|
|
195
|
+
|
|
196
|
+
## 1.1.2
|
|
197
|
+
|
|
198
|
+
### Patch Changes
|
|
199
|
+
|
|
200
|
+
- [#144](https://github.com/brighte-labs/spark-web/pull/144)
|
|
201
|
+
[`949001a`](https://github.com/brighte-labs/spark-web/commit/949001aca3304a4f13750885575de8ec9e8503b3)
|
|
202
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Better align
|
|
203
|
+
icons inside of buttons
|
|
204
|
+
|
|
205
|
+
- Updated dependencies
|
|
206
|
+
[[`500939d`](https://github.com/brighte-labs/spark-web/commit/500939de7c45c93d48078f39151035ab9eba057f)]:
|
|
207
|
+
- @spark-web/spinner@1.0.3
|
|
208
|
+
|
|
209
|
+
## 1.1.1
|
|
210
|
+
|
|
211
|
+
### Patch Changes
|
|
212
|
+
|
|
213
|
+
- [#113](https://github.com/brighte-labs/spark-web/pull/113)
|
|
214
|
+
[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
|
|
215
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
216
|
+
dependencies
|
|
217
|
+
|
|
218
|
+
- Updated dependencies
|
|
219
|
+
[[`08752c3`](https://github.com/brighte-labs/spark-web/commit/08752c350b53cde0657ec32f03f9932dec835e33),
|
|
220
|
+
[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
|
|
221
|
+
- @spark-web/a11y@1.0.5
|
|
222
|
+
- @spark-web/box@1.0.5
|
|
223
|
+
- @spark-web/icon@1.1.3
|
|
224
|
+
- @spark-web/link@1.0.5
|
|
225
|
+
- @spark-web/spinner@1.0.2
|
|
226
|
+
- @spark-web/text@1.0.5
|
|
227
|
+
- @spark-web/theme@3.0.1
|
|
228
|
+
- @spark-web/utils@1.1.3
|
|
229
|
+
|
|
230
|
+
## 1.1.0
|
|
231
|
+
|
|
232
|
+
### Minor Changes
|
|
233
|
+
|
|
234
|
+
- [#77](https://github.com/brighte-labs/spark-web/pull/77)
|
|
235
|
+
[`8ff39aa`](https://github.com/brighte-labs/spark-web/commit/8ff39aa7e51d8d3f17dcbd87ebe60502a8d8d260)
|
|
236
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add loading state
|
|
237
|
+
to button
|
|
238
|
+
|
|
239
|
+
### Patch Changes
|
|
240
|
+
|
|
241
|
+
- [#59](https://github.com/brighte-labs/spark-web/pull/59)
|
|
242
|
+
[`7a91941`](https://github.com/brighte-labs/spark-web/commit/7a91941385dcb4744384818bb5c4866c24c357f5)
|
|
243
|
+
Thanks [@tamm](https://github.com/tamm)! - Fixed spelling mistake from Buttton
|
|
244
|
+
to Button
|
|
245
|
+
|
|
246
|
+
* [#65](https://github.com/brighte-labs/spark-web/pull/65)
|
|
247
|
+
[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff)
|
|
248
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove "Inter"
|
|
249
|
+
font, change font-weights and font-sizes.
|
|
250
|
+
|
|
251
|
+
- [#52](https://github.com/brighte-labs/spark-web/pull/52)
|
|
252
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
|
|
253
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
|
|
254
|
+
to package.json files
|
|
255
|
+
|
|
256
|
+
- Updated dependencies
|
|
257
|
+
[[`1ef4f82`](https://github.com/brighte-labs/spark-web/commit/1ef4f82df999c487b79cd216c17ca5735e444fc5),
|
|
258
|
+
[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
|
|
259
|
+
[`5744b68`](https://github.com/brighte-labs/spark-web/commit/5744b6820f626b93a14e11e1fbd96bcbe1b12b27),
|
|
260
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e),
|
|
261
|
+
[`58a7284`](https://github.com/brighte-labs/spark-web/commit/58a728457bbbda86ac406a72d8ec4ad6c1c16630),
|
|
262
|
+
[`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)]:
|
|
263
|
+
- @spark-web/text@1.0.4
|
|
264
|
+
- @spark-web/theme@3.0.0
|
|
265
|
+
- @spark-web/link@1.0.4
|
|
266
|
+
- @spark-web/spinner@1.0.1
|
|
267
|
+
- @spark-web/a11y@1.0.4
|
|
268
|
+
- @spark-web/box@1.0.4
|
|
269
|
+
- @spark-web/icon@1.1.2
|
|
270
|
+
- @spark-web/utils@1.1.2
|
|
271
|
+
|
|
272
|
+
## 1.0.3
|
|
273
|
+
|
|
274
|
+
### Patch Changes
|
|
275
|
+
|
|
276
|
+
- [#42](https://github.com/brighte-labs/spark-web/pull/42)
|
|
277
|
+
[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
|
|
278
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
|
|
279
|
+
versions of React
|
|
280
|
+
|
|
281
|
+
- Updated dependencies
|
|
282
|
+
[[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
|
|
283
|
+
- @spark-web/a11y@1.0.3
|
|
284
|
+
- @spark-web/box@1.0.3
|
|
285
|
+
- @spark-web/icon@1.1.1
|
|
286
|
+
- @spark-web/link@1.0.3
|
|
287
|
+
- @spark-web/text@1.0.3
|
|
288
|
+
- @spark-web/theme@2.0.2
|
|
289
|
+
- @spark-web/utils@1.1.1
|
|
290
|
+
|
|
291
|
+
## 1.0.2
|
|
292
|
+
|
|
293
|
+
### Patch Changes
|
|
294
|
+
|
|
295
|
+
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
296
|
+
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
297
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
298
|
+
@babel/transform-runtime
|
|
299
|
+
|
|
300
|
+
- Updated dependencies
|
|
301
|
+
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
302
|
+
- @spark-web/a11y@1.0.2
|
|
303
|
+
- @spark-web/box@1.0.2
|
|
304
|
+
- @spark-web/icon@1.0.2
|
|
305
|
+
- @spark-web/link@1.0.2
|
|
306
|
+
- @spark-web/text@1.0.2
|
|
307
|
+
- @spark-web/theme@2.0.1
|
|
308
|
+
- @spark-web/utils@1.0.2
|
|
309
|
+
|
|
310
|
+
## 1.0.1
|
|
311
|
+
|
|
312
|
+
### Patch Changes
|
|
313
|
+
|
|
314
|
+
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
315
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
316
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
317
|
+
config
|
|
318
|
+
|
|
319
|
+
- Updated dependencies
|
|
320
|
+
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
321
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
322
|
+
- @spark-web/theme@2.0.0
|
|
323
|
+
- @spark-web/a11y@1.0.1
|
|
324
|
+
- @spark-web/box@1.0.1
|
|
325
|
+
- @spark-web/icon@1.0.1
|
|
326
|
+
- @spark-web/link@1.0.1
|
|
327
|
+
- @spark-web/text@1.0.1
|
|
328
|
+
- @spark-web/utils@1.0.1
|
|
329
|
+
|
|
330
|
+
## 1.0.0
|
|
331
|
+
|
|
332
|
+
### Major Changes
|
|
333
|
+
|
|
334
|
+
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
335
|
+
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
336
|
+
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
337
|
+
|
|
338
|
+
### Patch Changes
|
|
339
|
+
|
|
340
|
+
- Updated dependencies
|
|
341
|
+
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
342
|
+
- @spark-web/a11y@1.0.0
|
|
343
|
+
- @spark-web/box@1.0.0
|
|
344
|
+
- @spark-web/icon@1.0.0
|
|
345
|
+
- @spark-web/link@1.0.0
|
|
346
|
+
- @spark-web/text@1.0.0
|
|
347
|
+
- @spark-web/theme@1.0.0
|
|
348
|
+
- @spark-web/utils@1.0.0
|
package/README.md
CHANGED
|
@@ -23,13 +23,13 @@ Defaults to `primary`.
|
|
|
23
23
|
|
|
24
24
|
```jsx live
|
|
25
25
|
<Stack gap="large">
|
|
26
|
-
<Text weight="
|
|
26
|
+
<Text weight="semibold">Decorative tones</Text>
|
|
27
27
|
<Inline gap="small">
|
|
28
28
|
<Button tone="primary">Primary</Button>
|
|
29
29
|
<Button tone="secondary">Secondary</Button>
|
|
30
30
|
</Inline>
|
|
31
31
|
<Divider />
|
|
32
|
-
<Text weight="
|
|
32
|
+
<Text weight="semibold">Semantic tones</Text>
|
|
33
33
|
<Inline gap="small">
|
|
34
34
|
<Button tone="neutral">Neutral</Button>
|
|
35
35
|
<Button tone="positive">Positive</Button>
|
|
@@ -62,7 +62,7 @@ const extraButtonTones = [
|
|
|
62
62
|
return (
|
|
63
63
|
<Stack gap="large" dividers>
|
|
64
64
|
<Stack gap="large">
|
|
65
|
-
<Text weight="
|
|
65
|
+
<Text weight="semibold">High prominence</Text>
|
|
66
66
|
<Inline gap="small">
|
|
67
67
|
{baseButtonTones.map(({ label, tone }) => (
|
|
68
68
|
<Button key={label} tone={tone} prominence="high">
|
|
@@ -73,7 +73,7 @@ return (
|
|
|
73
73
|
</Inline>
|
|
74
74
|
</Stack>
|
|
75
75
|
<Stack gap="large">
|
|
76
|
-
<Text weight="
|
|
76
|
+
<Text weight="semibold">Low prominence</Text>
|
|
77
77
|
<Inline gap="small">
|
|
78
78
|
{baseButtonTones.concat(extraButtonTones).map(({ label, tone }) => (
|
|
79
79
|
<Button key={label} tone={tone} prominence="low">
|
|
@@ -84,7 +84,7 @@ return (
|
|
|
84
84
|
</Inline>
|
|
85
85
|
</Stack>
|
|
86
86
|
<Stack gap="large">
|
|
87
|
-
<Text weight="
|
|
87
|
+
<Text weight="semibold">None prominence</Text>
|
|
88
88
|
<Inline gap="small">
|
|
89
89
|
{baseButtonTones.concat(extraButtonTones).map(({ label, tone }) => (
|
|
90
90
|
<Button key={label} tone={tone} prominence="none">
|
|
@@ -211,3 +211,7 @@ Unstyled button primitive that:
|
|
|
211
211
|
## Button Props
|
|
212
212
|
|
|
213
213
|
<PropsTable displayName="Button" />
|
|
214
|
+
|
|
215
|
+
## Button Link Props
|
|
216
|
+
|
|
217
|
+
<PropsTable displayName="ButtonLink" />
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { BaseButton } from './
|
|
2
|
-
export { Button } from './
|
|
3
|
-
export { ButtonLink } from './
|
|
4
|
-
export { useButtonStyles } from './
|
|
5
|
-
export type { BaseButtonProps } from './
|
|
6
|
-
export type { ButtonProps } from './
|
|
7
|
-
export type { ButtonLinkProps } from './
|
|
1
|
+
export { BaseButton } from './base-button';
|
|
2
|
+
export { Button } from './button';
|
|
3
|
+
export { ButtonLink } from './button-link';
|
|
4
|
+
export { useButtonStyles } from './use-button-styles';
|
|
5
|
+
export type { BaseButtonProps } from './base-button';
|
|
6
|
+
export type { ButtonProps } from './button';
|
|
7
|
+
export type { ButtonLinkProps } from './button-link';
|
|
8
8
|
export type { ButtonChildrenProps, ButtonProminence, ButtonSize, ButtonTone, } from './types';
|
|
9
|
-
export type { UseButtonStylesProps } from './
|
|
9
|
+
export type { UseButtonStylesProps } from './use-button-styles';
|
|
File without changes
|
|
@@ -21,7 +21,7 @@ declare type IconOnly = {
|
|
|
21
21
|
export declare type ButtonChildrenProps = ChildrenWithText | IconOnly;
|
|
22
22
|
export declare type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
|
|
23
23
|
export declare type CommonButtonProps = {
|
|
24
|
-
/**
|
|
24
|
+
/** Sets data attributes for the element. */
|
|
25
25
|
data?: DataAttributeMap;
|
|
26
26
|
/** Unique identifier for the underlying element. */
|
|
27
27
|
id?: string;
|
|
@@ -10,7 +10,7 @@ import type { ButtonProminence, ButtonSize, ButtonTone } from './types';
|
|
|
10
10
|
export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): readonly [{
|
|
11
11
|
readonly alignItems: "center";
|
|
12
12
|
readonly background: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
|
|
13
|
-
readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "
|
|
13
|
+
readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive" | "standardInverted" | "field" | "fieldHover" | "fieldDisabled"> | undefined;
|
|
14
14
|
readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"standard" | "large"> | undefined;
|
|
15
15
|
readonly borderRadius: "small" | "medium";
|
|
16
16
|
readonly cursor: "pointer";
|
|
@@ -20,12 +20,11 @@ var ts = require('@spark-web/utils/ts');
|
|
|
20
20
|
var _excluded$2 = ["onClick", "disabled", "type"];
|
|
21
21
|
var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
22
22
|
var onClickProp = _ref.onClick,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
_ref$disabled = _ref.disabled,
|
|
24
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
25
|
+
_ref$type = _ref.type,
|
|
26
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
27
|
+
consumerProps = _objectWithoutProperties(_ref, _excluded$2);
|
|
29
28
|
var internalRef = react.useRef(null);
|
|
30
29
|
var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
|
|
31
30
|
/**
|
|
@@ -34,17 +33,16 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
34
33
|
* To fix this we need to manually focus the button element after the user
|
|
35
34
|
* presses the element.
|
|
36
35
|
*/
|
|
37
|
-
|
|
38
36
|
var onClick = react.useCallback(function (event) {
|
|
39
37
|
var _internalRef$current;
|
|
40
|
-
|
|
41
38
|
(_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
|
|
42
39
|
var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
|
|
43
40
|
preventableClickHandler(event);
|
|
44
41
|
}, [disabled, onClickProp]);
|
|
45
42
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
|
|
46
43
|
as: "button",
|
|
47
|
-
ref: composedRef
|
|
44
|
+
ref: composedRef
|
|
45
|
+
// Hide aria-disabled attribute when button is not disabled
|
|
48
46
|
,
|
|
49
47
|
"aria-disabled": disabled || undefined,
|
|
50
48
|
onClick: onClick,
|
|
@@ -52,11 +50,11 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
52
50
|
}));
|
|
53
51
|
});
|
|
54
52
|
BaseButton.displayName = 'BaseButton';
|
|
53
|
+
|
|
55
54
|
/**
|
|
56
55
|
* handle "disabled" behaviour w/o disabling buttons
|
|
57
56
|
* @see https://axesslab.com/disabled-buttons-suck/
|
|
58
57
|
*/
|
|
59
|
-
|
|
60
58
|
function getPreventableClickHandler(onClick, disabled) {
|
|
61
59
|
return function handleClick(event) {
|
|
62
60
|
if (disabled) {
|
|
@@ -234,10 +232,10 @@ var mapTokens = {
|
|
|
234
232
|
|
|
235
233
|
var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
236
234
|
var children = _ref.children,
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
235
|
+
isLoading = _ref.isLoading,
|
|
236
|
+
prominence = _ref.prominence,
|
|
237
|
+
size = _ref.size,
|
|
238
|
+
tone = _ref.tone;
|
|
241
239
|
var variant = variants[prominence][tone];
|
|
242
240
|
return react.Children.map(children, function (child) {
|
|
243
241
|
if (typeof child === 'string' || typeof child === 'number') {
|
|
@@ -254,7 +252,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
254
252
|
})
|
|
255
253
|
});
|
|
256
254
|
}
|
|
257
|
-
|
|
258
255
|
if ( /*#__PURE__*/react.isValidElement(child)) {
|
|
259
256
|
return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
|
|
260
257
|
isLoading: isLoading,
|
|
@@ -269,14 +266,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
269
266
|
})
|
|
270
267
|
});
|
|
271
268
|
}
|
|
272
|
-
|
|
273
269
|
return null;
|
|
274
270
|
});
|
|
275
271
|
};
|
|
276
|
-
|
|
277
272
|
function HiddenWhenLoading(_ref2) {
|
|
278
273
|
var children = _ref2.children,
|
|
279
|
-
|
|
274
|
+
isLoading = _ref2.isLoading;
|
|
280
275
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
281
276
|
as: "span",
|
|
282
277
|
display: "inline-flex",
|
|
@@ -287,6 +282,8 @@ function HiddenWhenLoading(_ref2) {
|
|
|
287
282
|
});
|
|
288
283
|
}
|
|
289
284
|
|
|
285
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
286
|
+
|
|
290
287
|
/**
|
|
291
288
|
* useButtonStyles
|
|
292
289
|
*
|
|
@@ -295,12 +292,11 @@ function HiddenWhenLoading(_ref2) {
|
|
|
295
292
|
* underlying `Box` component, and the second item is a CSS object that can be
|
|
296
293
|
* passed to Emotion's `css` function.
|
|
297
294
|
*/
|
|
298
|
-
|
|
299
295
|
function useButtonStyles(_ref) {
|
|
300
296
|
var iconOnly = _ref.iconOnly,
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
297
|
+
prominence = _ref.prominence,
|
|
298
|
+
size = _ref.size,
|
|
299
|
+
tone = _ref.tone;
|
|
304
300
|
var theme$1 = theme.useTheme();
|
|
305
301
|
var focusRingStyles = a11y.useFocusRing({
|
|
306
302
|
tone: tone
|
|
@@ -369,42 +365,38 @@ function useButtonStyles(_ref) {
|
|
|
369
365
|
}
|
|
370
366
|
|
|
371
367
|
var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
|
|
372
|
-
|
|
373
368
|
/**
|
|
374
369
|
* Buttons are used to initialize an action, their label should express what
|
|
375
370
|
* action will occur when the user interacts with it.
|
|
376
371
|
*/
|
|
377
372
|
var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
378
373
|
var ariaControls = _ref['aria-controls'],
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
374
|
+
ariaDescribedBy = _ref['aria-describedby'],
|
|
375
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
376
|
+
data = _ref.data,
|
|
377
|
+
disabled = _ref.disabled,
|
|
378
|
+
id = _ref.id,
|
|
379
|
+
_ref$loading = _ref.loading,
|
|
380
|
+
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
381
|
+
onClick = _ref.onClick,
|
|
382
|
+
_ref$prominence = _ref.prominence,
|
|
383
|
+
prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
|
|
384
|
+
_ref$size = _ref.size,
|
|
385
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
386
|
+
_ref$tone = _ref.tone,
|
|
387
|
+
tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
|
|
388
|
+
type = _ref.type,
|
|
389
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
396
390
|
var iconOnly = Boolean(props.label);
|
|
397
|
-
|
|
398
391
|
var _useButtonStyles = useButtonStyles({
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
392
|
+
iconOnly: iconOnly,
|
|
393
|
+
size: size,
|
|
394
|
+
tone: tone,
|
|
395
|
+
prominence: prominence
|
|
396
|
+
}),
|
|
397
|
+
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
398
|
+
boxProps = _useButtonStyles2[0],
|
|
399
|
+
buttonStyles = _useButtonStyles2[1];
|
|
408
400
|
var isDisabled = disabled || loading;
|
|
409
401
|
var isLoading = loading && !disabled;
|
|
410
402
|
var variant = variants[prominence][tone];
|
|
@@ -431,7 +423,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
431
423
|
}));
|
|
432
424
|
});
|
|
433
425
|
Button.displayName = 'Button';
|
|
434
|
-
|
|
435
426
|
function Loading(_ref2) {
|
|
436
427
|
var tone = _ref2.tone;
|
|
437
428
|
return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
@@ -454,33 +445,29 @@ function Loading(_ref2) {
|
|
|
454
445
|
}
|
|
455
446
|
|
|
456
447
|
var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
|
|
457
|
-
|
|
458
448
|
/** The appearance of a `Button`, with the semantics of a link. */
|
|
459
449
|
var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
460
450
|
var data = _ref.data,
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
451
|
+
href = _ref.href,
|
|
452
|
+
id = _ref.id,
|
|
453
|
+
_ref$prominence = _ref.prominence,
|
|
454
|
+
prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
|
|
455
|
+
_ref$size = _ref.size,
|
|
456
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
457
|
+
_ref$tone = _ref.tone,
|
|
458
|
+
tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
|
|
459
|
+
consumerProps = _objectWithoutProperties(_ref, _excluded);
|
|
471
460
|
var LinkComponent = link.useLinkComponent(forwardedRef);
|
|
472
461
|
var iconOnly = Boolean(consumerProps.label);
|
|
473
|
-
|
|
474
462
|
var _useButtonStyles = useButtonStyles({
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
463
|
+
iconOnly: iconOnly,
|
|
464
|
+
prominence: prominence,
|
|
465
|
+
size: size,
|
|
466
|
+
tone: tone
|
|
467
|
+
}),
|
|
468
|
+
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
469
|
+
boxProps = _useButtonStyles2[0],
|
|
470
|
+
buttonStyles = _useButtonStyles2[1];
|
|
484
471
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
485
472
|
"aria-label": consumerProps.label,
|
|
486
473
|
as: LinkComponent,
|
|
@@ -20,12 +20,11 @@ var ts = require('@spark-web/utils/ts');
|
|
|
20
20
|
var _excluded$2 = ["onClick", "disabled", "type"];
|
|
21
21
|
var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
22
22
|
var onClickProp = _ref.onClick,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
_ref$disabled = _ref.disabled,
|
|
24
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
25
|
+
_ref$type = _ref.type,
|
|
26
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
27
|
+
consumerProps = _objectWithoutProperties(_ref, _excluded$2);
|
|
29
28
|
var internalRef = react.useRef(null);
|
|
30
29
|
var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
|
|
31
30
|
/**
|
|
@@ -34,17 +33,16 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
34
33
|
* To fix this we need to manually focus the button element after the user
|
|
35
34
|
* presses the element.
|
|
36
35
|
*/
|
|
37
|
-
|
|
38
36
|
var onClick = react.useCallback(function (event) {
|
|
39
37
|
var _internalRef$current;
|
|
40
|
-
|
|
41
38
|
(_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
|
|
42
39
|
var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
|
|
43
40
|
preventableClickHandler(event);
|
|
44
41
|
}, [disabled, onClickProp]);
|
|
45
42
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
|
|
46
43
|
as: "button",
|
|
47
|
-
ref: composedRef
|
|
44
|
+
ref: composedRef
|
|
45
|
+
// Hide aria-disabled attribute when button is not disabled
|
|
48
46
|
,
|
|
49
47
|
"aria-disabled": disabled || undefined,
|
|
50
48
|
onClick: onClick,
|
|
@@ -52,11 +50,11 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
52
50
|
}));
|
|
53
51
|
});
|
|
54
52
|
BaseButton.displayName = 'BaseButton';
|
|
53
|
+
|
|
55
54
|
/**
|
|
56
55
|
* handle "disabled" behaviour w/o disabling buttons
|
|
57
56
|
* @see https://axesslab.com/disabled-buttons-suck/
|
|
58
57
|
*/
|
|
59
|
-
|
|
60
58
|
function getPreventableClickHandler(onClick, disabled) {
|
|
61
59
|
return function handleClick(event) {
|
|
62
60
|
if (disabled) {
|
|
@@ -234,10 +232,10 @@ var mapTokens = {
|
|
|
234
232
|
|
|
235
233
|
var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
236
234
|
var children = _ref.children,
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
235
|
+
isLoading = _ref.isLoading,
|
|
236
|
+
prominence = _ref.prominence,
|
|
237
|
+
size = _ref.size,
|
|
238
|
+
tone = _ref.tone;
|
|
241
239
|
var variant = variants[prominence][tone];
|
|
242
240
|
return react.Children.map(children, function (child) {
|
|
243
241
|
if (typeof child === 'string' || typeof child === 'number') {
|
|
@@ -254,7 +252,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
254
252
|
})
|
|
255
253
|
});
|
|
256
254
|
}
|
|
257
|
-
|
|
258
255
|
if ( /*#__PURE__*/react.isValidElement(child)) {
|
|
259
256
|
return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
|
|
260
257
|
isLoading: isLoading,
|
|
@@ -269,14 +266,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
269
266
|
})
|
|
270
267
|
});
|
|
271
268
|
}
|
|
272
|
-
|
|
273
269
|
return null;
|
|
274
270
|
});
|
|
275
271
|
};
|
|
276
|
-
|
|
277
272
|
function HiddenWhenLoading(_ref2) {
|
|
278
273
|
var children = _ref2.children,
|
|
279
|
-
|
|
274
|
+
isLoading = _ref2.isLoading;
|
|
280
275
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
281
276
|
as: "span",
|
|
282
277
|
display: "inline-flex",
|
|
@@ -287,6 +282,8 @@ function HiddenWhenLoading(_ref2) {
|
|
|
287
282
|
});
|
|
288
283
|
}
|
|
289
284
|
|
|
285
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
286
|
+
|
|
290
287
|
/**
|
|
291
288
|
* useButtonStyles
|
|
292
289
|
*
|
|
@@ -295,12 +292,11 @@ function HiddenWhenLoading(_ref2) {
|
|
|
295
292
|
* underlying `Box` component, and the second item is a CSS object that can be
|
|
296
293
|
* passed to Emotion's `css` function.
|
|
297
294
|
*/
|
|
298
|
-
|
|
299
295
|
function useButtonStyles(_ref) {
|
|
300
296
|
var iconOnly = _ref.iconOnly,
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
297
|
+
prominence = _ref.prominence,
|
|
298
|
+
size = _ref.size,
|
|
299
|
+
tone = _ref.tone;
|
|
304
300
|
var theme$1 = theme.useTheme();
|
|
305
301
|
var focusRingStyles = a11y.useFocusRing({
|
|
306
302
|
tone: tone
|
|
@@ -369,42 +365,38 @@ function useButtonStyles(_ref) {
|
|
|
369
365
|
}
|
|
370
366
|
|
|
371
367
|
var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
|
|
372
|
-
|
|
373
368
|
/**
|
|
374
369
|
* Buttons are used to initialize an action, their label should express what
|
|
375
370
|
* action will occur when the user interacts with it.
|
|
376
371
|
*/
|
|
377
372
|
var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
378
373
|
var ariaControls = _ref['aria-controls'],
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
374
|
+
ariaDescribedBy = _ref['aria-describedby'],
|
|
375
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
376
|
+
data = _ref.data,
|
|
377
|
+
disabled = _ref.disabled,
|
|
378
|
+
id = _ref.id,
|
|
379
|
+
_ref$loading = _ref.loading,
|
|
380
|
+
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
381
|
+
onClick = _ref.onClick,
|
|
382
|
+
_ref$prominence = _ref.prominence,
|
|
383
|
+
prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
|
|
384
|
+
_ref$size = _ref.size,
|
|
385
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
386
|
+
_ref$tone = _ref.tone,
|
|
387
|
+
tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
|
|
388
|
+
type = _ref.type,
|
|
389
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
396
390
|
var iconOnly = Boolean(props.label);
|
|
397
|
-
|
|
398
391
|
var _useButtonStyles = useButtonStyles({
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
392
|
+
iconOnly: iconOnly,
|
|
393
|
+
size: size,
|
|
394
|
+
tone: tone,
|
|
395
|
+
prominence: prominence
|
|
396
|
+
}),
|
|
397
|
+
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
398
|
+
boxProps = _useButtonStyles2[0],
|
|
399
|
+
buttonStyles = _useButtonStyles2[1];
|
|
408
400
|
var isDisabled = disabled || loading;
|
|
409
401
|
var isLoading = loading && !disabled;
|
|
410
402
|
var variant = variants[prominence][tone];
|
|
@@ -431,7 +423,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
431
423
|
}));
|
|
432
424
|
});
|
|
433
425
|
Button.displayName = 'Button';
|
|
434
|
-
|
|
435
426
|
function Loading(_ref2) {
|
|
436
427
|
var tone = _ref2.tone;
|
|
437
428
|
return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
@@ -454,33 +445,29 @@ function Loading(_ref2) {
|
|
|
454
445
|
}
|
|
455
446
|
|
|
456
447
|
var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
|
|
457
|
-
|
|
458
448
|
/** The appearance of a `Button`, with the semantics of a link. */
|
|
459
449
|
var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
460
450
|
var data = _ref.data,
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
451
|
+
href = _ref.href,
|
|
452
|
+
id = _ref.id,
|
|
453
|
+
_ref$prominence = _ref.prominence,
|
|
454
|
+
prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
|
|
455
|
+
_ref$size = _ref.size,
|
|
456
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
457
|
+
_ref$tone = _ref.tone,
|
|
458
|
+
tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
|
|
459
|
+
consumerProps = _objectWithoutProperties(_ref, _excluded);
|
|
471
460
|
var LinkComponent = link.useLinkComponent(forwardedRef);
|
|
472
461
|
var iconOnly = Boolean(consumerProps.label);
|
|
473
|
-
|
|
474
462
|
var _useButtonStyles = useButtonStyles({
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
463
|
+
iconOnly: iconOnly,
|
|
464
|
+
prominence: prominence,
|
|
465
|
+
size: size,
|
|
466
|
+
tone: tone
|
|
467
|
+
}),
|
|
468
|
+
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
469
|
+
boxProps = _useButtonStyles2[0],
|
|
470
|
+
buttonStyles = _useButtonStyles2[1];
|
|
484
471
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
485
472
|
"aria-label": consumerProps.label,
|
|
486
473
|
as: LinkComponent,
|
|
@@ -16,12 +16,11 @@ import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
|
16
16
|
var _excluded$2 = ["onClick", "disabled", "type"];
|
|
17
17
|
var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
18
18
|
var onClickProp = _ref.onClick,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
_ref$disabled = _ref.disabled,
|
|
20
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
21
|
+
_ref$type = _ref.type,
|
|
22
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
23
|
+
consumerProps = _objectWithoutProperties(_ref, _excluded$2);
|
|
25
24
|
var internalRef = useRef(null);
|
|
26
25
|
var composedRef = useComposedRefs(internalRef, forwardedRef);
|
|
27
26
|
/**
|
|
@@ -30,17 +29,16 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
30
29
|
* To fix this we need to manually focus the button element after the user
|
|
31
30
|
* presses the element.
|
|
32
31
|
*/
|
|
33
|
-
|
|
34
32
|
var onClick = useCallback(function (event) {
|
|
35
33
|
var _internalRef$current;
|
|
36
|
-
|
|
37
34
|
(_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
|
|
38
35
|
var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
|
|
39
36
|
preventableClickHandler(event);
|
|
40
37
|
}, [disabled, onClickProp]);
|
|
41
38
|
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
|
|
42
39
|
as: "button",
|
|
43
|
-
ref: composedRef
|
|
40
|
+
ref: composedRef
|
|
41
|
+
// Hide aria-disabled attribute when button is not disabled
|
|
44
42
|
,
|
|
45
43
|
"aria-disabled": disabled || undefined,
|
|
46
44
|
onClick: onClick,
|
|
@@ -48,11 +46,11 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
48
46
|
}));
|
|
49
47
|
});
|
|
50
48
|
BaseButton.displayName = 'BaseButton';
|
|
49
|
+
|
|
51
50
|
/**
|
|
52
51
|
* handle "disabled" behaviour w/o disabling buttons
|
|
53
52
|
* @see https://axesslab.com/disabled-buttons-suck/
|
|
54
53
|
*/
|
|
55
|
-
|
|
56
54
|
function getPreventableClickHandler(onClick, disabled) {
|
|
57
55
|
return function handleClick(event) {
|
|
58
56
|
if (disabled) {
|
|
@@ -230,10 +228,10 @@ var mapTokens = {
|
|
|
230
228
|
|
|
231
229
|
var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
232
230
|
var children = _ref.children,
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
231
|
+
isLoading = _ref.isLoading,
|
|
232
|
+
prominence = _ref.prominence,
|
|
233
|
+
size = _ref.size,
|
|
234
|
+
tone = _ref.tone;
|
|
237
235
|
var variant = variants[prominence][tone];
|
|
238
236
|
return Children.map(children, function (child) {
|
|
239
237
|
if (typeof child === 'string' || typeof child === 'number') {
|
|
@@ -250,7 +248,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
250
248
|
})
|
|
251
249
|
});
|
|
252
250
|
}
|
|
253
|
-
|
|
254
251
|
if ( /*#__PURE__*/isValidElement(child)) {
|
|
255
252
|
return /*#__PURE__*/jsx(HiddenWhenLoading, {
|
|
256
253
|
isLoading: isLoading,
|
|
@@ -265,14 +262,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
265
262
|
})
|
|
266
263
|
});
|
|
267
264
|
}
|
|
268
|
-
|
|
269
265
|
return null;
|
|
270
266
|
});
|
|
271
267
|
};
|
|
272
|
-
|
|
273
268
|
function HiddenWhenLoading(_ref2) {
|
|
274
269
|
var children = _ref2.children,
|
|
275
|
-
|
|
270
|
+
isLoading = _ref2.isLoading;
|
|
276
271
|
return /*#__PURE__*/jsx(Box, {
|
|
277
272
|
as: "span",
|
|
278
273
|
display: "inline-flex",
|
|
@@ -283,6 +278,8 @@ function HiddenWhenLoading(_ref2) {
|
|
|
283
278
|
});
|
|
284
279
|
}
|
|
285
280
|
|
|
281
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
282
|
+
|
|
286
283
|
/**
|
|
287
284
|
* useButtonStyles
|
|
288
285
|
*
|
|
@@ -291,12 +288,11 @@ function HiddenWhenLoading(_ref2) {
|
|
|
291
288
|
* underlying `Box` component, and the second item is a CSS object that can be
|
|
292
289
|
* passed to Emotion's `css` function.
|
|
293
290
|
*/
|
|
294
|
-
|
|
295
291
|
function useButtonStyles(_ref) {
|
|
296
292
|
var iconOnly = _ref.iconOnly,
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
293
|
+
prominence = _ref.prominence,
|
|
294
|
+
size = _ref.size,
|
|
295
|
+
tone = _ref.tone;
|
|
300
296
|
var theme = useTheme();
|
|
301
297
|
var focusRingStyles = useFocusRing({
|
|
302
298
|
tone: tone
|
|
@@ -365,42 +361,38 @@ function useButtonStyles(_ref) {
|
|
|
365
361
|
}
|
|
366
362
|
|
|
367
363
|
var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
|
|
368
|
-
|
|
369
364
|
/**
|
|
370
365
|
* Buttons are used to initialize an action, their label should express what
|
|
371
366
|
* action will occur when the user interacts with it.
|
|
372
367
|
*/
|
|
373
368
|
var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
374
369
|
var ariaControls = _ref['aria-controls'],
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
370
|
+
ariaDescribedBy = _ref['aria-describedby'],
|
|
371
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
372
|
+
data = _ref.data,
|
|
373
|
+
disabled = _ref.disabled,
|
|
374
|
+
id = _ref.id,
|
|
375
|
+
_ref$loading = _ref.loading,
|
|
376
|
+
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
377
|
+
onClick = _ref.onClick,
|
|
378
|
+
_ref$prominence = _ref.prominence,
|
|
379
|
+
prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
|
|
380
|
+
_ref$size = _ref.size,
|
|
381
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
382
|
+
_ref$tone = _ref.tone,
|
|
383
|
+
tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
|
|
384
|
+
type = _ref.type,
|
|
385
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
392
386
|
var iconOnly = Boolean(props.label);
|
|
393
|
-
|
|
394
387
|
var _useButtonStyles = useButtonStyles({
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
388
|
+
iconOnly: iconOnly,
|
|
389
|
+
size: size,
|
|
390
|
+
tone: tone,
|
|
391
|
+
prominence: prominence
|
|
392
|
+
}),
|
|
393
|
+
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
394
|
+
boxProps = _useButtonStyles2[0],
|
|
395
|
+
buttonStyles = _useButtonStyles2[1];
|
|
404
396
|
var isDisabled = disabled || loading;
|
|
405
397
|
var isLoading = loading && !disabled;
|
|
406
398
|
var variant = variants[prominence][tone];
|
|
@@ -427,7 +419,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
427
419
|
}));
|
|
428
420
|
});
|
|
429
421
|
Button.displayName = 'Button';
|
|
430
|
-
|
|
431
422
|
function Loading(_ref2) {
|
|
432
423
|
var tone = _ref2.tone;
|
|
433
424
|
return /*#__PURE__*/jsxs(Box, {
|
|
@@ -450,33 +441,29 @@ function Loading(_ref2) {
|
|
|
450
441
|
}
|
|
451
442
|
|
|
452
443
|
var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
|
|
453
|
-
|
|
454
444
|
/** The appearance of a `Button`, with the semantics of a link. */
|
|
455
445
|
var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
456
446
|
var data = _ref.data,
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
447
|
+
href = _ref.href,
|
|
448
|
+
id = _ref.id,
|
|
449
|
+
_ref$prominence = _ref.prominence,
|
|
450
|
+
prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
|
|
451
|
+
_ref$size = _ref.size,
|
|
452
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
453
|
+
_ref$tone = _ref.tone,
|
|
454
|
+
tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
|
|
455
|
+
consumerProps = _objectWithoutProperties(_ref, _excluded);
|
|
467
456
|
var LinkComponent = useLinkComponent(forwardedRef);
|
|
468
457
|
var iconOnly = Boolean(consumerProps.label);
|
|
469
|
-
|
|
470
458
|
var _useButtonStyles = useButtonStyles({
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
459
|
+
iconOnly: iconOnly,
|
|
460
|
+
prominence: prominence,
|
|
461
|
+
size: size,
|
|
462
|
+
tone: tone
|
|
463
|
+
}),
|
|
464
|
+
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
465
|
+
boxProps = _useButtonStyles2[0],
|
|
466
|
+
buttonStyles = _useButtonStyles2[1];
|
|
480
467
|
return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
481
468
|
"aria-label": consumerProps.label,
|
|
482
469
|
as: LinkComponent,
|
package/package.json
CHANGED
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/button",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"
|
|
3
|
+
"version": "1.4.5",
|
|
4
|
+
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/brighte-labs/spark-web.git",
|
|
8
|
+
"directory": "packages/button"
|
|
9
|
+
},
|
|
5
10
|
"main": "dist/spark-web-button.cjs.js",
|
|
6
11
|
"module": "dist/spark-web-button.esm.js",
|
|
7
12
|
"files": [
|
|
8
|
-
"
|
|
13
|
+
"CHANGELOG.md",
|
|
14
|
+
"dist",
|
|
15
|
+
"README.md"
|
|
9
16
|
],
|
|
10
17
|
"dependencies": {
|
|
11
|
-
"@babel/runtime": "^7.
|
|
18
|
+
"@babel/runtime": "^7.19.0",
|
|
12
19
|
"@emotion/css": "^11.9.0",
|
|
13
|
-
"@spark-web/a11y": "^1.3.
|
|
14
|
-
"@spark-web/box": "^1.0
|
|
15
|
-
"@spark-web/icon": "^1.2.
|
|
16
|
-
"@spark-web/link": "^1.0.
|
|
17
|
-
"@spark-web/spinner": "^1.0.
|
|
18
|
-
"@spark-web/text": "^1.1.
|
|
19
|
-
"@spark-web/theme": "^3.0
|
|
20
|
-
"@spark-web/utils": "^1.2.
|
|
20
|
+
"@spark-web/a11y": "^1.3.2",
|
|
21
|
+
"@spark-web/box": "^1.1.0",
|
|
22
|
+
"@spark-web/icon": "^1.2.2",
|
|
23
|
+
"@spark-web/link": "^1.0.12",
|
|
24
|
+
"@spark-web/spinner": "^1.0.8",
|
|
25
|
+
"@spark-web/text": "^1.1.2",
|
|
26
|
+
"@spark-web/theme": "^3.1.0",
|
|
27
|
+
"@spark-web/utils": "^1.2.3"
|
|
21
28
|
},
|
|
22
29
|
"devDependencies": {
|
|
23
30
|
"@types/react": "^17.0.12",
|