@aristobyte-ui/button 2.11.2 → 2.13.0

package/lib/components/Button/index.d.ts

@@ -21,7 +21,7 @@ export interface IButton {
         align?: 'left' | 'right';
     };
     isLoading?: boolean;
-    spinnerType?: 'default' | 'duo' | 'gradient' | 'pulse' | 'pulse-duo';
+    spinnerAppearance?: 'default' | 'duo' | 'gradient' | 'pulse' | 'pulse-duo';
     className?: string;
     style?: React.CSSProperties;
 }

package/lib/components/Button/index.js

@@ -51,7 +51,7 @@ var spinner_1 = require("@aristobyte-ui/spinner");
 var utils_1 = require("@aristobyte-ui/utils");
 require("./Button.scss");
 var Button = function (_a) {
-    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;
+    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;
     var uniqueId = React.useId();
     var ref = React.useRef(null);
     var handleClick = function (e) {
@@ -69,12 +69,23 @@ var Button = function (_a) {
         onClick: handleClick,
         disabled: disabled || isLoading,
         style: style,
-        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),
+        className: [
+            'button',
+            transparent && 'button--transparent',
+            "button-variant--".concat(variant),
+            "button-appearance--".concat(appearance),
+            "button-size--".concat(size),
+            "button-radius--".concat(radius),
+            isLoading && 'button--loading',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '),
     }); };
     var renderChildren = function () {
         var _a;
         return (React.createElement(React.Fragment, null,
-            isLoading && React.createElement(spinner_1.Spinner, { size: size, variant: variant, type: spinnerType, className: "spinner" }),
+            isLoading && React.createElement(spinner_1.Spinner, { size: size, variant: variant, appearance: spinnerAppearance, className: "spinner" }),
             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 }))),
             text || children));
     };

package/lib/components/ButtonGroup/ButtonGroup.scss

@@ -16,18 +16,31 @@
     }
   }
 
-  @mixin button-group-variant($name, $color) {
-    &-variant--#{$name} {
-      background-color: $color;
+  &-variant {
+    &--default {
+      background-color: $color-default;
+    }
+
+    &--primary {
+      background-color: $color-primary;
     }
-  }
 
-  @include button-group-variant('default', $color-default);
-  @include button-group-variant('primary', $color-primary);
-  @include button-group-variant('secondary', $color-secondary);
-  @include button-group-variant('success', $color-success);
-  @include button-group-variant('error', $color-error);
-  @include button-group-variant('warning', $color-warning);
+    &--secondary {
+      background-color: $color-secondary;
+    }
+
+    &--success {
+      background-color: $color-success;
+    }
+
+    &--error {
+      background-color: $color-error;
+    }
+
+    &--warning {
+      background-color: $color-warning;
+    }
+  }
 
   &-radius {
     &--none {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aristobyte-ui/button",
-  "version": "2.11.2",
+  "version": "2.13.0",
   "description": "react button and buttongroup components with multiple variants, appearances, sizes, radius options, icons, ripple feedback, and fully typed typescript support",
   "license": "MIT",
   "private": false,
@@ -54,8 +54,8 @@
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/spinner": "^2.11.2",
-    "@aristobyte-ui/utils": "^2.11.2"
+    "@aristobyte-ui/spinner": "^2.13.0",
+    "@aristobyte-ui/utils": "^2.13.0"
   },
   "exports": {
     ".": {