@dhis2-ui/chip 8.1.10 → 8.2.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 +44 -41
- package/build/cjs/chip.stories.js +10 -23
- package/build/cjs/content.js +13 -10
- package/build/cjs/icon.js +7 -5
- package/build/cjs/remove.js +13 -10
- package/build/es/chip.js +44 -41
- package/build/es/chip.stories.js +9 -22
- package/build/es/content.js +13 -10
- package/build/es/icon.js +7 -5
- package/build/es/remove.js +13 -10
- package/package.json +2 -2
package/build/cjs/chip.js
CHANGED
|
@@ -23,50 +23,53 @@ var _remove = require("./remove.js");
|
|
|
23
23
|
|
|
24
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
25
|
|
|
26
|
-
const Chip =
|
|
27
|
-
|
|
28
|
-
dense,
|
|
29
|
-
disabled,
|
|
30
|
-
dragging,
|
|
31
|
-
overflow,
|
|
32
|
-
className,
|
|
33
|
-
children,
|
|
34
|
-
onRemove,
|
|
35
|
-
onClick,
|
|
36
|
-
icon,
|
|
37
|
-
dataTest,
|
|
38
|
-
marginBottom,
|
|
39
|
-
marginLeft,
|
|
40
|
-
marginRight,
|
|
41
|
-
marginTop
|
|
42
|
-
}) => /*#__PURE__*/_react.default.createElement("span", {
|
|
43
|
-
onClick: e => {
|
|
44
|
-
if (!disabled && onClick) {
|
|
45
|
-
onClick({}, e);
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
"data-test": dataTest,
|
|
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, {
|
|
26
|
+
const Chip = _ref => {
|
|
27
|
+
let {
|
|
50
28
|
selected,
|
|
51
29
|
dense,
|
|
52
30
|
disabled,
|
|
53
|
-
dragging
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
},
|
|
31
|
+
dragging,
|
|
32
|
+
overflow,
|
|
33
|
+
className,
|
|
34
|
+
children,
|
|
35
|
+
onRemove,
|
|
36
|
+
onClick,
|
|
37
|
+
icon,
|
|
38
|
+
dataTest,
|
|
39
|
+
marginBottom,
|
|
40
|
+
marginLeft,
|
|
41
|
+
marginRight,
|
|
42
|
+
marginTop
|
|
43
|
+
} = _ref;
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
45
|
+
onClick: e => {
|
|
46
|
+
if (!disabled && onClick) {
|
|
47
|
+
onClick({}, e);
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"data-test": dataTest,
|
|
51
|
+
className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["2231360490", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + ((0, _classnames.default)(className, {
|
|
52
|
+
selected,
|
|
53
|
+
dense,
|
|
54
|
+
disabled,
|
|
55
|
+
dragging
|
|
56
|
+
}) || "")
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement(_icon.Icon, {
|
|
58
|
+
icon: icon,
|
|
59
|
+
dataTest: "".concat(dataTest, "-icon")
|
|
60
|
+
}), /*#__PURE__*/_react.default.createElement(_content.Content, {
|
|
61
|
+
overflow: overflow
|
|
62
|
+
}, children), /*#__PURE__*/_react.default.createElement(_remove.Remove, {
|
|
63
|
+
onRemove: onRemove,
|
|
64
|
+
dataTest: "".concat(dataTest, "-remove")
|
|
65
|
+
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
66
|
+
id: "3780556490",
|
|
67
|
+
dynamic: [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]
|
|
68
|
+
}, ["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:".concat(_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:").concat(_uiConstants.colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(_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:".concat(_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, {
|
|
69
|
+
id: "2231360490",
|
|
70
|
+
dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
|
|
71
|
+
}, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-left: ".concat(marginLeft, "px;"), " ").concat(marginRight && "margin-right: ".concat(marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
|
|
72
|
+
};
|
|
70
73
|
|
|
71
74
|
exports.Chip = Chip;
|
|
72
75
|
Chip.defaultProps = {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.Selected = exports.Removable = exports.Overflow = exports.IconContent = exports.Icon = exports.DenseRemoveable = exports.Dense = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -13,25 +13,8 @@ var _chip = require("./chip.js");
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
const subtitle =
|
|
17
|
-
const description =
|
|
18
|
-
Chips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.
|
|
19
|
-
See an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).
|
|
20
|
-
|
|
21
|
-
#### Chip vs. Button
|
|
22
|
-
|
|
23
|
-
Chips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.
|
|
24
|
-
|
|
25
|
-
#### Displaying chips
|
|
26
|
-
|
|
27
|
-
- Chips should be displayed in a horizontal list, where space permits.
|
|
28
|
-
- Do not stack single chips on top of one another if there is space to display them inline.
|
|
29
|
-
- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.
|
|
30
|
-
|
|
31
|
-
\`\`\`js
|
|
32
|
-
import { Chip } from '@dhis2/ui'
|
|
33
|
-
\`\`\`
|
|
34
|
-
`;
|
|
16
|
+
const subtitle = "Chips are useful for displaying a selection of defined choices and filters to the user.";
|
|
17
|
+
const description = "\nChips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.\nSee an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).\n\n#### Chip vs. Button\n\nChips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.\n\n#### Displaying chips\n\n- Chips should be displayed in a horizontal list, where space permits.\n- Do not stack single chips on top of one another if there is space to display them inline.\n- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.\n\n```js\nimport { Chip } from '@dhis2/ui'\n```\n";
|
|
35
18
|
|
|
36
19
|
window.onClick = (payload, event) => {
|
|
37
20
|
console.log('onClick payload', payload);
|
|
@@ -43,12 +26,16 @@ window.onRemove = (payload, event) => {
|
|
|
43
26
|
console.log('onRemove event', event);
|
|
44
27
|
};
|
|
45
28
|
|
|
46
|
-
const onClick = (
|
|
29
|
+
const onClick = function () {
|
|
30
|
+
return window.onClick(...arguments);
|
|
31
|
+
};
|
|
47
32
|
|
|
48
|
-
const onRemove = (
|
|
33
|
+
const onRemove = function () {
|
|
34
|
+
return window.onRemove(...arguments);
|
|
35
|
+
};
|
|
49
36
|
|
|
50
37
|
var _default = {
|
|
51
|
-
title: '
|
|
38
|
+
title: 'Chip',
|
|
52
39
|
component: _chip.Chip,
|
|
53
40
|
parameters: {
|
|
54
41
|
componentSubtitle: subtitle,
|
package/build/cjs/content.js
CHANGED
|
@@ -17,17 +17,20 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const Content =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}) => /*#__PURE__*/_react.default.createElement("span", {
|
|
24
|
-
className: _style.default.dynamic([["765109298", [_uiConstants.spacers.dp12]]]) + " " + ((0, _classnames.default)({
|
|
20
|
+
const Content = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
25
23
|
overflow
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
26
|
+
className: _style.default.dynamic([["765109298", [_uiConstants.spacers.dp12]]]) + " " + ((0, _classnames.default)({
|
|
27
|
+
overflow
|
|
28
|
+
}) || "")
|
|
29
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
30
|
+
id: "765109298",
|
|
31
|
+
dynamic: [_uiConstants.spacers.dp12]
|
|
32
|
+
}, ["span.__jsx-style-dynamic-selector{margin:0 ".concat(_uiConstants.spacers.dp12, ";color:inherit;white-space:nowrap;}"), ".overflow.__jsx-style-dynamic-selector{max-width:150px;overflow:hidden;text-overflow:ellipsis;}"]));
|
|
33
|
+
};
|
|
31
34
|
|
|
32
35
|
exports.Content = Content;
|
|
33
36
|
Content.propTypes = {
|
package/build/cjs/icon.js
CHANGED
|
@@ -15,10 +15,12 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const Icon =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
const Icon = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
icon,
|
|
21
|
+
dataTest
|
|
22
|
+
} = _ref;
|
|
23
|
+
|
|
22
24
|
if (!icon) {
|
|
23
25
|
return null;
|
|
24
26
|
}
|
|
@@ -29,7 +31,7 @@ const Icon = ({
|
|
|
29
31
|
}, icon, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
30
32
|
id: "2159848327",
|
|
31
33
|
dynamic: [_uiConstants.spacers.dp4]
|
|
32
|
-
}, [
|
|
34
|
+
}, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-left:".concat(_uiConstants.spacers.dp4, ";margin-right:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
|
|
33
35
|
};
|
|
34
36
|
|
|
35
37
|
exports.Icon = Icon;
|
package/build/cjs/remove.js
CHANGED
|
@@ -15,9 +15,10 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
function CancelOutline({
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
function CancelOutline(_ref) {
|
|
19
|
+
let {
|
|
20
|
+
className
|
|
21
|
+
} = _ref;
|
|
21
22
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
22
23
|
xmlns: "http://www.w3.org/2000/svg",
|
|
23
24
|
viewBox: "0 0 16 16",
|
|
@@ -33,19 +34,21 @@ function CancelOutline({
|
|
|
33
34
|
CancelOutline.propTypes = {
|
|
34
35
|
className: _propTypes.default.string
|
|
35
36
|
};
|
|
36
|
-
const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}",
|
|
37
|
+
const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}", "span.jsx-1924786287:hover{background:".concat(_uiConstants.colors.grey400, ";}")];
|
|
37
38
|
containerStyle.__hash = "1924786287";
|
|
38
39
|
const removeIcon = {
|
|
39
40
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
41
|
id: "2658726446"
|
|
41
|
-
}, [
|
|
42
|
+
}, ["svg.jsx-2658726446{fill:".concat(_uiConstants.colors.grey600, ";height:16px;width:16px;cursor:pointer;opacity:1;pointer-events:all;}")]),
|
|
42
43
|
className: "jsx-2658726446"
|
|
43
44
|
};
|
|
44
45
|
|
|
45
|
-
const Remove =
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
const Remove = _ref2 => {
|
|
47
|
+
let {
|
|
48
|
+
onRemove,
|
|
49
|
+
dataTest
|
|
50
|
+
} = _ref2;
|
|
51
|
+
|
|
49
52
|
if (!onRemove) {
|
|
50
53
|
return null;
|
|
51
54
|
}
|
|
@@ -57,7 +60,7 @@ const Remove = ({
|
|
|
57
60
|
onRemove({}, e);
|
|
58
61
|
},
|
|
59
62
|
"data-test": dataTest,
|
|
60
|
-
className:
|
|
63
|
+
className: "jsx-".concat(containerStyle.__hash)
|
|
61
64
|
}, /*#__PURE__*/_react.default.createElement(CancelOutline, {
|
|
62
65
|
className: removeIcon.className
|
|
63
66
|
}), removeIcon.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
|
package/build/es/chip.js
CHANGED
|
@@ -7,50 +7,53 @@ import { Content } from './content.js';
|
|
|
7
7
|
import { Icon } from './icon.js';
|
|
8
8
|
import { Remove } from './remove.js';
|
|
9
9
|
|
|
10
|
-
const Chip =
|
|
11
|
-
|
|
12
|
-
dense,
|
|
13
|
-
disabled,
|
|
14
|
-
dragging,
|
|
15
|
-
overflow,
|
|
16
|
-
className,
|
|
17
|
-
children,
|
|
18
|
-
onRemove,
|
|
19
|
-
onClick,
|
|
20
|
-
icon,
|
|
21
|
-
dataTest,
|
|
22
|
-
marginBottom,
|
|
23
|
-
marginLeft,
|
|
24
|
-
marginRight,
|
|
25
|
-
marginTop
|
|
26
|
-
}) => /*#__PURE__*/React.createElement("span", {
|
|
27
|
-
onClick: e => {
|
|
28
|
-
if (!disabled && onClick) {
|
|
29
|
-
onClick({}, e);
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
"data-test": dataTest,
|
|
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, {
|
|
10
|
+
const Chip = _ref => {
|
|
11
|
+
let {
|
|
34
12
|
selected,
|
|
35
13
|
dense,
|
|
36
14
|
disabled,
|
|
37
|
-
dragging
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
},
|
|
15
|
+
dragging,
|
|
16
|
+
overflow,
|
|
17
|
+
className,
|
|
18
|
+
children,
|
|
19
|
+
onRemove,
|
|
20
|
+
onClick,
|
|
21
|
+
icon,
|
|
22
|
+
dataTest,
|
|
23
|
+
marginBottom,
|
|
24
|
+
marginLeft,
|
|
25
|
+
marginRight,
|
|
26
|
+
marginTop
|
|
27
|
+
} = _ref;
|
|
28
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
29
|
+
onClick: e => {
|
|
30
|
+
if (!disabled && onClick) {
|
|
31
|
+
onClick({}, e);
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"data-test": dataTest,
|
|
35
|
+
className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["2231360490", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + (cx(className, {
|
|
36
|
+
selected,
|
|
37
|
+
dense,
|
|
38
|
+
disabled,
|
|
39
|
+
dragging
|
|
40
|
+
}) || "")
|
|
41
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
42
|
+
icon: icon,
|
|
43
|
+
dataTest: "".concat(dataTest, "-icon")
|
|
44
|
+
}), /*#__PURE__*/React.createElement(Content, {
|
|
45
|
+
overflow: overflow
|
|
46
|
+
}, children), /*#__PURE__*/React.createElement(Remove, {
|
|
47
|
+
onRemove: onRemove,
|
|
48
|
+
dataTest: "".concat(dataTest, "-remove")
|
|
49
|
+
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
50
|
+
id: "3780556490",
|
|
51
|
+
dynamic: [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]
|
|
52
|
+
}, ["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:".concat(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:").concat(colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(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:".concat(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, {
|
|
53
|
+
id: "2231360490",
|
|
54
|
+
dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
|
|
55
|
+
}, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-left: ".concat(marginLeft, "px;"), " ").concat(marginRight && "margin-right: ".concat(marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
|
|
56
|
+
};
|
|
54
57
|
|
|
55
58
|
Chip.defaultProps = {
|
|
56
59
|
dataTest: 'dhis2-uicore-chip',
|
package/build/es/chip.stories.js
CHANGED
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Chip } from './chip.js';
|
|
4
|
-
const subtitle =
|
|
5
|
-
const description =
|
|
6
|
-
Chips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.
|
|
7
|
-
See an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).
|
|
8
|
-
|
|
9
|
-
#### Chip vs. Button
|
|
10
|
-
|
|
11
|
-
Chips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.
|
|
12
|
-
|
|
13
|
-
#### Displaying chips
|
|
14
|
-
|
|
15
|
-
- Chips should be displayed in a horizontal list, where space permits.
|
|
16
|
-
- Do not stack single chips on top of one another if there is space to display them inline.
|
|
17
|
-
- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.
|
|
18
|
-
|
|
19
|
-
\`\`\`js
|
|
20
|
-
import { Chip } from '@dhis2/ui'
|
|
21
|
-
\`\`\`
|
|
22
|
-
`;
|
|
4
|
+
const subtitle = "Chips are useful for displaying a selection of defined choices and filters to the user.";
|
|
5
|
+
const description = "\nChips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.\nSee an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).\n\n#### Chip vs. Button\n\nChips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.\n\n#### Displaying chips\n\n- Chips should be displayed in a horizontal list, where space permits.\n- Do not stack single chips on top of one another if there is space to display them inline.\n- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.\n\n```js\nimport { Chip } from '@dhis2/ui'\n```\n";
|
|
23
6
|
|
|
24
7
|
window.onClick = (payload, event) => {
|
|
25
8
|
console.log('onClick payload', payload);
|
|
@@ -31,12 +14,16 @@ window.onRemove = (payload, event) => {
|
|
|
31
14
|
console.log('onRemove event', event);
|
|
32
15
|
};
|
|
33
16
|
|
|
34
|
-
const onClick = (
|
|
17
|
+
const onClick = function () {
|
|
18
|
+
return window.onClick(...arguments);
|
|
19
|
+
};
|
|
35
20
|
|
|
36
|
-
const onRemove = (
|
|
21
|
+
const onRemove = function () {
|
|
22
|
+
return window.onRemove(...arguments);
|
|
23
|
+
};
|
|
37
24
|
|
|
38
25
|
export default {
|
|
39
|
-
title: '
|
|
26
|
+
title: 'Chip',
|
|
40
27
|
component: Chip,
|
|
41
28
|
parameters: {
|
|
42
29
|
componentSubtitle: subtitle,
|
package/build/es/content.js
CHANGED
|
@@ -3,17 +3,20 @@ import { spacers } from '@dhis2/ui-constants';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
6
|
-
export const Content =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}) => /*#__PURE__*/React.createElement("span", {
|
|
10
|
-
className: _JSXStyle.dynamic([["765109298", [spacers.dp12]]]) + " " + (cx({
|
|
6
|
+
export const Content = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
children,
|
|
11
9
|
overflow
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
10
|
+
} = _ref;
|
|
11
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
12
|
+
className: _JSXStyle.dynamic([["765109298", [spacers.dp12]]]) + " " + (cx({
|
|
13
|
+
overflow
|
|
14
|
+
}) || "")
|
|
15
|
+
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
16
|
+
id: "765109298",
|
|
17
|
+
dynamic: [spacers.dp12]
|
|
18
|
+
}, ["span.__jsx-style-dynamic-selector{margin:0 ".concat(spacers.dp12, ";color:inherit;white-space:nowrap;}"), ".overflow.__jsx-style-dynamic-selector{max-width:150px;overflow:hidden;text-overflow:ellipsis;}"]));
|
|
19
|
+
};
|
|
17
20
|
Content.propTypes = {
|
|
18
21
|
children: PropTypes.any,
|
|
19
22
|
overflow: PropTypes.bool
|
package/build/es/icon.js
CHANGED
|
@@ -2,10 +2,12 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
2
2
|
import { spacers } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
export const Icon =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
export const Icon = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
icon,
|
|
8
|
+
dataTest
|
|
9
|
+
} = _ref;
|
|
10
|
+
|
|
9
11
|
if (!icon) {
|
|
10
12
|
return null;
|
|
11
13
|
}
|
|
@@ -16,7 +18,7 @@ export const Icon = ({
|
|
|
16
18
|
}, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
17
19
|
id: "2159848327",
|
|
18
20
|
dynamic: [spacers.dp4]
|
|
19
|
-
}, [
|
|
21
|
+
}, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-left:".concat(spacers.dp4, ";margin-right:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
|
|
20
22
|
};
|
|
21
23
|
Icon.propTypes = {
|
|
22
24
|
dataTest: PropTypes.string.isRequired,
|
package/build/es/remove.js
CHANGED
|
@@ -3,9 +3,10 @@ import { colors } from '@dhis2/ui-constants';
|
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
|
|
6
|
-
function CancelOutline({
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function CancelOutline(_ref) {
|
|
7
|
+
let {
|
|
8
|
+
className
|
|
9
|
+
} = _ref;
|
|
9
10
|
return /*#__PURE__*/React.createElement("svg", {
|
|
10
11
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11
12
|
viewBox: "0 0 16 16",
|
|
@@ -21,18 +22,20 @@ function CancelOutline({
|
|
|
21
22
|
CancelOutline.propTypes = {
|
|
22
23
|
className: PropTypes.string
|
|
23
24
|
};
|
|
24
|
-
const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}",
|
|
25
|
+
const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}", "span.jsx-1924786287:hover{background:".concat(colors.grey400, ";}")];
|
|
25
26
|
containerStyle.__hash = "1924786287";
|
|
26
27
|
const removeIcon = {
|
|
27
28
|
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
28
29
|
id: "2658726446"
|
|
29
|
-
}, [
|
|
30
|
+
}, ["svg.jsx-2658726446{fill:".concat(colors.grey600, ";height:16px;width:16px;cursor:pointer;opacity:1;pointer-events:all;}")]),
|
|
30
31
|
className: "jsx-2658726446"
|
|
31
32
|
};
|
|
32
|
-
export const Remove =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
export const Remove = _ref2 => {
|
|
34
|
+
let {
|
|
35
|
+
onRemove,
|
|
36
|
+
dataTest
|
|
37
|
+
} = _ref2;
|
|
38
|
+
|
|
36
39
|
if (!onRemove) {
|
|
37
40
|
return null;
|
|
38
41
|
}
|
|
@@ -44,7 +47,7 @@ export const Remove = ({
|
|
|
44
47
|
onRemove({}, e);
|
|
45
48
|
},
|
|
46
49
|
"data-test": dataTest,
|
|
47
|
-
className:
|
|
50
|
+
className: "jsx-".concat(containerStyle.__hash)
|
|
48
51
|
}, /*#__PURE__*/React.createElement(CancelOutline, {
|
|
49
52
|
className: removeIcon.className
|
|
50
53
|
}), removeIcon.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/chip",
|
|
3
|
-
"version": "8.1
|
|
3
|
+
"version": "8.2.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": "8.1
|
|
35
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"prop-types": "^15.7.2"
|
|
38
38
|
},
|