@dhis2-ui/segmented-control 9.1.1 → 9.2.0
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.
|
@@ -35,7 +35,8 @@ const SegmentedControl = _ref => {
|
|
|
35
35
|
let {
|
|
36
36
|
options,
|
|
37
37
|
selected,
|
|
38
|
-
onChange
|
|
38
|
+
onChange,
|
|
39
|
+
ariaLabel
|
|
39
40
|
} = _ref;
|
|
40
41
|
|
|
41
42
|
if (!options.map(_ref2 => {
|
|
@@ -48,30 +49,33 @@ const SegmentedControl = _ref => {
|
|
|
48
49
|
throw new Error(message);
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
return /*#__PURE__*/_react.default.createElement("
|
|
52
|
-
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
53
|
+
"aria-label": ariaLabel,
|
|
54
|
+
className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]]) + " " + "segmented-control"
|
|
53
55
|
}, options.map(_ref3 => {
|
|
54
56
|
let {
|
|
55
57
|
label,
|
|
56
58
|
value,
|
|
57
59
|
disabled
|
|
58
60
|
} = _ref3;
|
|
59
|
-
return /*#__PURE__*/_react.default.createElement("
|
|
60
|
-
key: label,
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement("li", {
|
|
62
|
+
key: "label",
|
|
63
|
+
className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]])
|
|
64
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
61
65
|
type: "button",
|
|
62
66
|
onClick: e => onChange({
|
|
63
67
|
value
|
|
64
68
|
}, e),
|
|
65
69
|
disabled: disabled,
|
|
66
|
-
className: _style.default.dynamic([["
|
|
70
|
+
className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]]) + " " + ((0, _classnames.default)('segment', {
|
|
67
71
|
selected: value === selected,
|
|
68
72
|
disabled
|
|
69
73
|
}) || "")
|
|
70
|
-
}, label);
|
|
74
|
+
}, label));
|
|
71
75
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
72
|
-
id: "
|
|
73
|
-
dynamic: [_uiConstants.colors.
|
|
74
|
-
}, [".segmented-control.__jsx-style-dynamic-selector{
|
|
76
|
+
id: "3664972916",
|
|
77
|
+
dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]
|
|
78
|
+
}, [".segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:".concat(_uiConstants.colors.grey300, ";border-radius:5px;padding:2px;}"), ".segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:".concat(_uiConstants.colors.grey700, ";min-width:72px;max-width:320px;height:100%;padding:6px ").concat(_uiConstants.spacers.dp12, ";}"), ".segment.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", ".segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey900, ";}"), ".segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:".concat(_uiConstants.elevations.e100, ";background:").concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";}"), ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
|
|
75
79
|
};
|
|
76
80
|
|
|
77
81
|
exports.SegmentedControl = SegmentedControl;
|
|
@@ -87,5 +91,8 @@ SegmentedControl.propTypes = {
|
|
|
87
91
|
selected: _propTypes.PropTypes.string.isRequired,
|
|
88
92
|
|
|
89
93
|
/** Called with the signature `({ value: string }, event)` */
|
|
90
|
-
onChange: _propTypes.PropTypes.func.isRequired
|
|
94
|
+
onChange: _propTypes.PropTypes.func.isRequired,
|
|
95
|
+
|
|
96
|
+
/** Used to provide an accessible label to a segmented control without a visible label */
|
|
97
|
+
ariaLabel: _propTypes.PropTypes.string
|
|
91
98
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.DisabledOption = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.LongLabels = exports.DisabledOption = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -36,7 +36,8 @@ var _default = {
|
|
|
36
36
|
value: 'GIRAFFE'
|
|
37
37
|
}],
|
|
38
38
|
selected: 'DOG',
|
|
39
|
-
onChange: logger
|
|
39
|
+
onChange: logger,
|
|
40
|
+
ariaLabel: 'Segmented control label'
|
|
40
41
|
}
|
|
41
42
|
};
|
|
42
43
|
exports.default = _default;
|
|
@@ -60,4 +61,19 @@ DisabledOption.args = {
|
|
|
60
61
|
value: 'THREE'
|
|
61
62
|
}],
|
|
62
63
|
selected: 'THREE'
|
|
64
|
+
};
|
|
65
|
+
const LongLabels = Template.bind({});
|
|
66
|
+
exports.LongLabels = LongLabels;
|
|
67
|
+
LongLabels.args = {
|
|
68
|
+
options: [{
|
|
69
|
+
label: 'Program configuration, security, and distribution',
|
|
70
|
+
value: 'PROGRAM'
|
|
71
|
+
}, {
|
|
72
|
+
label: 'Two',
|
|
73
|
+
value: 'TWO'
|
|
74
|
+
}, {
|
|
75
|
+
label: 'Three',
|
|
76
|
+
value: 'THREE'
|
|
77
|
+
}],
|
|
78
|
+
selected: 'PROGRAM'
|
|
63
79
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
-
import { colors, spacers, theme } from '@dhis2/ui-constants';
|
|
2
|
+
import { colors, elevations, spacers, theme } from '@dhis2/ui-constants';
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import { PropTypes } from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
@@ -22,7 +22,8 @@ export const SegmentedControl = _ref => {
|
|
|
22
22
|
let {
|
|
23
23
|
options,
|
|
24
24
|
selected,
|
|
25
|
-
onChange
|
|
25
|
+
onChange,
|
|
26
|
+
ariaLabel
|
|
26
27
|
} = _ref;
|
|
27
28
|
|
|
28
29
|
if (!options.map(_ref2 => {
|
|
@@ -35,30 +36,33 @@ export const SegmentedControl = _ref => {
|
|
|
35
36
|
throw new Error(message);
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
return /*#__PURE__*/React.createElement("
|
|
39
|
-
|
|
39
|
+
return /*#__PURE__*/React.createElement("ul", {
|
|
40
|
+
"aria-label": ariaLabel,
|
|
41
|
+
className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]]) + " " + "segmented-control"
|
|
40
42
|
}, options.map(_ref3 => {
|
|
41
43
|
let {
|
|
42
44
|
label,
|
|
43
45
|
value,
|
|
44
46
|
disabled
|
|
45
47
|
} = _ref3;
|
|
46
|
-
return /*#__PURE__*/React.createElement("
|
|
47
|
-
key: label,
|
|
48
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
49
|
+
key: "label",
|
|
50
|
+
className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]])
|
|
51
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
48
52
|
type: "button",
|
|
49
53
|
onClick: e => onChange({
|
|
50
54
|
value
|
|
51
55
|
}, e),
|
|
52
56
|
disabled: disabled,
|
|
53
|
-
className: _JSXStyle.dynamic([["
|
|
57
|
+
className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]]) + " " + (cx('segment', {
|
|
54
58
|
selected: value === selected,
|
|
55
59
|
disabled
|
|
56
60
|
}) || "")
|
|
57
|
-
}, label);
|
|
61
|
+
}, label));
|
|
58
62
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
59
|
-
id: "
|
|
60
|
-
dynamic: [colors.
|
|
61
|
-
}, [".segmented-control.__jsx-style-dynamic-selector{
|
|
63
|
+
id: "3664972916",
|
|
64
|
+
dynamic: [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]
|
|
65
|
+
}, [".segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:".concat(colors.grey300, ";border-radius:5px;padding:2px;}"), ".segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:".concat(colors.grey700, ";min-width:72px;max-width:320px;height:100%;padding:6px ").concat(spacers.dp12, ";}"), ".segment.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", ".segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:".concat(colors.grey400, ";color:").concat(colors.grey900, ";}"), ".segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:".concat(elevations.e100, ";background:").concat(colors.white, ";color:").concat(colors.grey900, ";}"), ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
|
|
62
66
|
};
|
|
63
67
|
SegmentedControl.propTypes = {
|
|
64
68
|
/** Options to populate the segmented control */
|
|
@@ -72,5 +76,8 @@ SegmentedControl.propTypes = {
|
|
|
72
76
|
selected: PropTypes.string.isRequired,
|
|
73
77
|
|
|
74
78
|
/** Called with the signature `({ value: string }, event)` */
|
|
75
|
-
onChange: PropTypes.func.isRequired
|
|
79
|
+
onChange: PropTypes.func.isRequired,
|
|
80
|
+
|
|
81
|
+
/** Used to provide an accessible label to a segmented control without a visible label */
|
|
82
|
+
ariaLabel: PropTypes.string
|
|
76
83
|
};
|
|
@@ -26,7 +26,8 @@ export default {
|
|
|
26
26
|
value: 'GIRAFFE'
|
|
27
27
|
}],
|
|
28
28
|
selected: 'DOG',
|
|
29
|
-
onChange: logger
|
|
29
|
+
onChange: logger,
|
|
30
|
+
ariaLabel: 'Segmented control label'
|
|
30
31
|
}
|
|
31
32
|
};
|
|
32
33
|
|
|
@@ -47,4 +48,18 @@ DisabledOption.args = {
|
|
|
47
48
|
value: 'THREE'
|
|
48
49
|
}],
|
|
49
50
|
selected: 'THREE'
|
|
51
|
+
};
|
|
52
|
+
export const LongLabels = Template.bind({});
|
|
53
|
+
LongLabels.args = {
|
|
54
|
+
options: [{
|
|
55
|
+
label: 'Program configuration, security, and distribution',
|
|
56
|
+
value: 'PROGRAM'
|
|
57
|
+
}, {
|
|
58
|
+
label: 'Two',
|
|
59
|
+
value: 'TWO'
|
|
60
|
+
}, {
|
|
61
|
+
label: 'Three',
|
|
62
|
+
value: 'THREE'
|
|
63
|
+
}],
|
|
64
|
+
selected: 'PROGRAM'
|
|
50
65
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/segmented-control",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
4
4
|
"description": "UI Segmented Control",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2/ui-constants": "9.
|
|
36
|
+
"@dhis2/ui-constants": "9.2.0",
|
|
37
37
|
"classnames": "^2.3.1",
|
|
38
38
|
"prop-types": "^15.7.2"
|
|
39
39
|
},
|