@planningcenter/tapestry-react 2.2.0 → 2.3.0
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.
|
@@ -68,7 +68,7 @@ function Button(_ref) {
|
|
|
68
68
|
|
|
69
69
|
var buttonProps = {
|
|
70
70
|
alignment: 'center',
|
|
71
|
-
as: restProps.href || to ? 'a' : '
|
|
71
|
+
as: restProps.href || to ? 'a' : 'button',
|
|
72
72
|
axis: 'horizontal',
|
|
73
73
|
distribution: 'center',
|
|
74
74
|
fontSize: fontSize,
|
|
@@ -77,7 +77,6 @@ function Button(_ref) {
|
|
|
77
77
|
lineHeight: lineHeight,
|
|
78
78
|
position: 'relative',
|
|
79
79
|
radius: 3,
|
|
80
|
-
role: 'button',
|
|
81
80
|
strokeAlign: 'inside',
|
|
82
81
|
strokeWeight: 1,
|
|
83
82
|
userSelect: 'none',
|
|
@@ -192,7 +191,6 @@ function Button(_ref) {
|
|
|
192
191
|
};
|
|
193
192
|
buttonProps.cursor = 'pointer';
|
|
194
193
|
buttonProps.touchAction = 'manipulation';
|
|
195
|
-
buttonProps.tabIndex = 0;
|
|
196
194
|
buttonProps.onClick = onClick;
|
|
197
195
|
|
|
198
196
|
buttonProps.onKeyDown = function (event) {
|
|
@@ -232,6 +230,11 @@ function Button(_ref) {
|
|
|
232
230
|
|
|
233
231
|
if (restProps.as) {
|
|
234
232
|
buttonProps.to = to;
|
|
233
|
+
} // set button type to prevent nested buttons from unintentionally submiting forms
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
if (buttonProps.as === "button") {
|
|
237
|
+
buttonProps.type = "button";
|
|
235
238
|
}
|
|
236
239
|
|
|
237
240
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -61,7 +61,7 @@ export function Button(_ref) {
|
|
|
61
61
|
|
|
62
62
|
var buttonProps = {
|
|
63
63
|
alignment: 'center',
|
|
64
|
-
as: restProps.href || to ? 'a' : '
|
|
64
|
+
as: restProps.href || to ? 'a' : 'button',
|
|
65
65
|
axis: 'horizontal',
|
|
66
66
|
distribution: 'center',
|
|
67
67
|
fontSize: fontSize,
|
|
@@ -70,7 +70,6 @@ export function Button(_ref) {
|
|
|
70
70
|
lineHeight: lineHeight,
|
|
71
71
|
position: 'relative',
|
|
72
72
|
radius: 3,
|
|
73
|
-
role: 'button',
|
|
74
73
|
strokeAlign: 'inside',
|
|
75
74
|
strokeWeight: 1,
|
|
76
75
|
userSelect: 'none',
|
|
@@ -185,7 +184,6 @@ export function Button(_ref) {
|
|
|
185
184
|
};
|
|
186
185
|
buttonProps.cursor = 'pointer';
|
|
187
186
|
buttonProps.touchAction = 'manipulation';
|
|
188
|
-
buttonProps.tabIndex = 0;
|
|
189
187
|
buttonProps.onClick = onClick;
|
|
190
188
|
|
|
191
189
|
buttonProps.onKeyDown = function (event) {
|
|
@@ -225,6 +223,11 @@ export function Button(_ref) {
|
|
|
225
223
|
|
|
226
224
|
if (restProps.as) {
|
|
227
225
|
buttonProps.to = to;
|
|
226
|
+
} // set button type to prevent nested buttons from unintentionally submiting forms
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
if (buttonProps.as === "button") {
|
|
230
|
+
buttonProps.type = "button";
|
|
228
231
|
}
|
|
229
232
|
|
|
230
233
|
if (process.env.NODE_ENV !== 'production') {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/tapestry-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
|
|
5
5
|
"author": "Front End Systems Engineering <frontend@pco.bz>",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
package/src/Button/Button.tsx
CHANGED
|
@@ -140,7 +140,7 @@ export function Button({
|
|
|
140
140
|
|
|
141
141
|
let buttonProps: any = {
|
|
142
142
|
alignment: 'center',
|
|
143
|
-
as: (restProps as any).href || to ? 'a' : '
|
|
143
|
+
as: (restProps as any).href || to ? 'a' : 'button',
|
|
144
144
|
axis: 'horizontal',
|
|
145
145
|
distribution: 'center',
|
|
146
146
|
fontSize,
|
|
@@ -149,7 +149,6 @@ export function Button({
|
|
|
149
149
|
lineHeight,
|
|
150
150
|
position: 'relative',
|
|
151
151
|
radius: 3,
|
|
152
|
-
role: 'button',
|
|
153
152
|
strokeAlign: 'inside',
|
|
154
153
|
strokeWeight: 1,
|
|
155
154
|
userSelect: 'none',
|
|
@@ -258,7 +257,6 @@ export function Button({
|
|
|
258
257
|
buttonProps.focus = { zIndex: 5 }
|
|
259
258
|
buttonProps.cursor = 'pointer'
|
|
260
259
|
buttonProps.touchAction = 'manipulation'
|
|
261
|
-
buttonProps.tabIndex = 0
|
|
262
260
|
buttonProps.onClick = onClick
|
|
263
261
|
buttonProps.onKeyDown = (event) => {
|
|
264
262
|
if (onClick && (event.key === 'Enter' || event.key === ' ')) {
|
|
@@ -300,6 +298,11 @@ export function Button({
|
|
|
300
298
|
buttonProps.to = to
|
|
301
299
|
}
|
|
302
300
|
|
|
301
|
+
// set button type to prevent nested buttons from unintentionally submiting forms
|
|
302
|
+
if (buttonProps.as === "button") {
|
|
303
|
+
buttonProps.type = "button"
|
|
304
|
+
}
|
|
305
|
+
|
|
303
306
|
if (process.env.NODE_ENV !== 'production') {
|
|
304
307
|
if (icon && !(title || (tooltip && (tooltip as any).title))) {
|
|
305
308
|
const { tooltipProps, wrapperProps } = useAccessibilityViolation(
|