@synerise/ds-button 0.13.65 → 0.15.0

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +2 -0
  3. package/dist/Button.js +5 -3
  4. package/dist/Button.styles.d.ts +1 -1
  5. package/dist/Button.styles.js +8 -3
  6. package/dist/Button.types.d.ts +1 -0
  7. package/dist/Creator/Creator.js +1 -1
  8. package/dist/Creator/Creator.styles.js +4 -3
  9. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,54 @@
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.15.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.67...@synerise/ds-button@0.15.0) (2021-10-26)
7
+
8
+
9
+ ### Features
10
+
11
+ * **button:** add button min width ([bd8c410](https://github.com/synerise/synerise-design/commit/bd8c410f73cc2779cfe0596d6e866b374ec4a06b))
12
+
13
+
14
+
15
+
16
+
17
+ # [0.14.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.67...@synerise/ds-button@0.14.0) (2021-10-19)
18
+
19
+
20
+ ### Features
21
+
22
+ * **button:** add button min width ([bd8c410](https://github.com/synerise/synerise-design/commit/bd8c410f73cc2779cfe0596d6e866b374ec4a06b))
23
+
24
+
25
+
26
+
27
+
28
+ ## [0.13.67](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.66...@synerise/ds-button@0.13.67) (2021-10-19)
29
+
30
+ **Note:** Version bump only for package @synerise/ds-button
31
+
32
+
33
+
34
+
35
+
36
+ ## [0.13.66](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.65...@synerise/ds-button@0.13.66) (2021-09-21)
37
+
38
+
39
+ ### Bug Fixes
40
+
41
+ * **button:** add new prop and fix styles ([d09b804](https://github.com/synerise/synerise-design/commit/d09b8040a2f7a4df6e046ea29b307beb0238661e))
42
+ * **button:** add prop activated to button ([a59a371](https://github.com/synerise/synerise-design/commit/a59a371f3d4b52aef549bbcd6127cea5fda583d3))
43
+ * **button:** delete prop ([2d31f61](https://github.com/synerise/synerise-design/commit/2d31f61c9efdba5aefe774fa2e53f9ba8da2f35a))
44
+ * **button:** fix styles ([bac6b4a](https://github.com/synerise/synerise-design/commit/bac6b4a8733de192fc72d9c29d139ad277f0a2e6))
45
+ * **button:** fix styles ([45c1ff9](https://github.com/synerise/synerise-design/commit/45c1ff917739339dbd087dd6de8bf59aa38e777b))
46
+ * **button:** fix styles to prop activated ([fdb004c](https://github.com/synerise/synerise-design/commit/fdb004c1ad0db133bc4c06c81a10d2f339029946))
47
+ * change background-color on hover and border color in creator button ([563331d](https://github.com/synerise/synerise-design/commit/563331d95dd51fe7fc3aa74f4b07bc8f8119b7db))
48
+ * change border, background color in creator button and uploader ([b35c306](https://github.com/synerise/synerise-design/commit/b35c306051abf8ac0d8488551b65330a1510ca23))
49
+
50
+
51
+
52
+
53
+
6
54
  ## [0.13.65](https://github.com/synerise/synerise-design/compare/@synerise/ds-button@0.13.64...@synerise/ds-button@0.13.65) (2021-09-03)
7
55
 
8
56
  **Note:** Version bump only for package @synerise/ds-button
package/README.md CHANGED
@@ -65,6 +65,8 @@ import { AngleDownS } from '@synerise/ds-icon/dist/icons';
65
65
  | onClick | Callback executed after clicking the button | (event: React.MouseEvent) => void | - |
66
66
  | type | Defines the type of the button. | `primary` / `secondary`/ `tertiary`/ `tertiary-white` / `ghost-primary` / `ghost` / `ghost-white` / `custom-color` / `custom-color-ghost` | `secondary` |
67
67
  | iconColor | Defines color of `icon` in button. | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `grey` |
68
+ | error | Defines if the button has error button styles . | boolean | `false` |
69
+ | activated | Defines if the button has activated button styles . | boolean | `false` |
68
70
 
69
71
  ## Button.Creator
70
72
 
package/dist/Button.js CHANGED
@@ -38,7 +38,8 @@ var Button = function Button(_ref) {
38
38
  _ref$color = _ref.color,
39
39
  color = _ref$color === void 0 ? 'red' : _ref$color,
40
40
  error = _ref.error,
41
- antdProps = _objectWithoutProperties(_ref, ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error"]);
41
+ activated = _ref.activated,
42
+ antdProps = _objectWithoutProperties(_ref, ["type", "mode", "justifyContent", "groupVariant", "loading", "onClick", "className", "color", "error", "activated"]);
42
43
 
43
44
  var rippleRef = React.useRef(null);
44
45
 
@@ -78,8 +79,8 @@ var Button = function Button(_ref) {
78
79
  };
79
80
 
80
81
  var classNameString = React.useMemo(function () {
81
- var modeStringifed = !mode ? "" : mode;
82
- var classNameStringifed = !className ? "" : className;
82
+ var modeStringifed = !mode ? '' : mode;
83
+ var classNameStringifed = !className ? '' : className;
83
84
  return "ds-button ".concat(modeStringifed, " ").concat(classNameStringifed);
84
85
  }, [mode, className]);
85
86
  return React.createElement(S.AntdButton, _extends({
@@ -87,6 +88,7 @@ var Button = function Button(_ref) {
87
88
  type: type || 'secondary',
88
89
  mode: mode,
89
90
  error: error,
91
+ activated: activated,
90
92
  groupVariant: groupVariant,
91
93
  loading: loading,
92
94
  onClick: handleClick,
package/dist/Button.styles.d.ts CHANGED
@@ -3,4 +3,4 @@ export declare const RIPPLE_ANIMATION_TIME = 500;
3
3
  export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;
4
4
  export declare const RippleEffect: import("styled-components").StyledComponent<"span", any, {}, never>;
5
5
  export declare const ButtonFocus: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const AntdButton: import("styled-components").StyledComponent<({ mode, type, loading, justifyContent, groupVariant, customColor, rightIconSize, leftIconSize, pressed, size, iconColor, error, ...rest }: any) => JSX.Element, any, {}, never>;
6
+ export declare const AntdButton: import("styled-components").StyledComponent<({ mode, type, loading, justifyContent, groupVariant, customColor, rightIconSize, leftIconSize, pressed, size, iconColor, error, activated, ...rest }: any) => JSX.Element, any, {}, never>;
package/dist/Button.styles.js CHANGED
@@ -54,7 +54,8 @@ export var AntdButton = styled(function (_ref) {
54
54
  size = _ref.size,
55
55
  iconColor = _ref.iconColor,
56
56
  error = _ref.error,
57
- rest = _objectWithoutProperties(_ref, ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "rightIconSize", "leftIconSize", "pressed", "size", "iconColor", "error"]);
57
+ activated = _ref.activated,
58
+ rest = _objectWithoutProperties(_ref, ["mode", "type", "loading", "justifyContent", "groupVariant", "customColor", "rightIconSize", "leftIconSize", "pressed", "size", "iconColor", "error", "activated"]);
58
59
 
59
60
  // eslint-disable-next-line react/jsx-props-no-spreading
60
61
  return React.createElement(Button, _extends({
@@ -64,11 +65,13 @@ export var AntdButton = styled(function (_ref) {
64
65
  }).withConfig({
65
66
  displayName: "Buttonstyles__AntdButton",
66
67
  componentId: "sc-3lgta1-3"
67
- })([" &&{-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) {
68
+ })([" &&{-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) {
68
69
  return props.justifyContent;
69
70
  }, function (props) {
70
71
  return props.shape && props.shape === 'circle' && css(["border-radius:50%;"]);
71
72
  }, ButtonFocus, function (props) {
73
+ return props.mode !== 'single-icon' && css(["&.ant-btn:not(.ds-expander):not(.ds-button-creator){min-width:54px;}"]);
74
+ }, function (props) {
72
75
  return pressedStyles(props);
73
76
  }, function (props) {
74
77
  return props.theme.palette['grey-600'];
@@ -111,7 +114,9 @@ export var AntdButton = styled(function (_ref) {
111
114
  }, function (props) {
112
115
  return props.groupVariant === 'right-rounded' && css(["&.ant-btn{border-radius:0 3px 3px 0;}"]);
113
116
  }, function (props) {
114
- 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"]);
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
+ }, 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:", ";}}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"]);
115
120
  }, function (props) {
116
121
  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"]);
117
122
  }, function (props) {
package/dist/Button.types.d.ts CHANGED
@@ -41,6 +41,7 @@ export declare type Props = Omit<ButtonProps, 'type'> & {
41
41
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
42
42
  iconColor?: string | 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
43
43
  error?: boolean;
44
+ activated?: boolean;
44
45
  };
45
46
  export declare type ButtonSubComponents = {
46
47
  Expander: React.ElementType;
package/dist/Creator/Creator.js CHANGED
@@ -28,7 +28,7 @@ var Creator = function Creator(_ref) {
28
28
  setPressed = _React$useState2[1];
29
29
 
30
30
  var onPress = React.useCallback(function () {
31
- setPressed(false);
31
+ setPressed(true);
32
32
  }, []);
33
33
  var onRelease = React.useCallback(function () {
34
34
  setPressed(false);
package/dist/Creator/Creator.styles.js CHANGED
@@ -5,6 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
5
5
  import * as React from 'react';
6
6
  import styled, { css } from 'styled-components';
7
7
  import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';
8
+ import { hexToRgba } from '@synerise/ds-utils';
8
9
  import Button from '../Button';
9
10
  import { ButtonFocus, RippleEffect } from '../Button.styles';
10
11
  import { CreatorStatus } from './Creator.types';
@@ -43,7 +44,7 @@ export var Creator = styled(function (_ref3) {
43
44
  return props.withLabel && !props.block && "min-width: 200px;";
44
45
  }, function (_ref4) {
45
46
  var theme = _ref4.theme;
46
- return theme.palette['grey-300'];
47
+ return theme.palette['grey-400'];
47
48
  }, function (_ref5) {
48
49
  var theme = _ref5.theme;
49
50
  return theme.palette.white;
@@ -66,9 +67,9 @@ export var Creator = styled(function (_ref3) {
66
67
  return theme.palette['grey-400'];
67
68
  }, function (_ref7) {
68
69
  var theme = _ref7.theme;
69
- return theme.palette.white;
70
+ return hexToRgba(theme.palette['grey-200'], 0.2);
70
71
  }, function (props) {
71
- return props.pressed && "background-color: ".concat(props.theme.palette['grey-050'], ";");
72
+ return props.pressed && "&&{ background-color: ".concat(hexToRgba(props.theme.palette['grey-200'], 0.4), "; }");
72
73
  }, function (props) {
73
74
  return props.theme.palette['grey-400'];
74
75
  }, function (props) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-button",
3
- "version": "0.13.65",
3
+ "version": "0.15.0",
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.44.11"
35
+ "@synerise/ds-icon": "^0.45.2"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "@synerise/ds-core": "*",
@@ -40,8 +40,8 @@
40
40
  "react": ">=16.9.0 < 17.0.0"
41
41
  },
42
42
  "devDependencies": {
43
- "@synerise/ds-utils": "^0.18.0",
43
+ "@synerise/ds-utils": "^0.19.0",
44
44
  "csstype": "2.6.9"
45
45
  },
46
- "gitHead": "498059c8509d8a59a25076067cec4617dfe2c5b5"
46
+ "gitHead": "daaf50ad62081d7ad77eb4ac65100173df77c731"
47
47
  }