@highlight-ui/button - npm Package Compare versions

Comparing version 4.0.5 to 6.0.0

dist/cjs/index.d.ts

 export { default as Button } from './src/Button';
-export type { ButtonProps, ButtonRef } from './src/Button';
+export type { ButtonProps, ButtonRef, ButtonState } from './src/Button';

dist/cjs/index.js

@@ -53,9 +53,9 @@ 'use strict';
 
-var styles = {"button":"Button-module__3Rp1BYXs__v4-0-5","buttonInner":"Button-module__3ZNLhdsJ__v4-0-5","iconOnly":"Button-module__3-vgpZJs__v4-0-5","block":"Button-module__1xc1DTHJ__v4-0-5","default":"Button-module__2Kmo3l-q__v4-0-5","focus":"Button-module__39s3axLP__v4-0-5","active":"Button-module__3WXlxxv-__v4-0-5","disabled":"Button-module__yB64MUUF__v4-0-5","primary":"Button-module__2nxVbZSO__v4-0-5","success":"Button-module__2WMN2Up2__v4-0-5","info":"Button-module__3Ll-h-cW__v4-0-5","warning":"Button-module__2Ma4TaUU__v4-0-5","warning-light":"Button-module__2HCrlzv6__v4-0-5","danger":"Button-module__3Eex2siA__v4-0-5","dark":"Button-module__MqwKA-Vc__v4-0-5","light":"Button-module__iJhDdOHm__v4-0-5","defaultOutline":"Button-module__2tKStPHe__v4-0-5","hover":"Button-module__YUN3Kf-p__v4-0-5","link":"Button-module__2KZcoTpE__v4-0-5"};
+var styles = {"button":"Button-module__3Rp1BYXs__v6-0-0","buttonInner":"Button-module__3ZNLhdsJ__v6-0-0","iconOnly":"Button-module__3-vgpZJs__v6-0-0","block":"Button-module__1xc1DTHJ__v6-0-0","default":"Button-module__2Kmo3l-q__v6-0-0","focus":"Button-module__39s3axLP__v6-0-0","active":"Button-module__3WXlxxv-__v6-0-0","disabled":"Button-module__yB64MUUF__v6-0-0","primary":"Button-module__2nxVbZSO__v6-0-0","success":"Button-module__2WMN2Up2__v6-0-0","info":"Button-module__3Ll-h-cW__v6-0-0","warning":"Button-module__2Ma4TaUU__v6-0-0","warning-light":"Button-module__2HCrlzv6__v6-0-0","danger":"Button-module__3Eex2siA__v6-0-0","dark":"Button-module__MqwKA-Vc__v6-0-0","light":"Button-module__iJhDdOHm__v6-0-0","defaultOutline":"Button-module__2tKStPHe__v6-0-0","hover":"Button-module__YUN3Kf-p__v6-0-0","link":"Button-module__2KZcoTpE__v6-0-0"};
 
 function ButtonWithRef(_a, ref) {
-    var _b, _c, _d, _e, _f;
-    var _g = _a.actAsAnchor, actAsAnchor = _g === void 0 ? false : _g, _h = _a.active, active = _h === void 0 ? false : _h, block = _a.block, _j = _a.children, children = _j === void 0 ? null : _j, className = _a.className, _k = _a.disabled, disabled = _k === void 0 ? false : _k, icon$1 = _a.icon, loading = _a.loading, metadata = _a.metadata, _l = _a.onClick, onClick = _l === void 0 ? undefined : _l, outline = _a.outline, _m = _a.theme, theme = _m === void 0 ? 'default' : _m, _o = _a.type, type = _o === void 0 ? 'button' : _o, remainingProps = __rest(_a, ["actAsAnchor", "active", "block", "children", "className", "disabled", "icon", "loading", "metadata", "onClick", "outline", "theme", "type"]);
+    var _b, _c, _d, _e;
+    var _f = _a.actAsAnchor, actAsAnchor = _f === void 0 ? false : _f, block = _a.block, _g = _a.children, children = _g === void 0 ? null : _g, className = _a.className, _h = _a.buttonState, buttonState = _h === void 0 ? 'enabled' : _h, icon$1 = _a.icon, metadata = _a.metadata, _j = _a.onClick, onClick = _j === void 0 ? undefined : _j, outline = _a.outline, _k = _a.theme, theme = _k === void 0 ? 'default' : _k, _l = _a.type, type = _l === void 0 ? 'button' : _l, remainingProps = __rest(_a, ["actAsAnchor", "block", "children", "className", "buttonState", "icon", "metadata", "onClick", "outline", "theme", "type"]);
     var tag = actAsAnchor ? 'a' : 'button';
-    var containerClass = classnames__default['default'](styles.button, (_b = {}, _b[styles[theme]] = !outline, _b), (_c = {}, _c[styles[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles.block] = block, _d), (_e = {}, _e[styles.active] = active || loading, _e), (_f = {}, _f[styles.disabled] = disabled, _f), className);
+    var containerClass = classnames__default['default'](styles.button, (_b = {}, _b[styles[theme]] = !outline, _b), (_c = {}, _c[styles[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles.block] = block, _d), (_e = {}, _e[styles.disabled] = buttonState === 'disabled', _e), className);
     var focusAwareOnClick = function (event) {
@@ -67,3 +67,3 @@ if (!actAsAnchor)
     };
-    return React__default['default'].createElement(tag, __assign(__assign(__assign({}, remainingProps), utilsCommons.parseMetadata(metadata)), { className: containerClass, disabled: disabled, onClick: disabled ? undefined : focusAwareOnClick, type: tag === 'button' ? type : undefined, ref: ref }), loading ? (React__default['default'].createElement(icon.Icon, { name: "spinner-third", size: 15, spin: true, type: "solid" })) : (React__default['default'].createElement("div", { className: styles.buttonInner },
+    return React__default['default'].createElement(tag, __assign(__assign(__assign({}, remainingProps), utilsCommons.parseMetadata(metadata)), { className: containerClass, disabled: buttonState !== 'enabled', onClick: focusAwareOnClick, type: tag === 'button' ? type : undefined, ref: ref }), buttonState === 'loading' ? (React__default['default'].createElement(icon.Icon, { name: "spinner-third", size: 15, spin: true, type: "solid" })) : (React__default['default'].createElement("div", { className: styles.buttonInner },
         icon$1 && React__default['default'].createElement(icon.Icon, { name: icon$1, size: 14, type: "solid" }),
@@ -70,0 +70,0 @@ children && React__default['default'].createElement("div", { className: styles.buttonContent }, children))));

dist/cjs/src/Button.d.ts

 import React from 'react';
 import { PropsWithMetadata, Theme } from '@highlight-ui/utils-commons';
 export declare type ButtonRef = React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+export declare type ButtonState = 'enabled' | 'disabled' | 'loading';
 export declare type ButtonProps = React.PropsWithChildren<PropsWithMetadata<{
     /** Makes the component to render an anchor tag instead of the button. Affects the set props that can be provided */
     actAsAnchor?: boolean;
-    /** Determines whether the button should have an active state */
-    active?: boolean;
     /** Makes the component behave as a block element (take up the whole available space) */
@@ -13,8 +12,6 @@ block?: boolean;
     className?: string;
-    /** Marks the button as disabled */
-    disabled?: boolean;
+    /** Determines the state of the button */
+    buttonState?: ButtonState;
     /** Allows to provide an icon by icon's name */
     icon?: string;
-    /** Makes the button to render a loading spinner additionally to the label */
-    loading?: boolean;
     /** A callback that will be fired ones the button is clicked */
@@ -21,0 +18,0 @@ onClick?: React.MouseEventHandler;

dist/esm/index.d.ts

 export { default as Button } from './src/Button';
-export type { ButtonProps, ButtonRef } from './src/Button';
+export type { ButtonProps, ButtonRef, ButtonState } from './src/Button';

dist/esm/index.js

@@ -44,9 +44,9 @@ import React from 'react';
 
-var styles = {"button":"Button-module__3Rp1BYXs__v4-0-5","buttonInner":"Button-module__3ZNLhdsJ__v4-0-5","iconOnly":"Button-module__3-vgpZJs__v4-0-5","block":"Button-module__1xc1DTHJ__v4-0-5","default":"Button-module__2Kmo3l-q__v4-0-5","focus":"Button-module__39s3axLP__v4-0-5","active":"Button-module__3WXlxxv-__v4-0-5","disabled":"Button-module__yB64MUUF__v4-0-5","primary":"Button-module__2nxVbZSO__v4-0-5","success":"Button-module__2WMN2Up2__v4-0-5","info":"Button-module__3Ll-h-cW__v4-0-5","warning":"Button-module__2Ma4TaUU__v4-0-5","warning-light":"Button-module__2HCrlzv6__v4-0-5","danger":"Button-module__3Eex2siA__v4-0-5","dark":"Button-module__MqwKA-Vc__v4-0-5","light":"Button-module__iJhDdOHm__v4-0-5","defaultOutline":"Button-module__2tKStPHe__v4-0-5","hover":"Button-module__YUN3Kf-p__v4-0-5","link":"Button-module__2KZcoTpE__v4-0-5"};
+var styles = {"button":"Button-module__3Rp1BYXs__v6-0-0","buttonInner":"Button-module__3ZNLhdsJ__v6-0-0","iconOnly":"Button-module__3-vgpZJs__v6-0-0","block":"Button-module__1xc1DTHJ__v6-0-0","default":"Button-module__2Kmo3l-q__v6-0-0","focus":"Button-module__39s3axLP__v6-0-0","active":"Button-module__3WXlxxv-__v6-0-0","disabled":"Button-module__yB64MUUF__v6-0-0","primary":"Button-module__2nxVbZSO__v6-0-0","success":"Button-module__2WMN2Up2__v6-0-0","info":"Button-module__3Ll-h-cW__v6-0-0","warning":"Button-module__2Ma4TaUU__v6-0-0","warning-light":"Button-module__2HCrlzv6__v6-0-0","danger":"Button-module__3Eex2siA__v6-0-0","dark":"Button-module__MqwKA-Vc__v6-0-0","light":"Button-module__iJhDdOHm__v6-0-0","defaultOutline":"Button-module__2tKStPHe__v6-0-0","hover":"Button-module__YUN3Kf-p__v6-0-0","link":"Button-module__2KZcoTpE__v6-0-0"};
 
 function ButtonWithRef(_a, ref) {
-    var _b, _c, _d, _e, _f;
-    var _g = _a.actAsAnchor, actAsAnchor = _g === void 0 ? false : _g, _h = _a.active, active = _h === void 0 ? false : _h, block = _a.block, _j = _a.children, children = _j === void 0 ? null : _j, className = _a.className, _k = _a.disabled, disabled = _k === void 0 ? false : _k, icon = _a.icon, loading = _a.loading, metadata = _a.metadata, _l = _a.onClick, onClick = _l === void 0 ? undefined : _l, outline = _a.outline, _m = _a.theme, theme = _m === void 0 ? 'default' : _m, _o = _a.type, type = _o === void 0 ? 'button' : _o, remainingProps = __rest(_a, ["actAsAnchor", "active", "block", "children", "className", "disabled", "icon", "loading", "metadata", "onClick", "outline", "theme", "type"]);
+    var _b, _c, _d, _e;
+    var _f = _a.actAsAnchor, actAsAnchor = _f === void 0 ? false : _f, block = _a.block, _g = _a.children, children = _g === void 0 ? null : _g, className = _a.className, _h = _a.buttonState, buttonState = _h === void 0 ? 'enabled' : _h, icon = _a.icon, metadata = _a.metadata, _j = _a.onClick, onClick = _j === void 0 ? undefined : _j, outline = _a.outline, _k = _a.theme, theme = _k === void 0 ? 'default' : _k, _l = _a.type, type = _l === void 0 ? 'button' : _l, remainingProps = __rest(_a, ["actAsAnchor", "block", "children", "className", "buttonState", "icon", "metadata", "onClick", "outline", "theme", "type"]);
     var tag = actAsAnchor ? 'a' : 'button';
-    var containerClass = classnames(styles.button, (_b = {}, _b[styles[theme]] = !outline, _b), (_c = {}, _c[styles[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles.block] = block, _d), (_e = {}, _e[styles.active] = active || loading, _e), (_f = {}, _f[styles.disabled] = disabled, _f), className);
+    var containerClass = classnames(styles.button, (_b = {}, _b[styles[theme]] = !outline, _b), (_c = {}, _c[styles[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles.block] = block, _d), (_e = {}, _e[styles.disabled] = buttonState === 'disabled', _e), className);
     var focusAwareOnClick = function (event) {
@@ -58,3 +58,3 @@ if (!actAsAnchor)
     };
-    return React.createElement(tag, __assign(__assign(__assign({}, remainingProps), parseMetadata(metadata)), { className: containerClass, disabled: disabled, onClick: disabled ? undefined : focusAwareOnClick, type: tag === 'button' ? type : undefined, ref: ref }), loading ? (React.createElement(Icon, { name: "spinner-third", size: 15, spin: true, type: "solid" })) : (React.createElement("div", { className: styles.buttonInner },
+    return React.createElement(tag, __assign(__assign(__assign({}, remainingProps), parseMetadata(metadata)), { className: containerClass, disabled: buttonState !== 'enabled', onClick: focusAwareOnClick, type: tag === 'button' ? type : undefined, ref: ref }), buttonState === 'loading' ? (React.createElement(Icon, { name: "spinner-third", size: 15, spin: true, type: "solid" })) : (React.createElement("div", { className: styles.buttonInner },
         icon && React.createElement(Icon, { name: icon, size: 14, type: "solid" }),
@@ -61,0 +61,0 @@ children && React.createElement("div", { className: styles.buttonContent }, children))));

dist/esm/src/Button.d.ts

 import React from 'react';
 import { PropsWithMetadata, Theme } from '@highlight-ui/utils-commons';
 export declare type ButtonRef = React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+export declare type ButtonState = 'enabled' | 'disabled' | 'loading';
 export declare type ButtonProps = React.PropsWithChildren<PropsWithMetadata<{
     /** Makes the component to render an anchor tag instead of the button. Affects the set props that can be provided */
     actAsAnchor?: boolean;
-    /** Determines whether the button should have an active state */
-    active?: boolean;
     /** Makes the component behave as a block element (take up the whole available space) */
@@ -13,8 +12,6 @@ block?: boolean;
     className?: string;
-    /** Marks the button as disabled */
-    disabled?: boolean;
+    /** Determines the state of the button */
+    buttonState?: ButtonState;
     /** Allows to provide an icon by icon's name */
     icon?: string;
-    /** Makes the button to render a loading spinner additionally to the label */
-    loading?: boolean;
     /** A callback that will be fired ones the button is clicked */
@@ -21,0 +18,0 @@ onClick?: React.MouseEventHandler;

package.json

 {
   "name": "@highlight-ui/button",
-  "version": "4.0.5",
+  "version": "6.0.0",
   "description": "The button",
@@ -50,3 +50,3 @@ "author": "Personio GmbH",
   },
-  "gitHead": "5766139146372487864c267f89740929ca993c50"
+  "gitHead": "67e6af151cd0e13e9d4396ad66621addc73779e7"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

71145

decreased by-1.25%

Lines of code

755

decreased by-1.31%

No dependency changes