@spark-web/button 2.0.0-rc.1 → 2.0.0-rc.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.
- package/CHANGELOG.md +18 -0
- package/dist/declarations/src/button-link.d.ts +1 -1
- package/dist/declarations/src/use-button-styles.d.ts +3 -3
- package/dist/spark-web-button.cjs.dev.js +12 -12
- package/dist/spark-web-button.cjs.prod.js +12 -12
- package/dist/spark-web-button.esm.js +12 -12
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @spark-web/button
|
|
2
2
|
|
|
3
|
+
## 2.0.0-rc.2
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- add parser
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies []:
|
|
12
|
+
- @spark-web/spinner@2.0.0-rc.2
|
|
13
|
+
- @spark-web/theme@4.0.0-rc.2
|
|
14
|
+
- @spark-web/utils@2.0.0-rc.2
|
|
15
|
+
- @spark-web/a11y@2.0.0-rc.2
|
|
16
|
+
- @spark-web/icon@2.0.0-rc.2
|
|
17
|
+
- @spark-web/link@2.0.0-rc.2
|
|
18
|
+
- @spark-web/text@2.0.0-rc.2
|
|
19
|
+
- @spark-web/box@2.0.0-rc.2
|
|
20
|
+
|
|
3
21
|
## 2.0.0-rc.1
|
|
4
22
|
|
|
5
23
|
### Major Changes
|
|
@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
|
|
|
5
5
|
/** The appearance of a `Button`, with the semantics of a link. */
|
|
6
6
|
export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
|
|
7
7
|
as?: Comp | undefined;
|
|
8
|
-
ref?: import("react").Ref<Comp extends "symbol" | "
|
|
8
|
+
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
9
9
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -9,18 +9,18 @@ import type { ButtonProminence, ButtonSize, ButtonTone } from "./types.js";
|
|
|
9
9
|
*/
|
|
10
10
|
export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): readonly [{
|
|
11
11
|
readonly alignItems: "center";
|
|
12
|
-
readonly background: "
|
|
12
|
+
readonly background: "disabled" | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "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
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";
|
|
17
17
|
readonly display: "inline-flex";
|
|
18
18
|
readonly gap: "small";
|
|
19
|
-
readonly height: "
|
|
19
|
+
readonly height: "medium" | "large";
|
|
20
20
|
readonly justifyContent: "center";
|
|
21
21
|
readonly paddingX: "medium" | "xlarge" | undefined;
|
|
22
22
|
readonly position: "relative";
|
|
23
|
-
readonly width: "
|
|
23
|
+
readonly width: "medium" | "large" | undefined;
|
|
24
24
|
}, {
|
|
25
25
|
readonly '&:not([aria-disabled=true])': {
|
|
26
26
|
readonly ':hover': {
|
|
@@ -7,7 +7,7 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
|
|
|
7
7
|
var box = require('@spark-web/box');
|
|
8
8
|
var utils = require('@spark-web/utils');
|
|
9
9
|
var react = require('react');
|
|
10
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
11
11
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
12
12
|
var react$1 = require('@emotion/react');
|
|
13
13
|
var a11y = require('@spark-web/a11y');
|
|
@@ -39,7 +39,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
39
39
|
var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
|
|
40
40
|
preventableClickHandler(event);
|
|
41
41
|
}, [disabled, onClickProp]);
|
|
42
|
-
return
|
|
42
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
|
|
43
43
|
as: "button",
|
|
44
44
|
ref: composedRef
|
|
45
45
|
// Hide aria-disabled attribute when button is not disabled
|
|
@@ -239,9 +239,9 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
239
239
|
var variant = variants[prominence][tone];
|
|
240
240
|
return react.Children.map(children, function (child) {
|
|
241
241
|
if (typeof child === 'string' || typeof child === 'number') {
|
|
242
|
-
return
|
|
242
|
+
return jsxRuntime.jsx(HiddenWhenLoading, {
|
|
243
243
|
isLoading: isLoading,
|
|
244
|
-
children:
|
|
244
|
+
children: jsxRuntime.jsx(text.Text, {
|
|
245
245
|
as: "span",
|
|
246
246
|
baseline: false,
|
|
247
247
|
overflowStrategy: "nowrap",
|
|
@@ -253,7 +253,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
253
253
|
});
|
|
254
254
|
}
|
|
255
255
|
if ( /*#__PURE__*/react.isValidElement(child)) {
|
|
256
|
-
return
|
|
256
|
+
return jsxRuntime.jsx(HiddenWhenLoading, {
|
|
257
257
|
isLoading: isLoading,
|
|
258
258
|
children: /*#__PURE__*/react.cloneElement(child, {
|
|
259
259
|
// Dismiss buttons need to be `xxsmall`
|
|
@@ -272,7 +272,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
272
272
|
function HiddenWhenLoading(_ref2) {
|
|
273
273
|
var children = _ref2.children,
|
|
274
274
|
isLoading = _ref2.isLoading;
|
|
275
|
-
return
|
|
275
|
+
return jsxRuntime.jsx(box.Box, {
|
|
276
276
|
as: "span",
|
|
277
277
|
display: "inline-flex",
|
|
278
278
|
alignItems: "center",
|
|
@@ -398,7 +398,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
398
398
|
boxProps = _useButtonStyles2[0],
|
|
399
399
|
buttonStyles = _useButtonStyles2[1];
|
|
400
400
|
var variant = variants[prominence][tone];
|
|
401
|
-
return
|
|
401
|
+
return jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
402
402
|
"aria-controls": ariaControls,
|
|
403
403
|
"aria-describedby": ariaDescribedBy,
|
|
404
404
|
"aria-expanded": ariaExpanded,
|
|
@@ -415,7 +415,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
415
415
|
prominence: prominence,
|
|
416
416
|
size: size,
|
|
417
417
|
tone: tone
|
|
418
|
-
})), loading &&
|
|
418
|
+
})), loading && jsxRuntime.jsx(Loading, {
|
|
419
419
|
tone: variant === null || variant === void 0 ? void 0 : variant.textTone
|
|
420
420
|
})]
|
|
421
421
|
}));
|
|
@@ -423,7 +423,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
423
423
|
Button.displayName = 'Button';
|
|
424
424
|
function Loading(_ref2) {
|
|
425
425
|
var tone = _ref2.tone;
|
|
426
|
-
return
|
|
426
|
+
return jsxRuntime.jsxs(box.Box, {
|
|
427
427
|
as: "span",
|
|
428
428
|
position: "absolute",
|
|
429
429
|
top: 0,
|
|
@@ -433,9 +433,9 @@ function Loading(_ref2) {
|
|
|
433
433
|
display: "flex",
|
|
434
434
|
alignItems: "center",
|
|
435
435
|
justifyContent: "center",
|
|
436
|
-
children: [
|
|
436
|
+
children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
|
|
437
437
|
children: "button loading indicator"
|
|
438
|
-
}),
|
|
438
|
+
}), jsxRuntime.jsx(spinner.Spinner, {
|
|
439
439
|
size: "xsmall",
|
|
440
440
|
tone: tone
|
|
441
441
|
})]
|
|
@@ -467,7 +467,7 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
467
467
|
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
468
468
|
boxProps = _useButtonStyles2[0],
|
|
469
469
|
buttonStyles = _useButtonStyles2[1];
|
|
470
|
-
return
|
|
470
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
471
471
|
"aria-label": consumerProps.label,
|
|
472
472
|
as: LinkComponent,
|
|
473
473
|
asElement: "a",
|
|
@@ -7,7 +7,7 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
|
|
|
7
7
|
var box = require('@spark-web/box');
|
|
8
8
|
var utils = require('@spark-web/utils');
|
|
9
9
|
var react = require('react');
|
|
10
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
11
11
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
12
12
|
var react$1 = require('@emotion/react');
|
|
13
13
|
var a11y = require('@spark-web/a11y');
|
|
@@ -39,7 +39,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
39
39
|
var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
|
|
40
40
|
preventableClickHandler(event);
|
|
41
41
|
}, [disabled, onClickProp]);
|
|
42
|
-
return
|
|
42
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
|
|
43
43
|
as: "button",
|
|
44
44
|
ref: composedRef
|
|
45
45
|
// Hide aria-disabled attribute when button is not disabled
|
|
@@ -239,9 +239,9 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
239
239
|
var variant = variants[prominence][tone];
|
|
240
240
|
return react.Children.map(children, function (child) {
|
|
241
241
|
if (typeof child === 'string' || typeof child === 'number') {
|
|
242
|
-
return
|
|
242
|
+
return jsxRuntime.jsx(HiddenWhenLoading, {
|
|
243
243
|
isLoading: isLoading,
|
|
244
|
-
children:
|
|
244
|
+
children: jsxRuntime.jsx(text.Text, {
|
|
245
245
|
as: "span",
|
|
246
246
|
baseline: false,
|
|
247
247
|
overflowStrategy: "nowrap",
|
|
@@ -253,7 +253,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
253
253
|
});
|
|
254
254
|
}
|
|
255
255
|
if ( /*#__PURE__*/react.isValidElement(child)) {
|
|
256
|
-
return
|
|
256
|
+
return jsxRuntime.jsx(HiddenWhenLoading, {
|
|
257
257
|
isLoading: isLoading,
|
|
258
258
|
children: /*#__PURE__*/react.cloneElement(child, {
|
|
259
259
|
// Dismiss buttons need to be `xxsmall`
|
|
@@ -272,7 +272,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
272
272
|
function HiddenWhenLoading(_ref2) {
|
|
273
273
|
var children = _ref2.children,
|
|
274
274
|
isLoading = _ref2.isLoading;
|
|
275
|
-
return
|
|
275
|
+
return jsxRuntime.jsx(box.Box, {
|
|
276
276
|
as: "span",
|
|
277
277
|
display: "inline-flex",
|
|
278
278
|
alignItems: "center",
|
|
@@ -398,7 +398,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
398
398
|
boxProps = _useButtonStyles2[0],
|
|
399
399
|
buttonStyles = _useButtonStyles2[1];
|
|
400
400
|
var variant = variants[prominence][tone];
|
|
401
|
-
return
|
|
401
|
+
return jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
402
402
|
"aria-controls": ariaControls,
|
|
403
403
|
"aria-describedby": ariaDescribedBy,
|
|
404
404
|
"aria-expanded": ariaExpanded,
|
|
@@ -415,7 +415,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
415
415
|
prominence: prominence,
|
|
416
416
|
size: size,
|
|
417
417
|
tone: tone
|
|
418
|
-
})), loading &&
|
|
418
|
+
})), loading && jsxRuntime.jsx(Loading, {
|
|
419
419
|
tone: variant === null || variant === void 0 ? void 0 : variant.textTone
|
|
420
420
|
})]
|
|
421
421
|
}));
|
|
@@ -423,7 +423,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
|
|
|
423
423
|
Button.displayName = 'Button';
|
|
424
424
|
function Loading(_ref2) {
|
|
425
425
|
var tone = _ref2.tone;
|
|
426
|
-
return
|
|
426
|
+
return jsxRuntime.jsxs(box.Box, {
|
|
427
427
|
as: "span",
|
|
428
428
|
position: "absolute",
|
|
429
429
|
top: 0,
|
|
@@ -433,9 +433,9 @@ function Loading(_ref2) {
|
|
|
433
433
|
display: "flex",
|
|
434
434
|
alignItems: "center",
|
|
435
435
|
justifyContent: "center",
|
|
436
|
-
children: [
|
|
436
|
+
children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
|
|
437
437
|
children: "button loading indicator"
|
|
438
|
-
}),
|
|
438
|
+
}), jsxRuntime.jsx(spinner.Spinner, {
|
|
439
439
|
size: "xsmall",
|
|
440
440
|
tone: tone
|
|
441
441
|
})]
|
|
@@ -467,7 +467,7 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
467
467
|
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
468
468
|
boxProps = _useButtonStyles2[0],
|
|
469
469
|
buttonStyles = _useButtonStyles2[1];
|
|
470
|
-
return
|
|
470
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
471
471
|
"aria-label": consumerProps.label,
|
|
472
472
|
as: LinkComponent,
|
|
473
473
|
asElement: "a",
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
|
|
|
3
3
|
import { Box } from '@spark-web/box';
|
|
4
4
|
import { useComposedRefs } from '@spark-web/utils';
|
|
5
5
|
import { forwardRef, useRef, useCallback, Children, isValidElement, cloneElement } from 'react';
|
|
6
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
7
7
|
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
|
|
8
8
|
import { css } from '@emotion/react';
|
|
9
9
|
import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
|
|
@@ -35,7 +35,7 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
35
35
|
var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
|
|
36
36
|
preventableClickHandler(event);
|
|
37
37
|
}, [disabled, onClickProp]);
|
|
38
|
-
return
|
|
38
|
+
return jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
|
|
39
39
|
as: "button",
|
|
40
40
|
ref: composedRef
|
|
41
41
|
// Hide aria-disabled attribute when button is not disabled
|
|
@@ -235,9 +235,9 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
235
235
|
var variant = variants[prominence][tone];
|
|
236
236
|
return Children.map(children, function (child) {
|
|
237
237
|
if (typeof child === 'string' || typeof child === 'number') {
|
|
238
|
-
return
|
|
238
|
+
return jsx(HiddenWhenLoading, {
|
|
239
239
|
isLoading: isLoading,
|
|
240
|
-
children:
|
|
240
|
+
children: jsx(Text, {
|
|
241
241
|
as: "span",
|
|
242
242
|
baseline: false,
|
|
243
243
|
overflowStrategy: "nowrap",
|
|
@@ -249,7 +249,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
249
249
|
});
|
|
250
250
|
}
|
|
251
251
|
if ( /*#__PURE__*/isValidElement(child)) {
|
|
252
|
-
return
|
|
252
|
+
return jsx(HiddenWhenLoading, {
|
|
253
253
|
isLoading: isLoading,
|
|
254
254
|
children: /*#__PURE__*/cloneElement(child, {
|
|
255
255
|
// Dismiss buttons need to be `xxsmall`
|
|
@@ -268,7 +268,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
|
|
|
268
268
|
function HiddenWhenLoading(_ref2) {
|
|
269
269
|
var children = _ref2.children,
|
|
270
270
|
isLoading = _ref2.isLoading;
|
|
271
|
-
return
|
|
271
|
+
return jsx(Box, {
|
|
272
272
|
as: "span",
|
|
273
273
|
display: "inline-flex",
|
|
274
274
|
alignItems: "center",
|
|
@@ -394,7 +394,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
394
394
|
boxProps = _useButtonStyles2[0],
|
|
395
395
|
buttonStyles = _useButtonStyles2[1];
|
|
396
396
|
var variant = variants[prominence][tone];
|
|
397
|
-
return
|
|
397
|
+
return jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
398
398
|
"aria-controls": ariaControls,
|
|
399
399
|
"aria-describedby": ariaDescribedBy,
|
|
400
400
|
"aria-expanded": ariaExpanded,
|
|
@@ -411,7 +411,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
411
411
|
prominence: prominence,
|
|
412
412
|
size: size,
|
|
413
413
|
tone: tone
|
|
414
|
-
})), loading &&
|
|
414
|
+
})), loading && jsx(Loading, {
|
|
415
415
|
tone: variant === null || variant === void 0 ? void 0 : variant.textTone
|
|
416
416
|
})]
|
|
417
417
|
}));
|
|
@@ -419,7 +419,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
419
419
|
Button.displayName = 'Button';
|
|
420
420
|
function Loading(_ref2) {
|
|
421
421
|
var tone = _ref2.tone;
|
|
422
|
-
return
|
|
422
|
+
return jsxs(Box, {
|
|
423
423
|
as: "span",
|
|
424
424
|
position: "absolute",
|
|
425
425
|
top: 0,
|
|
@@ -429,9 +429,9 @@ function Loading(_ref2) {
|
|
|
429
429
|
display: "flex",
|
|
430
430
|
alignItems: "center",
|
|
431
431
|
justifyContent: "center",
|
|
432
|
-
children: [
|
|
432
|
+
children: [jsx(VisuallyHidden, {
|
|
433
433
|
children: "button loading indicator"
|
|
434
|
-
}),
|
|
434
|
+
}), jsx(Spinner, {
|
|
435
435
|
size: "xsmall",
|
|
436
436
|
tone: tone
|
|
437
437
|
})]
|
|
@@ -463,7 +463,7 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
463
463
|
_useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
|
|
464
464
|
boxProps = _useButtonStyles2[0],
|
|
465
465
|
buttonStyles = _useButtonStyles2[1];
|
|
466
|
-
return
|
|
466
|
+
return jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
|
|
467
467
|
"aria-label": consumerProps.label,
|
|
468
468
|
as: LinkComponent,
|
|
469
469
|
asElement: "a",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/button",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.2",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.25.0",
|
|
19
19
|
"@emotion/react": "^11.13.5",
|
|
20
|
-
"@spark-web/a11y": "^2.0.0-rc.
|
|
21
|
-
"@spark-web/box": "^2.0.0-rc.
|
|
22
|
-
"@spark-web/icon": "^2.0.0-rc.
|
|
23
|
-
"@spark-web/link": "^2.0.0-rc.
|
|
24
|
-
"@spark-web/spinner": "^2.0.0-rc.
|
|
25
|
-
"@spark-web/text": "^2.0.0-rc.
|
|
26
|
-
"@spark-web/theme": "^4.0.0-rc.
|
|
27
|
-
"@spark-web/utils": "^2.0.0-rc.
|
|
20
|
+
"@spark-web/a11y": "^2.0.0-rc.2",
|
|
21
|
+
"@spark-web/box": "^2.0.0-rc.2",
|
|
22
|
+
"@spark-web/icon": "^2.0.0-rc.2",
|
|
23
|
+
"@spark-web/link": "^2.0.0-rc.2",
|
|
24
|
+
"@spark-web/spinner": "^2.0.0-rc.2",
|
|
25
|
+
"@spark-web/text": "^2.0.0-rc.2",
|
|
26
|
+
"@spark-web/theme": "^4.0.0-rc.2",
|
|
27
|
+
"@spark-web/utils": "^2.0.0-rc.2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "^18.2.0",
|