@micromag/element-button 0.3.57 → 0.3.61

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +41 -7
  3. package/lib/index.js +41 -7
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-button-container{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:5px 10px;border-radius:0;background-color:hsla(0,0%,100%,.1)}.micromag-element-button-container.micromag-element-button-active,.micromag-element-button-container.micromag-element-button-focus,.micromag-element-button-container:active,.micromag-element-button-container:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.micromag-element-button-container.micromag-element-button-disabled,.micromag-element-button-container:disabled{cursor:auto}
1
+ .micromag-element-button-container{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:5px 10px;border-radius:0;background-color:hsla(0,0%,100%,.1)}.micromag-element-button-container.micromag-element-button-active,.micromag-element-button-container.micromag-element-button-focus,.micromag-element-button-container:active,.micromag-element-button-container:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.micromag-element-button-container.micromag-element-button-disabled,.micromag-element-button-container:disabled{cursor:auto}.micromag-element-button-border{display:inline-block}
package/es/index.js CHANGED
@@ -8,15 +8,17 @@ import { PropTypes } from '@micromag/core';
8
8
  import { Button as Button$1 } from '@micromag/core/components';
9
9
  import { getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
10
10
 
11
- var styles = {"container":"micromag-element-button-container","active":"micromag-element-button-active","focus":"micromag-element-button-focus","disabled":"micromag-element-button-disabled"};
11
+ var styles = {"container":"micromag-element-button-container","active":"micromag-element-button-active","focus":"micromag-element-button-focus","disabled":"micromag-element-button-disabled","border":"micromag-element-button-border"};
12
12
 
13
- var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "onClick", "children", "className", "refButton"];
13
+ var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "separateBorder", "onClick", "children", "className", "refButton"],
14
+ _excluded2 = ["borderRadius", "borderWidth", "borderColor", "borderStyle"];
14
15
  var propTypes = {
15
16
  textStyle: PropTypes.textStyle,
16
17
  buttonStyle: PropTypes.boxStyle,
17
18
  type: PropTypes$1.oneOf(['button', 'submit']),
18
19
  disabled: PropTypes$1.bool,
19
20
  focusable: PropTypes$1.bool,
21
+ separateBorder: PropTypes$1.bool,
20
22
  onClick: PropTypes$1.func,
21
23
  children: PropTypes$1.node,
22
24
  className: PropTypes$1.string,
@@ -31,6 +33,7 @@ var defaultProps = {
31
33
  type: 'button',
32
34
  disabled: false,
33
35
  focusable: true,
36
+ separateBorder: true,
34
37
  onClick: null,
35
38
  children: null,
36
39
  className: null,
@@ -43,31 +46,62 @@ var Button = function Button(_ref) {
43
46
  type = _ref.type,
44
47
  disabled = _ref.disabled,
45
48
  focusable = _ref.focusable,
49
+ separateBorder = _ref.separateBorder,
46
50
  onClick = _ref.onClick,
47
51
  children = _ref.children,
48
52
  className = _ref.className,
49
53
  refButton = _ref.refButton,
50
54
  buttonProps = _objectWithoutProperties(_ref, _excluded);
51
55
 
52
- var finalStyle = null;
56
+ var finalStyles = null;
57
+ var borderStyles = null;
53
58
 
54
59
  if (textStyle !== null) {
55
- finalStyle = _objectSpread(_objectSpread({}, finalStyle), getStyleFromText(textStyle));
60
+ finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromText(textStyle));
56
61
  }
57
62
 
58
63
  if (buttonStyle !== null) {
59
- finalStyle = _objectSpread(_objectSpread({}, finalStyle), getStyleFromBox(buttonStyle));
64
+ finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromBox(buttonStyle));
60
65
  }
61
66
 
62
- return /*#__PURE__*/React.createElement(Button$1, Object.assign({
67
+ if (separateBorder) {
68
+ var _ref2 = finalStyles || {},
69
+ _ref2$borderRadius = _ref2.borderRadius,
70
+ borderRadius = _ref2$borderRadius === void 0 ? null : _ref2$borderRadius,
71
+ _ref2$borderWidth = _ref2.borderWidth,
72
+ borderWidth = _ref2$borderWidth === void 0 ? null : _ref2$borderWidth,
73
+ _ref2$borderColor = _ref2.borderColor,
74
+ borderColor = _ref2$borderColor === void 0 ? null : _ref2$borderColor,
75
+ _ref2$borderStyle = _ref2.borderStyle,
76
+ borderStyle = _ref2$borderStyle === void 0 ? null : _ref2$borderStyle,
77
+ otherStyles = _objectWithoutProperties(_ref2, _excluded2);
78
+
79
+ finalStyles = _objectSpread(_objectSpread({}, otherStyles), {}, {
80
+ borderRadius: borderRadius
81
+ });
82
+ borderStyles = {
83
+ borderRadius: borderRadius,
84
+ borderWidth: borderWidth,
85
+ borderColor: borderColor,
86
+ borderStyle: borderStyle // width: `calc(100% - ${borderWidth || 0}px)`,
87
+
88
+ };
89
+ }
90
+
91
+ console.log('yo');
92
+ var button = /*#__PURE__*/React.createElement(Button$1, Object.assign({
63
93
  className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
64
94
  disabled: disabled,
65
- style: finalStyle,
95
+ style: finalStyles,
66
96
  onClick: onClick,
67
97
  refButton: refButton,
68
98
  type: type,
69
99
  focusable: focusable
70
100
  }, buttonProps), children);
101
+ return borderStyles !== null ? /*#__PURE__*/React.createElement("div", {
102
+ className: styles.border,
103
+ style: borderStyles
104
+ }, button) : button;
71
105
  };
72
106
 
73
107
  Button.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -19,15 +19,17 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
19
19
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
20
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
 
22
- var styles = {"container":"micromag-element-button-container","active":"micromag-element-button-active","focus":"micromag-element-button-focus","disabled":"micromag-element-button-disabled"};
22
+ var styles = {"container":"micromag-element-button-container","active":"micromag-element-button-active","focus":"micromag-element-button-focus","disabled":"micromag-element-button-disabled","border":"micromag-element-button-border"};
23
23
 
24
- var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "onClick", "children", "className", "refButton"];
24
+ var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "separateBorder", "onClick", "children", "className", "refButton"],
25
+ _excluded2 = ["borderRadius", "borderWidth", "borderColor", "borderStyle"];
25
26
  var propTypes = {
26
27
  textStyle: core.PropTypes.textStyle,
27
28
  buttonStyle: core.PropTypes.boxStyle,
28
29
  type: PropTypes__default["default"].oneOf(['button', 'submit']),
29
30
  disabled: PropTypes__default["default"].bool,
30
31
  focusable: PropTypes__default["default"].bool,
32
+ separateBorder: PropTypes__default["default"].bool,
31
33
  onClick: PropTypes__default["default"].func,
32
34
  children: PropTypes__default["default"].node,
33
35
  className: PropTypes__default["default"].string,
@@ -42,6 +44,7 @@ var defaultProps = {
42
44
  type: 'button',
43
45
  disabled: false,
44
46
  focusable: true,
47
+ separateBorder: true,
45
48
  onClick: null,
46
49
  children: null,
47
50
  className: null,
@@ -54,31 +57,62 @@ var Button = function Button(_ref) {
54
57
  type = _ref.type,
55
58
  disabled = _ref.disabled,
56
59
  focusable = _ref.focusable,
60
+ separateBorder = _ref.separateBorder,
57
61
  onClick = _ref.onClick,
58
62
  children = _ref.children,
59
63
  className = _ref.className,
60
64
  refButton = _ref.refButton,
61
65
  buttonProps = _objectWithoutProperties__default["default"](_ref, _excluded);
62
66
 
63
- var finalStyle = null;
67
+ var finalStyles = null;
68
+ var borderStyles = null;
64
69
 
65
70
  if (textStyle !== null) {
66
- finalStyle = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyle), utils.getStyleFromText(textStyle));
71
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromText(textStyle));
67
72
  }
68
73
 
69
74
  if (buttonStyle !== null) {
70
- finalStyle = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyle), utils.getStyleFromBox(buttonStyle));
75
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromBox(buttonStyle));
71
76
  }
72
77
 
73
- return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
78
+ if (separateBorder) {
79
+ var _ref2 = finalStyles || {},
80
+ _ref2$borderRadius = _ref2.borderRadius,
81
+ borderRadius = _ref2$borderRadius === void 0 ? null : _ref2$borderRadius,
82
+ _ref2$borderWidth = _ref2.borderWidth,
83
+ borderWidth = _ref2$borderWidth === void 0 ? null : _ref2$borderWidth,
84
+ _ref2$borderColor = _ref2.borderColor,
85
+ borderColor = _ref2$borderColor === void 0 ? null : _ref2$borderColor,
86
+ _ref2$borderStyle = _ref2.borderStyle,
87
+ borderStyle = _ref2$borderStyle === void 0 ? null : _ref2$borderStyle,
88
+ otherStyles = _objectWithoutProperties__default["default"](_ref2, _excluded2);
89
+
90
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, otherStyles), {}, {
91
+ borderRadius: borderRadius
92
+ });
93
+ borderStyles = {
94
+ borderRadius: borderRadius,
95
+ borderWidth: borderWidth,
96
+ borderColor: borderColor,
97
+ borderStyle: borderStyle // width: `calc(100% - ${borderWidth || 0}px)`,
98
+
99
+ };
100
+ }
101
+
102
+ console.log('yo');
103
+ var button = /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
74
104
  className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
75
105
  disabled: disabled,
76
- style: finalStyle,
106
+ style: finalStyles,
77
107
  onClick: onClick,
78
108
  refButton: refButton,
79
109
  type: type,
80
110
  focusable: focusable
81
111
  }, buttonProps), children);
112
+ return borderStyles !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
113
+ className: styles.border,
114
+ style: borderStyles
115
+ }, button) : button;
82
116
  };
83
117
 
84
118
  Button.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-button",
3
- "version": "0.3.57",
3
+ "version": "0.3.61",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,7 +49,7 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.57",
52
+ "@micromag/core": "^0.3.61",
53
53
  "classnames": "^2.2.6",
54
54
  "prop-types": "^15.7.2",
55
55
  "react-intl": "^5.12.1",
@@ -58,5 +58,5 @@
58
58
  "publishConfig": {
59
59
  "access": "public"
60
60
  },
61
- "gitHead": "0cd1abafd1bee77d9dccbedde58f7b83f2351794"
61
+ "gitHead": "d6066e12f37c8516f07172ea225667d28dca6434"
62
62
  }