@highlight-ui/button - npm Package Compare versions

Comparing version 10.0.4 to 11.0.0-alpha.0

dist/cjs/index.d.ts

@@ -5,2 +5,2 @@ export { default as Button } from './src/Button';
 export type { IconButtonProps, IconButtonRef } from './src/IconButton';
-export type { ButtonType, ButtonState } from './src/types';
+export type { ButtonType, ButtonState, ButtonVariant } from './src/types';

dist/cjs/index.js

@@ -53,8 +53,10 @@ 'use strict';
 
-var styles$1 = {"button":"Button-module__3Rp1BYXs__v10-0-4","buttonInner":"Button-module__3ZNLhdsJ__v10-0-4","hiddenButtonLabel":"Button-module__iIVwFpEb__v10-0-4","loadingIcon":"Button-module__PkJtfsRC__v10-0-4","block":"Button-module__1xc1DTHJ__v10-0-4","default":"Button-module__2Kmo3l-q__v10-0-4","focus":"Button-module__39s3axLP__v10-0-4","active":"Button-module__3WXlxxv-__v10-0-4","disabled":"Button-module__yB64MUUF__v10-0-4","primary":"Button-module__2nxVbZSO__v10-0-4","success":"Button-module__2WMN2Up2__v10-0-4","info":"Button-module__3Ll-h-cW__v10-0-4","warning":"Button-module__2Ma4TaUU__v10-0-4","warning-light":"Button-module__2HCrlzv6__v10-0-4","danger":"Button-module__3Eex2siA__v10-0-4","dark":"Button-module__MqwKA-Vc__v10-0-4","light":"Button-module__iJhDdOHm__v10-0-4","defaultOutline":"Button-module__2tKStPHe__v10-0-4","hover":"Button-module__YUN3Kf-p__v10-0-4","tertiary":"Button-module__2yGbvo4L__v10-0-4"};
+var styles$1 = {"disabled":"Button-module__yB64MUUF__v11-0-0-alpha-0","defaultButton":"Button-module__3iXT1NQi__v11-0-0-alpha-0","hover":"Button-module__YUN3Kf-p__v11-0-0-alpha-0","focus":"Button-module__39s3axLP__v11-0-0-alpha-0","active":"Button-module__3WXlxxv-__v11-0-0-alpha-0","primaryButton":"Button-module__2dSuQFdg__v11-0-0-alpha-0","criticalButton":"Button-module__2DMk5GC2__v11-0-0-alpha-0","successButton":"Button-module__g3xCMOaO__v11-0-0-alpha-0","tertiaryButton":"Button-module__3p2cVr8I__v11-0-0-alpha-0","button":"Button-module__3Rp1BYXs__v11-0-0-alpha-0","buttonInner":"Button-module__3ZNLhdsJ__v11-0-0-alpha-0","hiddenButtonLabel":"Button-module__iIVwFpEb__v11-0-0-alpha-0","loadingIcon":"Button-module__PkJtfsRC__v11-0-0-alpha-0","block":"Button-module__1xc1DTHJ__v11-0-0-alpha-0"};
 
 function ButtonWithRef(_a, ref) {
-    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, 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", "metadata", "onClick", "outline", "theme", "type"]);
-    var containerClass = classnames__default["default"](styles$1.button, (_b = {}, _b[styles$1[theme]] = !outline, _b), (_c = {}, _c[styles$1[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles$1.block] = block, _d), (_e = {}, _e[styles$1.disabled] = buttonState === 'disabled', _e), (_f = {}, _f[styles$1.tertiary] = theme === 'tertiary', _f), className);
+    var _b, _c, _d;
+    var block = _a.block, _e = _a.children, children = _e === void 0 ? null : _e, className = _a.className, _f = _a.buttonState, buttonState = _f === void 0 ? 'enabled' : _f, metadata = _a.metadata, _g = _a.onClick, onClick = _g === void 0 ? undefined : _g, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, remainingProps = __rest(_a, ["block", "children", "className", "buttonState", "metadata", "onClick", "variant", "type"]);
+    var containerClass = classnames__default["default"](styles$1.button, styles$1[variant + "Button"], (_b = {}, _b[styles$1.block] = block, _b), (_c = {},
+        _c[styles$1.disabled] = buttonState === 'disabled' || buttonState === 'loading',
+        _c), className);
     var focusAwareOnClick = function (event) {
@@ -68,5 +70,5 @@ event.currentTarget.focus();
         type: type, ref: ref }), React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.buttonInner, (_g = {},
-                _g[styles$1.hiddenButtonLabel] = buttonState === 'loading',
-                _g)) }, children && React__default["default"].createElement("div", null, children)),
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.buttonInner, (_d = {},
+                _d[styles$1.hiddenButtonLabel] = buttonState === 'loading',
+                _d)) }, children && React__default["default"].createElement("div", null, children)),
         buttonState === 'loading' && (React__default["default"].createElement(icon.Icon, { name: "spinner-third", size: 16, spin: true, className: styles$1.loadingIcon, type: "solid", metadata: utilsCommons.suffixMetadata(metadata, 'loading-icon') }))));
@@ -77,8 +79,8 @@ }
 
-var styles = {"iconButton":"IconButton-module__19b6ut_d__v10-0-4","default":"IconButton-module__1Nsfcgxw__v10-0-4","focus":"IconButton-module__3MskydD-__v10-0-4","active":"IconButton-module__3lHJu0cg__v10-0-4","disabled":"IconButton-module__1exwesEF__v10-0-4","primary":"IconButton-module__2Nqq71UC__v10-0-4","success":"IconButton-module__1-Iz2wRI__v10-0-4","info":"IconButton-module__3VFas9O5__v10-0-4","warning":"IconButton-module__2sEE3X5w__v10-0-4","warning-light":"IconButton-module__1lHEYNpB__v10-0-4","danger":"IconButton-module__1zSIHcAp__v10-0-4","dark":"IconButton-module__2Mys7lB4__v10-0-4","light":"IconButton-module__31COXije__v10-0-4","defaultOutline":"IconButton-module__1xwQnEPQ__v10-0-4","hover":"IconButton-module__1DIHn9ya__v10-0-4","tertiary":"IconButton-module__ccA4N6Zy__v10-0-4"};
+var styles = {"disabled":"IconButton-module__1exwesEF__v11-0-0-alpha-0","defaultButton":"IconButton-module__2TSYjM94__v11-0-0-alpha-0","hover":"IconButton-module__1DIHn9ya__v11-0-0-alpha-0","focus":"IconButton-module__3MskydD-__v11-0-0-alpha-0","active":"IconButton-module__3lHJu0cg__v11-0-0-alpha-0","primaryButton":"IconButton-module__2iAxKJzQ__v11-0-0-alpha-0","criticalButton":"IconButton-module__26jj3STd__v11-0-0-alpha-0","successButton":"IconButton-module__3onntJjp__v11-0-0-alpha-0","tertiaryButton":"IconButton-module__WllMogbw__v11-0-0-alpha-0","iconButton":"IconButton-module__19b6ut_d__v11-0-0-alpha-0"};
 
 function IconButtonWithRef(_a, ref) {
-    var _b, _c, _d, _e;
-    var className = _a.className, _f = _a.buttonState, buttonState = _f === void 0 ? 'enabled' : _f, icon$1 = _a.icon, ariaLabel = _a.ariaLabel, metadata = _a.metadata, _g = _a.onClick, onClick = _g === void 0 ? undefined : _g, outline = _a.outline, _h = _a.theme, theme = _h === void 0 ? 'default' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, remainingProps = __rest(_a, ["className", "buttonState", "icon", "ariaLabel", "metadata", "onClick", "outline", "theme", "type"]);
-    var containerClass = classnames__default["default"](styles.iconButton, (_b = {}, _b[styles[theme]] = !outline, _b), (_c = {}, _c[styles[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles.disabled] = buttonState === 'disabled', _d), (_e = {}, _e[styles.tertiary] = theme === 'tertiary', _e), className);
+    var _b;
+    var className = _a.className, _c = _a.buttonState, buttonState = _c === void 0 ? 'enabled' : _c, icon$1 = _a.icon, ariaLabel = _a.ariaLabel, metadata = _a.metadata, _d = _a.onClick, onClick = _d === void 0 ? undefined : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, remainingProps = __rest(_a, ["className", "buttonState", "icon", "ariaLabel", "metadata", "onClick", "variant", "type"]);
+    var containerClass = classnames__default["default"](styles.iconButton, styles[variant + "Button"], (_b = {}, _b[styles.disabled] = buttonState === 'disabled', _b), className);
     var focusAwareOnClick = function (event) {
@@ -85,0 +87,0 @@ event.currentTarget.focus();

dist/cjs/src/Button.d.ts

 import React from 'react';
-import { PropsWithMetadata, Theme } from '@highlight-ui/utils-commons';
-import { ButtonType, ButtonState } from './types';
+import { PropsWithMetadata } from '@highlight-ui/utils-commons';
+import { ButtonType, ButtonState, ButtonVariant } from './types';
 export declare type ButtonRef = React.Ref<HTMLButtonElement>;
@@ -14,4 +14,2 @@ export declare type ButtonProps = React.PropsWithChildren<PropsWithMetadata<{
     onClick?: React.MouseEventHandler;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean;
     /** Allows providing the custom CSS */
@@ -21,4 +19,4 @@ style?: React.CSSProperties;
     tabIndex?: number;
-    /** Allows specifying the styling of the button */
-    theme?: Theme;
+    /** Allows specifying the variant of the button */
+    variant?: ButtonVariant;
     /** Button Type HTML property */
@@ -36,4 +34,2 @@ type?: ButtonType;
     onClick?: React.MouseEventHandler<Element> | undefined;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean | undefined;
     /** Allows providing the custom CSS */
@@ -43,8 +39,8 @@ style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined;
-    /** Allows specifying the styling of the button */
-    theme?: Theme | undefined;
+    /** Allows specifying the variant of the button */
+    variant?: ButtonVariant | undefined;
     /** Button Type HTML property */
     type?: ButtonType | undefined;
 } & {
-    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
+    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined; /** A callback that will be fired ones the button is clicked */
 } & {
@@ -51,0 +47,0 @@ children?: React.ReactNode;

dist/cjs/src/IconButton.d.ts

 import React from 'react';
-import { PropsWithMetadata, Theme } from '@highlight-ui/utils-commons';
-import { ButtonType, ButtonState } from './types';
+import { PropsWithMetadata } from '@highlight-ui/utils-commons';
+import { ButtonType, ButtonState, ButtonVariant } from './types';
 export declare type IconButtonRef = React.Ref<HTMLButtonElement>;
@@ -16,4 +16,2 @@ export declare type IconButtonProps = React.PropsWithChildren<PropsWithMetadata<{
     onClick?: React.MouseEventHandler;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean;
     /** Allows providing the custom CSS */
@@ -24,3 +22,3 @@ style?: React.CSSProperties;
     /** Allows specifying the styling of the button */
-    theme?: Theme;
+    variant?: ButtonVariant;
     /** Button Type HTML property */
@@ -40,4 +38,2 @@ type?: ButtonType;
     onClick?: React.MouseEventHandler<Element> | undefined;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean | undefined;
     /** Allows providing the custom CSS */
@@ -48,3 +44,3 @@ style?: React.CSSProperties | undefined;
     /** Allows specifying the styling of the button */
-    theme?: Theme | undefined;
+    variant?: ButtonVariant | undefined;
     /** Button Type HTML property */
@@ -51,0 +47,0 @@ type?: ButtonType | undefined;

dist/cjs/src/types.d.ts

 export declare type ButtonState = 'enabled' | 'disabled' | 'loading';
 export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type ButtonVariant = 'default' | 'primary' | 'critical' | 'success' | 'tertiary';

dist/esm/index.d.ts

@@ -5,2 +5,2 @@ export { default as Button } from './src/Button';
 export type { IconButtonProps, IconButtonRef } from './src/IconButton';
-export type { ButtonType, ButtonState } from './src/types';
+export type { ButtonType, ButtonState, ButtonVariant } from './src/types';

dist/esm/index.js

@@ -44,8 +44,10 @@ import React from 'react';
 
-var styles$1 = {"button":"Button-module__3Rp1BYXs__v10-0-4","buttonInner":"Button-module__3ZNLhdsJ__v10-0-4","hiddenButtonLabel":"Button-module__iIVwFpEb__v10-0-4","loadingIcon":"Button-module__PkJtfsRC__v10-0-4","block":"Button-module__1xc1DTHJ__v10-0-4","default":"Button-module__2Kmo3l-q__v10-0-4","focus":"Button-module__39s3axLP__v10-0-4","active":"Button-module__3WXlxxv-__v10-0-4","disabled":"Button-module__yB64MUUF__v10-0-4","primary":"Button-module__2nxVbZSO__v10-0-4","success":"Button-module__2WMN2Up2__v10-0-4","info":"Button-module__3Ll-h-cW__v10-0-4","warning":"Button-module__2Ma4TaUU__v10-0-4","warning-light":"Button-module__2HCrlzv6__v10-0-4","danger":"Button-module__3Eex2siA__v10-0-4","dark":"Button-module__MqwKA-Vc__v10-0-4","light":"Button-module__iJhDdOHm__v10-0-4","defaultOutline":"Button-module__2tKStPHe__v10-0-4","hover":"Button-module__YUN3Kf-p__v10-0-4","tertiary":"Button-module__2yGbvo4L__v10-0-4"};
+var styles$1 = {"disabled":"Button-module__yB64MUUF__v11-0-0-alpha-0","defaultButton":"Button-module__3iXT1NQi__v11-0-0-alpha-0","hover":"Button-module__YUN3Kf-p__v11-0-0-alpha-0","focus":"Button-module__39s3axLP__v11-0-0-alpha-0","active":"Button-module__3WXlxxv-__v11-0-0-alpha-0","primaryButton":"Button-module__2dSuQFdg__v11-0-0-alpha-0","criticalButton":"Button-module__2DMk5GC2__v11-0-0-alpha-0","successButton":"Button-module__g3xCMOaO__v11-0-0-alpha-0","tertiaryButton":"Button-module__3p2cVr8I__v11-0-0-alpha-0","button":"Button-module__3Rp1BYXs__v11-0-0-alpha-0","buttonInner":"Button-module__3ZNLhdsJ__v11-0-0-alpha-0","hiddenButtonLabel":"Button-module__iIVwFpEb__v11-0-0-alpha-0","loadingIcon":"Button-module__PkJtfsRC__v11-0-0-alpha-0","block":"Button-module__1xc1DTHJ__v11-0-0-alpha-0"};
 
 function ButtonWithRef(_a, ref) {
-    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, 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", "metadata", "onClick", "outline", "theme", "type"]);
-    var containerClass = classnames(styles$1.button, (_b = {}, _b[styles$1[theme]] = !outline, _b), (_c = {}, _c[styles$1[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles$1.block] = block, _d), (_e = {}, _e[styles$1.disabled] = buttonState === 'disabled', _e), (_f = {}, _f[styles$1.tertiary] = theme === 'tertiary', _f), className);
+    var _b, _c, _d;
+    var block = _a.block, _e = _a.children, children = _e === void 0 ? null : _e, className = _a.className, _f = _a.buttonState, buttonState = _f === void 0 ? 'enabled' : _f, metadata = _a.metadata, _g = _a.onClick, onClick = _g === void 0 ? undefined : _g, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, remainingProps = __rest(_a, ["block", "children", "className", "buttonState", "metadata", "onClick", "variant", "type"]);
+    var containerClass = classnames(styles$1.button, styles$1[variant + "Button"], (_b = {}, _b[styles$1.block] = block, _b), (_c = {},
+        _c[styles$1.disabled] = buttonState === 'disabled' || buttonState === 'loading',
+        _c), className);
     var focusAwareOnClick = function (event) {
@@ -59,5 +61,5 @@ event.currentTarget.focus();
         type: type, ref: ref }), React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classnames(styles$1.buttonInner, (_g = {},
-                _g[styles$1.hiddenButtonLabel] = buttonState === 'loading',
-                _g)) }, children && React.createElement("div", null, children)),
+        React.createElement("div", { className: classnames(styles$1.buttonInner, (_d = {},
+                _d[styles$1.hiddenButtonLabel] = buttonState === 'loading',
+                _d)) }, children && React.createElement("div", null, children)),
         buttonState === 'loading' && (React.createElement(Icon, { name: "spinner-third", size: 16, spin: true, className: styles$1.loadingIcon, type: "solid", metadata: suffixMetadata(metadata, 'loading-icon') }))));
@@ -68,8 +70,8 @@ }
 
-var styles = {"iconButton":"IconButton-module__19b6ut_d__v10-0-4","default":"IconButton-module__1Nsfcgxw__v10-0-4","focus":"IconButton-module__3MskydD-__v10-0-4","active":"IconButton-module__3lHJu0cg__v10-0-4","disabled":"IconButton-module__1exwesEF__v10-0-4","primary":"IconButton-module__2Nqq71UC__v10-0-4","success":"IconButton-module__1-Iz2wRI__v10-0-4","info":"IconButton-module__3VFas9O5__v10-0-4","warning":"IconButton-module__2sEE3X5w__v10-0-4","warning-light":"IconButton-module__1lHEYNpB__v10-0-4","danger":"IconButton-module__1zSIHcAp__v10-0-4","dark":"IconButton-module__2Mys7lB4__v10-0-4","light":"IconButton-module__31COXije__v10-0-4","defaultOutline":"IconButton-module__1xwQnEPQ__v10-0-4","hover":"IconButton-module__1DIHn9ya__v10-0-4","tertiary":"IconButton-module__ccA4N6Zy__v10-0-4"};
+var styles = {"disabled":"IconButton-module__1exwesEF__v11-0-0-alpha-0","defaultButton":"IconButton-module__2TSYjM94__v11-0-0-alpha-0","hover":"IconButton-module__1DIHn9ya__v11-0-0-alpha-0","focus":"IconButton-module__3MskydD-__v11-0-0-alpha-0","active":"IconButton-module__3lHJu0cg__v11-0-0-alpha-0","primaryButton":"IconButton-module__2iAxKJzQ__v11-0-0-alpha-0","criticalButton":"IconButton-module__26jj3STd__v11-0-0-alpha-0","successButton":"IconButton-module__3onntJjp__v11-0-0-alpha-0","tertiaryButton":"IconButton-module__WllMogbw__v11-0-0-alpha-0","iconButton":"IconButton-module__19b6ut_d__v11-0-0-alpha-0"};
 
 function IconButtonWithRef(_a, ref) {
-    var _b, _c, _d, _e;
-    var className = _a.className, _f = _a.buttonState, buttonState = _f === void 0 ? 'enabled' : _f, icon = _a.icon, ariaLabel = _a.ariaLabel, metadata = _a.metadata, _g = _a.onClick, onClick = _g === void 0 ? undefined : _g, outline = _a.outline, _h = _a.theme, theme = _h === void 0 ? 'default' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, remainingProps = __rest(_a, ["className", "buttonState", "icon", "ariaLabel", "metadata", "onClick", "outline", "theme", "type"]);
-    var containerClass = classnames(styles.iconButton, (_b = {}, _b[styles[theme]] = !outline, _b), (_c = {}, _c[styles[theme + "Outline"]] = outline, _c), (_d = {}, _d[styles.disabled] = buttonState === 'disabled', _d), (_e = {}, _e[styles.tertiary] = theme === 'tertiary', _e), className);
+    var _b;
+    var className = _a.className, _c = _a.buttonState, buttonState = _c === void 0 ? 'enabled' : _c, icon = _a.icon, ariaLabel = _a.ariaLabel, metadata = _a.metadata, _d = _a.onClick, onClick = _d === void 0 ? undefined : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, remainingProps = __rest(_a, ["className", "buttonState", "icon", "ariaLabel", "metadata", "onClick", "variant", "type"]);
+    var containerClass = classnames(styles.iconButton, styles[variant + "Button"], (_b = {}, _b[styles.disabled] = buttonState === 'disabled', _b), className);
     var focusAwareOnClick = function (event) {
@@ -76,0 +78,0 @@ event.currentTarget.focus();

dist/esm/src/Button.d.ts

 import React from 'react';
-import { PropsWithMetadata, Theme } from '@highlight-ui/utils-commons';
-import { ButtonType, ButtonState } from './types';
+import { PropsWithMetadata } from '@highlight-ui/utils-commons';
+import { ButtonType, ButtonState, ButtonVariant } from './types';
 export declare type ButtonRef = React.Ref<HTMLButtonElement>;
@@ -14,4 +14,2 @@ export declare type ButtonProps = React.PropsWithChildren<PropsWithMetadata<{
     onClick?: React.MouseEventHandler;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean;
     /** Allows providing the custom CSS */
@@ -21,4 +19,4 @@ style?: React.CSSProperties;
     tabIndex?: number;
-    /** Allows specifying the styling of the button */
-    theme?: Theme;
+    /** Allows specifying the variant of the button */
+    variant?: ButtonVariant;
     /** Button Type HTML property */
@@ -36,4 +34,2 @@ type?: ButtonType;
     onClick?: React.MouseEventHandler<Element> | undefined;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean | undefined;
     /** Allows providing the custom CSS */
@@ -43,8 +39,8 @@ style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined;
-    /** Allows specifying the styling of the button */
-    theme?: Theme | undefined;
+    /** Allows specifying the variant of the button */
+    variant?: ButtonVariant | undefined;
     /** Button Type HTML property */
     type?: ButtonType | undefined;
 } & {
-    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
+    metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined; /** A callback that will be fired ones the button is clicked */
 } & {
@@ -51,0 +47,0 @@ children?: React.ReactNode;

dist/esm/src/IconButton.d.ts

 import React from 'react';
-import { PropsWithMetadata, Theme } from '@highlight-ui/utils-commons';
-import { ButtonType, ButtonState } from './types';
+import { PropsWithMetadata } from '@highlight-ui/utils-commons';
+import { ButtonType, ButtonState, ButtonVariant } from './types';
 export declare type IconButtonRef = React.Ref<HTMLButtonElement>;
@@ -16,4 +16,2 @@ export declare type IconButtonProps = React.PropsWithChildren<PropsWithMetadata<{
     onClick?: React.MouseEventHandler;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean;
     /** Allows providing the custom CSS */
@@ -24,3 +22,3 @@ style?: React.CSSProperties;
     /** Allows specifying the styling of the button */
-    theme?: Theme;
+    variant?: ButtonVariant;
     /** Button Type HTML property */
@@ -40,4 +38,2 @@ type?: ButtonType;
     onClick?: React.MouseEventHandler<Element> | undefined;
-    /** Determines whether to render the outline for the button or not */
-    outline?: boolean | undefined;
     /** Allows providing the custom CSS */
@@ -48,3 +44,3 @@ style?: React.CSSProperties | undefined;
     /** Allows specifying the styling of the button */
-    theme?: Theme | undefined;
+    variant?: ButtonVariant | undefined;
     /** Button Type HTML property */
@@ -51,0 +47,0 @@ type?: ButtonType | undefined;

dist/esm/src/types.d.ts

 export declare type ButtonState = 'enabled' | 'disabled' | 'loading';
 export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type ButtonVariant = 'default' | 'primary' | 'critical' | 'success' | 'tertiary';

package.json

 {
   "name": "@highlight-ui/button",
-  "version": "10.0.4",
+  "version": "11.0.0-alpha.0",
   "description": "The button",
@@ -29,10 +29,11 @@ "author": "Personio GmbH",
   "dependencies": {
-    "@highlight-ui/icon": "^3.0.30",
-    "@highlight-ui/utils-commons": "^1.3.14"
+    "@highlight-ui/icon": "^4.0.0-alpha.0",
+    "@highlight-ui/utils-commons": "^2.0.0-alpha.0"
   },
   "devDependencies": {
-    "@highlight-ui/configs-base-jest": "^2.0.5",
-    "@highlight-ui/configs-base-tsconfig": "^2.0.1",
+    "@highlight-ui/configs-base-jest": "^2.0.6-alpha.0",
+    "@highlight-ui/configs-base-tsconfig": "^2.1.0-alpha.0",
     "@highlight-ui/configs-scripts": "^2.0.2",
     "@highlight-ui/theme": "^8.0.4",
+    "@highlight-ui/tokens": "^0.8.0-alpha.0",
     "@storybook/react": "^6.4.19",
@@ -51,3 +52,3 @@ "@testing-library/react": "^12.1.1",
   },
-  "gitHead": "2b72a3dec3eec32b4695c50b5035239993c74d56"
+  "gitHead": "3c3d92c48ebf625faf853a08bdc3fe8f0a98dc0e"
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

93120

decreased by-15.14%

Dev dependency count

13

increased by8.33%

Lines of code

850

decreased by-43.22%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@highlight-ui/icon@4.1.9(transitive)

• + Added@highlight-ui/tokens@3.1.04.3.9(transitive)

• + Added@highlight-ui/utils-commons@2.7.1(transitive)

• + Addedclassnames@2.3.3(transitive)

• - Removed@highlight-ui/icon@3.0.30(transitive)

• - Removed@highlight-ui/utils-commons@1.3.14(transitive)

• Updated@highlight-ui/icon@^4.0.0-alpha.0

• Updated@highlight-ui/utils-commons@^2.0.0-alpha.0