@aristobyte-ui/button 2.11.2 → 2.13.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.
Files changed (12) hide show
  1. package/README.md +1 -1
  2. package/es/.tsbuildinfo +1 -1
  3. package/es/components/Button/Button.scss +681 -66
  4. package/es/components/Button/index.d.ts +1 -1
  5. package/es/components/Button/index.js +14 -3
  6. package/es/components/ButtonGroup/ButtonGroup.scss +23 -10
  7. package/lib/.tsbuildinfo +1 -1
  8. package/lib/components/Button/Button.scss +681 -66
  9. package/lib/components/Button/index.d.ts +1 -1
  10. package/lib/components/Button/index.js +14 -3
  11. package/lib/components/ButtonGroup/ButtonGroup.scss +23 -10
  12. package/package.json +3 -3
package/es/components/Button/index.d.ts CHANGED
@@ -21,7 +21,7 @@ export interface IButton {
21
21
  align?: 'left' | 'right';
22
22
  };
23
23
  isLoading?: boolean;
24
- spinnerType?: 'default' | 'duo' | 'gradient' | 'pulse' | 'pulse-duo';
24
+ spinnerAppearance?: 'default' | 'duo' | 'gradient' | 'pulse' | 'pulse-duo';
25
25
  className?: string;
26
26
  style?: React.CSSProperties;
27
27
  }
package/es/components/Button/index.js CHANGED
@@ -15,7 +15,7 @@ import { Spinner } from '@aristobyte-ui/spinner';
15
15
  import { renderRipple } from '@aristobyte-ui/utils';
16
16
  import './Button.scss';
17
17
  export var Button = function (_a) {
18
- var onClick = _a.onClick, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.href, href = _c === void 0 ? '' : _c, _d = _a.target, target = _d === void 0 ? '_self' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, _g = _a.variant, variant = _g === void 0 ? 'default' : _g, _h = _a.appearance, appearance = _h === void 0 ? 'solid' : _h, _j = _a.size, size = _j === void 0 ? 'md' : _j, _k = _a.radius, radius = _k === void 0 ? 'md' : _k, icon = _a.icon, _l = _a.spinnerType, spinnerType = _l === void 0 ? 'default' : _l, _m = _a.transparent, transparent = _m === void 0 ? false : _m, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q, _r = _a.style, style = _r === void 0 ? {} : _r;
18
+ var onClick = _a.onClick, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.href, href = _c === void 0 ? '' : _c, _d = _a.target, target = _d === void 0 ? '_self' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, _g = _a.variant, variant = _g === void 0 ? 'default' : _g, _h = _a.appearance, appearance = _h === void 0 ? 'solid' : _h, _j = _a.size, size = _j === void 0 ? 'md' : _j, _k = _a.radius, radius = _k === void 0 ? 'md' : _k, icon = _a.icon, _l = _a.spinnerAppearance, spinnerAppearance = _l === void 0 ? 'default' : _l, _m = _a.transparent, transparent = _m === void 0 ? false : _m, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q, _r = _a.style, style = _r === void 0 ? {} : _r;
19
19
  var uniqueId = React.useId();
20
20
  var ref = React.useRef(null);
21
21
  var handleClick = function (e) {
@@ -33,12 +33,23 @@ export var Button = function (_a) {
33
33
  onClick: handleClick,
34
34
  disabled: disabled || isLoading,
35
35
  style: style,
36
- className: "button ".concat(transparent ? 'button--transparent' : '', " ").concat("button-variant--".concat(variant), " ").concat("button-appearance--".concat(appearance), " ").concat("button-size--".concat(size), " ").concat("button-radius--".concat(radius), " ").concat(isLoading ? 'button--loading' : '', " ").concat(className),
36
+ className: [
37
+ 'button',
38
+ transparent && 'button--transparent',
39
+ "button-variant--".concat(variant),
40
+ "button-appearance--".concat(appearance),
41
+ "button-size--".concat(size),
42
+ "button-radius--".concat(radius),
43
+ isLoading && 'button--loading',
44
+ className,
45
+ ]
46
+ .filter(Boolean)
47
+ .join(' '),
37
48
  }); };
38
49
  var renderChildren = function () {
39
50
  var _a;
40
51
  return (React.createElement(React.Fragment, null,
41
- isLoading && React.createElement(Spinner, { size: size, variant: variant, type: spinnerType, className: "spinner" }),
52
+ isLoading && React.createElement(Spinner, { size: size, variant: variant, appearance: spinnerAppearance, className: "spinner" }),
42
53
  icon && (React.createElement("span", { className: "icon ".concat("icon--".concat((_a = icon.align) !== null && _a !== void 0 ? _a : 'left')) }, icon.component({ color: icon.color, size: icon.size }))),
43
54
  text || children));
44
55
  };
package/es/components/ButtonGroup/ButtonGroup.scss CHANGED
@@ -16,18 +16,31 @@
16
16
  }
17
17
  }
18
18
 
19
- @mixin button-group-variant($name, $color) {
20
- &-variant--#{$name} {
21
- background-color: $color;
19
+ &-variant {
20
+ &--default {
21
+ background-color: $color-default;
22
+ }
23
+
24
+ &--primary {
25
+ background-color: $color-primary;
22
26
  }
23
- }
24
27
 
25
- @include button-group-variant('default', $color-default);
26
- @include button-group-variant('primary', $color-primary);
27
- @include button-group-variant('secondary', $color-secondary);
28
- @include button-group-variant('success', $color-success);
29
- @include button-group-variant('error', $color-error);
30
- @include button-group-variant('warning', $color-warning);
28
+ &--secondary {
29
+ background-color: $color-secondary;
30
+ }
31
+
32
+ &--success {
33
+ background-color: $color-success;
34
+ }
35
+
36
+ &--error {
37
+ background-color: $color-error;
38
+ }
39
+
40
+ &--warning {
41
+ background-color: $color-warning;
42
+ }
43
+ }
31
44
 
32
45
  &-radius {
33
46
  &--none {