@synerise/ds-button 1.5.28 → 1.5.30
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/Button.styles.js +1 -1
- package/package.json +6 -6
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
|
+
## [1.5.30](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.29...@synerise/ds-button@1.5.30) (2026-05-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-button
|
|
9
|
+
|
|
10
|
+
## [1.5.29](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.28...@synerise/ds-button@1.5.29) (2026-05-15)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- **button:** style specificity ([cd6ea43](https://github.com/synerise/synerise-design/commit/cd6ea430e186d8a11086c2638735e211f3ac2c7e))
|
|
15
|
+
|
|
6
16
|
## [1.5.28](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@1.5.27...@synerise/ds-button@1.5.28) (2026-05-13)
|
|
7
17
|
|
|
8
18
|
### Bug Fixes
|
package/dist/Button.styles.js
CHANGED
|
@@ -38,7 +38,7 @@ const ButtonLabel = /* @__PURE__ */ styled.div.withConfig({
|
|
|
38
38
|
const StyledButton = /* @__PURE__ */ styled(BaseButton).withConfig({
|
|
39
39
|
displayName: "Buttonstyles__StyledButton",
|
|
40
40
|
componentId: "sc-3lgta1-5"
|
|
41
|
-
})(["&&{", " -webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;&:not(:disabled):not(:focus-visible){", " span{color:inherit;}}", " > *:not(.btn-focus){position:relative;z-index:1;}", " > .ds-icon,> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]){.btn-ripple{background-color:", ";}&.pressed{", " color:", ";}&:focus-visible:not(.pressed){color:", ";background:", ";}&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &:hover:not(:disabled):not(:focus-visible):not(.pressed){", " span{color:", ";cursor:inherit;}}}"], (props) => getVariantStyles(props.type, props.theme.palette), ButtonLabel, ButtonLabel, ButtonLabel, (props) => props.mode !== "single-icon" && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator):not( .btn-search ):not(.btn-search-open){min-width:54px;}"]), (props) => props.theme.palette["blue-100"], (props) => pressedStyles(props), (props) => props.theme.palette["blue-600"], (props) => props.error ? props.theme.palette["red-600"] : props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-300"], ButtonLabel, (props) => props.theme.palette["blue-200"], (props) => props.readOnly && props.type !== "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}color:", ";}}&&.ant-btn-primary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}color:", ";}}&&.ant-btn-tertiary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-tertiary-white{&:hover,&:focus-visible{background:rgba(219,224,227,0.15);.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost-primary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost-white{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-danger{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-success{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-warning{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}"], props.theme.palette["grey-050"], props.theme.palette["grey-300"], props.theme.palette["grey-700"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette["grey-050"], props.theme.palette["grey-100"], props.theme.palette["grey-700"], props.theme.palette["grey-050"], props.theme.palette.white, props.theme.palette["blue-600"], props.theme.palette.white, props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-050"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette["green-600"], props.theme.palette.white, props.theme.palette["yellow-600"], props.theme.palette.white), (props) => props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner), (props) => props.iconColor && css(["&.ant-btn:not(:disabled){color:", ";&:hover{color:inherit;}}"], props.theme.palette[`${props.iconColor}-600`]), (props) => props.mode === "split" && css(["&.ant-btn{padding-right:0;transition:0s;", "{position:relative;}", " > .ds-icon{margin:0 4px 0 15px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], ButtonLabel, ButtonLabel, !splitTypes.includes(props.type) ? `rgba(255, 255, 255, 0.15);` : props.theme.palette["grey-300"], props.size === "large" ? "-12px" : "-4px", props.size === "large" ? "48px" : "32px"), (props) => props.mode === "two-icons" && css(["&.ant-btn{padding:0;transition:0s;", " > ", ":first-of-type,", " > .ds-icon:first-of-type,& > ", ":first-of-type,& > .ds-icon:first-of-type{margin:", ";}", " > ", ":nth-of-type(2),", " > .ds-icon:nth-of-type(2),& > ", ":nth-of-type(2),& > .ds-icon:nth-of-type(2){margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon, ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "label-icon" && css(["&.ant-btn{padding-right:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "icon-label" && css(["&.ant-btn{padding-left:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon), (props) => props.mode === "single-icon" && css(["&.ant-btn:not(.ds-expander){display:flex;align-items:center;justify-content:center;padding:0;transition:0s;width:32px;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:0 4px 0 4px;}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer), (props) => props.mode === "single-icon" && props.size === "large" && css(["&.ant-btn{width:48px;}"]), (props) => props.groupVariant === "squared" && css(["&.ant-btn{border-radius:0;}"]), (props) => props.groupVariant === "left-rounded" && css(["&.ant-btn{border-radius:3px 0 0 3px;}"]), (props) => props.groupVariant === "right-rounded" && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]), (props) => props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";.btn-focus{box-shadow:none;}&&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";}&.pressed{background-color:", ";box-shadow:none;color:", ";}&&:focus-visible:not(.pressed){border:none !important;background-color:", ";color:", ";.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}}", "{background-color:", ";}"], props.theme.palette[`red-100`], props.theme.palette["red-600"], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["red-600"], props.theme.palette[`red-600`], props.theme.palette[`red-700`], props.theme.palette.white, props.theme.palette[`red-100`], props.theme.palette[`red-600`], props.theme.palette["blue-600"], RippleEffect, props.theme.palette[`red-700`]), (props) => props.error && props.type === "secondary" && css(["
|
|
41
|
+
})(["&&{", " -webkit-mask-image:-webkit-radial-gradient(white,black);display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;&:not(:disabled):not(:focus-visible){", " span{color:inherit;}}", " > *:not(.btn-focus){position:relative;z-index:1;}", " > .ds-icon,> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only):not([disabled]){.btn-ripple{background-color:", ";}&.pressed{", " color:", ";}&:focus-visible:not(.pressed){color:", ";background:", ";}&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}", " > .ds-icon:before{background-color:", ";}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " &:hover:not(:disabled):not(:focus-visible):not(.pressed){", " span{color:", ";cursor:inherit;}}}"], (props) => getVariantStyles(props.type, props.theme.palette), ButtonLabel, ButtonLabel, ButtonLabel, (props) => props.mode !== "single-icon" && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator):not( .btn-search ):not(.btn-search-open){min-width:54px;}"]), (props) => props.theme.palette["blue-100"], (props) => pressedStyles(props), (props) => props.theme.palette["blue-600"], (props) => props.error ? props.theme.palette["red-600"] : props.theme.palette["grey-600"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-300"], ButtonLabel, (props) => props.theme.palette["blue-200"], (props) => props.readOnly && props.type !== "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}color:", ";}}&&.ant-btn-primary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}color:", ";}}&&.ant-btn-tertiary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-tertiary-white{&:hover,&:focus-visible{background:rgba(219,224,227,0.15);.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost-primary{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-ghost-white{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-danger{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-success{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}&&.ant-btn-warning{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:none;}color:", ";}}"], props.theme.palette["grey-050"], props.theme.palette["grey-300"], props.theme.palette["grey-700"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette["grey-050"], props.theme.palette["grey-100"], props.theme.palette["grey-700"], props.theme.palette["grey-050"], props.theme.palette.white, props.theme.palette["blue-600"], props.theme.palette.white, props.theme.palette["grey-600"], props.theme.palette["grey-600"], props.theme.palette["grey-050"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette["green-600"], props.theme.palette.white, props.theme.palette["yellow-600"], props.theme.palette.white), (props) => props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner), (props) => props.iconColor && css(["&.ant-btn:not(:disabled){color:", ";&:hover{color:inherit;}}"], props.theme.palette[`${props.iconColor}-600`]), (props) => props.mode === "split" && css(["&.ant-btn{padding-right:0;transition:0s;", "{position:relative;}", " > .ds-icon{margin:0 4px 0 15px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], ButtonLabel, ButtonLabel, !splitTypes.includes(props.type) ? `rgba(255, 255, 255, 0.15);` : props.theme.palette["grey-300"], props.size === "large" ? "-12px" : "-4px", props.size === "large" ? "48px" : "32px"), (props) => props.mode === "two-icons" && css(["&.ant-btn{padding:0;transition:0s;", " > ", ":first-of-type,", " > .ds-icon:first-of-type,& > ", ":first-of-type,& > .ds-icon:first-of-type{margin:", ";}", " > ", ":nth-of-type(2),", " > .ds-icon:nth-of-type(2),& > ", ":nth-of-type(2),& > .ds-icon:nth-of-type(2){margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon, ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "label-icon" && css(["&.ant-btn{padding-right:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}", "{margin:0 12px 0 0;}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, rightIcon, Tag), (props) => props.mode === "icon-label" && css(["&.ant-btn{padding-left:0;transition:0s;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:", ";}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer, leftIcon), (props) => props.mode === "single-icon" && css(["&.ant-btn:not(.ds-expander){display:flex;align-items:center;justify-content:center;padding:0;transition:0s;width:32px;", " > ", ",", " > .ds-icon,& > ", ",& > .ds-icon{margin:0 4px 0 4px;}}"], ButtonLabel, IconContainer, ButtonLabel, IconContainer), (props) => props.mode === "single-icon" && props.size === "large" && css(["&.ant-btn{width:48px;}"]), (props) => props.groupVariant === "squared" && css(["&.ant-btn{border-radius:0;}"]), (props) => props.groupVariant === "left-rounded" && css(["&.ant-btn{border-radius:3px 0 0 3px;}"]), (props) => props.groupVariant === "right-rounded" && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]), (props) => props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";.btn-focus{box-shadow:none;}&&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";}&.pressed{background-color:", ";box-shadow:none;color:", ";}&&:focus-visible:not(.pressed){border:none !important;background-color:", ";color:", ";.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}}", "{background-color:", ";}"], props.theme.palette[`red-100`], props.theme.palette["red-600"], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["red-600"], props.theme.palette[`red-600`], props.theme.palette[`red-700`], props.theme.palette.white, props.theme.palette[`red-100`], props.theme.palette[`red-600`], props.theme.palette["blue-600"], RippleEffect, props.theme.palette[`red-700`]), (props) => props.error && props.type === "secondary" && css(["&&&.ant-btn{color:", ";.btn-focus{box-shadow:none;}&&&:hover{background-color:", ";.btn-focus{box-shadow:none;}}&&&:focus-visible:not(.pressed){.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&&&.pressed{background-color:", ";color:", ";}", "{background-color:", ";}}"], props.theme.palette[`red-600`], props.theme.palette[`red-200`], props.theme.palette["blue-600"], props.theme.palette[`red-700`], props.theme.palette.white, RippleEffect, props.theme.palette[`red-700`]), (props) => props.type === "custom-color" && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus-visible:not(.read-only){", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus-visible):not(.pressed){background-color:", ";color:", ";}&.pressed{background-color:", ";color:", ";}&:disabled{opacity:0.4;background-color:", ";color:", ";}}"], props.theme.palette[`${props.customColor}-600`], 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`], props.theme.palette.white, props.theme.palette[`${props.customColor}-700`], props.theme.palette.white, props.theme.palette[`${props.customColor}-600`], props.theme.palette.white), (props) => props.type === "custom-color-ghost" && !props.error && css(["&&{color:", ";&:hover:not(:disabled){color:", ";}&:disabled{opacity:0.4;color:", ";}}"], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`], props.theme.palette[`${props.customColor}-600`]), (props) => props.readOnly && props.type === "custom-color-ghost" && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-custom-color-ghost{&:hover,&:focus-visible{background:", ";.btn-focus{box-shadow:inset 0 0 0 0 ", ";}color:", ";}}"], props.theme.palette.white, props.theme.palette.white, props.theme.palette[`${props.customColor}-600`]), Tag, (props) => props.theme.palette.white);
|
|
42
42
|
export {
|
|
43
43
|
ACTIVE_DELAY,
|
|
44
44
|
ButtonFocus,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-button",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.30",
|
|
4
4
|
"description": "Button UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
"sideEffects": false,
|
|
39
39
|
"types": "dist/index.d.ts",
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@synerise/ds-icon": "^1.18.
|
|
42
|
-
"@synerise/ds-tag": "^1.4.
|
|
43
|
-
"@synerise/ds-tooltip": "^1.
|
|
44
|
-
"@synerise/ds-utils": "^1.
|
|
41
|
+
"@synerise/ds-icon": "^1.18.1",
|
|
42
|
+
"@synerise/ds-tag": "^1.4.28",
|
|
43
|
+
"@synerise/ds-tooltip": "^1.5.0",
|
|
44
|
+
"@synerise/ds-utils": "^1.9.0",
|
|
45
45
|
"classnames": "^2.5.1",
|
|
46
46
|
"csstype": "^2.6.9"
|
|
47
47
|
},
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"styled-components": "^5.3.3",
|
|
52
52
|
"vitest": "4"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "f257f56d8991010593efd5ea9915335e813671a6"
|
|
55
55
|
}
|