@synerise/ds-button 0.17.13 → 0.17.15
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 +20 -0
- package/dist/Button.styles.js +7 -7
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,26 @@
|
|
|
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
|
+
## [0.17.15](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.17.14...@synerise/ds-button@0.17.15) (2023-05-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **button:** fixes error validation styles ([9b47139](https://github.com/synerise/synerise-design/commit/9b47139807265c448b62350ebf226b526f31caad))
|
|
12
|
+
* **condition:** adds validation errors support ([0da0a99](https://github.com/synerise/synerise-design/commit/0da0a99436920398787a1128e26d5432af2d89e2))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## [0.17.14](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.17.13...@synerise/ds-button@0.17.14) (2023-04-26)
|
|
19
|
+
|
|
20
|
+
**Note:** Version bump only for package @synerise/ds-button
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
6
26
|
## [0.17.13](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.17.12...@synerise/ds-button@0.17.13) (2023-04-19)
|
|
7
27
|
|
|
8
28
|
**Note:** Version bump only for package @synerise/ds-button
|
package/dist/Button.styles.js
CHANGED
|
@@ -74,9 +74,9 @@ export var AntdButton = styled(function (_ref) {
|
|
|
74
74
|
}, function (props) {
|
|
75
75
|
return pressedStyles(props);
|
|
76
76
|
}, function (props) {
|
|
77
|
-
return props.theme.palette['grey-600'];
|
|
77
|
+
return props.error ? props.theme.palette['red-600'] : props.theme.palette['grey-600'];
|
|
78
78
|
}, function (props) {
|
|
79
|
-
return props.theme.palette['grey-600'];
|
|
79
|
+
return props.error ? props.theme.palette['red-600'] : props.theme.palette['grey-600'];
|
|
80
80
|
}, function (props) {
|
|
81
81
|
return props.theme.palette['grey-050'];
|
|
82
82
|
}, function (props) {
|
|
@@ -94,7 +94,7 @@ export var AntdButton = styled(function (_ref) {
|
|
|
94
94
|
}, function (props) {
|
|
95
95
|
return props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner);
|
|
96
96
|
}, function (props) {
|
|
97
|
-
return props.type === buttonType[props.type] && css(["&.ant-btn{&:not(:disabled){svg{fill:", ";}&:hover{svg{fill:", ";}}}}"], props.iconColor ? props.theme.palette[props.iconColor + "-600"] : props.theme.palette['grey-600'], props.iconColor ? props.theme.palette['blue-600'] : props.theme.palette['grey-600']);
|
|
97
|
+
return props.type === buttonType[props.type] && !props.error && css(["&.ant-btn{&:not(:disabled){svg{fill:", ";}&:hover{svg{fill:", ";}}}}"], props.iconColor ? props.theme.palette[props.iconColor + "-600"] : props.theme.palette['grey-600'], props.iconColor ? props.theme.palette['blue-600'] : props.theme.palette['grey-600']);
|
|
98
98
|
}, function (props) {
|
|
99
99
|
return props.mode === 'split' && css(["&.ant-btn{padding-right:0;> span:not(.btn-focus){padding-right:12px;position:relative;}> span:not(.btn-focus) + .ds-icon{margin:0 4px 0 3px;position:relative;&:before{content:'';background-color:", ";top:", ";height:", ";width:1px;left:-4px;position:absolute;transition:all 0.3s ease;}}}"], props.type !== splitType[props.type] ? "rgba(255, 255, 255, 0.15);" : props.theme.palette['grey-300'], props.size === 'large' ? '-12px' : '-4px', props.size === 'large' ? '48px' : '32px');
|
|
100
100
|
}, function (props) {
|
|
@@ -116,11 +116,11 @@ export var AntdButton = styled(function (_ref) {
|
|
|
116
116
|
}, function (props) {
|
|
117
117
|
return props.activated && css(["&&&.ant-btn{background-color:", ";span{color:", ";}svg{fill:", ";}&&&:focus{background-color:", ";span{color:", ";}svg{fill:", ";}&&&:hover:not(:active){background-color:", ";}}}&.ant-btn .btn-focus{box-shadow:none;}"], props.theme.palette["blue-050"], props.theme.palette['blue-600'], props.theme.palette['blue-600'], props.theme.palette["blue-050"], props.theme.palette['blue-600'], props.theme.palette['blue-600'], props.theme.palette["blue-100"]);
|
|
118
118
|
}, function (props) {
|
|
119
|
-
return props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", ";}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";span{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";span{color:", ";}
|
|
119
|
+
return props.error && css(["&.ant-btn{background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover:not(:disabled):not(:focus){background-color:", ";box-shadow:inset 0 0 0 1px ", ";span{color:", ";}svg{fill:", " !important;}}&:active{background-color:", ";box-shadow:none;span{color:", ";}svg{fill:", ";}}&&&:focus:not(:active){border:none !important;background-color:", ";span{color:", ";}.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}svg{fill:", ";}}", "{background-color:", ";}"], props.theme.palette["red-100"], props.theme.palette['red-600'], 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-600"], props.theme.palette["red-700"], props.theme.palette.white, props.theme.palette.white, props.theme.palette["red-100"], props.theme.palette["red-600"], props.theme.palette['blue-600'], props.theme.palette["red-600"], RippleEffect, props.theme.palette["red-700"]);
|
|
120
120
|
}, function (props) {
|
|
121
|
-
return props.error && props.type === 'secondary' && css(["&&&.ant-btn .btn-focus{box-shadow:
|
|
121
|
+
return props.error && props.type === 'secondary' && css(["&&&.ant-btn{span{color:", ";}svg{fill:", ";}.btn-focus{box-shadow:none;}&&&:hover{background-color:", ";.btn-focus{box-shadow:none;}}&&&:focus:not(:active){.btn-focus{box-shadow:inset 0 0 0 2px ", ";}}&&&:active{background-color:", ";span{color:", ";}svg{fill:", ";}}", "{background-color:", ";}}"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-200"], props.theme.palette['blue-600'], props.theme.palette["red-700"], props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
|
|
122
122
|
}, function (props) {
|
|
123
|
-
return props.type === 'custom-color' && css(["&.ant-btn{background-color:", ";border:0 solid transparent;span{color:", ";}svg{color:", ";fill:", ";}", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus{", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus){background-color:", ";span{color:", ";}svg{color:", " !important;fill:", " !important;}}&:disabled{opacity:0.4;background-color:", ";span{color:", ";}svg{color:", " !important;fill:", " !important;}}}"], props.theme.palette[props.customColor + "-600"], 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.customColor + "-500"], props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, props.theme.palette[props.customColor + "-600"], props.theme.palette.white, props.theme.palette.white, props.theme.palette.white);
|
|
123
|
+
return props.type === 'custom-color' && !props.error && css(["&.ant-btn{background-color:", ";border:0 solid transparent;color:", ";span{color:", ";}svg{color:", ";fill:", ";}", "{box-shadow:inset 0 0 0 0px transparent;}", "{background-color:", ";}&:focus{", "{box-shadow:inset 0 0 0 2px ", ";}}&:hover:not(:disabled):not(:focus){background-color:", ";span{color:", ";}svg{color:", " !important;fill:", " !important;}}&:disabled{opacity:0.4;background-color:", ";span{color:", ";}svg{color:", " !important;fill:", " !important;}}}"], props.theme.palette[props.customColor + "-600"], props.theme.palette.white, 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.customColor + "-500"], props.theme.palette.white, props.theme.palette.white, props.theme.palette.white, props.theme.palette[props.customColor + "-600"], props.theme.palette.white, props.theme.palette.white, props.theme.palette.white);
|
|
124
124
|
}, function (props) {
|
|
125
|
-
return props.type === 'custom-color-ghost' && css(["color:", ";.ds-icon > svg{fill:", ";}&:hover:not(:disabled):not(:focus){color:", ";span{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"], props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"]);
|
|
125
|
+
return props.type === 'custom-color-ghost' && !props.error && css(["color:", ";.ds-icon > svg{fill:", ";}&:hover:not(:disabled):not(:focus){color:", ";span{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"], props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-500"], props.theme.palette[props.customColor + "-600"], props.theme.palette[props.customColor + "-600"]);
|
|
126
126
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-button",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.15",
|
|
4
4
|
"description": "Button UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-icon": "^0.
|
|
35
|
+
"@synerise/ds-icon": "^0.56.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@synerise/ds-core": "*",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"@synerise/ds-utils": "^0.19.0",
|
|
44
44
|
"csstype": "2.6.9"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "5808615a55859820c255189f77977725ec79cd7d"
|
|
47
47
|
}
|