@synerise/ds-button-group 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/ButtonGroup.styles.js +2 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@2.0.2...@synerise/ds-button-group@2.0.3) (2026-09-16)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **button-group:** see a wrapped button when rounding the last corner ([c93cb98](https://github.com/Synerise/synerise-design/commit/c93cb9828ef225bf38b0a51903a1a54cedd54552))
|
|
11
|
+
|
|
12
|
+
## [2.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@2.0.1...@synerise/ds-button-group@2.0.2) (2026-09-08)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @synerise/ds-button-group
|
|
15
|
+
|
|
6
16
|
## [2.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@2.0.0...@synerise/ds-button-group@2.0.1) (2026-09-02)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @synerise/ds-button-group
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled, { css, keyframes } from "styled-components";
|
|
2
2
|
const BUTTON_UNIT = ":is(.ant-btn, span:has(> .ant-btn))";
|
|
3
|
+
const FOLLOWED_BY_UNIT = ":has(~ .ant-btn, ~ span > .ant-btn)";
|
|
3
4
|
const getButtonsPosition = (position) => {
|
|
4
5
|
const mapButtonsPosition = {
|
|
5
6
|
left: "flex-start",
|
|
@@ -21,7 +22,7 @@ const focusAnimation = ({
|
|
|
21
22
|
const Container = /* @__PURE__ */ styled.div.withConfig({
|
|
22
23
|
displayName: "ButtonGroupstyles__Container",
|
|
23
24
|
componentId: "sc-1jzk068-0"
|
|
24
|
-
})(["", ";.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;}}}", "}"], (props) => props.fullWidth ? "width: 100%;" : "", (props) => props.compact ? "0px" : "8px", (props) => getButtonsPosition(props.buttonsPosition), (props) => !!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"]), (props) => !!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"]), (props) => props.fullWidth ? "1" : "none", (props) => props.compact ? "0px" : "3px", (props) => props.compact && css(["& > ", " ~ .ant-btn,& > ", " ~ span > .ant-btn{margin-left:-1px;}& > .ant-btn,& > span > .ant-btn{border-radius:0;}& > .ant-btn:not(", " ~ *),& > span:has(> .ant-btn):not(", " ~ *) > .ant-btn{border-radius:3px 0 0 3px;}& > .ant-btn:not(
|
|
25
|
+
})(["", ";.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;}}}", "}"], (props) => props.fullWidth ? "width: 100%;" : "", (props) => props.compact ? "0px" : "8px", (props) => getButtonsPosition(props.buttonsPosition), (props) => !!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"]), (props) => !!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"]), (props) => props.fullWidth ? "1" : "none", (props) => props.compact ? "0px" : "3px", (props) => props.compact && css(["& > ", " ~ .ant-btn,& > ", " ~ span > .ant-btn{margin-left:-1px;}& > .ant-btn,& > span > .ant-btn{border-radius:0;}& > .ant-btn:not(", " ~ *),& > span:has(> .ant-btn):not(", " ~ *) > .ant-btn{border-radius:3px 0 0 3px;}& > .ant-btn:not(", "),& > span:has(> .ant-btn):not(", ") > .ant-btn{border-radius:0 3px 3px 0;}& > .ant-btn:not(", " ~ *):not(", "),& > span:has(> .ant-btn):not(", " ~ *):not( ", " ) > .ant-btn{border-radius:3px;}"], BUTTON_UNIT, BUTTON_UNIT, BUTTON_UNIT, BUTTON_UNIT, FOLLOWED_BY_UNIT, FOLLOWED_BY_UNIT, BUTTON_UNIT, FOLLOWED_BY_UNIT, BUTTON_UNIT, FOLLOWED_BY_UNIT));
|
|
25
26
|
const Title = /* @__PURE__ */ styled.h4.withConfig({
|
|
26
27
|
displayName: "ButtonGroupstyles__Title",
|
|
27
28
|
componentId: "sc-1jzk068-1"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-button-group",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "Button-Group UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"sideEffects": false,
|
|
40
40
|
"types": "dist/index.d.ts",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@synerise/ds-button": "^2.0.
|
|
43
|
-
"@synerise/ds-divider": "^2.0.
|
|
44
|
-
"@synerise/ds-utils": "^2.
|
|
42
|
+
"@synerise/ds-button": "^2.0.3",
|
|
43
|
+
"@synerise/ds-divider": "^2.0.3",
|
|
44
|
+
"@synerise/ds-utils": "^2.1.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@synerise/ds-core": "*",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"styled-components": "^5.3.3",
|
|
50
50
|
"vitest": "4"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db"
|
|
53
53
|
}
|