@dhis2-ui/chip 7.14.3 → 7.16.1

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/build/cjs/chip.js CHANGED
@@ -34,7 +34,11 @@ const Chip = ({
34
34
  onRemove,
35
35
  onClick,
36
36
  icon,
37
- dataTest
37
+ dataTest,
38
+ marginBottom,
39
+ marginLeft,
40
+ marginRight,
41
+ marginTop
38
42
  }) => /*#__PURE__*/_react.default.createElement("span", {
39
43
  onClick: e => {
40
44
  if (!disabled && onClick) {
@@ -42,7 +46,7 @@ const Chip = ({
42
46
  }
43
47
  },
44
48
  "data-test": dataTest,
45
- className: _style.default.dynamic([["1003369876", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
49
+ className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["2231360490", [marginBottom && `margin-bottom: ${marginBottom}px;`, marginLeft && `margin-left: ${marginLeft}px;`, marginRight && `margin-right: ${marginRight}px;`, marginTop && `margin-top: ${marginTop}px`]]]) + " " + ((0, _classnames.default)(className, {
46
50
  selected,
47
51
  dense,
48
52
  disabled,
@@ -57,13 +61,20 @@ const Chip = ({
57
61
  onRemove: onRemove,
58
62
  dataTest: `${dataTest}-remove`
59
63
  }), /*#__PURE__*/_react.default.createElement(_style.default, {
60
- id: "1003369876",
61
- dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]
62
- }, [`span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;margin:${_uiConstants.spacers.dp4};border-radius:16px;background-color:${_uiConstants.colors.grey200};font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${_uiConstants.colors.grey900};}`, ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", `span.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey300};}`, `.selected.__jsx-style-dynamic-selector{background-color:${_uiConstants.theme.secondary600};font-weight:500;}`, ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", `.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:${_uiConstants.colors.white};}`, ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]));
64
+ id: "3780556490",
65
+ dynamic: [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]
66
+ }, [`span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:${_uiConstants.colors.grey200};font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${_uiConstants.colors.grey900};}`, ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", `span.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey300};}`, `.selected.__jsx-style-dynamic-selector{background-color:${_uiConstants.theme.secondary600};font-weight:500;}`, ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", `.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:${_uiConstants.colors.white};}`, ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
67
+ id: "2231360490",
68
+ dynamic: [marginBottom && `margin-bottom: ${marginBottom}px;`, marginLeft && `margin-left: ${marginLeft}px;`, marginRight && `margin-right: ${marginRight}px;`, marginTop && `margin-top: ${marginTop}px`]
69
+ }, [`span.__jsx-style-dynamic-selector{${marginBottom && `margin-bottom: ${marginBottom}px;`} ${marginLeft && `margin-left: ${marginLeft}px;`} ${marginRight && `margin-right: ${marginRight}px;`} ${marginTop && `margin-top: ${marginTop}px`};}`]));
63
70
 
64
71
  exports.Chip = Chip;
65
72
  Chip.defaultProps = {
66
- dataTest: 'dhis2-uicore-chip'
73
+ dataTest: 'dhis2-uicore-chip',
74
+ marginBottom: 4,
75
+ marginLeft: 4,
76
+ marginRight: 4,
77
+ marginTop: 4
67
78
  };
68
79
  Chip.propTypes = {
69
80
  children: _propTypes.default.any,
@@ -73,6 +84,18 @@ Chip.propTypes = {
73
84
  disabled: _propTypes.default.bool,
74
85
  dragging: _propTypes.default.bool,
75
86
  icon: _propTypes.default.element,
87
+
88
+ /** `margin-bottom` value, applied in `px` */
89
+ marginBottom: _propTypes.default.number,
90
+
91
+ /** `margin-left` value, applied in `px` */
92
+ marginLeft: _propTypes.default.number,
93
+
94
+ /** `margin-right` value, applied in `px` */
95
+ marginRight: _propTypes.default.number,
96
+
97
+ /** `margin-top` value, applied in `px` */
98
+ marginTop: _propTypes.default.number,
76
99
  overflow: _propTypes.default.bool,
77
100
  selected: _propTypes.default.bool,
78
101
  onClick: _propTypes.default.func,
package/build/es/chip.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _JSXStyle from "styled-jsx/style";
2
- import { colors, theme, spacers } from '@dhis2/ui-constants';
2
+ import { colors, theme } from '@dhis2/ui-constants';
3
3
  import cx from 'classnames';
4
4
  import PropTypes from 'prop-types';
5
5
  import React from 'react';
@@ -18,7 +18,11 @@ const Chip = ({
18
18
  onRemove,
19
19
  onClick,
20
20
  icon,
21
- dataTest
21
+ dataTest,
22
+ marginBottom,
23
+ marginLeft,
24
+ marginRight,
25
+ marginTop
22
26
  }) => /*#__PURE__*/React.createElement("span", {
23
27
  onClick: e => {
24
28
  if (!disabled && onClick) {
@@ -26,7 +30,7 @@ const Chip = ({
26
30
  }
27
31
  },
28
32
  "data-test": dataTest,
29
- className: _JSXStyle.dynamic([["1003369876", [spacers.dp4, colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]]]) + " " + (cx(className, {
33
+ className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["2231360490", [marginBottom && `margin-bottom: ${marginBottom}px;`, marginLeft && `margin-left: ${marginLeft}px;`, marginRight && `margin-right: ${marginRight}px;`, marginTop && `margin-top: ${marginTop}px`]]]) + " " + (cx(className, {
30
34
  selected,
31
35
  dense,
32
36
  disabled,
@@ -41,12 +45,19 @@ const Chip = ({
41
45
  onRemove: onRemove,
42
46
  dataTest: `${dataTest}-remove`
43
47
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
44
- id: "1003369876",
45
- dynamic: [spacers.dp4, colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]
46
- }, [`span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;margin:${spacers.dp4};border-radius:16px;background-color:${colors.grey200};font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${colors.grey900};}`, ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", `span.__jsx-style-dynamic-selector:hover{background-color:${colors.grey300};}`, `.selected.__jsx-style-dynamic-selector{background-color:${theme.secondary600};font-weight:500;}`, ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", `.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:${colors.white};}`, ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]));
48
+ id: "3780556490",
49
+ dynamic: [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]
50
+ }, [`span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:${colors.grey200};font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${colors.grey900};}`, ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", `span.__jsx-style-dynamic-selector:hover{background-color:${colors.grey300};}`, `.selected.__jsx-style-dynamic-selector{background-color:${theme.secondary600};font-weight:500;}`, ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", `.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:${colors.white};}`, ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
51
+ id: "2231360490",
52
+ dynamic: [marginBottom && `margin-bottom: ${marginBottom}px;`, marginLeft && `margin-left: ${marginLeft}px;`, marginRight && `margin-right: ${marginRight}px;`, marginTop && `margin-top: ${marginTop}px`]
53
+ }, [`span.__jsx-style-dynamic-selector{${marginBottom && `margin-bottom: ${marginBottom}px;`} ${marginLeft && `margin-left: ${marginLeft}px;`} ${marginRight && `margin-right: ${marginRight}px;`} ${marginTop && `margin-top: ${marginTop}px`};}`]));
47
54
 
48
55
  Chip.defaultProps = {
49
- dataTest: 'dhis2-uicore-chip'
56
+ dataTest: 'dhis2-uicore-chip',
57
+ marginBottom: 4,
58
+ marginLeft: 4,
59
+ marginRight: 4,
60
+ marginTop: 4
50
61
  };
51
62
  Chip.propTypes = {
52
63
  children: PropTypes.any,
@@ -56,6 +67,18 @@ Chip.propTypes = {
56
67
  disabled: PropTypes.bool,
57
68
  dragging: PropTypes.bool,
58
69
  icon: PropTypes.element,
70
+
71
+ /** `margin-bottom` value, applied in `px` */
72
+ marginBottom: PropTypes.number,
73
+
74
+ /** `margin-left` value, applied in `px` */
75
+ marginLeft: PropTypes.number,
76
+
77
+ /** `margin-right` value, applied in `px` */
78
+ marginRight: PropTypes.number,
79
+
80
+ /** `margin-top` value, applied in `px` */
81
+ marginTop: PropTypes.number,
59
82
  overflow: PropTypes.bool,
60
83
  selected: PropTypes.bool,
61
84
  onClick: PropTypes.func,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/chip",
3
- "version": "7.14.3",
3
+ "version": "7.16.1",
4
4
  "description": "UI Chip",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@dhis2/prop-types": "^3.0.0-beta.1",
35
- "@dhis2/ui-constants": "7.14.3",
35
+ "@dhis2/ui-constants": "7.16.1",
36
36
  "classnames": "^2.3.1",
37
37
  "prop-types": "^15.7.2"
38
38
  },