@synerise/ds-button-group 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.0.5...@synerise/ds-button-group@1.0.6) (2025-04-24)
+
+
+### Bug Fixes
+
+* **button-group:** add option for divider buttons group ([fd93162](https://github.com/Synerise/synerise-design/commit/fd93162fba2a04249064b1bc4ac8941b889ada5c))
+
+
+
+
+
+## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.0.4...@synerise/ds-button-group@1.0.5) (2025-04-16)
+
+**Note:** Version bump only for package @synerise/ds-button-group
+
+
+
+
+
 ## [1.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.0.3...@synerise/ds-button-group@1.0.4) (2025-04-02)
 
 **Note:** Version bump only for package @synerise/ds-button-group

package/dist/ButtonDivider/ButtonDivider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ButtonDivider: () => React.JSX.Element;
+export default ButtonDivider;

package/dist/ButtonDivider/ButtonDivider.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as S from './ButtonDivider.styles';
+var ButtonDivider = function ButtonDivider() {
+  return /*#__PURE__*/React.createElement(S.ButtonDivider, {
+    type: "vertical"
+  });
+};
+export default ButtonDivider;

package/dist/ButtonDivider/ButtonDivider.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ButtonDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => import("react").JSX.Element, any, {}, never>;

package/dist/ButtonDivider/ButtonDivider.styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import Divider from '@synerise/ds-divider';
+export var ButtonDivider = styled(Divider).withConfig({
+  displayName: "ButtonDividerstyles__ButtonDivider",
+  componentId: "sc-1ntx1ba-0"
+})(["border-color:", ";height:auto;margin:0px;top:0;"], function (props) {
+  return props.theme.palette['grey-300'];
+});

package/dist/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ButtonGroupProps } from './ButtonGroup.types';
-declare const ButtonGroup: ({ className, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, error, }: ButtonGroupProps) => React.JSX.Element;
+declare const ButtonGroup: ({ className, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: ButtonGroupProps) => React.JSX.Element;
 export default ButtonGroup;

package/dist/ButtonGroup.js

@@ -12,6 +12,8 @@ var ButtonGroup = function ButtonGroup(_ref) {
     buttonsPosition = _ref$buttonsPosition === void 0 ? 'center' : _ref$buttonsPosition,
     disabled = _ref.disabled,
     splitMode = _ref.splitMode,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? true : _ref$compact,
     error = _ref.error;
   return /*#__PURE__*/React.createElement(S.Container, {
     className: "ds-button-group " + (className || ''),
@@ -19,6 +21,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     buttonsPosition: buttonsPosition,
     disabled: disabled,
     splitMode: splitMode,
+    compact: compact,
     error: error
   }, title && /*#__PURE__*/React.createElement(S.Title, null, title), /*#__PURE__*/React.createElement(Button.Group, {
     size: size

package/dist/ButtonGroup.styles.d.ts

@@ -7,6 +7,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     buttonsPosition: string | 'left' | 'center' | 'right';
     disabled?: boolean | undefined;
     splitMode?: boolean | undefined;
+    compact?: boolean | undefined;
     error?: boolean | undefined;
 }, never>;
 export declare const Title: import("styled-components").StyledComponent<"h4", any, {}, never>;

package/dist/ButtonGroup.styles.js

@@ -11,7 +11,9 @@ export var focusAnimation = function focusAnimation(_ref) {
 export var Container = styled.div.withConfig({
   displayName: "ButtonGroupstyles__Container",
   componentId: "sc-1jzk068-0"
-})(["width:100%;.ant-btn-group{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:", ";", ";", ";& > .ant-btn{width:auto;flex:", ";&.ant-btn-primary{&:focus{z-index:99999;}}}}"], function (props) {
+})(["width:100%;.ant-btn-group{width:100%;display:flex;gap:", ";flex-direction:row;align-items:stretch;justify-content:", ";", ";", ";& > .ant-btn{width:auto;flex:", ";border-radius:", ";&.ant-btn-primary{&:focus{z-index:99999;}}}}"], function (props) {
+  return props.compact ? '0px' : '8px';
+}, function (props) {
   return mapButtonsPosition[props.buttonsPosition];
 }, function (props) {
   return !!props.splitMode && !props.error && css(["*:not(:first-child).ds-button.single-icon,.ds-button.single-icon.ant-btn-custom-color,.ds-button.single-icon.ant-btn-tertiary-white{border-left:1px solid rgba(255,255,255,0.15);&:disabled.ds-button.single-icon{&.ant-btn-tertiary-white{border-left:1px solid rgba(255,255,255,0.2) !important;}&.ant-btn-tertiary{border-left:1px solid rgba(106,117,128,0.1) !important;}&.ant-btn-custom-color{border-left:1px solid rgba(255,255,255,0.8) !important;}&.ant-btn-primary{border-left:1px solid rgba(255,255,255,0.5) !important;}}}*:not(:first-child).ds-button.single-icon.ant-btn-ghost-primary,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white,.ds-button.single-icon.ant-btn-secondary{border-left:0px;padding-left:1px;}*:not(:first-child).ds-button.single-icon.ant-btn-tertiary{border-left:1px solid rgba(106,117,128,0.2);}.ds-button.label.ant-btn-tertiary[disabled]{color:", " !important;}&:hover:not(:disabled){*:not(:first-child).ds-button.single-icon{&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-primary,&.ant-btn-custom-color{border-left:transparent !important;}}}.ds-button:focus{&.ant-btn-primary,&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-custom-color{border-color:transparent !important;&:active{border-color:transparent !important;}}}"], props.theme.palette['grey-500']);
@@ -19,6 +21,8 @@ export var Container = styled.div.withConfig({
   return !!props.splitMode && !!props.error && css(["*:not(:first-child).ds-button.single-icon,.ds-button.single-icon.ant-btn-custom-color,.ds-button.single-icon.ant-btn-tertiary-white,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white{border-left:1px solid ", ";}.ds-button:focus{&.ant-btn-primary,&.ant-btn-tertiary,&.ant-btn-tertiary-white,&.ant-btn-custom-color,&.ant-btn-ghost-primary,&.ant-btn-ghost-white,&.ant-btn-ghost{border-left:0px;&:active{border-left:0px;}}}*:not(:first-child).ds-button.single-icon.ant-btn-ghost-primary,.ds-button.single-icon.ant-btn-ghost,.ds-button.single-icon.ant-btn-ghost-white,.ds-button.single-icon.ant-btn-secondary,.ds-button.single-icon.ant-btn-tertiary,.ds-button.single-icon.ant-btn-tertiary-white,.ds-button.single-icon.ant-btn-primary,.ds-button.single-icon.ant-btn-custom-color{border-left:0px;padding-left:1px;}.ds-button:hover:not(:focus){&.ant-btn-tertiary,&.ant-btn-ghost,&.ant-btn-tertiary-white,&.ant-btn-ghost-white{box-shadow:inset 0 0 0 1px ", ";}}"], props.theme.palette['red-600'], props.theme.palette['red-600']);
 }, function (props) {
   return props.fullWidth ? '1' : 'none';
+}, function (props) {
+  return props.compact ? '0px' : '3px';
 });
 export var Title = styled.h4.withConfig({
   displayName: "ButtonGroupstyles__Title",

package/dist/ButtonGroup.types.d.ts

@@ -10,4 +10,5 @@ export type ButtonGroupProps = AntButtonGroupProps & {
     disabled?: boolean;
     splitMode?: boolean;
     error?: boolean;
+    compact?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button-group",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Button-Group UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,7 +34,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.1.3",
+    "@synerise/ds-button": "^1.1.5",
+    "@synerise/ds-divider": "^0.9.6",
     "@synerise/ds-utils": "^1.0.1"
   },
   "peerDependencies": {
@@ -43,5 +44,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "dc78b03be09e793ec84f1dafc59c5616e77f1196"
+  "gitHead": "fc601270d3c84a5a52b62473a01f1b3c1c7014a7"
 }