@highlight-ui/button - npm Package Compare versions

Comparing version 6.0.4 to 7.0.0

dist/cjs/index.js

@@ -53,18 +53,22 @@ 'use strict';
 
-var styles = {"button":"Button-module__3Rp1BYXs__v6-0-4","buttonInner":"Button-module__3ZNLhdsJ__v6-0-4","iconOnly":"Button-module__3-vgpZJs__v6-0-4","block":"Button-module__1xc1DTHJ__v6-0-4","default":"Button-module__2Kmo3l-q__v6-0-4","focus":"Button-module__39s3axLP__v6-0-4","active":"Button-module__3WXlxxv-__v6-0-4","disabled":"Button-module__yB64MUUF__v6-0-4","primary":"Button-module__2nxVbZSO__v6-0-4","success":"Button-module__2WMN2Up2__v6-0-4","info":"Button-module__3Ll-h-cW__v6-0-4","warning":"Button-module__2Ma4TaUU__v6-0-4","warning-light":"Button-module__2HCrlzv6__v6-0-4","danger":"Button-module__3Eex2siA__v6-0-4","dark":"Button-module__MqwKA-Vc__v6-0-4","light":"Button-module__iJhDdOHm__v6-0-4","defaultOutline":"Button-module__2tKStPHe__v6-0-4","hover":"Button-module__YUN3Kf-p__v6-0-4","link":"Button-module__2KZcoTpE__v6-0-4"};
+var styles = {"button":"Button-module__3Rp1BYXs__v7-0-0","iconButton":"Button-module__3Y8WdccY__v7-0-0","buttonInner":"Button-module__3ZNLhdsJ__v7-0-0","hiddenButtonLabel":"Button-module__iIVwFpEb__v7-0-0","loadingIcon":"Button-module__PkJtfsRC__v7-0-0","block":"Button-module__1xc1DTHJ__v7-0-0","default":"Button-module__2Kmo3l-q__v7-0-0","focus":"Button-module__39s3axLP__v7-0-0","active":"Button-module__3WXlxxv-__v7-0-0","disabled":"Button-module__yB64MUUF__v7-0-0","primary":"Button-module__2nxVbZSO__v7-0-0","success":"Button-module__2WMN2Up2__v7-0-0","info":"Button-module__3Ll-h-cW__v7-0-0","warning":"Button-module__2Ma4TaUU__v7-0-0","warning-light":"Button-module__2HCrlzv6__v7-0-0","danger":"Button-module__3Eex2siA__v7-0-0","dark":"Button-module__MqwKA-Vc__v7-0-0","light":"Button-module__iJhDdOHm__v7-0-0","defaultOutline":"Button-module__2tKStPHe__v7-0-0","hover":"Button-module__YUN3Kf-p__v7-0-0","tertiary":"Button-module__2yGbvo4L__v7-0-0"};
 
 function ButtonWithRef(_a, ref) {
-    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.disabled] = buttonState === 'disabled', _e), className);
+    var _b, _c, _d, _e, _f, _g;
+    var block = _a.block, _h = _a.children, children = _h === void 0 ? null : _h, className = _a.className, _j = _a.buttonState, buttonState = _j === void 0 ? 'enabled' : _j, icon$1 = _a.icon, metadata = _a.metadata, _k = _a.onClick, onClick = _k === void 0 ? undefined : _k, outline = _a.outline, _l = _a.theme, theme = _l === void 0 ? 'default' : _l, _m = _a.type, type = _m === void 0 ? 'button' : _m, remainingProps = __rest(_a, ["block", "children", "className", "buttonState", "icon", "metadata", "onClick", "outline", "theme", "type"]);
+    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), (_f = {}, _f[styles.iconButton] = icon$1 !== undefined && children === null, _f), className);
     var focusAwareOnClick = function (event) {
-        if (!actAsAnchor)
-            event.currentTarget.focus();
+        event.currentTarget.focus();
         if (onClick)
             onClick(event);
     };
-    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" }),
-        children && React__default['default'].createElement("div", { className: styles.buttonContent }, children))));
+    return React__default['default'].createElement('button', __assign(__assign(__assign({}, remainingProps), utilsCommons.parseMetadata(metadata)), { className: containerClass, disabled: buttonState !== 'enabled', onClick: focusAwareOnClick, 
+        /* eslint-disable react/button-has-type */
+        type: type, ref: ref }), React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement("div", { className: classnames__default['default'](styles.buttonInner, (_g = {},
+                _g[styles.hiddenButtonLabel] = buttonState === 'loading',
+                _g)) },
+            icon$1 && React__default['default'].createElement(icon.Icon, { name: icon$1, size: 14, type: "solid" }),
+            children && React__default['default'].createElement("div", { className: styles.buttonContent }, children)),
+        buttonState === 'loading' && (React__default['default'].createElement(icon.Icon, { name: "spinner-third", size: 16, spin: true, className: styles.loadingIcon, type: "solid" }))));
 }
@@ -71,0 +75,0 @@ ButtonWithRef.displayName = 'Button';

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 ButtonRef = React.Ref<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;
     /** Makes the component behave as a block element (take up the whole available space) */
@@ -28,4 +26,29 @@ block?: boolean;
     type?: 'button' | 'submit' | 'reset';
-}>> & (React.ComponentPropsWithoutRef<'a'> | React.ComponentPropsWithoutRef<'button'>);
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+}>> & React.ComponentPropsWithoutRef<'button'>;
+declare const Button: React.ForwardRefExoticComponent<{
+    /** Makes the component behave as a block element (take up the whole available space) */
+    block?: boolean | undefined;
+    /** Allows providing a custom class name */
+    className?: string | undefined;
+    /** Determines the state of the button */
+    buttonState?: ButtonState | undefined;
+    /** Allows to provide an icon by icon's name */
+    icon?: string | undefined;
+    /** A callback that will be fired ones the button is clicked */
+    onClick?: React.MouseEventHandler<Element> | undefined;
+    /** Determines whether to render the outline for the button or not */
+    outline?: boolean | undefined;
+    /** Allows providing the custom CSS */
+    style?: React.CSSProperties | undefined;
+    /** Tab index HTML property */
+    tabIndex?: number | undefined;
+    /** Allows specifying the styling of the button */
+    theme?: Theme | undefined;
+    /** Button Type HTML property */
+    type?: "button" | "submit" | "reset" | undefined;
+} & {
+    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
+} & {
+    children?: React.ReactNode;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

dist/cjs/src/theme.d.ts

@@ -1,1 +0,1 @@
-export declare type Theme = 'danger' | 'default' | 'info' | 'light' | 'link' | 'primary' | 'success' | 'transparent' | 'warning-light' | 'warning';
+export declare type Theme = 'danger' | 'default' | 'info' | 'light' | 'tertiary' | 'primary' | 'success' | 'transparent' | 'warning-light' | 'warning';

dist/esm/index.js

@@ -44,18 +44,22 @@ import React from 'react';
 
-var styles = {"button":"Button-module__3Rp1BYXs__v6-0-4","buttonInner":"Button-module__3ZNLhdsJ__v6-0-4","iconOnly":"Button-module__3-vgpZJs__v6-0-4","block":"Button-module__1xc1DTHJ__v6-0-4","default":"Button-module__2Kmo3l-q__v6-0-4","focus":"Button-module__39s3axLP__v6-0-4","active":"Button-module__3WXlxxv-__v6-0-4","disabled":"Button-module__yB64MUUF__v6-0-4","primary":"Button-module__2nxVbZSO__v6-0-4","success":"Button-module__2WMN2Up2__v6-0-4","info":"Button-module__3Ll-h-cW__v6-0-4","warning":"Button-module__2Ma4TaUU__v6-0-4","warning-light":"Button-module__2HCrlzv6__v6-0-4","danger":"Button-module__3Eex2siA__v6-0-4","dark":"Button-module__MqwKA-Vc__v6-0-4","light":"Button-module__iJhDdOHm__v6-0-4","defaultOutline":"Button-module__2tKStPHe__v6-0-4","hover":"Button-module__YUN3Kf-p__v6-0-4","link":"Button-module__2KZcoTpE__v6-0-4"};
+var styles = {"button":"Button-module__3Rp1BYXs__v7-0-0","iconButton":"Button-module__3Y8WdccY__v7-0-0","buttonInner":"Button-module__3ZNLhdsJ__v7-0-0","hiddenButtonLabel":"Button-module__iIVwFpEb__v7-0-0","loadingIcon":"Button-module__PkJtfsRC__v7-0-0","block":"Button-module__1xc1DTHJ__v7-0-0","default":"Button-module__2Kmo3l-q__v7-0-0","focus":"Button-module__39s3axLP__v7-0-0","active":"Button-module__3WXlxxv-__v7-0-0","disabled":"Button-module__yB64MUUF__v7-0-0","primary":"Button-module__2nxVbZSO__v7-0-0","success":"Button-module__2WMN2Up2__v7-0-0","info":"Button-module__3Ll-h-cW__v7-0-0","warning":"Button-module__2Ma4TaUU__v7-0-0","warning-light":"Button-module__2HCrlzv6__v7-0-0","danger":"Button-module__3Eex2siA__v7-0-0","dark":"Button-module__MqwKA-Vc__v7-0-0","light":"Button-module__iJhDdOHm__v7-0-0","defaultOutline":"Button-module__2tKStPHe__v7-0-0","hover":"Button-module__YUN3Kf-p__v7-0-0","tertiary":"Button-module__2yGbvo4L__v7-0-0"};
 
 function ButtonWithRef(_a, ref) {
-    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.disabled] = buttonState === 'disabled', _e), className);
+    var _b, _c, _d, _e, _f, _g;
+    var block = _a.block, _h = _a.children, children = _h === void 0 ? null : _h, className = _a.className, _j = _a.buttonState, buttonState = _j === void 0 ? 'enabled' : _j, icon = _a.icon, metadata = _a.metadata, _k = _a.onClick, onClick = _k === void 0 ? undefined : _k, outline = _a.outline, _l = _a.theme, theme = _l === void 0 ? 'default' : _l, _m = _a.type, type = _m === void 0 ? 'button' : _m, remainingProps = __rest(_a, ["block", "children", "className", "buttonState", "icon", "metadata", "onClick", "outline", "theme", "type"]);
+    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), (_f = {}, _f[styles.iconButton] = icon !== undefined && children === null, _f), className);
     var focusAwareOnClick = function (event) {
-        if (!actAsAnchor)
-            event.currentTarget.focus();
+        event.currentTarget.focus();
         if (onClick)
             onClick(event);
     };
-    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" }),
-        children && React.createElement("div", { className: styles.buttonContent }, children))));
+    return React.createElement('button', __assign(__assign(__assign({}, remainingProps), parseMetadata(metadata)), { className: containerClass, disabled: buttonState !== 'enabled', onClick: focusAwareOnClick, 
+        /* eslint-disable react/button-has-type */
+        type: type, ref: ref }), React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classnames(styles.buttonInner, (_g = {},
+                _g[styles.hiddenButtonLabel] = buttonState === 'loading',
+                _g)) },
+            icon && React.createElement(Icon, { name: icon, size: 14, type: "solid" }),
+            children && React.createElement("div", { className: styles.buttonContent }, children)),
+        buttonState === 'loading' && (React.createElement(Icon, { name: "spinner-third", size: 16, spin: true, className: styles.loadingIcon, type: "solid" }))));
 }
@@ -62,0 +66,0 @@ ButtonWithRef.displayName = 'Button';

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 ButtonRef = React.Ref<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;
     /** Makes the component behave as a block element (take up the whole available space) */
@@ -28,4 +26,29 @@ block?: boolean;
     type?: 'button' | 'submit' | 'reset';
-}>> & (React.ComponentPropsWithoutRef<'a'> | React.ComponentPropsWithoutRef<'button'>);
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+}>> & React.ComponentPropsWithoutRef<'button'>;
+declare const Button: React.ForwardRefExoticComponent<{
+    /** Makes the component behave as a block element (take up the whole available space) */
+    block?: boolean | undefined;
+    /** Allows providing a custom class name */
+    className?: string | undefined;
+    /** Determines the state of the button */
+    buttonState?: ButtonState | undefined;
+    /** Allows to provide an icon by icon's name */
+    icon?: string | undefined;
+    /** A callback that will be fired ones the button is clicked */
+    onClick?: React.MouseEventHandler<Element> | undefined;
+    /** Determines whether to render the outline for the button or not */
+    outline?: boolean | undefined;
+    /** Allows providing the custom CSS */
+    style?: React.CSSProperties | undefined;
+    /** Tab index HTML property */
+    tabIndex?: number | undefined;
+    /** Allows specifying the styling of the button */
+    theme?: Theme | undefined;
+    /** Button Type HTML property */
+    type?: "button" | "submit" | "reset" | undefined;
+} & {
+    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
+} & {
+    children?: React.ReactNode;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

dist/esm/src/theme.d.ts

@@ -1,1 +0,1 @@
-export declare type Theme = 'danger' | 'default' | 'info' | 'light' | 'link' | 'primary' | 'success' | 'transparent' | 'warning-light' | 'warning';
+export declare type Theme = 'danger' | 'default' | 'info' | 'light' | 'tertiary' | 'primary' | 'success' | 'transparent' | 'warning-light' | 'warning';

package.json

 {
   "name": "@highlight-ui/button",
-  "version": "6.0.4",
+  "version": "7.0.0",
   "description": "The button",
@@ -29,3 +29,3 @@ "author": "Personio GmbH",
   "dependencies": {
-    "@highlight-ui/icon": "^3.0.9",
+    "@highlight-ui/icon": "^3.0.10",
     "@highlight-ui/utils-commons": "^1.3.5"
@@ -37,3 +37,3 @@ },
     "@highlight-ui/configs-scripts": "^1.0.1",
-    "@highlight-ui/theme": "^4.1.0",
+    "@highlight-ui/theme": "^4.1.1",
     "@storybook/react": "^6.2.9",
@@ -52,3 +52,3 @@ "@testing-library/react": "^12.0.0",
   },
-  "gitHead": "2a6933ab0097d549e0fc732159899f809a3cc9f3"
+  "gitHead": "01301f9494a93591bca4c72d85573d40cf956f0a"
 }

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

Improved metrics

Total package byte prevSize

74348

increased by4.42%

Lines of code

835

increased by10.6%

Dependency changes

• Updated@highlight-ui/icon@^3.0.10