@synerise/ds-button 0.17.14 → 0.17.16

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.17.16](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.17.15...@synerise/ds-button@0.17.16) (2023-05-23)
+
+
+### Bug Fixes
+
+* **button:** add readOnly styles to button ([e02c5f3](https://github.com/synerise/synerise-design/commit/e02c5f34963de704766e9f69bb775f0171a04a77))
+* **card-tabs:** changes button creator height ([d822687](https://github.com/synerise/synerise-design/commit/d822687f69b513d5adb4e67ade2650d454909aae))
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* **button:** fixes error validation styles ([9b47139](https://github.com/synerise/synerise-design/commit/9b47139807265c448b62350ebf226b526f31caad))
+* **condition:** adds validation errors support ([0da0a99](https://github.com/synerise/synerise-design/commit/0da0a99436920398787a1128e26d5432af2d89e2))
+
+
+
+
+
 ## [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)
 
 **Note:** Version bump only for package @synerise/ds-button

package/dist/Button.js

@@ -64,10 +64,11 @@ var Button = function Button(_ref) {
   };
 
   var classNameString = React.useMemo(function () {
-    var modeStringifed = !mode ? '' : mode;
-    var classNameStringifed = !className ? '' : className;
-    return "ds-button " + modeStringifed + " " + classNameStringifed;
-  }, [mode, className]);
+    var modeStringifed = mode || '';
+    var readOnlyStringifed = antdProps.readOnly ? 'read-only' : '';
+    var classNameStringifed = className || '';
+    return "ds-button " + modeStringifed + " " + classNameStringifed + " " + readOnlyStringifed;
+  }, [mode, className, antdProps.readOnly]);
   return /*#__PURE__*/React.createElement(S.AntdButton, _extends({
     justifyContent: justifyContent,
     type: type || 'secondary',
@@ -88,7 +89,7 @@ var Button = function Button(_ref) {
     customColor: color
     /* eslint-disable-next-line react/jsx-props-no-spreading */
 
-  }, antdProps), /*#__PURE__*/React.createElement(S.RippleEffect, {
+  }, antdProps), !antdProps.readOnly && /*#__PURE__*/React.createElement(S.RippleEffect, {
     ref: rippleRef,
     className: "btn-ripple " + rippleClassName
   }), antdProps.children, loading && /*#__PURE__*/React.createElement(S.Spinner, {

package/dist/Button.styles.js

@@ -65,7 +65,7 @@ export var AntdButton = styled(function (_ref) {
 }).withConfig({
   displayName: "Buttonstyles__AntdButton",
   componentId: "sc-3lgta1-3"
-})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);border:0;display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";> *:not(.btn-focus){position:relative;}> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}&:disabled{&&{", "{box-shadow:none;}}};", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator){&:active{", "}&:focus:not(:active){color:", ";svg{fill:", ";}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}> span:not(.btn-focus) +.ds-icon:before{background-color:", ";}", "}&:active{color:", ";svg{fill:", ";!important;}}}", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "}"], function (props) {
+})(["   &&{-webkit-mask-image:-webkit-radial-gradient(white,black);border:0;display:inline-flex;align-items:center;padding:0 12px;position:relative;overflow:hidden;justify-content:", ";", ";> *:not(.btn-focus){position:relative;}> .ds-icon{display:flex;align-items:center;justify-content:center;margin:0;width:24px;height:24px;}&:disabled{&&{", "{box-shadow:none;}}};", " &&.ant-btn-default:not(.ds-expander):not(.ds-button-creator):not(.read-only),&&.ant-btn-secondary:not(.ds-expander):not(.ds-button-creator):not(.read-only){&:active{", "}&:focus:not(:active){color:", ";svg{fill:", ";}background:", ";}&:hover:not(:disabled):not(:focus){background-color:", ";&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", ";}> span:not(.btn-focus) +.ds-icon:before{background-color:", ";}", "}&:active{color:", ";svg{fill:", ";!important;}}}", " ", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "}"], function (props) {
   return props.justifyContent;
 }, function (props) {
   return props.shape && props.shape === 'circle' && css(["border-radius:50%;"]);
@@ -74,9 +74,9 @@ export var AntdButton = styled(function (_ref) {
 }, function (props) {
   return pressedStyles(props);
 }, function (props) {
-  return props.theme.palette['grey-600'];
+  return props.error ? props.theme.palette['red-600'] : props.theme.palette['grey-600'];
 }, function (props) {
-  return props.theme.palette['grey-600'];
+  return props.error ? props.theme.palette['red-600'] : props.theme.palette['grey-600'];
 }, function (props) {
   return props.theme.palette['grey-050'];
 }, function (props) {
@@ -91,10 +91,12 @@ export var AntdButton = styled(function (_ref) {
   return props.theme.palette['blue-600'];
 }, function (props) {
   return props.theme.palette['blue-600'];
+}, function (props) {
+  return props.readOnly && css(["&&.ant-btn{cursor:default;transition:none;}&&.ant-btn-secondary{&:hover,&:focus{background:", ";.btn-focus{box-shadow:inset 0 0 0 1px ", ";}span,svg{color:", ";}svg{fill:", " !important;}}}"], props.theme.palette['grey-050'], props.theme.palette['grey-300'], props.theme.palette['grey-700'], props.theme.palette['grey-700']);
 }, function (props) {
   return props.loading && css(["> *:not(.btn-focus){opacity:0;visibility:hidden;}", "{opacity:1;visibility:visible;}"], Spinner);
 }, function (props) {
-  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']);
+  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']);
 }, function (props) {
   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');
 }, function (props) {
@@ -114,13 +116,13 @@ export var AntdButton = styled(function (_ref) {
 }, function (props) {
   return props.groupVariant === 'right-rounded' && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]);
 }, function (props) {
-  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"]);
+  return props.activated && css(["&&&.ant-btn:not(.read-only){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"]);
 }, function (props) {
-  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:", ";}}svg{fill:", ";}}&&&:focus{&&&:active{border:none !important;background-color:", ";span{color:", ";}svg{fill:", ";}}}", "{background-color:", ";}"], props.theme.palette["red-050"], 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-600"], props.theme.palette.white, props.theme.palette.white, props.theme.palette["red-050"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
+  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"]);
 }, function (props) {
-  return props.error && props.type === 'secondary' && css(["&&&.ant-btn .btn-focus{box-shadow:inset 0 0 0 1px ", " !important;&&&:hover{background-color:", ";}&&&:active{background-color:", ";box-shadow:inset 0 0 0 2px ", ";span{color:", ";}svg{fill:", ";}}", "{background-color:", ";}}"], props.theme.palette['red-600'], props.theme.palette["red-200"], props.theme.palette["red-600"], props.theme.palette['blue-600'], props.theme.palette.white, props.theme.palette.white, RippleEffect, props.theme.palette["red-700"]);
+  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"]);
 }, function (props) {
-  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);
+  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:not(.read-only){", "{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.readOnly ? props.customColor + "-600" : 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);
 }, function (props) {
-  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"]);
+  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"]);
 });

package/dist/Button.types.d.ts

@@ -42,6 +42,7 @@ export declare type Props = Omit<ButtonProps, 'type'> & {
     iconColor?: string | 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
     error?: boolean;
     activated?: boolean;
+    readOnly?: boolean;
 };
 export declare type ButtonSubComponents = {
     Expander: React.ElementType;

package/dist/Creator/Creator.styles.js

@@ -35,9 +35,10 @@ export var Creator = styled(function (_ref3) {
 }).withConfig({
   displayName: "Creatorstyles__Creator",
   componentId: "sc-1w96u6h-1"
-})(["&&&{width:", ";opacity:", ";height:40px;", " padding:0;border-radius:3px;border:1px dashed ", ";background:", ";transition:all 0.3s ease;justify-content:", ";align-items:center;", "{margin:auto 12px;svg{transition:all 0.3s ease;color:", ";fill:", ";}}", "{background-color:", ";}", "{display:none;}&:hover:not(:disabled){", "{svg{color:", " !important;fill:", " !important;}}", "{color:", ";}}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background-color:", ";}", " &:focus:active{border:1px dashed ", " !important;box-shadow:none;background-color:", ";}&:focus{border:1px dashed ", ";box-shadow:none;}&:disabled{border-color:", ";background-color:", ";}", " ", "}"], function (props) {
+})(["&&&{width:", ";opacity:", ";height:48px;", " padding:0;border-radius:3px;border:1px dashed ", ";background:", ";transition:all 0.3s ease;justify-content:", ";align-items:center;", "{margin:auto 12px;svg{transition:all 0.3s ease;color:", ";fill:", ";}}", "{background-color:", ";}", "{display:none;}&:hover:not(:disabled){", "{svg{color:", " !important;fill:", " !important;}}", "{color:", ";}}&:hover:not(:disabled):not(:focus){border:1px dashed ", ";background-color:", ";}", " &:focus:active{border:1px dashed ", " !important;box-shadow:none;background-color:", ";}&:focus{border:1px dashed ", ";box-shadow:none;}&:disabled{border-color:", ";background-color:", ";}", " ", "}"], function (props) {
+  if (!props.withLabel) return '48px';
   if (props.block) return '100%';
-  return props.withLabel ? 'auto' : '40px';
+  return 'auto';
 }, function (props) {
   return props.disabled ? "0.4" : '1';
 }, function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-button",
-  "version": "0.17.14",
+  "version": "0.17.16",
   "description": "Button UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -43,5 +43,5 @@
     "@synerise/ds-utils": "^0.19.0",
     "csstype": "2.6.9"
   },
-  "gitHead": "41163901b144e78a83329029519cb9eb48bf4787"
+  "gitHead": "9a0fe37374409f1830fa642965975a26a72116c8"
 }