@dhis2-ui/radio 8.2.0 → 8.2.3
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/radio-icons.js +19 -17
- package/build/cjs/radio.js +3 -3
- package/build/cjs/radio.stories.js +13 -25
- package/build/es/radio-icons.js +18 -16
- package/build/es/radio.js +3 -3
- package/build/es/radio.stories.js +12 -24
- package/package.json +2 -2
package/build/cjs/radio-icons.js
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.RadioRegular = RadioRegular;
|
|
7
6
|
exports.RadioDense = RadioDense;
|
|
7
|
+
exports.RadioRegular = RadioRegular;
|
|
8
8
|
|
|
9
9
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
10
10
|
|
|
@@ -16,29 +16,30 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
16
16
|
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
|
|
19
|
-
const styles = ["svg.jsx-1631270792{display:block;pointer-events:none;}",
|
|
19
|
+
const styles = ["svg.jsx-1631270792{display:block;pointer-events:none;}", "svg.jsx-1631270792{fill:".concat(_uiConstants.theme.default, ";}"), "circle.background.jsx-1631270792{fill:".concat(_uiConstants.colors.white, ";}"), "svg.checked.jsx-1631270792{fill:".concat(_uiConstants.colors.teal400, ";}"), "svg.disabled.jsx-1631270792{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.error.jsx-1631270792{fill:".concat(_uiConstants.theme.error, ";}"), "svg.valid.jsx-1631270792{fill:".concat(_uiConstants.theme.valid, ";}"), "svg.warning.jsx-1631270792{fill:".concat(_uiConstants.theme.warning, ";}"), "svg.jsx-1631270792:not(.checked) .inner.jsx-1631270792,svg.jsx-1631270792:not(.checked) .outer.checked.jsx-1631270792{fill:none;}"];
|
|
20
20
|
styles.__hash = "1631270792";
|
|
21
21
|
|
|
22
|
-
function RadioRegular({
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
function RadioRegular(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
className
|
|
25
|
+
} = _ref;
|
|
25
26
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
26
27
|
xmlns: "http://www.w3.org/2000/svg",
|
|
27
28
|
viewBox: "0 0 18 18",
|
|
28
|
-
className: "jsx-1260643562 " +
|
|
29
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + (className || "")
|
|
29
30
|
}, /*#__PURE__*/_react.default.createElement("circle", {
|
|
30
31
|
cx: "9",
|
|
31
32
|
cy: "9",
|
|
32
33
|
r: "9",
|
|
33
|
-
className: "jsx-1260643562 " +
|
|
34
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "background"
|
|
34
35
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
35
36
|
d: "M9,18 C13.9705627,18 18,13.9705627 18,9 C18,4.02943725 13.9705627,0 9,0 C4.02943725,0 0,4.02943725 0,9 C0,13.9705627 4.02943725,18 9,18 Z M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z",
|
|
36
|
-
className: "jsx-1260643562 " +
|
|
37
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "outer"
|
|
37
38
|
}), /*#__PURE__*/_react.default.createElement("circle", {
|
|
38
39
|
cx: "9",
|
|
39
40
|
cy: "9",
|
|
40
41
|
r: "5",
|
|
41
|
-
className: "jsx-1260643562 " +
|
|
42
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "inner"
|
|
42
43
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
43
44
|
id: "1260643562"
|
|
44
45
|
}, ["svg.jsx-1260643562{height:18px;width:18px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
@@ -50,29 +51,30 @@ RadioRegular.propTypes = {
|
|
|
50
51
|
className: _propTypes.default.string
|
|
51
52
|
};
|
|
52
53
|
|
|
53
|
-
function RadioDense({
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
function RadioDense(_ref2) {
|
|
55
|
+
let {
|
|
56
|
+
className
|
|
57
|
+
} = _ref2;
|
|
56
58
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
57
59
|
xmlns: "http://www.w3.org/2000/svg",
|
|
58
60
|
viewBox: "0 0 14 14",
|
|
59
|
-
className: "jsx-1659897952 " +
|
|
61
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + (className || "")
|
|
60
62
|
}, /*#__PURE__*/_react.default.createElement("circle", {
|
|
61
63
|
cx: "7",
|
|
62
64
|
cy: "7",
|
|
63
65
|
r: "7",
|
|
64
|
-
className: "jsx-1659897952 " +
|
|
66
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "background"
|
|
65
67
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
66
68
|
d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,13 C3.6862915,13 1,10.3137085 1,7 C1,3.6862915 3.6862915,1 7,1 C10.3137085,1 13,3.6862915 13,7 C13,10.3137085 10.3137085,13 7,13 Z",
|
|
67
|
-
className: "jsx-1659897952 " +
|
|
69
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer unchecked"
|
|
68
70
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
69
71
|
d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,12 C4.23857625,12 2,9.76142375 2,7 C2,4.23857625 4.23857625,2 7,2 C9.76142375,2 12,4.23857625 12,7 C12,9.76142375 9.76142375,12 7,12 Z",
|
|
70
|
-
className: "jsx-1659897952 " +
|
|
72
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer checked"
|
|
71
73
|
}), /*#__PURE__*/_react.default.createElement("circle", {
|
|
72
74
|
cx: "7",
|
|
73
75
|
cy: "7",
|
|
74
76
|
r: "3",
|
|
75
|
-
className: "jsx-1659897952 " +
|
|
77
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "inner"
|
|
76
78
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
77
79
|
id: "1659897952"
|
|
78
80
|
}, ["svg.jsx-1659897952{height:14px;width:14px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
|
package/build/cjs/radio.js
CHANGED
|
@@ -26,8 +26,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
26
26
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
27
|
|
|
28
28
|
class Radio extends _react.Component {
|
|
29
|
-
constructor(
|
|
30
|
-
super(...
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
31
|
|
|
32
32
|
_defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
|
|
33
33
|
|
|
@@ -115,7 +115,7 @@ class Radio extends _react.Component {
|
|
|
115
115
|
})), label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
116
116
|
id: "2846929804",
|
|
117
117
|
dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, label ? '5px' : 0, _uiConstants.theme.focus]
|
|
118
|
-
}, [
|
|
118
|
+
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:".concat(_uiConstants.colors.grey900, ";font-size:16px;line-height:20px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(_uiConstants.theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:".concat(label ? '5px' : 0, ";border:2px solid transparent;padding:1px;border-radius:50%;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}")]));
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.NoLabel = exports.ImageLabelDense = exports.ImageLabel = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -15,26 +15,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
|
|
18
|
-
const subtitle =
|
|
19
|
-
const description =
|
|
20
|
-
Radio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.
|
|
21
|
-
|
|
22
|
-
Do not use a radio button if only a single option is available; use a Checkbox here instead.
|
|
23
|
-
|
|
24
|
-
If there are many options that need to select from, consider using a Select instead.
|
|
25
|
-
|
|
26
|
-
#### Size
|
|
27
|
-
|
|
28
|
-
Radio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.
|
|
29
|
-
|
|
30
|
-
#### See more
|
|
31
|
-
|
|
32
|
-
Learn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).
|
|
33
|
-
|
|
34
|
-
\`\`\`js
|
|
35
|
-
import { Radio } from '@dhis2/ui'
|
|
36
|
-
\`\`\`
|
|
37
|
-
`;
|
|
18
|
+
const subtitle = "A control that allows a user to select a single option from a choice of several";
|
|
19
|
+
const description = "\nRadio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.\n\nDo not use a radio button if only a single option is available; use a Checkbox here instead.\n\nIf there are many options that need to select from, consider using a Select instead.\n\n#### Size\n\nRadio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.\n\n#### See more\n\nLearn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).\n\n```js\nimport { Radio } from '@dhis2/ui'\n```\n";
|
|
38
20
|
|
|
39
21
|
window.onChange = (payload, event) => {
|
|
40
22
|
console.log('onChange payload', payload);
|
|
@@ -51,14 +33,20 @@ window.onBlur = (payload, event) => {
|
|
|
51
33
|
console.log('onBlur event', event);
|
|
52
34
|
};
|
|
53
35
|
|
|
54
|
-
const onChange = (
|
|
36
|
+
const onChange = function () {
|
|
37
|
+
return window.onChange(...arguments);
|
|
38
|
+
};
|
|
55
39
|
|
|
56
|
-
const onFocus = (
|
|
40
|
+
const onFocus = function () {
|
|
41
|
+
return window.onFocus(...arguments);
|
|
42
|
+
};
|
|
57
43
|
|
|
58
|
-
const onBlur = (
|
|
44
|
+
const onBlur = function () {
|
|
45
|
+
return window.onBlur(...arguments);
|
|
46
|
+
};
|
|
59
47
|
|
|
60
48
|
var _default = {
|
|
61
|
-
title: '
|
|
49
|
+
title: 'Radio',
|
|
62
50
|
component: _radio.Radio,
|
|
63
51
|
parameters: {
|
|
64
52
|
componentSubtitle: subtitle,
|
package/build/es/radio-icons.js
CHANGED
|
@@ -2,28 +2,29 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
2
2
|
import { colors, theme } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
const styles = ["svg.jsx-1631270792{display:block;pointer-events:none;}",
|
|
5
|
+
const styles = ["svg.jsx-1631270792{display:block;pointer-events:none;}", "svg.jsx-1631270792{fill:".concat(theme.default, ";}"), "circle.background.jsx-1631270792{fill:".concat(colors.white, ";}"), "svg.checked.jsx-1631270792{fill:".concat(colors.teal400, ";}"), "svg.disabled.jsx-1631270792{fill:".concat(colors.grey400, ";}"), "svg.error.jsx-1631270792{fill:".concat(theme.error, ";}"), "svg.valid.jsx-1631270792{fill:".concat(theme.valid, ";}"), "svg.warning.jsx-1631270792{fill:".concat(theme.warning, ";}"), "svg.jsx-1631270792:not(.checked) .inner.jsx-1631270792,svg.jsx-1631270792:not(.checked) .outer.checked.jsx-1631270792{fill:none;}"];
|
|
6
6
|
styles.__hash = "1631270792";
|
|
7
|
-
export function RadioRegular({
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export function RadioRegular(_ref) {
|
|
8
|
+
let {
|
|
9
|
+
className
|
|
10
|
+
} = _ref;
|
|
10
11
|
return /*#__PURE__*/React.createElement("svg", {
|
|
11
12
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12
13
|
viewBox: "0 0 18 18",
|
|
13
|
-
className: "jsx-1260643562 " +
|
|
14
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + (className || "")
|
|
14
15
|
}, /*#__PURE__*/React.createElement("circle", {
|
|
15
16
|
cx: "9",
|
|
16
17
|
cy: "9",
|
|
17
18
|
r: "9",
|
|
18
|
-
className: "jsx-1260643562 " +
|
|
19
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "background"
|
|
19
20
|
}), /*#__PURE__*/React.createElement("path", {
|
|
20
21
|
d: "M9,18 C13.9705627,18 18,13.9705627 18,9 C18,4.02943725 13.9705627,0 9,0 C4.02943725,0 0,4.02943725 0,9 C0,13.9705627 4.02943725,18 9,18 Z M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z",
|
|
21
|
-
className: "jsx-1260643562 " +
|
|
22
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "outer"
|
|
22
23
|
}), /*#__PURE__*/React.createElement("circle", {
|
|
23
24
|
cx: "9",
|
|
24
25
|
cy: "9",
|
|
25
26
|
r: "5",
|
|
26
|
-
className: "jsx-1260643562 " +
|
|
27
|
+
className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "inner"
|
|
27
28
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
28
29
|
id: "1260643562"
|
|
29
30
|
}, ["svg.jsx-1260643562{height:18px;width:18px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
@@ -33,29 +34,30 @@ export function RadioRegular({
|
|
|
33
34
|
RadioRegular.propTypes = {
|
|
34
35
|
className: PropTypes.string
|
|
35
36
|
};
|
|
36
|
-
export function RadioDense({
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
export function RadioDense(_ref2) {
|
|
38
|
+
let {
|
|
39
|
+
className
|
|
40
|
+
} = _ref2;
|
|
39
41
|
return /*#__PURE__*/React.createElement("svg", {
|
|
40
42
|
xmlns: "http://www.w3.org/2000/svg",
|
|
41
43
|
viewBox: "0 0 14 14",
|
|
42
|
-
className: "jsx-1659897952 " +
|
|
44
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + (className || "")
|
|
43
45
|
}, /*#__PURE__*/React.createElement("circle", {
|
|
44
46
|
cx: "7",
|
|
45
47
|
cy: "7",
|
|
46
48
|
r: "7",
|
|
47
|
-
className: "jsx-1659897952 " +
|
|
49
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "background"
|
|
48
50
|
}), /*#__PURE__*/React.createElement("path", {
|
|
49
51
|
d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,13 C3.6862915,13 1,10.3137085 1,7 C1,3.6862915 3.6862915,1 7,1 C10.3137085,1 13,3.6862915 13,7 C13,10.3137085 10.3137085,13 7,13 Z",
|
|
50
|
-
className: "jsx-1659897952 " +
|
|
52
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer unchecked"
|
|
51
53
|
}), /*#__PURE__*/React.createElement("path", {
|
|
52
54
|
d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,12 C4.23857625,12 2,9.76142375 2,7 C2,4.23857625 4.23857625,2 7,2 C9.76142375,2 12,4.23857625 12,7 C12,9.76142375 9.76142375,12 7,12 Z",
|
|
53
|
-
className: "jsx-1659897952 " +
|
|
55
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer checked"
|
|
54
56
|
}), /*#__PURE__*/React.createElement("circle", {
|
|
55
57
|
cx: "7",
|
|
56
58
|
cy: "7",
|
|
57
59
|
r: "3",
|
|
58
|
-
className: "jsx-1659897952 " +
|
|
60
|
+
className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "inner"
|
|
59
61
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
60
62
|
id: "1659897952"
|
|
61
63
|
}, ["svg.jsx-1659897952{height:14px;width:14px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
|
package/build/es/radio.js
CHANGED
|
@@ -9,8 +9,8 @@ import React, { Component, createRef } from 'react';
|
|
|
9
9
|
import { RadioRegular, RadioDense } from './radio-icons.js';
|
|
10
10
|
|
|
11
11
|
class Radio extends Component {
|
|
12
|
-
constructor(
|
|
13
|
-
super(...
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
14
|
|
|
15
15
|
_defineProperty(this, "ref", /*#__PURE__*/createRef());
|
|
16
16
|
|
|
@@ -98,7 +98,7 @@ class Radio extends Component {
|
|
|
98
98
|
})), label, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
99
99
|
id: "2846929804",
|
|
100
100
|
dynamic: [colors.grey900, theme.disabled, label ? '5px' : 0, theme.focus]
|
|
101
|
-
}, [
|
|
101
|
+
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:".concat(colors.grey900, ";font-size:16px;line-height:20px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:".concat(label ? '5px' : 0, ";border:2px solid transparent;padding:1px;border-radius:50%;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
}
|
|
@@ -3,26 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { Radio } from './radio.js';
|
|
6
|
-
const subtitle =
|
|
7
|
-
const description =
|
|
8
|
-
Radio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.
|
|
9
|
-
|
|
10
|
-
Do not use a radio button if only a single option is available; use a Checkbox here instead.
|
|
11
|
-
|
|
12
|
-
If there are many options that need to select from, consider using a Select instead.
|
|
13
|
-
|
|
14
|
-
#### Size
|
|
15
|
-
|
|
16
|
-
Radio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.
|
|
17
|
-
|
|
18
|
-
#### See more
|
|
19
|
-
|
|
20
|
-
Learn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).
|
|
21
|
-
|
|
22
|
-
\`\`\`js
|
|
23
|
-
import { Radio } from '@dhis2/ui'
|
|
24
|
-
\`\`\`
|
|
25
|
-
`;
|
|
6
|
+
const subtitle = "A control that allows a user to select a single option from a choice of several";
|
|
7
|
+
const description = "\nRadio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.\n\nDo not use a radio button if only a single option is available; use a Checkbox here instead.\n\nIf there are many options that need to select from, consider using a Select instead.\n\n#### Size\n\nRadio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.\n\n#### See more\n\nLearn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).\n\n```js\nimport { Radio } from '@dhis2/ui'\n```\n";
|
|
26
8
|
|
|
27
9
|
window.onChange = (payload, event) => {
|
|
28
10
|
console.log('onChange payload', payload);
|
|
@@ -39,14 +21,20 @@ window.onBlur = (payload, event) => {
|
|
|
39
21
|
console.log('onBlur event', event);
|
|
40
22
|
};
|
|
41
23
|
|
|
42
|
-
const onChange = (
|
|
24
|
+
const onChange = function () {
|
|
25
|
+
return window.onChange(...arguments);
|
|
26
|
+
};
|
|
43
27
|
|
|
44
|
-
const onFocus = (
|
|
28
|
+
const onFocus = function () {
|
|
29
|
+
return window.onFocus(...arguments);
|
|
30
|
+
};
|
|
45
31
|
|
|
46
|
-
const onBlur = (
|
|
32
|
+
const onBlur = function () {
|
|
33
|
+
return window.onBlur(...arguments);
|
|
34
|
+
};
|
|
47
35
|
|
|
48
36
|
export default {
|
|
49
|
-
title: '
|
|
37
|
+
title: 'Radio',
|
|
50
38
|
component: Radio,
|
|
51
39
|
parameters: {
|
|
52
40
|
componentSubtitle: subtitle,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/radio",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.3",
|
|
4
4
|
"description": "UI Radio",
|
|
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.2.
|
|
35
|
+
"@dhis2/ui-constants": "8.2.3",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"prop-types": "^15.7.2"
|
|
38
38
|
},
|