@synerise/ds-button 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.3.0...@synerise/ds-button@1.3.1) (2025-05-26)
+
+
+### Bug Fixes
+
+* **button:** raise style specificity ([eac3e97](https://github.com/synerise/synerise-design/commit/eac3e974b09ab4819c237facc66dfd065bff44a4))
+
+
+
+
+
+# [1.3.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.2.0...@synerise/ds-button@1.3.0) (2025-05-19)
+
+
+### Features
+
+* **button:** add tooltipProps prop ([6249b29](https://github.com/synerise/synerise-design/commit/6249b295f89671379030d77b92229ce3523d3784))
+
+
+
+
+
 # [1.2.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.1.5...@synerise/ds-button@1.2.0) (2025-05-07)
 
 

package/dist/Button.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
 import { ButtonProps } from './Button.types';
-declare const Button: ({ type, mode, justifyContent, groupVariant, loading, onClick, className, color, error, tagProps, children, ...antdProps }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ type, mode, justifyContent, groupVariant, loading, onClick, className, color, error, tagProps, children, tooltipProps, ...antdProps }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist/Button.js

@@ -1,4 +1,4 @@
-var _excluded = ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error", "tagProps", "children"];
+var _excluded = ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error", "tagProps", "children", "tooltipProps"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useEffect, useState, useMemo, useRef } from 'react';
@@ -6,7 +6,9 @@ import '@synerise/ds-core/dist/js/style';
 import "./style/index.css";
 import Icon, { SpinnerM } from '@synerise/ds-icon';
 import { TagShape } from '@synerise/ds-tag';
+import Tooltip from '@synerise/ds-tooltip';
 import * as S from './Button.styles';
+import { ButtonMode } from './Button.types';
 var RIPPLE_ANIMATION_OFFSET = 50;
 var Button = function Button(_ref) {
   var _ref$type = _ref.type,
@@ -24,6 +26,7 @@ var Button = function Button(_ref) {
     error = _ref.error,
     tagProps = _ref.tagProps,
     children = _ref.children,
+    tooltipProps = _ref.tooltipProps,
     antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var rippleRef = useRef(null);
   var _useState = useState(''),
@@ -62,6 +65,17 @@ var Button = function Button(_ref) {
     var classNameStringifed = className || '';
     return "ds-button " + modeStringifed + " " + classNameStringifed + " " + readOnlyStringifed;
   }, [mode, className, antdProps.readOnly]);
+  var buttonLabel = useMemo(function () {
+    var label = /*#__PURE__*/React.createElement(S.ButtonLabel, {
+      withTooltip: !!tooltipProps,
+      "data-testid": "ds-button-label",
+      className: "ds-button-label"
+    }, children, tagProps && mode !== ButtonMode.SINGLE_ICON && /*#__PURE__*/React.createElement(S.Tag, _extends({}, tagProps, {
+      shape: TagShape.MEDIUM_ROUND,
+      asPill: true
+    })));
+    return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, label) : label;
+  }, [children, tagProps, mode, tooltipProps]);
   return /*#__PURE__*/React.createElement(S.AntdButton, _extends({
     justifyContent: justifyContent,
     type: type || 'secondary',
@@ -82,13 +96,7 @@ var Button = function Button(_ref) {
   }, antdProps), !antdProps.readOnly && /*#__PURE__*/React.createElement(S.RippleEffect, {
     ref: rippleRef,
     className: "btn-ripple " + rippleClassName
-  }), /*#__PURE__*/React.createElement(S.ButtonLabel, {
-    "data-testid": "ds-button-label",
-    className: "ds-button-label"
-  }, children, tagProps && mode !== 'single-icon' && /*#__PURE__*/React.createElement(S.Tag, _extends({}, tagProps, {
-    shape: TagShape.MEDIUM_ROUND,
-    asPill: true
-  }))), loading && /*#__PURE__*/React.createElement(S.Spinner, {
+  }), buttonLabel, loading && /*#__PURE__*/React.createElement(S.Spinner, {
     className: "btn-spinner",
     "data-testid": "button-spinner"
   }, /*#__PURE__*/React.createElement(Icon, {

package/dist/Button.styles.d.ts

@@ -4,5 +4,7 @@ export declare const Spinner: import("styled-components").StyledComponent<"div",
 export declare const RippleEffect: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ButtonFocus: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Tag: import("styled-components").StyledComponent<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: import("@synerise/ds-tag").TagProps) => React.JSX.Element, any, {}, never>;
-export declare const ButtonLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonLabel: import("styled-components").StyledComponent<"div", any, {
+    withTooltip?: boolean | undefined;
+}, never>;
 export declare const AntdButton: import("styled-components").StyledComponent<({ mode, type, loading, justifyContent, groupVariant, customColor, rightIconSize, leftIconSize, pressed, size, iconColor, error, ...rest }: any) => React.JSX.Element, any, {}, never>;

package/dist/Button.styles.js

@@ -43,7 +43,9 @@ export var Tag = styled(DSTag).withConfig({
 export var ButtonLabel = styled.div.withConfig({
   displayName: "Buttonstyles__ButtonLabel",
   componentId: "sc-3lgta1-4"
-})(["display:flex;align-items:center;flex-grow:1;justify-content:center;"]);
+})(["display:flex;align-items:center;flex-grow:1;justify-content:center;", ""], function (props) {
+  return props.withTooltip && "\n    && {\n      pointer-events: all;\n    }";
+});
 export var AntdButton = styled(function (_ref) {
   var mode = _ref.mode,
     type = _ref.type,
@@ -118,7 +120,7 @@ export var AntdButton = styled(function (_ref) {
 }, function (props) {
   return props.type === 'custom-color' && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";", "{color:", ";}svg{color:", ";fill:", ";}", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus:not(.read-only){", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus){background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}&:disabled{opacity:0.4;background-color:", ";", "{color:", ";}svg{color:", " !important;fill:", " !important;}}}"], props.theme.palette[props.customColor + "-600"], props.theme.palette.white, ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, ButtonFocus, RippleEffect, props.theme.palette[props.customColor + "-700"], ButtonFocus, props.theme.palette['blue-600'], props.theme.palette[props.readOnly ? props.customColor + "-600" : props.customColor + "-500"], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, props.theme.palette[props.customColor + "-600"], ButtonLabel, props.theme.palette.white, props.theme.palette.white, props.theme.palette.white);
 }, function (props) {
-  return props.type === 'custom-color-ghost' && !props.error && css(["color:", ";.ds-icon > svg{fill:", ";}&:hover:not(:disabled):not(:focus){color:", ";", "{color:", ";}svg{fill:", " !important;}}&:disabled{opacity:0.4;color:", ";.ds-icon > svg{fill:", " !important;}}"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-500"], ButtonLabel, props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"]);
+  return props.type === 'custom-color-ghost' && !props.error && css(["&&&{color:", ";.ds-icon > svg{fill:", ";}&:hover:not(:disabled):not(:focus){color:", ";", "{color:", ";}svg{fill:", " !important;}}&:disabled{opacity:0.4;color:", ";.ds-icon > svg{fill:", " !important;}}}"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-500"], ButtonLabel, props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"]);
 }, Tag, function (props) {
   return props.theme.palette.white;
 });

package/dist/Button.types.d.ts

@@ -3,6 +3,15 @@ import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 import type { JustifyContentProperty } from 'csstype';
 import type { LiteralStringUnion } from '@synerise/ds-utils';
 import type { TagProps } from '@synerise/ds-tag';
+import type { TooltipProps } from '@synerise/ds-tooltip';
+export declare enum ButtonMode {
+    SINGLE_ICON = "single-icon",
+    SPLIT = "split",
+    TWO_ICONS = "two-icons",
+    LABEL_ICON = "label-icon",
+    ICON_LABEL = "icon-label"
+}
+type ButtonModes = `${ButtonMode}`;
 export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'tertiary-white' | 'ghost-primary' | 'ghost' | 'ghost-white' | 'custom-color' | 'custom-color-ghost';
 export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
     /**
@@ -16,7 +25,7 @@ export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
      *
      * @default simple
      */
-    mode?: LiteralStringUnion<'single-icon' | 'split' | 'two-icons' | 'label-icon' | 'icon-label'>;
+    mode?: LiteralStringUnion<ButtonModes>;
     /**
      * Defines color of `custom-color` button.
      *
@@ -46,9 +55,11 @@ export type ButtonProps = Omit<AntdButtonProps, 'type' | 'ghost'> & {
     error?: boolean;
     readOnly?: boolean;
     tagProps?: TagProps;
+    tooltipProps?: TooltipProps;
 };
 export type Props = ButtonProps;
 export type ButtonSubComponents = {
     Expander: ElementType;
     Creator: ElementType;
 };
+export {};

package/dist/Button.types.js

@@ -1 +1,10 @@
-export {};
+export var ButtonMode = /*#__PURE__*/function (ButtonMode) {
+  ButtonMode["SINGLE_ICON"] = "single-icon";
+  ButtonMode["SPLIT"] = "split";
+  ButtonMode["TWO_ICONS"] = "two-icons";
+  ButtonMode["LABEL_ICON"] = "label-icon";
+  ButtonMode["ICON_LABEL"] = "icon-label";
+  return ButtonMode;
+}({});
+
+// @deprecated - use ButtonProps instead

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -34,9 +34,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.4.2",
-    "@synerise/ds-tag": "^1.1.6",
-    "@synerise/ds-utils": "^1.1.0",
+    "@synerise/ds-icon": "^1.5.1",
+    "@synerise/ds-tag": "^1.1.8",
+    "@synerise/ds-tooltip": "^1.1.8",
+    "@synerise/ds-utils": "^1.1.1",
     "classnames": "2.3.2",
     "csstype": "^2.6.9"
   },
@@ -46,5 +47,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "90af7549cf0f556340bdd0deec4bb59bacf3e95e"
+  "gitHead": "9e9cc54e3690b4d51323f91c81b3b79305984da6"
 }