@micromag/element-button 0.3.71 → 0.3.76

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 +31 -20
  3. package/lib/index.js +31 -20
  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}.micromag-element-button-border{display:inline-block}
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:block}
package/es/index.js CHANGED
@@ -10,18 +10,20 @@ import { getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
10
10
 
11
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", "separateBorder", "onClick", "children", "className", "refButton"],
14
- _excluded2 = ["borderRadius", "borderWidth", "borderColor", "borderStyle"];
13
+ var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "inline", "onClick", "children", "className", "withoutExternalBorder", "refButton"],
14
+ _excluded2 = ["body"],
15
+ _excluded3 = ["borderRadius", "borderWidth", "borderColor", "borderStyle"];
15
16
  var propTypes = {
16
17
  textStyle: PropTypes.textStyle,
17
18
  buttonStyle: PropTypes.boxStyle,
18
19
  type: PropTypes$1.oneOf(['button', 'submit']),
19
20
  disabled: PropTypes$1.bool,
20
21
  focusable: PropTypes$1.bool,
21
- separateBorder: PropTypes$1.bool,
22
+ inline: PropTypes$1.bool,
22
23
  onClick: PropTypes$1.func,
23
24
  children: PropTypes$1.node,
24
25
  className: PropTypes$1.string,
26
+ withoutExternalBorder: PropTypes$1.bool,
25
27
  refButton: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.shape({
26
28
  current: PropTypes$1.any // eslint-disable-line
27
29
 
@@ -33,10 +35,11 @@ var defaultProps = {
33
35
  type: 'button',
34
36
  disabled: false,
35
37
  focusable: true,
36
- separateBorder: true,
38
+ inline: false,
37
39
  onClick: null,
38
40
  children: null,
39
41
  className: null,
42
+ withoutExternalBorder: false,
40
43
  refButton: null
41
44
  };
42
45
 
@@ -46,35 +49,42 @@ var Button = function Button(_ref) {
46
49
  type = _ref.type,
47
50
  disabled = _ref.disabled,
48
51
  focusable = _ref.focusable,
49
- separateBorder = _ref.separateBorder,
52
+ inline = _ref.inline,
50
53
  onClick = _ref.onClick,
51
54
  children = _ref.children,
52
55
  className = _ref.className,
56
+ withoutExternalBorder = _ref.withoutExternalBorder,
53
57
  refButton = _ref.refButton,
54
58
  buttonProps = _objectWithoutProperties(_ref, _excluded);
55
59
 
56
60
  var finalStyles = null;
57
- var borderStyles = null;
61
+ var borderStyles = null; // eslint-disable-next-line no-unused-vars
62
+
63
+ var _ref2 = buttonProps || {};
64
+ _ref2.body;
65
+ var otherProps = _objectWithoutProperties(_ref2, _excluded2);
58
66
 
59
67
  if (textStyle !== null) {
60
68
  finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromText(textStyle));
61
69
  }
62
70
 
63
71
  if (buttonStyle !== null) {
64
- finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromBox(buttonStyle));
72
+ finalStyles = _objectSpread(_objectSpread(_objectSpread({}, finalStyles), getStyleFromBox(buttonStyle)), {}, {
73
+ display: withoutExternalBorder && inline ? 'inline-block' : null
74
+ });
65
75
  }
66
76
 
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);
77
+ if (!withoutExternalBorder) {
78
+ var _ref3 = finalStyles || {},
79
+ _ref3$borderRadius = _ref3.borderRadius,
80
+ borderRadius = _ref3$borderRadius === void 0 ? null : _ref3$borderRadius,
81
+ _ref3$borderWidth = _ref3.borderWidth,
82
+ borderWidth = _ref3$borderWidth === void 0 ? null : _ref3$borderWidth,
83
+ _ref3$borderColor = _ref3.borderColor,
84
+ borderColor = _ref3$borderColor === void 0 ? null : _ref3$borderColor,
85
+ _ref3$borderStyle = _ref3.borderStyle,
86
+ borderStyle = _ref3$borderStyle === void 0 ? null : _ref3$borderStyle,
87
+ otherStyles = _objectWithoutProperties(_ref3, _excluded3);
78
88
 
79
89
  finalStyles = _objectSpread(_objectSpread({}, otherStyles), {}, {
80
90
  borderRadius: borderRadius
@@ -83,7 +93,8 @@ var Button = function Button(_ref) {
83
93
  borderRadius: borderRadius + borderWidth,
84
94
  borderWidth: borderWidth,
85
95
  borderColor: borderColor,
86
- borderStyle: borderStyle // width: `calc(100% - ${borderWidth || 0}px)`,
96
+ borderStyle: borderStyle,
97
+ display: inline ? 'inline-block' : null // width: `calc(100% - ${borderWidth || 0}px)`,
87
98
 
88
99
  };
89
100
  }
@@ -96,7 +107,7 @@ var Button = function Button(_ref) {
96
107
  refButton: refButton,
97
108
  type: type,
98
109
  focusable: focusable
99
- }, buttonProps), children);
110
+ }, otherProps), children);
100
111
  return borderStyles !== null ? /*#__PURE__*/React.createElement("div", {
101
112
  className: styles.border,
102
113
  style: borderStyles
package/lib/index.js CHANGED
@@ -21,18 +21,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
 
22
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", "separateBorder", "onClick", "children", "className", "refButton"],
25
- _excluded2 = ["borderRadius", "borderWidth", "borderColor", "borderStyle"];
24
+ var _excluded = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "inline", "onClick", "children", "className", "withoutExternalBorder", "refButton"],
25
+ _excluded2 = ["body"],
26
+ _excluded3 = ["borderRadius", "borderWidth", "borderColor", "borderStyle"];
26
27
  var propTypes = {
27
28
  textStyle: core.PropTypes.textStyle,
28
29
  buttonStyle: core.PropTypes.boxStyle,
29
30
  type: PropTypes__default["default"].oneOf(['button', 'submit']),
30
31
  disabled: PropTypes__default["default"].bool,
31
32
  focusable: PropTypes__default["default"].bool,
32
- separateBorder: PropTypes__default["default"].bool,
33
+ inline: PropTypes__default["default"].bool,
33
34
  onClick: PropTypes__default["default"].func,
34
35
  children: PropTypes__default["default"].node,
35
36
  className: PropTypes__default["default"].string,
37
+ withoutExternalBorder: PropTypes__default["default"].bool,
36
38
  refButton: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
37
39
  current: PropTypes__default["default"].any // eslint-disable-line
38
40
 
@@ -44,10 +46,11 @@ var defaultProps = {
44
46
  type: 'button',
45
47
  disabled: false,
46
48
  focusable: true,
47
- separateBorder: true,
49
+ inline: false,
48
50
  onClick: null,
49
51
  children: null,
50
52
  className: null,
53
+ withoutExternalBorder: false,
51
54
  refButton: null
52
55
  };
53
56
 
@@ -57,35 +60,42 @@ var Button = function Button(_ref) {
57
60
  type = _ref.type,
58
61
  disabled = _ref.disabled,
59
62
  focusable = _ref.focusable,
60
- separateBorder = _ref.separateBorder,
63
+ inline = _ref.inline,
61
64
  onClick = _ref.onClick,
62
65
  children = _ref.children,
63
66
  className = _ref.className,
67
+ withoutExternalBorder = _ref.withoutExternalBorder,
64
68
  refButton = _ref.refButton,
65
69
  buttonProps = _objectWithoutProperties__default["default"](_ref, _excluded);
66
70
 
67
71
  var finalStyles = null;
68
- var borderStyles = null;
72
+ var borderStyles = null; // eslint-disable-next-line no-unused-vars
73
+
74
+ var _ref2 = buttonProps || {};
75
+ _ref2.body;
76
+ var otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded2);
69
77
 
70
78
  if (textStyle !== null) {
71
79
  finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromText(textStyle));
72
80
  }
73
81
 
74
82
  if (buttonStyle !== null) {
75
- finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromBox(buttonStyle));
83
+ finalStyles = _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromBox(buttonStyle)), {}, {
84
+ display: withoutExternalBorder && inline ? 'inline-block' : null
85
+ });
76
86
  }
77
87
 
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);
88
+ if (!withoutExternalBorder) {
89
+ var _ref3 = finalStyles || {},
90
+ _ref3$borderRadius = _ref3.borderRadius,
91
+ borderRadius = _ref3$borderRadius === void 0 ? null : _ref3$borderRadius,
92
+ _ref3$borderWidth = _ref3.borderWidth,
93
+ borderWidth = _ref3$borderWidth === void 0 ? null : _ref3$borderWidth,
94
+ _ref3$borderColor = _ref3.borderColor,
95
+ borderColor = _ref3$borderColor === void 0 ? null : _ref3$borderColor,
96
+ _ref3$borderStyle = _ref3.borderStyle,
97
+ borderStyle = _ref3$borderStyle === void 0 ? null : _ref3$borderStyle,
98
+ otherStyles = _objectWithoutProperties__default["default"](_ref3, _excluded3);
89
99
 
90
100
  finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, otherStyles), {}, {
91
101
  borderRadius: borderRadius
@@ -94,7 +104,8 @@ var Button = function Button(_ref) {
94
104
  borderRadius: borderRadius + borderWidth,
95
105
  borderWidth: borderWidth,
96
106
  borderColor: borderColor,
97
- borderStyle: borderStyle // width: `calc(100% - ${borderWidth || 0}px)`,
107
+ borderStyle: borderStyle,
108
+ display: inline ? 'inline-block' : null // width: `calc(100% - ${borderWidth || 0}px)`,
98
109
 
99
110
  };
100
111
  }
@@ -107,7 +118,7 @@ var Button = function Button(_ref) {
107
118
  refButton: refButton,
108
119
  type: type,
109
120
  focusable: focusable
110
- }, buttonProps), children);
121
+ }, otherProps), children);
111
122
  return borderStyles !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
112
123
  className: styles.border,
113
124
  style: borderStyles
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-button",
3
- "version": "0.3.71",
3
+ "version": "0.3.76",
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.71",
52
+ "@micromag/core": "^0.3.74",
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": "50093d0adc731dfb58656015179c4ac0b1c6765f"
61
+ "gitHead": "c86e3ead134f626899cfdfc34fac84eb1d02864a"
62
62
  }