@dhis2-ui/button 8.2.0 → 8.2.1
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/button/button.js +26 -25
- package/build/cjs/button/button.stories.js +10 -13
- package/build/cjs/button/button.styles.js +1 -1
- package/build/cjs/button-strip/button-strip.js +21 -18
- package/build/cjs/button-strip/button-strip.stories.js +3 -9
- package/build/cjs/dropdown-button/dropdown-button.js +18 -14
- package/build/cjs/dropdown-button/dropdown-button.stories.js +9 -12
- package/build/cjs/index.js +4 -4
- package/build/cjs/split-button/split-button.js +6 -6
- package/build/cjs/split-button/split-button.stories.js +7 -11
- package/build/es/button/button.js +26 -25
- package/build/es/button/button.stories.js +9 -12
- package/build/es/button/button.styles.js +1 -1
- package/build/es/button-strip/button-strip.js +21 -18
- package/build/es/button-strip/button-strip.stories.js +2 -8
- package/build/es/dropdown-button/dropdown-button.js +18 -14
- package/build/es/dropdown-button/dropdown-button.stories.js +8 -11
- package/build/es/split-button/split-button.js +6 -6
- package/build/es/split-button/split-button.stories.js +6 -10
- package/package.json +6 -6
|
@@ -25,28 +25,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
27
|
|
|
28
|
-
const Button =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
28
|
+
const Button = _ref => {
|
|
29
|
+
let {
|
|
30
|
+
children,
|
|
31
|
+
className,
|
|
32
|
+
dataTest,
|
|
33
|
+
destructive,
|
|
34
|
+
disabled,
|
|
35
|
+
icon,
|
|
36
|
+
initialFocus,
|
|
37
|
+
large,
|
|
38
|
+
name,
|
|
39
|
+
primary,
|
|
40
|
+
secondary,
|
|
41
|
+
small,
|
|
42
|
+
tabIndex,
|
|
43
|
+
toggled,
|
|
44
|
+
type,
|
|
45
|
+
value,
|
|
46
|
+
onBlur,
|
|
47
|
+
onClick,
|
|
48
|
+
onFocus,
|
|
49
|
+
loading
|
|
50
|
+
} = _ref;
|
|
50
51
|
const ref = (0, _react.useRef)();
|
|
51
52
|
(0, _react.useEffect)(() => {
|
|
52
53
|
if (initialFocus && ref.current) {
|
|
@@ -90,16 +91,16 @@ const Button = ({
|
|
|
90
91
|
onBlur: handleBlur,
|
|
91
92
|
onClick: handleClick,
|
|
92
93
|
onFocus: handleFocus,
|
|
93
|
-
className:
|
|
94
|
+
className: "jsx-".concat(_buttonStyles.default.__hash) + " " + (buttonClassName || "")
|
|
94
95
|
}, loading && /*#__PURE__*/_react.default.createElement("span", {
|
|
95
|
-
className:
|
|
96
|
+
className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "loader"
|
|
96
97
|
}, destructive || primary ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
|
|
97
98
|
extrasmall: true,
|
|
98
99
|
invert: true
|
|
99
100
|
}) : /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
|
|
100
101
|
extrasmall: true
|
|
101
102
|
})), icon && /*#__PURE__*/_react.default.createElement("span", {
|
|
102
|
-
className:
|
|
103
|
+
className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "button-icon"
|
|
103
104
|
}, icon), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
104
105
|
id: _buttonStyles.default.__hash
|
|
105
106
|
}, _buttonStyles.default));
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.Icon = exports.Disabled = exports.Destructive = exports.Basic = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -16,25 +16,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
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
18
|
// Note: make sure 'fenced code blocks' are not indentend in this template string
|
|
19
|
-
const description =
|
|
20
|
-
There are different types of buttons in the design system which are intended
|
|
21
|
-
for different types of actions.
|
|
22
|
-
|
|
23
|
-
\`\`\`js
|
|
24
|
-
import { Button } from '@dhis2/ui'
|
|
25
|
-
\`\`\``;
|
|
19
|
+
const description = "Buttons are used for triggering actions.\nThere are different types of buttons in the design system which are intended\nfor different types of actions.\n\n```js\nimport { Button } from '@dhis2/ui'\n```";
|
|
26
20
|
const {
|
|
27
21
|
buttonVariantArgType,
|
|
28
22
|
sizeArgType
|
|
29
23
|
} = _uiConstants.sharedPropTypes;
|
|
30
24
|
|
|
31
|
-
const logger =
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
const logger = _ref => {
|
|
26
|
+
let {
|
|
27
|
+
name,
|
|
28
|
+
value
|
|
29
|
+
} = _ref;
|
|
30
|
+
return console.log("".concat(name, ": ").concat(value));
|
|
31
|
+
};
|
|
35
32
|
|
|
36
33
|
var _default = {
|
|
37
|
-
title: '
|
|
34
|
+
title: 'Button',
|
|
38
35
|
component: _button.Button,
|
|
39
36
|
parameters: {
|
|
40
37
|
componentSubtitle: 'Initiates an action',
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = [
|
|
10
|
+
const _defaultExport = ["button.jsx-441677069{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(_uiConstants.colors.grey900, ";height:36px;padding:0 ").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(_uiConstants.colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-441677069:disabled{cursor:not-allowed;}", "button.jsx-441677069:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-441677069:focus.jsx-441677069:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:active.jsx-441677069:focus,button.jsx-441677069:disabled.jsx-441677069:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-441677069:active,button.jsx-441677069:active.jsx-441677069:focus{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-441677069:focus{background-color:#f9fafb;}", "button.jsx-441677069:disabled{border-color:".concat(_uiConstants.colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".small.jsx-441677069{height:28px;padding:0 8px;font-size:14px;line-height:16px;}", ".large.jsx-441677069{height:43px;padding:0 ".concat(_uiConstants.spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-441677069{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".primary.jsx-441677069:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-441677069:active,.primary.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-441677069:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-441677069:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-441677069{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-441677069:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-441677069:active,.secondary.jsx-441677069:active.jsx-441677069:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-441677069:focus{background-color:transparent;}", ".secondary.jsx-441677069:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".destructive.jsx-441677069{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".destructive.jsx-441677069:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-441677069:active,.destructive.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-441677069:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-441677069:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".icon-only.jsx-441677069{padding:0 0 0 5px;}", ".button-icon.jsx-441677069{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:5px;}", ".small.icon-only.jsx-441677069{padding:0 0 0 1px;}", ".small.jsx-441677069 .button-icon.jsx-441677069{margin-right:2px;}", ".small.icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:1px;}", ".toggled.jsx-441677069{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-441677069:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-441677069:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-441677069:active,.toggled.jsx-441677069:active.jsx-441677069:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-441677069:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-441677069{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-441677069+.button-icon.jsx-441677069{display:none;}", ".icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 8px 0 4px;}", ".small.icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 4px;}"];
|
|
11
11
|
_defaultExport.__hash = "441677069";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -23,25 +23,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
25
|
|
|
26
|
-
const ButtonStrip =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
end,
|
|
31
|
-
dataTest
|
|
32
|
-
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
-
"data-test": dataTest,
|
|
34
|
-
className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + ((0, _classnames.default)(className, {
|
|
35
|
-
start: !middle && !end,
|
|
26
|
+
const ButtonStrip = _ref => {
|
|
27
|
+
let {
|
|
28
|
+
className,
|
|
29
|
+
children,
|
|
36
30
|
middle,
|
|
37
|
-
end
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
31
|
+
end,
|
|
32
|
+
dataTest
|
|
33
|
+
} = _ref;
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
+
"data-test": dataTest,
|
|
36
|
+
className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + ((0, _classnames.default)(className, {
|
|
37
|
+
start: !middle && !end,
|
|
38
|
+
middle,
|
|
39
|
+
end
|
|
40
|
+
}) || "")
|
|
41
|
+
}, _react.Children.map(children, child => /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + "box"
|
|
43
|
+
}, child)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
44
|
+
id: "1268901109",
|
|
45
|
+
dynamic: [_uiConstants.spacers.dp8]
|
|
46
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-left:".concat(_uiConstants.spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-left:0;}"]));
|
|
47
|
+
};
|
|
45
48
|
|
|
46
49
|
exports.ButtonStrip = ButtonStrip;
|
|
47
50
|
const alignmentPropType = (0, _propTypes.mutuallyExclusive)(['middle', 'end'], _propTypes2.default.bool);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.DefaultAlignedRight = exports.DefaultAlignedMiddle = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -13,13 +13,7 @@ var _index2 = require("./index.js");
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
const description =
|
|
17
|
-
A wrapper for buttons to add spacing and alignment.
|
|
18
|
-
|
|
19
|
-
\`\`\`js
|
|
20
|
-
import { ButtonStrip } from '@dhis2/ui'
|
|
21
|
-
\`\`\`
|
|
22
|
-
`;
|
|
16
|
+
const description = "\nA wrapper for buttons to add spacing and alignment.\n\n```js\nimport { ButtonStrip } from '@dhis2/ui'\n```\n";
|
|
23
17
|
|
|
24
18
|
const Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
|
|
25
19
|
style: {
|
|
@@ -41,7 +35,7 @@ const alignmentArgType = {
|
|
|
41
35
|
}
|
|
42
36
|
};
|
|
43
37
|
var _default = {
|
|
44
|
-
title: '
|
|
38
|
+
title: 'Button Strip',
|
|
45
39
|
component: _index2.ButtonStrip,
|
|
46
40
|
decorators: [Wrapper],
|
|
47
41
|
parameters: {
|
|
@@ -29,9 +29,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
29
29
|
|
|
30
30
|
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; }
|
|
31
31
|
|
|
32
|
-
function ArrowDown({
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
function ArrowDown(_ref) {
|
|
33
|
+
let {
|
|
34
|
+
className
|
|
35
|
+
} = _ref;
|
|
35
36
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
36
37
|
xmlns: "http://www.w3.org/2000/svg",
|
|
37
38
|
viewBox: "0 0 12 12",
|
|
@@ -48,9 +49,10 @@ ArrowDown.propTypes = {
|
|
|
48
49
|
className: _propTypes2.default.string
|
|
49
50
|
};
|
|
50
51
|
|
|
51
|
-
function ArrowUp({
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
function ArrowUp(_ref2) {
|
|
53
|
+
let {
|
|
54
|
+
className
|
|
55
|
+
} = _ref2;
|
|
54
56
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
55
57
|
xmlns: "http://www.w3.org/2000/svg",
|
|
56
58
|
viewBox: "0 0 12 12",
|
|
@@ -70,13 +72,13 @@ ArrowUp.propTypes = {
|
|
|
70
72
|
const arrow = {
|
|
71
73
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
72
74
|
id: "736002830"
|
|
73
|
-
}, [
|
|
75
|
+
}, [".jsx-736002830{margin-left:".concat(_uiConstants.spacers.dp12, ";}")]),
|
|
74
76
|
className: "jsx-736002830"
|
|
75
77
|
};
|
|
76
78
|
|
|
77
79
|
class DropdownButton extends _react.Component {
|
|
78
|
-
constructor(
|
|
79
|
-
super(...
|
|
80
|
+
constructor() {
|
|
81
|
+
super(...arguments);
|
|
80
82
|
|
|
81
83
|
_defineProperty(this, "state", {
|
|
82
84
|
open: false
|
|
@@ -84,10 +86,12 @@ class DropdownButton extends _react.Component {
|
|
|
84
86
|
|
|
85
87
|
_defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
|
|
86
88
|
|
|
87
|
-
_defineProperty(this, "onClickHandler", ({
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
_defineProperty(this, "onClickHandler", (_ref3, event) => {
|
|
90
|
+
let {
|
|
91
|
+
name,
|
|
92
|
+
value
|
|
93
|
+
} = _ref3;
|
|
94
|
+
|
|
91
95
|
const handleClick = open => {
|
|
92
96
|
if (this.props.onClick) {
|
|
93
97
|
this.props.onClick({
|
|
@@ -156,7 +160,7 @@ class DropdownButton extends _react.Component {
|
|
|
156
160
|
onClick: this.onClickHandler,
|
|
157
161
|
transparent: true
|
|
158
162
|
}, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
|
|
159
|
-
dataTest:
|
|
163
|
+
dataTest: "".concat(dataTest, "-popper"),
|
|
160
164
|
placement: "bottom-start",
|
|
161
165
|
reference: this.anchorRef
|
|
162
166
|
}, component)), arrow.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithMenu = exports.WithClick = exports.Small = exports.Secondary = exports.Primary = exports.Open = exports.ManualControl = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _menu = require("@dhis2-ui/menu");
|
|
9
9
|
|
|
@@ -19,13 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
19
19
|
|
|
20
20
|
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); }
|
|
21
21
|
|
|
22
|
-
const description =
|
|
23
|
-
Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
|
|
24
|
-
|
|
25
|
-
\`\`\`js
|
|
26
|
-
import { DropdownButton } from '@dhis2/ui'
|
|
27
|
-
\`\`\`
|
|
28
|
-
`;
|
|
22
|
+
const description = "\nPresents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.\n\n```js\nimport { DropdownButton } from '@dhis2/ui'\n```\n";
|
|
29
23
|
|
|
30
24
|
const Simple = /*#__PURE__*/_react.default.createElement("span", null, "Simplest thing");
|
|
31
25
|
|
|
@@ -34,7 +28,7 @@ const {
|
|
|
34
28
|
buttonVariantArgType
|
|
35
29
|
} = _uiConstants.sharedPropTypes;
|
|
36
30
|
var _default = {
|
|
37
|
-
title: '
|
|
31
|
+
title: 'Dropdown Button',
|
|
38
32
|
component: _index.DropdownButton,
|
|
39
33
|
parameters: {
|
|
40
34
|
docs: {
|
|
@@ -72,9 +66,12 @@ exports.Default = Default;
|
|
|
72
66
|
const WithClick = Template.bind({});
|
|
73
67
|
exports.WithClick = WithClick;
|
|
74
68
|
WithClick.args = {
|
|
75
|
-
onClick:
|
|
76
|
-
|
|
77
|
-
|
|
69
|
+
onClick: _ref => {
|
|
70
|
+
let {
|
|
71
|
+
open
|
|
72
|
+
} = _ref;
|
|
73
|
+
return console.log('onClick: the dropdown is open: ', open);
|
|
74
|
+
}
|
|
78
75
|
};
|
|
79
76
|
const Primary = Template.bind({});
|
|
80
77
|
exports.Primary = Primary;
|
package/build/cjs/index.js
CHANGED
|
@@ -15,16 +15,16 @@ Object.defineProperty(exports, "ButtonStrip", {
|
|
|
15
15
|
return _index2.ButtonStrip;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
Object.defineProperty(exports, "
|
|
18
|
+
Object.defineProperty(exports, "DropdownButton", {
|
|
19
19
|
enumerable: true,
|
|
20
20
|
get: function () {
|
|
21
|
-
return
|
|
21
|
+
return _index4.DropdownButton;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
Object.defineProperty(exports, "
|
|
24
|
+
Object.defineProperty(exports, "SplitButton", {
|
|
25
25
|
enumerable: true,
|
|
26
26
|
get: function () {
|
|
27
|
-
return
|
|
27
|
+
return _index3.SplitButton;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
|
|
@@ -34,13 +34,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
34
34
|
const rightButton = {
|
|
35
35
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
36
36
|
id: "2502148942"
|
|
37
|
-
}, [
|
|
37
|
+
}, ["button.jsx-2502148942{padding:0 ".concat(_uiConstants.spacers.dp12, ";}")]),
|
|
38
38
|
className: "jsx-2502148942"
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
class SplitButton extends _react.Component {
|
|
42
|
-
constructor(
|
|
43
|
-
super(...
|
|
42
|
+
constructor() {
|
|
43
|
+
super(...arguments);
|
|
44
44
|
|
|
45
45
|
_defineProperty(this, "state", {
|
|
46
46
|
open: false
|
|
@@ -105,7 +105,7 @@ class SplitButton extends _react.Component {
|
|
|
105
105
|
tabIndex: tabIndex,
|
|
106
106
|
className: (0, _classnames.default)(className),
|
|
107
107
|
initialFocus: initialFocus,
|
|
108
|
-
dataTest:
|
|
108
|
+
dataTest: "".concat(dataTest, "-button")
|
|
109
109
|
}, children), /*#__PURE__*/_react.default.createElement(_index.Button, {
|
|
110
110
|
name: name,
|
|
111
111
|
value: value,
|
|
@@ -119,12 +119,12 @@ class SplitButton extends _react.Component {
|
|
|
119
119
|
type: type,
|
|
120
120
|
tabIndex: tabIndex,
|
|
121
121
|
className: (0, _classnames.default)(className, rightButton.className),
|
|
122
|
-
dataTest:
|
|
122
|
+
dataTest: "".concat(dataTest, "-toggle")
|
|
123
123
|
}, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
124
124
|
onClick: this.onToggle,
|
|
125
125
|
transparent: true
|
|
126
126
|
}, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
|
|
127
|
-
dataTest:
|
|
127
|
+
dataTest: "".concat(dataTest, "-menu"),
|
|
128
128
|
placement: "bottom-end",
|
|
129
129
|
reference: this.anchorRef
|
|
130
130
|
}, component)), rightButton.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithIcon = exports.Small = exports.Secondary = exports.Primary = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -13,25 +13,21 @@ var _splitButton = require("./split-button.js");
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
const description =
|
|
17
|
-
Similar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be "Save and add another" and "Save and open".
|
|
18
|
-
|
|
19
|
-
\`\`\`js
|
|
20
|
-
import { SplitButton } from '@dhis2/ui'
|
|
21
|
-
\`\`\`
|
|
22
|
-
`;
|
|
16
|
+
const description = "\nSimilar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be \"Save and add another\" and \"Save and open\".\n\n```js\nimport { SplitButton } from '@dhis2/ui'\n```\n";
|
|
23
17
|
|
|
24
18
|
window.onClick = (payload, event) => {
|
|
25
19
|
console.log('onClick payload', payload);
|
|
26
20
|
console.log('onClick event', event);
|
|
27
21
|
};
|
|
28
22
|
|
|
29
|
-
const onClick = (
|
|
23
|
+
const onClick = function () {
|
|
24
|
+
return window.onClick(...arguments);
|
|
25
|
+
};
|
|
30
26
|
|
|
31
27
|
const DropdownComponent = /*#__PURE__*/_react.default.createElement("span", null, "Dropdown component");
|
|
32
28
|
|
|
33
29
|
var _default = {
|
|
34
|
-
title: '
|
|
30
|
+
title: 'Split Button',
|
|
35
31
|
component: _splitButton.SplitButton,
|
|
36
32
|
parameters: {
|
|
37
33
|
docs: {
|
|
@@ -74,7 +70,7 @@ Primary.args = {
|
|
|
74
70
|
Primary.parameters = {
|
|
75
71
|
docs: {
|
|
76
72
|
description: {
|
|
77
|
-
story:
|
|
73
|
+
story: "_**Note**: The dropdown components in the following examples do not appear in the right place on this page. View the following examples in the 'Canvas' tab for the correct placement._"
|
|
78
74
|
}
|
|
79
75
|
}
|
|
80
76
|
};
|
|
@@ -5,28 +5,29 @@ import cx from 'classnames';
|
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import React, { useEffect, useRef } from 'react';
|
|
7
7
|
import styles from './button.styles.js';
|
|
8
|
-
export const Button =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
8
|
+
export const Button = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
children,
|
|
11
|
+
className,
|
|
12
|
+
dataTest,
|
|
13
|
+
destructive,
|
|
14
|
+
disabled,
|
|
15
|
+
icon,
|
|
16
|
+
initialFocus,
|
|
17
|
+
large,
|
|
18
|
+
name,
|
|
19
|
+
primary,
|
|
20
|
+
secondary,
|
|
21
|
+
small,
|
|
22
|
+
tabIndex,
|
|
23
|
+
toggled,
|
|
24
|
+
type,
|
|
25
|
+
value,
|
|
26
|
+
onBlur,
|
|
27
|
+
onClick,
|
|
28
|
+
onFocus,
|
|
29
|
+
loading
|
|
30
|
+
} = _ref;
|
|
30
31
|
const ref = useRef();
|
|
31
32
|
useEffect(() => {
|
|
32
33
|
if (initialFocus && ref.current) {
|
|
@@ -70,16 +71,16 @@ export const Button = ({
|
|
|
70
71
|
onBlur: handleBlur,
|
|
71
72
|
onClick: handleClick,
|
|
72
73
|
onFocus: handleFocus,
|
|
73
|
-
className:
|
|
74
|
+
className: "jsx-".concat(styles.__hash) + " " + (buttonClassName || "")
|
|
74
75
|
}, loading && /*#__PURE__*/React.createElement("span", {
|
|
75
|
-
className:
|
|
76
|
+
className: "jsx-".concat(styles.__hash) + " " + "loader"
|
|
76
77
|
}, destructive || primary ? /*#__PURE__*/React.createElement(CircularLoader, {
|
|
77
78
|
extrasmall: true,
|
|
78
79
|
invert: true
|
|
79
80
|
}) : /*#__PURE__*/React.createElement(CircularLoader, {
|
|
80
81
|
extrasmall: true
|
|
81
82
|
})), icon && /*#__PURE__*/React.createElement("span", {
|
|
82
|
-
className:
|
|
83
|
+
className: "jsx-".concat(styles.__hash) + " " + "button-icon"
|
|
83
84
|
}, icon), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
84
85
|
id: styles.__hash
|
|
85
86
|
}, styles));
|
|
@@ -4,25 +4,22 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { Button } from './button.js'; // Note: make sure 'fenced code blocks' are not indentend in this template string
|
|
6
6
|
|
|
7
|
-
const description =
|
|
8
|
-
There are different types of buttons in the design system which are intended
|
|
9
|
-
for different types of actions.
|
|
10
|
-
|
|
11
|
-
\`\`\`js
|
|
12
|
-
import { Button } from '@dhis2/ui'
|
|
13
|
-
\`\`\``;
|
|
7
|
+
const description = "Buttons are used for triggering actions.\nThere are different types of buttons in the design system which are intended\nfor different types of actions.\n\n```js\nimport { Button } from '@dhis2/ui'\n```";
|
|
14
8
|
const {
|
|
15
9
|
buttonVariantArgType,
|
|
16
10
|
sizeArgType
|
|
17
11
|
} = sharedPropTypes;
|
|
18
12
|
|
|
19
|
-
const logger =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
const logger = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
name,
|
|
16
|
+
value
|
|
17
|
+
} = _ref;
|
|
18
|
+
return console.log("".concat(name, ": ").concat(value));
|
|
19
|
+
};
|
|
23
20
|
|
|
24
21
|
export default {
|
|
25
|
-
title: '
|
|
22
|
+
title: 'Button',
|
|
26
23
|
component: Button,
|
|
27
24
|
parameters: {
|
|
28
25
|
componentSubtitle: 'Initiates an action',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors, theme, spacers } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = [
|
|
2
|
+
const _defaultExport = ["button.jsx-441677069{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(colors.grey900, ";height:36px;padding:0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-441677069:disabled{cursor:not-allowed;}", "button.jsx-441677069:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-441677069:focus.jsx-441677069:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:active.jsx-441677069:focus,button.jsx-441677069:disabled.jsx-441677069:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:hover{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-441677069:active,button.jsx-441677069:active.jsx-441677069:focus{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-441677069:focus{background-color:#f9fafb;}", "button.jsx-441677069:disabled{border-color:".concat(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-441677069{height:28px;padding:0 8px;font-size:14px;line-height:16px;}", ".large.jsx-441677069{height:43px;padding:0 ".concat(spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-441677069{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".primary.jsx-441677069:hover{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-441677069:active,.primary.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-441677069:focus{background:".concat(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-441677069:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".secondary.jsx-441677069{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-441677069:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-441677069:active,.secondary.jsx-441677069:active.jsx-441677069:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-441677069:focus{background-color:transparent;}", ".secondary.jsx-441677069:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".destructive.jsx-441677069{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".destructive.jsx-441677069:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-441677069:active,.destructive.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-441677069:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-441677069:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".icon-only.jsx-441677069{padding:0 0 0 5px;}", ".button-icon.jsx-441677069{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:5px;}", ".small.icon-only.jsx-441677069{padding:0 0 0 1px;}", ".small.jsx-441677069 .button-icon.jsx-441677069{margin-right:2px;}", ".small.icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:1px;}", ".toggled.jsx-441677069{background:".concat(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-441677069:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-441677069:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-441677069:active,.toggled.jsx-441677069:active.jsx-441677069:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-441677069:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".loader.jsx-441677069{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-441677069+.button-icon.jsx-441677069{display:none;}", ".icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 8px 0 4px;}", ".small.icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 4px;}"];
|
|
3
3
|
_defaultExport.__hash = "441677069";
|
|
4
4
|
export default _defaultExport;
|
|
@@ -5,25 +5,28 @@ import cx from 'classnames';
|
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import React, { Children } from 'react';
|
|
7
7
|
|
|
8
|
-
const ButtonStrip =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
end,
|
|
13
|
-
dataTest
|
|
14
|
-
}) => /*#__PURE__*/React.createElement("div", {
|
|
15
|
-
"data-test": dataTest,
|
|
16
|
-
className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + (cx(className, {
|
|
17
|
-
start: !middle && !end,
|
|
8
|
+
const ButtonStrip = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
className,
|
|
11
|
+
children,
|
|
18
12
|
middle,
|
|
19
|
-
end
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
13
|
+
end,
|
|
14
|
+
dataTest
|
|
15
|
+
} = _ref;
|
|
16
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
17
|
+
"data-test": dataTest,
|
|
18
|
+
className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + (cx(className, {
|
|
19
|
+
start: !middle && !end,
|
|
20
|
+
middle,
|
|
21
|
+
end
|
|
22
|
+
}) || "")
|
|
23
|
+
}, Children.map(children, child => /*#__PURE__*/React.createElement("div", {
|
|
24
|
+
className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + "box"
|
|
25
|
+
}, child)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
26
|
+
id: "1268901109",
|
|
27
|
+
dynamic: [spacers.dp8]
|
|
28
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-left:".concat(spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-left:0;}"]));
|
|
29
|
+
};
|
|
27
30
|
|
|
28
31
|
const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool);
|
|
29
32
|
ButtonStrip.defaultProps = {
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Button, SplitButton } from '../index.js';
|
|
3
3
|
import { ButtonStrip } from './index.js';
|
|
4
|
-
const description =
|
|
5
|
-
A wrapper for buttons to add spacing and alignment.
|
|
6
|
-
|
|
7
|
-
\`\`\`js
|
|
8
|
-
import { ButtonStrip } from '@dhis2/ui'
|
|
9
|
-
\`\`\`
|
|
10
|
-
`;
|
|
4
|
+
const description = "\nA wrapper for buttons to add spacing and alignment.\n\n```js\nimport { ButtonStrip } from '@dhis2/ui'\n```\n";
|
|
11
5
|
|
|
12
6
|
const Wrapper = fn => /*#__PURE__*/React.createElement("div", {
|
|
13
7
|
style: {
|
|
@@ -29,7 +23,7 @@ const alignmentArgType = {
|
|
|
29
23
|
}
|
|
30
24
|
};
|
|
31
25
|
export default {
|
|
32
|
-
title: '
|
|
26
|
+
title: 'Button Strip',
|
|
33
27
|
component: ButtonStrip,
|
|
34
28
|
decorators: [Wrapper],
|
|
35
29
|
parameters: {
|
|
@@ -10,9 +10,10 @@ import PropTypes from 'prop-types';
|
|
|
10
10
|
import React, { Component } from 'react';
|
|
11
11
|
import { Button } from '../index.js';
|
|
12
12
|
|
|
13
|
-
function ArrowDown({
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
function ArrowDown(_ref) {
|
|
14
|
+
let {
|
|
15
|
+
className
|
|
16
|
+
} = _ref;
|
|
16
17
|
return /*#__PURE__*/React.createElement("svg", {
|
|
17
18
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18
19
|
viewBox: "0 0 12 12",
|
|
@@ -29,9 +30,10 @@ ArrowDown.propTypes = {
|
|
|
29
30
|
className: PropTypes.string
|
|
30
31
|
};
|
|
31
32
|
|
|
32
|
-
function ArrowUp({
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
function ArrowUp(_ref2) {
|
|
34
|
+
let {
|
|
35
|
+
className
|
|
36
|
+
} = _ref2;
|
|
35
37
|
return /*#__PURE__*/React.createElement("svg", {
|
|
36
38
|
xmlns: "http://www.w3.org/2000/svg",
|
|
37
39
|
viewBox: "0 0 12 12",
|
|
@@ -51,13 +53,13 @@ ArrowUp.propTypes = {
|
|
|
51
53
|
const arrow = {
|
|
52
54
|
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
53
55
|
id: "736002830"
|
|
54
|
-
}, [
|
|
56
|
+
}, [".jsx-736002830{margin-left:".concat(spacers.dp12, ";}")]),
|
|
55
57
|
className: "jsx-736002830"
|
|
56
58
|
};
|
|
57
59
|
|
|
58
60
|
class DropdownButton extends Component {
|
|
59
|
-
constructor(
|
|
60
|
-
super(...
|
|
61
|
+
constructor() {
|
|
62
|
+
super(...arguments);
|
|
61
63
|
|
|
62
64
|
_defineProperty(this, "state", {
|
|
63
65
|
open: false
|
|
@@ -65,10 +67,12 @@ class DropdownButton extends Component {
|
|
|
65
67
|
|
|
66
68
|
_defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
|
|
67
69
|
|
|
68
|
-
_defineProperty(this, "onClickHandler", ({
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
_defineProperty(this, "onClickHandler", (_ref3, event) => {
|
|
71
|
+
let {
|
|
72
|
+
name,
|
|
73
|
+
value
|
|
74
|
+
} = _ref3;
|
|
75
|
+
|
|
72
76
|
const handleClick = open => {
|
|
73
77
|
if (this.props.onClick) {
|
|
74
78
|
this.props.onClick({
|
|
@@ -137,7 +141,7 @@ class DropdownButton extends Component {
|
|
|
137
141
|
onClick: this.onClickHandler,
|
|
138
142
|
transparent: true
|
|
139
143
|
}, /*#__PURE__*/React.createElement(Popper, {
|
|
140
|
-
dataTest:
|
|
144
|
+
dataTest: "".concat(dataTest, "-popper"),
|
|
141
145
|
placement: "bottom-start",
|
|
142
146
|
reference: this.anchorRef
|
|
143
147
|
}, component)), arrow.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
@@ -4,20 +4,14 @@ import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu';
|
|
|
4
4
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
5
5
|
import React, { useState } from 'react';
|
|
6
6
|
import { DropdownButton } from './index.js';
|
|
7
|
-
const description =
|
|
8
|
-
Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
|
|
9
|
-
|
|
10
|
-
\`\`\`js
|
|
11
|
-
import { DropdownButton } from '@dhis2/ui'
|
|
12
|
-
\`\`\`
|
|
13
|
-
`;
|
|
7
|
+
const description = "\nPresents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.\n\n```js\nimport { DropdownButton } from '@dhis2/ui'\n```\n";
|
|
14
8
|
const Simple = /*#__PURE__*/React.createElement("span", null, "Simplest thing");
|
|
15
9
|
const {
|
|
16
10
|
sizeArgType,
|
|
17
11
|
buttonVariantArgType
|
|
18
12
|
} = sharedPropTypes;
|
|
19
13
|
export default {
|
|
20
|
-
title: '
|
|
14
|
+
title: 'Dropdown Button',
|
|
21
15
|
component: DropdownButton,
|
|
22
16
|
parameters: {
|
|
23
17
|
docs: {
|
|
@@ -52,9 +46,12 @@ const Template = args => /*#__PURE__*/React.createElement(DropdownButton, args);
|
|
|
52
46
|
export const Default = Template.bind({});
|
|
53
47
|
export const WithClick = Template.bind({});
|
|
54
48
|
WithClick.args = {
|
|
55
|
-
onClick:
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
onClick: _ref => {
|
|
50
|
+
let {
|
|
51
|
+
open
|
|
52
|
+
} = _ref;
|
|
53
|
+
return console.log('onClick: the dropdown is open: ', open);
|
|
54
|
+
}
|
|
58
55
|
};
|
|
59
56
|
export const Primary = Template.bind({});
|
|
60
57
|
Primary.args = {
|
|
@@ -13,13 +13,13 @@ import { Button } from '../index.js';
|
|
|
13
13
|
const rightButton = {
|
|
14
14
|
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
15
15
|
id: "2502148942"
|
|
16
|
-
}, [
|
|
16
|
+
}, ["button.jsx-2502148942{padding:0 ".concat(spacers.dp12, ";}")]),
|
|
17
17
|
className: "jsx-2502148942"
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
class SplitButton extends Component {
|
|
21
|
-
constructor(
|
|
22
|
-
super(...
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
23
|
|
|
24
24
|
_defineProperty(this, "state", {
|
|
25
25
|
open: false
|
|
@@ -84,7 +84,7 @@ class SplitButton extends Component {
|
|
|
84
84
|
tabIndex: tabIndex,
|
|
85
85
|
className: cx(className),
|
|
86
86
|
initialFocus: initialFocus,
|
|
87
|
-
dataTest:
|
|
87
|
+
dataTest: "".concat(dataTest, "-button")
|
|
88
88
|
}, children), /*#__PURE__*/React.createElement(Button, {
|
|
89
89
|
name: name,
|
|
90
90
|
value: value,
|
|
@@ -98,12 +98,12 @@ class SplitButton extends Component {
|
|
|
98
98
|
type: type,
|
|
99
99
|
tabIndex: tabIndex,
|
|
100
100
|
className: cx(className, rightButton.className),
|
|
101
|
-
dataTest:
|
|
101
|
+
dataTest: "".concat(dataTest, "-toggle")
|
|
102
102
|
}, arrow), open && /*#__PURE__*/React.createElement(Layer, {
|
|
103
103
|
onClick: this.onToggle,
|
|
104
104
|
transparent: true
|
|
105
105
|
}, /*#__PURE__*/React.createElement(Popper, {
|
|
106
|
-
dataTest:
|
|
106
|
+
dataTest: "".concat(dataTest, "-menu"),
|
|
107
107
|
placement: "bottom-end",
|
|
108
108
|
reference: this.anchorRef
|
|
109
109
|
}, component)), rightButton.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
@@ -1,24 +1,20 @@
|
|
|
1
1
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { SplitButton } from './split-button.js';
|
|
4
|
-
const description =
|
|
5
|
-
Similar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be "Save and add another" and "Save and open".
|
|
6
|
-
|
|
7
|
-
\`\`\`js
|
|
8
|
-
import { SplitButton } from '@dhis2/ui'
|
|
9
|
-
\`\`\`
|
|
10
|
-
`;
|
|
4
|
+
const description = "\nSimilar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be \"Save and add another\" and \"Save and open\".\n\n```js\nimport { SplitButton } from '@dhis2/ui'\n```\n";
|
|
11
5
|
|
|
12
6
|
window.onClick = (payload, event) => {
|
|
13
7
|
console.log('onClick payload', payload);
|
|
14
8
|
console.log('onClick event', event);
|
|
15
9
|
};
|
|
16
10
|
|
|
17
|
-
const onClick = (
|
|
11
|
+
const onClick = function () {
|
|
12
|
+
return window.onClick(...arguments);
|
|
13
|
+
};
|
|
18
14
|
|
|
19
15
|
const DropdownComponent = /*#__PURE__*/React.createElement("span", null, "Dropdown component");
|
|
20
16
|
export default {
|
|
21
|
-
title: '
|
|
17
|
+
title: 'Split Button',
|
|
22
18
|
component: SplitButton,
|
|
23
19
|
parameters: {
|
|
24
20
|
docs: {
|
|
@@ -58,7 +54,7 @@ Primary.args = {
|
|
|
58
54
|
Primary.parameters = {
|
|
59
55
|
docs: {
|
|
60
56
|
description: {
|
|
61
|
-
story:
|
|
57
|
+
story: "_**Note**: The dropdown components in the following examples do not appear in the right place on this page. View the following examples in the 'Canvas' tab for the correct placement._"
|
|
62
58
|
}
|
|
63
59
|
}
|
|
64
60
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.1",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2-ui/layer": "8.2.
|
|
36
|
-
"@dhis2-ui/loader": "8.2.
|
|
37
|
-
"@dhis2-ui/popper": "8.2.
|
|
38
|
-
"@dhis2/ui-constants": "8.2.
|
|
39
|
-
"@dhis2/ui-icons": "8.2.
|
|
35
|
+
"@dhis2-ui/layer": "8.2.1",
|
|
36
|
+
"@dhis2-ui/loader": "8.2.1",
|
|
37
|
+
"@dhis2-ui/popper": "8.2.1",
|
|
38
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
39
|
+
"@dhis2/ui-icons": "8.2.1",
|
|
40
40
|
"classnames": "^2.3.1",
|
|
41
41
|
"prop-types": "^15.7.2"
|
|
42
42
|
},
|