@dhis2-ui/button 9.3.0-alpha.1 → 9.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/button/__tests__/Button.test.js +11 -0
- package/build/cjs/button/button.js +9 -5
- package/build/cjs/button/button.stories.js +7 -14
- package/build/cjs/button/button.styles.js +2 -2
- package/build/cjs/button-strip/button-strip.js +4 -4
- package/build/cjs/button-strip/button-strip.stories.js +2 -9
- package/build/cjs/dropdown-button/dropdown-button.js +3 -3
- package/build/cjs/dropdown-button/dropdown-button.stories.js +2 -11
- package/build/cjs/split-button/split-button.js +3 -3
- package/build/cjs/split-button/split-button.stories.js +1 -10
- package/build/es/button/__tests__/Button.test.js +11 -0
- package/build/es/button/button.js +10 -5
- package/build/es/button/button.stories.js +6 -10
- package/build/es/button/button.styles.js +2 -2
- package/build/es/button-strip/button-strip.js +4 -4
- package/build/es/button-strip/button-strip.stories.js +1 -5
- package/build/es/dropdown-button/dropdown-button.js +3 -3
- package/build/es/dropdown-button/dropdown-button.stories.js +1 -7
- package/build/es/split-button/split-button.js +3 -3
- package/build/es/split-button/split-button.stories.js +0 -6
- package/package.json +6 -6
- package/types/index.d.ts +1 -1
|
@@ -31,6 +31,17 @@ describe('<Button>', () => {
|
|
|
31
31
|
});
|
|
32
32
|
expect(actual.length).toBe(1);
|
|
33
33
|
});
|
|
34
|
+
it('has the accessibility attributes', () => {
|
|
35
|
+
const dataTest = 'button-data-test';
|
|
36
|
+
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
37
|
+
dataTest: dataTest,
|
|
38
|
+
ariaLabel: "test aria label",
|
|
39
|
+
title: "title for button"
|
|
40
|
+
}));
|
|
41
|
+
const buttonElement = wrapper.find('button').getDOMNode();
|
|
42
|
+
expect(buttonElement).toHaveAttribute('title', 'title for button');
|
|
43
|
+
expect(buttonElement).toHaveAttribute('ariaLabel', 'test aria label');
|
|
44
|
+
});
|
|
34
45
|
describe('toggle', () => {
|
|
35
46
|
it('should have class "toggled" if toggled-prop is true', () => {
|
|
36
47
|
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
@@ -25,6 +25,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
27
|
|
|
28
|
+
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); }
|
|
29
|
+
|
|
28
30
|
const Button = _ref => {
|
|
29
31
|
let {
|
|
30
32
|
children,
|
|
@@ -47,7 +49,8 @@ const Button = _ref => {
|
|
|
47
49
|
onClick,
|
|
48
50
|
onFocus,
|
|
49
51
|
onKeyDown,
|
|
50
|
-
loading
|
|
52
|
+
loading,
|
|
53
|
+
...otherProps
|
|
51
54
|
} = _ref;
|
|
52
55
|
const ref = (0, _react.useRef)();
|
|
53
56
|
(0, _react.useEffect)(() => {
|
|
@@ -87,7 +90,7 @@ const Button = _ref => {
|
|
|
87
90
|
toggled,
|
|
88
91
|
loading: loading
|
|
89
92
|
});
|
|
90
|
-
return /*#__PURE__*/_react.default.createElement("button", {
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement("button", _extends({
|
|
91
94
|
ref: ref,
|
|
92
95
|
name: name,
|
|
93
96
|
"data-test": dataTest,
|
|
@@ -97,9 +100,10 @@ const Button = _ref => {
|
|
|
97
100
|
onBlur: handleBlur,
|
|
98
101
|
onClick: handleClick,
|
|
99
102
|
onFocus: handleFocus,
|
|
100
|
-
onKeyDown: handleKeyDown
|
|
101
|
-
|
|
102
|
-
|
|
103
|
+
onKeyDown: handleKeyDown
|
|
104
|
+
}, otherProps, {
|
|
105
|
+
className: "jsx-".concat(_buttonStyles.default.__hash) + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
|
|
106
|
+
}), loading && /*#__PURE__*/_react.default.createElement("span", {
|
|
103
107
|
className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "loader"
|
|
104
108
|
}, destructive || primary ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
|
|
105
109
|
extrasmall: true,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.
|
|
6
|
+
exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.IconOnlySmall = exports.IconOnly = exports.Icon = exports.Disabled = exports.DestructiveSecondary = exports.Destructive = exports.Basic = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -44,7 +44,9 @@ var _default = {
|
|
|
44
44
|
args: {
|
|
45
45
|
children: 'Label me!',
|
|
46
46
|
value: 'default',
|
|
47
|
-
onClick: logger
|
|
47
|
+
onClick: logger,
|
|
48
|
+
title: 'Button',
|
|
49
|
+
ariaLabel: 'Button'
|
|
48
50
|
},
|
|
49
51
|
argTypes: {
|
|
50
52
|
primary: { ...buttonVariantArgType
|
|
@@ -239,23 +241,14 @@ Icon.parameters = {
|
|
|
239
241
|
}
|
|
240
242
|
}
|
|
241
243
|
};
|
|
242
|
-
|
|
243
|
-
const IconRTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
244
|
-
dir: "rtl"
|
|
245
|
-
}, /*#__PURE__*/_react.default.createElement(_button.Button, args));
|
|
246
|
-
|
|
247
|
-
exports.IconRTL = IconRTL;
|
|
248
|
-
IconRTL.args = {
|
|
249
|
-
icon: DemoIcon24,
|
|
250
|
-
name: 'RTL icon button',
|
|
251
|
-
children: 'RTL text'
|
|
252
|
-
};
|
|
253
244
|
const IconOnly = Template.bind({});
|
|
254
245
|
exports.IconOnly = IconOnly;
|
|
255
246
|
IconOnly.args = {
|
|
256
247
|
icon: DemoIcon24,
|
|
257
248
|
name: 'Icon only button',
|
|
258
|
-
children: null
|
|
249
|
+
children: null,
|
|
250
|
+
title: 'Icon Button',
|
|
251
|
+
ariaLabel: 'Icon Button'
|
|
259
252
|
};
|
|
260
253
|
const IconSmall = Template.bind({});
|
|
261
254
|
exports.IconSmall = IconSmall;
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["button.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["button.jsx-2860941869{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-2860941869:disabled{cursor:not-allowed;}", "button.jsx-2860941869:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-2860941869:focus.jsx-2860941869:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:active.jsx-2860941869:focus,button.jsx-2860941869:disabled.jsx-2860941869:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-2860941869:active,button.jsx-2860941869:active.jsx-2860941869: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-2860941869:focus{background-color:#f9fafb;}", "button.jsx-2860941869: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-2860941869{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-2860941869{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-2860941869{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-2860941869:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-2860941869:active,.primary.jsx-2860941869:active.jsx-2860941869: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-2860941869:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-2860941869:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-2860941869:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-2860941869:active,.secondary.jsx-2860941869:active.jsx-2860941869:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-2860941869:focus{background-color:transparent;}", ".secondary.jsx-2860941869: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-2860941869{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-2860941869:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-2860941869:active,.destructive.jsx-2860941869:active.jsx-2860941869: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-2860941869:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-2860941869:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".destructive.secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-2860941869:hover{border-color:".concat(_uiConstants.colors.red600, ";background:").concat(_uiConstants.colors.red050, ";color:").concat(_uiConstants.colors.red800, ";fill:").concat(_uiConstants.colors.red800, ";}"), ".destructive.secondary.jsx-2860941869:active,.destructive.secondary.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(_uiConstants.colors.red100, ";border-color:").concat(_uiConstants.colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-2860941869:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-2860941869{padding:0 0 0 5px;}", ".button-icon.jsx-2860941869{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:5px;}", ".small.icon-only.jsx-2860941869{padding:0 4px 0 5px;}", ".small.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:2px;}", ".small.icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:1px;}", ".toggled.jsx-2860941869{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-2860941869:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-2860941869:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-2860941869:active,.toggled.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-2860941869:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-2860941869{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-2860941869+.button-icon.jsx-2860941869{display:none;}", ".icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 8px 0 4px;}", ".small.icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 4px;}"];
|
|
11
|
+
_defaultExport.__hash = "2860941869";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -33,17 +33,17 @@ const ButtonStrip = _ref => {
|
|
|
33
33
|
} = _ref;
|
|
34
34
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
35
35
|
"data-test": dataTest,
|
|
36
|
-
className: _style.default.dynamic([["
|
|
36
|
+
className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + ((0, _classnames.default)(className, {
|
|
37
37
|
start: !middle && !end,
|
|
38
38
|
middle,
|
|
39
39
|
end
|
|
40
40
|
}) || "")
|
|
41
41
|
}, _react.Children.map(children, child => /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
-
className: _style.default.dynamic([["
|
|
42
|
+
className: _style.default.dynamic([["1268901109", [_uiConstants.spacers.dp8]]]) + " " + "box"
|
|
43
43
|
}, child)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
44
|
-
id: "
|
|
44
|
+
id: "1268901109",
|
|
45
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-
|
|
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
47
|
};
|
|
48
48
|
|
|
49
49
|
exports.ButtonStrip = ButtonStrip;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.
|
|
6
|
+
exports.default = exports.DefaultAlignedRight = exports.DefaultAlignedMiddle = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -72,11 +72,4 @@ exports.DefaultAlignedRight = DefaultAlignedRight;
|
|
|
72
72
|
DefaultAlignedRight.args = {
|
|
73
73
|
end: true
|
|
74
74
|
};
|
|
75
|
-
DefaultAlignedRight.storyName = 'Default - aligned right';
|
|
76
|
-
|
|
77
|
-
const DefaultRTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
78
|
-
dir: "rtl"
|
|
79
|
-
}, /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, args, /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save")));
|
|
80
|
-
|
|
81
|
-
exports.DefaultRTL = DefaultRTL;
|
|
82
|
-
DefaultRTL.storyName = 'Default - RTL';
|
|
75
|
+
DefaultAlignedRight.storyName = 'Default - aligned right';
|
|
@@ -71,9 +71,9 @@ ArrowUp.propTypes = {
|
|
|
71
71
|
};
|
|
72
72
|
const arrow = {
|
|
73
73
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
74
|
-
id: "
|
|
75
|
-
}, [".jsx-
|
|
76
|
-
className: "jsx-
|
|
74
|
+
id: "736002830"
|
|
75
|
+
}, [".jsx-736002830{margin-left:".concat(_uiConstants.spacers.dp12, ";}")]),
|
|
76
|
+
className: "jsx-736002830"
|
|
77
77
|
};
|
|
78
78
|
|
|
79
79
|
class DropdownButton extends _react.Component {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithMenu = exports.WithClick = exports.Small = exports.Secondary = 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
|
|
|
@@ -168,13 +168,4 @@ const ManualControlTemplate = args => {
|
|
|
168
168
|
|
|
169
169
|
const ManualControl = ManualControlTemplate.bind({});
|
|
170
170
|
exports.ManualControl = ManualControl;
|
|
171
|
-
ManualControl.args = {};
|
|
172
|
-
|
|
173
|
-
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
174
|
-
dir: "rtl"
|
|
175
|
-
}, /*#__PURE__*/_react.default.createElement(_index.DropdownButton, args));
|
|
176
|
-
|
|
177
|
-
exports.RTL = RTL;
|
|
178
|
-
RTL.args = {
|
|
179
|
-
children: 'RTL text'
|
|
180
|
-
};
|
|
171
|
+
ManualControl.args = {};
|
|
@@ -89,7 +89,7 @@ class SplitButton extends _react.Component {
|
|
|
89
89
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
90
90
|
ref: this.anchorRef,
|
|
91
91
|
"data-test": dataTest,
|
|
92
|
-
className: "jsx-
|
|
92
|
+
className: "jsx-4268400365"
|
|
93
93
|
}, /*#__PURE__*/_react.default.createElement(_index.Button, {
|
|
94
94
|
name: name,
|
|
95
95
|
value: value,
|
|
@@ -128,8 +128,8 @@ class SplitButton extends _react.Component {
|
|
|
128
128
|
placement: "bottom-end",
|
|
129
129
|
reference: this.anchorRef
|
|
130
130
|
}, component)), rightButton.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
131
|
-
id: "
|
|
132
|
-
}, ["div.jsx-
|
|
131
|
+
id: "4268400365"
|
|
132
|
+
}, ["div.jsx-4268400365{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-4268400365>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;}", "div.jsx-4268400365>button:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}"]));
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithIcon = exports.Small = exports.Secondary = 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
|
|
|
@@ -116,13 +116,4 @@ WithIcon.args = {
|
|
|
116
116
|
children: 'Children',
|
|
117
117
|
component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
|
|
118
118
|
icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
122
|
-
dir: "rtl"
|
|
123
|
-
}, /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, args));
|
|
124
|
-
|
|
125
|
-
exports.RTL = RTL;
|
|
126
|
-
RTL.args = {
|
|
127
|
-
children: 'RTL text'
|
|
128
119
|
};
|
|
@@ -23,6 +23,17 @@ describe('<Button>', () => {
|
|
|
23
23
|
});
|
|
24
24
|
expect(actual.length).toBe(1);
|
|
25
25
|
});
|
|
26
|
+
it('has the accessibility attributes', () => {
|
|
27
|
+
const dataTest = 'button-data-test';
|
|
28
|
+
const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
|
|
29
|
+
dataTest: dataTest,
|
|
30
|
+
ariaLabel: "test aria label",
|
|
31
|
+
title: "title for button"
|
|
32
|
+
}));
|
|
33
|
+
const buttonElement = wrapper.find('button').getDOMNode();
|
|
34
|
+
expect(buttonElement).toHaveAttribute('title', 'title for button');
|
|
35
|
+
expect(buttonElement).toHaveAttribute('ariaLabel', 'test aria label');
|
|
36
|
+
});
|
|
26
37
|
describe('toggle', () => {
|
|
27
38
|
it('should have class "toggled" if toggled-prop is true', () => {
|
|
28
39
|
const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
|
|
2
5
|
import { CircularLoader } from '@dhis2-ui/loader';
|
|
3
6
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
4
7
|
import cx from 'classnames';
|
|
@@ -27,7 +30,8 @@ export const Button = _ref => {
|
|
|
27
30
|
onClick,
|
|
28
31
|
onFocus,
|
|
29
32
|
onKeyDown,
|
|
30
|
-
loading
|
|
33
|
+
loading,
|
|
34
|
+
...otherProps
|
|
31
35
|
} = _ref;
|
|
32
36
|
const ref = useRef();
|
|
33
37
|
useEffect(() => {
|
|
@@ -67,7 +71,7 @@ export const Button = _ref => {
|
|
|
67
71
|
toggled,
|
|
68
72
|
loading: loading
|
|
69
73
|
});
|
|
70
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
74
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
|
71
75
|
ref: ref,
|
|
72
76
|
name: name,
|
|
73
77
|
"data-test": dataTest,
|
|
@@ -77,9 +81,10 @@ export const Button = _ref => {
|
|
|
77
81
|
onBlur: handleBlur,
|
|
78
82
|
onClick: handleClick,
|
|
79
83
|
onFocus: handleFocus,
|
|
80
|
-
onKeyDown: handleKeyDown
|
|
81
|
-
|
|
82
|
-
|
|
84
|
+
onKeyDown: handleKeyDown
|
|
85
|
+
}, otherProps, {
|
|
86
|
+
className: "jsx-".concat(styles.__hash) + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
|
|
87
|
+
}), loading && /*#__PURE__*/React.createElement("span", {
|
|
83
88
|
className: "jsx-".concat(styles.__hash) + " " + "loader"
|
|
84
89
|
}, destructive || primary ? /*#__PURE__*/React.createElement(CircularLoader, {
|
|
85
90
|
extrasmall: true,
|
|
@@ -32,7 +32,9 @@ export default {
|
|
|
32
32
|
args: {
|
|
33
33
|
children: 'Label me!',
|
|
34
34
|
value: 'default',
|
|
35
|
-
onClick: logger
|
|
35
|
+
onClick: logger,
|
|
36
|
+
title: 'Button',
|
|
37
|
+
ariaLabel: 'Button'
|
|
36
38
|
},
|
|
37
39
|
argTypes: {
|
|
38
40
|
primary: { ...buttonVariantArgType
|
|
@@ -210,19 +212,13 @@ Icon.parameters = {
|
|
|
210
212
|
}
|
|
211
213
|
}
|
|
212
214
|
};
|
|
213
|
-
export const IconRTL = args => /*#__PURE__*/React.createElement("div", {
|
|
214
|
-
dir: "rtl"
|
|
215
|
-
}, /*#__PURE__*/React.createElement(Button, args));
|
|
216
|
-
IconRTL.args = {
|
|
217
|
-
icon: DemoIcon24,
|
|
218
|
-
name: 'RTL icon button',
|
|
219
|
-
children: 'RTL text'
|
|
220
|
-
};
|
|
221
215
|
export const IconOnly = Template.bind({});
|
|
222
216
|
IconOnly.args = {
|
|
223
217
|
icon: DemoIcon24,
|
|
224
218
|
name: 'Icon only button',
|
|
225
|
-
children: null
|
|
219
|
+
children: null,
|
|
220
|
+
title: 'Icon Button',
|
|
221
|
+
ariaLabel: 'Icon Button'
|
|
226
222
|
};
|
|
227
223
|
export const IconSmall = Template.bind({});
|
|
228
224
|
IconSmall.args = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors, theme, spacers } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["button.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["button.jsx-2860941869{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-2860941869:disabled{cursor:not-allowed;}", "button.jsx-2860941869:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-2860941869:focus.jsx-2860941869:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:active.jsx-2860941869:focus,button.jsx-2860941869:disabled.jsx-2860941869:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-2860941869:hover{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-2860941869:active,button.jsx-2860941869:active.jsx-2860941869: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-2860941869:focus{background-color:#f9fafb;}", "button.jsx-2860941869:disabled{border-color:".concat(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-2860941869{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-2860941869{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-2860941869{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-2860941869:hover{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-2860941869:active,.primary.jsx-2860941869:active.jsx-2860941869: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-2860941869:focus{background:".concat(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-2860941869:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-2860941869:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-2860941869:active,.secondary.jsx-2860941869:active.jsx-2860941869:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-2860941869:focus{background-color:transparent;}", ".secondary.jsx-2860941869: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-2860941869{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-2860941869:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-2860941869:active,.destructive.jsx-2860941869:active.jsx-2860941869: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-2860941869:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-2860941869:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".destructive.secondary.jsx-2860941869{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(colors.red700, ";fill:").concat(colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-2860941869:hover{border-color:".concat(colors.red600, ";background:").concat(colors.red050, ";color:").concat(colors.red800, ";fill:").concat(colors.red800, ";}"), ".destructive.secondary.jsx-2860941869:active,.destructive.secondary.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(colors.red100, ";border-color:").concat(colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-2860941869:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-2860941869{padding:0 0 0 5px;}", ".button-icon.jsx-2860941869{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:5px;}", ".small.icon-only.jsx-2860941869{padding:0 4px 0 5px;}", ".small.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:2px;}", ".small.icon-only.jsx-2860941869 .button-icon.jsx-2860941869{margin-right:1px;}", ".toggled.jsx-2860941869{background:".concat(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-2860941869:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-2860941869:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-2860941869:active,.toggled.jsx-2860941869:active.jsx-2860941869:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-2860941869:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".loader.jsx-2860941869{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-2860941869+.button-icon.jsx-2860941869{display:none;}", ".icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 8px 0 4px;}", ".small.icon-only.jsx-2860941869 .loader.jsx-2860941869{margin:0 4px;}"];
|
|
3
|
+
_defaultExport.__hash = "2860941869";
|
|
4
4
|
export default _defaultExport;
|
|
@@ -15,17 +15,17 @@ const ButtonStrip = _ref => {
|
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/React.createElement("div", {
|
|
17
17
|
"data-test": dataTest,
|
|
18
|
-
className: _JSXStyle.dynamic([["
|
|
18
|
+
className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + (cx(className, {
|
|
19
19
|
start: !middle && !end,
|
|
20
20
|
middle,
|
|
21
21
|
end
|
|
22
22
|
}) || "")
|
|
23
23
|
}, Children.map(children, child => /*#__PURE__*/React.createElement("div", {
|
|
24
|
-
className: _JSXStyle.dynamic([["
|
|
24
|
+
className: _JSXStyle.dynamic([["1268901109", [spacers.dp8]]]) + " " + "box"
|
|
25
25
|
}, child)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
26
|
-
id: "
|
|
26
|
+
id: "1268901109",
|
|
27
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-
|
|
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
29
|
};
|
|
30
30
|
|
|
31
31
|
const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool);
|
|
@@ -50,8 +50,4 @@ export const DefaultAlignedRight = args => /*#__PURE__*/React.createElement(Butt
|
|
|
50
50
|
DefaultAlignedRight.args = {
|
|
51
51
|
end: true
|
|
52
52
|
};
|
|
53
|
-
DefaultAlignedRight.storyName = 'Default - aligned right';
|
|
54
|
-
export const DefaultRTL = args => /*#__PURE__*/React.createElement("div", {
|
|
55
|
-
dir: "rtl"
|
|
56
|
-
}, /*#__PURE__*/React.createElement(ButtonStrip, args, /*#__PURE__*/React.createElement(Button, null, "Save"), /*#__PURE__*/React.createElement(Button, null, "Save"), /*#__PURE__*/React.createElement(Button, null, "Save"), /*#__PURE__*/React.createElement(Button, null, "Save")));
|
|
57
|
-
DefaultRTL.storyName = 'Default - RTL';
|
|
53
|
+
DefaultAlignedRight.storyName = 'Default - aligned right';
|
|
@@ -52,9 +52,9 @@ ArrowUp.propTypes = {
|
|
|
52
52
|
};
|
|
53
53
|
const arrow = {
|
|
54
54
|
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
55
|
-
id: "
|
|
56
|
-
}, [".jsx-
|
|
57
|
-
className: "jsx-
|
|
55
|
+
id: "736002830"
|
|
56
|
+
}, [".jsx-736002830{margin-left:".concat(spacers.dp12, ";}")]),
|
|
57
|
+
className: "jsx-736002830"
|
|
58
58
|
};
|
|
59
59
|
|
|
60
60
|
class DropdownButton extends Component {
|
|
@@ -137,10 +137,4 @@ const ManualControlTemplate = args => {
|
|
|
137
137
|
};
|
|
138
138
|
|
|
139
139
|
export const ManualControl = ManualControlTemplate.bind({});
|
|
140
|
-
ManualControl.args = {};
|
|
141
|
-
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
142
|
-
dir: "rtl"
|
|
143
|
-
}, /*#__PURE__*/React.createElement(DropdownButton, args));
|
|
144
|
-
RTL.args = {
|
|
145
|
-
children: 'RTL text'
|
|
146
|
-
};
|
|
140
|
+
ManualControl.args = {};
|
|
@@ -68,7 +68,7 @@ class SplitButton extends Component {
|
|
|
68
68
|
return /*#__PURE__*/React.createElement("div", {
|
|
69
69
|
ref: this.anchorRef,
|
|
70
70
|
"data-test": dataTest,
|
|
71
|
-
className: "jsx-
|
|
71
|
+
className: "jsx-4268400365"
|
|
72
72
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
73
73
|
name: name,
|
|
74
74
|
value: value,
|
|
@@ -107,8 +107,8 @@ class SplitButton extends Component {
|
|
|
107
107
|
placement: "bottom-end",
|
|
108
108
|
reference: this.anchorRef
|
|
109
109
|
}, component)), rightButton.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
110
|
-
id: "
|
|
111
|
-
}, ["div.jsx-
|
|
110
|
+
id: "4268400365"
|
|
111
|
+
}, ["div.jsx-4268400365{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-4268400365>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;}", "div.jsx-4268400365>button:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}"]));
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
}
|
|
@@ -93,10 +93,4 @@ WithIcon.args = {
|
|
|
93
93
|
children: 'Children',
|
|
94
94
|
component: /*#__PURE__*/React.createElement("div", null, "Component"),
|
|
95
95
|
icon: /*#__PURE__*/React.createElement("div", null, "Icon")
|
|
96
|
-
};
|
|
97
|
-
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
98
|
-
dir: "rtl"
|
|
99
|
-
}, /*#__PURE__*/React.createElement(SplitButton, args));
|
|
100
|
-
RTL.args = {
|
|
101
|
-
children: 'RTL text'
|
|
102
96
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "9.3.0
|
|
3
|
+
"version": "9.3.0",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/layer": "9.3.0
|
|
37
|
-
"@dhis2-ui/loader": "9.3.0
|
|
38
|
-
"@dhis2-ui/popper": "9.3.0
|
|
39
|
-
"@dhis2/ui-constants": "9.3.0
|
|
40
|
-
"@dhis2/ui-icons": "9.3.0
|
|
36
|
+
"@dhis2-ui/layer": "9.3.0",
|
|
37
|
+
"@dhis2-ui/loader": "9.3.0",
|
|
38
|
+
"@dhis2-ui/popper": "9.3.0",
|
|
39
|
+
"@dhis2/ui-constants": "9.3.0",
|
|
40
|
+
"@dhis2/ui-icons": "9.3.0",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"prop-types": "^15.7.2"
|
|
43
43
|
},
|
package/types/index.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ type ButtonOpenEventHandler<
|
|
|
16
16
|
Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
|
|
17
17
|
> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
|
|
18
18
|
|
|
19
|
-
export interface ButtonProps {
|
|
19
|
+
export interface ButtonProps extends HTMLButtonElement {
|
|
20
20
|
/**
|
|
21
21
|
* Component to render inside the button
|
|
22
22
|
*/
|