@dhis2-ui/button 8.15.0-alpha.3 → 8.15.0
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/button/button.js +5 -9
- package/build/cjs/button/button.stories.js +40 -8
- package/build/cjs/button/button.styles.js +2 -2
- package/build/es/button/button.js +5 -9
- package/build/es/button/button.stories.js +35 -7
- package/build/es/button/button.styles.js +2 -2
- package/package.json +8 -11
- package/types/index.d.ts +0 -256
|
@@ -132,11 +132,9 @@ Button.propTypes = {
|
|
|
132
132
|
dataTest: _propTypes.default.string,
|
|
133
133
|
|
|
134
134
|
/**
|
|
135
|
-
*
|
|
136
|
-
* deletions or data changes.
|
|
137
|
-
* Mutually exclusive with `primary` and `secondary` props
|
|
135
|
+
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
138
136
|
*/
|
|
139
|
-
destructive:
|
|
137
|
+
destructive: _propTypes.default.bool,
|
|
140
138
|
|
|
141
139
|
/** Applies a greyed-out appearance and makes the button non-interactive */
|
|
142
140
|
disabled: _propTypes.default.bool,
|
|
@@ -160,16 +158,14 @@ Button.propTypes = {
|
|
|
160
158
|
name: _propTypes.default.string,
|
|
161
159
|
|
|
162
160
|
/**
|
|
163
|
-
* Applies 'primary' button appearance.
|
|
164
|
-
* Mutually exclusive with `destructive` and `secondary` props
|
|
161
|
+
* Applies 'primary' button appearance, implying the most important action.
|
|
165
162
|
*/
|
|
166
|
-
primary:
|
|
163
|
+
primary: _propTypes.default.bool,
|
|
167
164
|
|
|
168
165
|
/**
|
|
169
166
|
* Applies 'secondary' button appearance.
|
|
170
|
-
* Mutually exclusive with `primary` and `destructive` props
|
|
171
167
|
*/
|
|
172
|
-
secondary:
|
|
168
|
+
secondary: _propTypes.default.bool,
|
|
173
169
|
|
|
174
170
|
/** Makes the button small. Mutually exclusive with `large` prop */
|
|
175
171
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
|
@@ -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.Icon = exports.Disabled = exports.Destructive = exports.Basic = void 0;
|
|
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
|
|
|
@@ -61,14 +61,24 @@ var _default = {
|
|
|
61
61
|
};
|
|
62
62
|
exports.default = _default;
|
|
63
63
|
|
|
64
|
-
const
|
|
64
|
+
const DemoIcon24 = /*#__PURE__*/_react.default.createElement("svg", {
|
|
65
65
|
height: "24",
|
|
66
66
|
viewBox: "0 0 24 24",
|
|
67
67
|
width: "24",
|
|
68
68
|
xmlns: "http://www.w3.org/2000/svg"
|
|
69
69
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
70
70
|
d: "m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z",
|
|
71
|
-
fill: "
|
|
71
|
+
fill: "inherit"
|
|
72
|
+
}));
|
|
73
|
+
|
|
74
|
+
const DemoIcon16 = /*#__PURE__*/_react.default.createElement("svg", {
|
|
75
|
+
height: "16",
|
|
76
|
+
viewBox: "0 0 16 16",
|
|
77
|
+
width: "16",
|
|
78
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
80
|
+
d: "m6.85355339 9.14644661c.17356635.17356635.1928515.44299075.05785545.63785889l-.05785545.06924789-4.14755339 4.14644661h2.794c.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756c0 .2454599-.17687516.4496084-.41012437.4919443l-.08987563.0080557h-4c-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-4c0-.2761424.22385763-.5.5-.5.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756v2.792l4.14644661-4.14555339c.19526215-.19526215.51184463-.19526215.70710678 0zm6.14644661-2.14644661v6h-6v-1h5v-5zm-4-4v1h-5v5h-1v-6zm5.5-2c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563v4c0 .27614237-.2238576.5-.5.5-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563v-2.794l-4.14644661 4.14755339c-.19526215.19526215-.51184463.19526215-.70710678 0-.17356635-.17356635-.1928515-.44299075-.05785545-.63785889l.05785545-.06924789 4.14655339-4.14744661-2.793.001c-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563c0-.24545989.1768752-.44960837.4101244-.49194433l.0898756-.00805567z",
|
|
81
|
+
fill: "inherit"
|
|
72
82
|
}));
|
|
73
83
|
|
|
74
84
|
const Template = args => /*#__PURE__*/_react.default.createElement(_button.Button, args);
|
|
@@ -126,6 +136,13 @@ Destructive.parameters = {
|
|
|
126
136
|
}
|
|
127
137
|
}
|
|
128
138
|
};
|
|
139
|
+
const DestructiveSecondary = Template.bind({});
|
|
140
|
+
exports.DestructiveSecondary = DestructiveSecondary;
|
|
141
|
+
DestructiveSecondary.args = {
|
|
142
|
+
destructive: true,
|
|
143
|
+
secondary: true,
|
|
144
|
+
name: 'Destructive secondary button'
|
|
145
|
+
};
|
|
129
146
|
|
|
130
147
|
const Disabled = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
|
|
131
148
|
name: "Disabled button"
|
|
@@ -208,7 +225,7 @@ const Icon = args => /*#__PURE__*/_react.default.createElement(_react.default.Fr
|
|
|
208
225
|
|
|
209
226
|
exports.Icon = Icon;
|
|
210
227
|
Icon.args = {
|
|
211
|
-
icon:
|
|
228
|
+
icon: DemoIcon24,
|
|
212
229
|
name: 'Icon button'
|
|
213
230
|
};
|
|
214
231
|
Icon.parameters = {
|
|
@@ -222,19 +239,34 @@ Icon.parameters = {
|
|
|
222
239
|
}
|
|
223
240
|
}
|
|
224
241
|
};
|
|
242
|
+
const IconOnly = Template.bind({});
|
|
243
|
+
exports.IconOnly = IconOnly;
|
|
244
|
+
IconOnly.args = {
|
|
245
|
+
icon: DemoIcon24,
|
|
246
|
+
name: 'Icon only button',
|
|
247
|
+
children: null
|
|
248
|
+
};
|
|
225
249
|
const IconSmall = Template.bind({});
|
|
226
250
|
exports.IconSmall = IconSmall;
|
|
227
251
|
IconSmall.args = {
|
|
228
|
-
icon:
|
|
252
|
+
icon: DemoIcon16,
|
|
229
253
|
small: true,
|
|
230
254
|
name: 'Icon small button',
|
|
255
|
+
children: 'Label me!'
|
|
256
|
+
};
|
|
257
|
+
const IconOnlySmall = Template.bind({});
|
|
258
|
+
exports.IconOnlySmall = IconOnlySmall;
|
|
259
|
+
IconOnlySmall.args = {
|
|
260
|
+
icon: DemoIcon16,
|
|
261
|
+
small: true,
|
|
262
|
+
name: 'Icon only small button',
|
|
231
263
|
children: null
|
|
232
264
|
};
|
|
233
265
|
const Toggled = Template.bind({});
|
|
234
266
|
exports.Toggled = Toggled;
|
|
235
267
|
Toggled.args = {
|
|
236
268
|
toggled: true,
|
|
237
|
-
icon:
|
|
269
|
+
icon: DemoIcon24,
|
|
238
270
|
name: 'Toggled button',
|
|
239
271
|
children: null
|
|
240
272
|
};
|
|
@@ -256,7 +288,7 @@ exports.ToggledDisabled = ToggledDisabled;
|
|
|
256
288
|
ToggledDisabled.args = {
|
|
257
289
|
toggled: true,
|
|
258
290
|
disabled: true,
|
|
259
|
-
icon:
|
|
291
|
+
icon: DemoIcon24,
|
|
260
292
|
name: 'Toggled button',
|
|
261
293
|
children: null
|
|
262
294
|
};
|
|
@@ -274,7 +306,7 @@ Loading.args = {
|
|
|
274
306
|
name: 'Loading button',
|
|
275
307
|
loading: true,
|
|
276
308
|
children: 'Loading...',
|
|
277
|
-
icon:
|
|
309
|
+
icon: DemoIcon24
|
|
278
310
|
};
|
|
279
311
|
Loading.parameters = {
|
|
280
312
|
docs: {
|
|
@@ -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;
|
|
@@ -110,11 +110,9 @@ Button.propTypes = {
|
|
|
110
110
|
dataTest: PropTypes.string,
|
|
111
111
|
|
|
112
112
|
/**
|
|
113
|
-
*
|
|
114
|
-
* deletions or data changes.
|
|
115
|
-
* Mutually exclusive with `primary` and `secondary` props
|
|
113
|
+
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
116
114
|
*/
|
|
117
|
-
destructive:
|
|
115
|
+
destructive: PropTypes.bool,
|
|
118
116
|
|
|
119
117
|
/** Applies a greyed-out appearance and makes the button non-interactive */
|
|
120
118
|
disabled: PropTypes.bool,
|
|
@@ -138,16 +136,14 @@ Button.propTypes = {
|
|
|
138
136
|
name: PropTypes.string,
|
|
139
137
|
|
|
140
138
|
/**
|
|
141
|
-
* Applies 'primary' button appearance.
|
|
142
|
-
* Mutually exclusive with `destructive` and `secondary` props
|
|
139
|
+
* Applies 'primary' button appearance, implying the most important action.
|
|
143
140
|
*/
|
|
144
|
-
primary:
|
|
141
|
+
primary: PropTypes.bool,
|
|
145
142
|
|
|
146
143
|
/**
|
|
147
144
|
* Applies 'secondary' button appearance.
|
|
148
|
-
* Mutually exclusive with `primary` and `destructive` props
|
|
149
145
|
*/
|
|
150
|
-
secondary:
|
|
146
|
+
secondary: PropTypes.bool,
|
|
151
147
|
|
|
152
148
|
/** Makes the button small. Mutually exclusive with `large` prop */
|
|
153
149
|
small: sharedPropTypes.sizePropType,
|
|
@@ -47,14 +47,23 @@ export default {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
|
-
const
|
|
50
|
+
const DemoIcon24 = /*#__PURE__*/React.createElement("svg", {
|
|
51
51
|
height: "24",
|
|
52
52
|
viewBox: "0 0 24 24",
|
|
53
53
|
width: "24",
|
|
54
54
|
xmlns: "http://www.w3.org/2000/svg"
|
|
55
55
|
}, /*#__PURE__*/React.createElement("path", {
|
|
56
56
|
d: "m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z",
|
|
57
|
-
fill: "
|
|
57
|
+
fill: "inherit"
|
|
58
|
+
}));
|
|
59
|
+
const DemoIcon16 = /*#__PURE__*/React.createElement("svg", {
|
|
60
|
+
height: "16",
|
|
61
|
+
viewBox: "0 0 16 16",
|
|
62
|
+
width: "16",
|
|
63
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
64
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
65
|
+
d: "m6.85355339 9.14644661c.17356635.17356635.1928515.44299075.05785545.63785889l-.05785545.06924789-4.14755339 4.14644661h2.794c.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756c0 .2454599-.17687516.4496084-.41012437.4919443l-.08987563.0080557h-4c-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-4c0-.2761424.22385763-.5.5-.5.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756v2.792l4.14644661-4.14555339c.19526215-.19526215.51184463-.19526215.70710678 0zm6.14644661-2.14644661v6h-6v-1h5v-5zm-4-4v1h-5v5h-1v-6zm5.5-2c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563v4c0 .27614237-.2238576.5-.5.5-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563v-2.794l-4.14644661 4.14755339c-.19526215.19526215-.51184463.19526215-.70710678 0-.17356635-.17356635-.1928515-.44299075-.05785545-.63785889l.05785545-.06924789 4.14655339-4.14744661-2.793.001c-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563c0-.24545989.1768752-.44960837.4101244-.49194433l.0898756-.00805567z",
|
|
66
|
+
fill: "inherit"
|
|
58
67
|
}));
|
|
59
68
|
|
|
60
69
|
const Template = args => /*#__PURE__*/React.createElement(Button, args);
|
|
@@ -108,6 +117,12 @@ Destructive.parameters = {
|
|
|
108
117
|
}
|
|
109
118
|
}
|
|
110
119
|
};
|
|
120
|
+
export const DestructiveSecondary = Template.bind({});
|
|
121
|
+
DestructiveSecondary.args = {
|
|
122
|
+
destructive: true,
|
|
123
|
+
secondary: true,
|
|
124
|
+
name: 'Destructive secondary button'
|
|
125
|
+
};
|
|
111
126
|
export const Disabled = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
|
|
112
127
|
name: "Disabled button"
|
|
113
128
|
}, args)), /*#__PURE__*/React.createElement(Button, _extends({
|
|
@@ -181,7 +196,7 @@ export const Icon = args => /*#__PURE__*/React.createElement(React.Fragment, nul
|
|
|
181
196
|
destructive: true
|
|
182
197
|
}, args)));
|
|
183
198
|
Icon.args = {
|
|
184
|
-
icon:
|
|
199
|
+
icon: DemoIcon24,
|
|
185
200
|
name: 'Icon button'
|
|
186
201
|
};
|
|
187
202
|
Icon.parameters = {
|
|
@@ -195,17 +210,30 @@ Icon.parameters = {
|
|
|
195
210
|
}
|
|
196
211
|
}
|
|
197
212
|
};
|
|
213
|
+
export const IconOnly = Template.bind({});
|
|
214
|
+
IconOnly.args = {
|
|
215
|
+
icon: DemoIcon24,
|
|
216
|
+
name: 'Icon only button',
|
|
217
|
+
children: null
|
|
218
|
+
};
|
|
198
219
|
export const IconSmall = Template.bind({});
|
|
199
220
|
IconSmall.args = {
|
|
200
|
-
icon:
|
|
221
|
+
icon: DemoIcon16,
|
|
201
222
|
small: true,
|
|
202
223
|
name: 'Icon small button',
|
|
224
|
+
children: 'Label me!'
|
|
225
|
+
};
|
|
226
|
+
export const IconOnlySmall = Template.bind({});
|
|
227
|
+
IconOnlySmall.args = {
|
|
228
|
+
icon: DemoIcon16,
|
|
229
|
+
small: true,
|
|
230
|
+
name: 'Icon only small button',
|
|
203
231
|
children: null
|
|
204
232
|
};
|
|
205
233
|
export const Toggled = Template.bind({});
|
|
206
234
|
Toggled.args = {
|
|
207
235
|
toggled: true,
|
|
208
|
-
icon:
|
|
236
|
+
icon: DemoIcon24,
|
|
209
237
|
name: 'Toggled button',
|
|
210
238
|
children: null
|
|
211
239
|
};
|
|
@@ -226,7 +254,7 @@ export const ToggledDisabled = Template.bind({});
|
|
|
226
254
|
ToggledDisabled.args = {
|
|
227
255
|
toggled: true,
|
|
228
256
|
disabled: true,
|
|
229
|
-
icon:
|
|
257
|
+
icon: DemoIcon24,
|
|
230
258
|
name: 'Toggled button',
|
|
231
259
|
children: null
|
|
232
260
|
};
|
|
@@ -241,7 +269,7 @@ Loading.args = {
|
|
|
241
269
|
name: 'Loading button',
|
|
242
270
|
loading: true,
|
|
243
271
|
children: 'Loading...',
|
|
244
|
-
icon:
|
|
272
|
+
icon: DemoIcon24
|
|
245
273
|
};
|
|
246
274
|
Loading.parameters = {
|
|
247
275
|
docs: {
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "8.15.0
|
|
3
|
+
"version": "8.15.0",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
"main": "./build/cjs/index.js",
|
|
14
14
|
"module": "./build/es/index.js",
|
|
15
15
|
"exports": {
|
|
16
|
-
"types": "./types/index.d.ts",
|
|
17
16
|
"import": "./build/es/index.js",
|
|
18
17
|
"require": "./build/cjs/index.js"
|
|
19
18
|
},
|
|
@@ -33,22 +32,20 @@
|
|
|
33
32
|
},
|
|
34
33
|
"dependencies": {
|
|
35
34
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/layer": "8.15.0
|
|
37
|
-
"@dhis2-ui/loader": "8.15.0
|
|
38
|
-
"@dhis2-ui/popper": "8.15.0
|
|
39
|
-
"@dhis2/ui-constants": "8.15.0
|
|
40
|
-
"@dhis2/ui-icons": "8.15.0
|
|
35
|
+
"@dhis2-ui/layer": "8.15.0",
|
|
36
|
+
"@dhis2-ui/loader": "8.15.0",
|
|
37
|
+
"@dhis2-ui/popper": "8.15.0",
|
|
38
|
+
"@dhis2/ui-constants": "8.15.0",
|
|
39
|
+
"@dhis2/ui-icons": "8.15.0",
|
|
41
40
|
"classnames": "^2.3.1",
|
|
42
41
|
"prop-types": "^15.7.2"
|
|
43
42
|
},
|
|
44
43
|
"files": [
|
|
45
|
-
"build"
|
|
46
|
-
"types"
|
|
44
|
+
"build"
|
|
47
45
|
],
|
|
48
46
|
"devDependencies": {
|
|
49
47
|
"react": "16.13",
|
|
50
48
|
"react-dom": "16.13",
|
|
51
49
|
"styled-jsx": "^4.0.1"
|
|
52
|
-
}
|
|
53
|
-
"types": "types"
|
|
50
|
+
}
|
|
54
51
|
}
|
package/types/index.d.ts
DELETED
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
|
|
3
|
-
export type ButtonType = 'submit' | 'reset' | 'button'
|
|
4
|
-
|
|
5
|
-
export interface ButtonEventPayload {
|
|
6
|
-
value?: string
|
|
7
|
-
name?: string
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
type ButtonEventHandler<Event extends React.SyntheticEvent> = (
|
|
11
|
-
arg0: ButtonEventPayload,
|
|
12
|
-
event: Event
|
|
13
|
-
) => void
|
|
14
|
-
|
|
15
|
-
type ButtonOpenEventHandler<
|
|
16
|
-
Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
|
|
17
|
-
> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
|
|
18
|
-
|
|
19
|
-
export interface ButtonProps {
|
|
20
|
-
/**
|
|
21
|
-
* Component to render inside the button
|
|
22
|
-
*/
|
|
23
|
-
children?: React.ReactNode
|
|
24
|
-
/**
|
|
25
|
-
* A className that will be passed to the `<button>` element
|
|
26
|
-
*/
|
|
27
|
-
className?: string
|
|
28
|
-
/**
|
|
29
|
-
* A string that will be applied as a `data-test` attribute on the button element
|
|
30
|
-
* for identification during testing
|
|
31
|
-
*/
|
|
32
|
-
dataTest?: string
|
|
33
|
-
/**
|
|
34
|
-
* Indicates that the button makes potentially dangerous
|
|
35
|
-
* deletions or data changes.
|
|
36
|
-
* Mutually exclusive with `primary` and `secondary` props
|
|
37
|
-
*/
|
|
38
|
-
destructive?: boolean
|
|
39
|
-
/**
|
|
40
|
-
* Applies a greyed-out appearance and makes the button non-interactive
|
|
41
|
-
*/
|
|
42
|
-
disabled?: boolean
|
|
43
|
-
/**
|
|
44
|
-
* An icon element to display inside the button
|
|
45
|
-
*/
|
|
46
|
-
icon?: React.ReactElement
|
|
47
|
-
/**
|
|
48
|
-
* Use this variant to capture the initial focus on the page.
|
|
49
|
-
*/
|
|
50
|
-
initialFocus?: boolean
|
|
51
|
-
/**
|
|
52
|
-
* Makes the button large. Mutually exclusive with `small`
|
|
53
|
-
*/
|
|
54
|
-
large?: boolean
|
|
55
|
-
/**
|
|
56
|
-
* Sets the button into a loading state
|
|
57
|
-
*/
|
|
58
|
-
loading?: boolean
|
|
59
|
-
/**
|
|
60
|
-
* Sets `name` attribute on button element.
|
|
61
|
-
* Gets passed as part of the first argument to callbacks (see `onClick`).
|
|
62
|
-
*/
|
|
63
|
-
name?: string
|
|
64
|
-
/**
|
|
65
|
-
* Applies 'primary' button appearance.
|
|
66
|
-
* Mutually exclusive with `destructive` and `secondary` props
|
|
67
|
-
*/
|
|
68
|
-
primary?: boolean
|
|
69
|
-
/**
|
|
70
|
-
* Applies 'secondary' button appearance.
|
|
71
|
-
* Mutually exclusive with `primary` and `destructive` props
|
|
72
|
-
*/
|
|
73
|
-
secondary?: boolean
|
|
74
|
-
/**
|
|
75
|
-
* Makes the button small. Mutually exclusive with `large` prop
|
|
76
|
-
*/
|
|
77
|
-
small?: boolean
|
|
78
|
-
/**
|
|
79
|
-
* Tab index for focusing the button with a keyboard
|
|
80
|
-
*/
|
|
81
|
-
tabIndex?: string
|
|
82
|
-
/**
|
|
83
|
-
* Changes appearance of button to an on/off state
|
|
84
|
-
*/
|
|
85
|
-
toggled?: boolean
|
|
86
|
-
/**
|
|
87
|
-
* Sets `type` attribute on `<button>` element
|
|
88
|
-
*/
|
|
89
|
-
type?: ButtonType
|
|
90
|
-
/**
|
|
91
|
-
* Value associated with the button.
|
|
92
|
-
* Gets passed as part of the first argument to callbacks (see `onClick`).
|
|
93
|
-
*/
|
|
94
|
-
value?: string
|
|
95
|
-
/**
|
|
96
|
-
* Callback to trigger on de-focus (blur).
|
|
97
|
-
* Called with same args as `onClick`
|
|
98
|
-
*/
|
|
99
|
-
onBlur?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
|
|
100
|
-
/**
|
|
101
|
-
* Callback to trigger on click.
|
|
102
|
-
* Called with args `({ value, name }, event)`
|
|
103
|
-
*/
|
|
104
|
-
onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>
|
|
105
|
-
/**
|
|
106
|
-
* Callback to trigger on focus. Called with same args as `onClick`
|
|
107
|
-
*/
|
|
108
|
-
onFocus?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
|
|
109
|
-
/**
|
|
110
|
-
* Callback to trigger on key-down. Called with same args as `onClick`
|
|
111
|
-
*/
|
|
112
|
-
onKeyDown?: ButtonEventHandler<React.KeyboardEvent<HTMLButtonElement>>
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
export const Button: React.FC<ButtonProps>
|
|
116
|
-
|
|
117
|
-
export interface ButtonStripProps {
|
|
118
|
-
children?: React.ReactNode
|
|
119
|
-
className?: string
|
|
120
|
-
dataTest?: string
|
|
121
|
-
/**
|
|
122
|
-
* Horizontal alignment for buttons. Mutually exclusive with `middle` prop
|
|
123
|
-
*/
|
|
124
|
-
end?: boolean
|
|
125
|
-
/**
|
|
126
|
-
* Horizontal alignment. Mutually exclusive with `end` prop
|
|
127
|
-
*/
|
|
128
|
-
middle?: boolean
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
export const ButtonStrip: React.FC<ButtonStripProps>
|
|
132
|
-
|
|
133
|
-
export type DropdownButtonType = 'submit' | 'reset' | 'button'
|
|
134
|
-
|
|
135
|
-
export interface DropdownButtonProps {
|
|
136
|
-
/**
|
|
137
|
-
* Children to render inside the buton
|
|
138
|
-
*/
|
|
139
|
-
children?: React.ReactNode
|
|
140
|
-
className?: string
|
|
141
|
-
/**
|
|
142
|
-
* Component to show/hide when button is clicked
|
|
143
|
-
*/
|
|
144
|
-
component?: React.ReactElement<any>
|
|
145
|
-
dataTest?: string
|
|
146
|
-
/**
|
|
147
|
-
* Button variant. Mutually exclusive with `primary` and `secondary` props
|
|
148
|
-
*/
|
|
149
|
-
destructive?: boolean
|
|
150
|
-
/**
|
|
151
|
-
* Make the button non-interactive
|
|
152
|
-
*/
|
|
153
|
-
disabled?: boolean
|
|
154
|
-
icon?: React.ReactElement<any>
|
|
155
|
-
/**
|
|
156
|
-
* Grants button initial focus on the page
|
|
157
|
-
*/
|
|
158
|
-
initialFocus?: boolean
|
|
159
|
-
/**
|
|
160
|
-
* Button size. Mutually exclusive with `small` prop
|
|
161
|
-
*/
|
|
162
|
-
large?: boolean
|
|
163
|
-
name?: string
|
|
164
|
-
/**
|
|
165
|
-
* Controls popper visibility. When implementing this prop the component becomes a controlled component
|
|
166
|
-
*/
|
|
167
|
-
open?: boolean
|
|
168
|
-
/**
|
|
169
|
-
* Button variant. Mutually exclusive with `destructive` and `secondary` props
|
|
170
|
-
*/
|
|
171
|
-
primary?: boolean
|
|
172
|
-
/**
|
|
173
|
-
* Button variant. Mutually exclusive with `primary` and `destructive` props
|
|
174
|
-
*/
|
|
175
|
-
secondary?: boolean
|
|
176
|
-
/**
|
|
177
|
-
* Button size. Mutually exclusive with `large` prop
|
|
178
|
-
*/
|
|
179
|
-
small?: boolean
|
|
180
|
-
tabIndex?: string
|
|
181
|
-
/**
|
|
182
|
-
* Type of button. Can take advantage of different default behavior
|
|
183
|
-
*/
|
|
184
|
-
type?: DropdownButtonType
|
|
185
|
-
value?: string
|
|
186
|
-
/**
|
|
187
|
-
* Callback triggered on click.
|
|
188
|
-
* Called with signature `({ name: string, value: string, open: bool }, event)`
|
|
189
|
-
* Is required when using the `open` prop to override the internal
|
|
190
|
-
* state.
|
|
191
|
-
*/
|
|
192
|
-
onClick?: ButtonOpenEventHandler
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
export class DropdownButton extends React.Component<DropdownButtonProps, any> {
|
|
196
|
-
render(): JSX.Element
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
export type SplitButtonType = 'submit' | 'reset' | 'button'
|
|
200
|
-
|
|
201
|
-
export interface SplitButtonProps {
|
|
202
|
-
children?: string
|
|
203
|
-
className?: string
|
|
204
|
-
/**
|
|
205
|
-
* Component to render when the dropdown is opened
|
|
206
|
-
*/
|
|
207
|
-
component?: React.ReactElement<any>
|
|
208
|
-
dataTest?: string
|
|
209
|
-
/**
|
|
210
|
-
* Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props
|
|
211
|
-
*/
|
|
212
|
-
destructive?: boolean
|
|
213
|
-
/**
|
|
214
|
-
* Disables the button and makes it uninteractive
|
|
215
|
-
*/
|
|
216
|
-
disabled?: boolean
|
|
217
|
-
/**
|
|
218
|
-
* An icon to add inside the button
|
|
219
|
-
*/
|
|
220
|
-
icon?: React.ReactElement<any>
|
|
221
|
-
/**
|
|
222
|
-
* Grants the button the initial focus
|
|
223
|
-
*/
|
|
224
|
-
initialFocus?: boolean
|
|
225
|
-
/**
|
|
226
|
-
* Changes button size. Mutually exclusive with `small` prop
|
|
227
|
-
*/
|
|
228
|
-
large?: boolean
|
|
229
|
-
name?: string
|
|
230
|
-
/**
|
|
231
|
-
* Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props
|
|
232
|
-
*/
|
|
233
|
-
primary?: boolean
|
|
234
|
-
/**
|
|
235
|
-
* Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props
|
|
236
|
-
*/
|
|
237
|
-
secondary?: boolean
|
|
238
|
-
/**
|
|
239
|
-
* Changes button size. Mutually exclusive with `large` prop
|
|
240
|
-
*/
|
|
241
|
-
small?: boolean
|
|
242
|
-
tabIndex?: string
|
|
243
|
-
/**
|
|
244
|
-
* Type of button. Applied to html `button` element
|
|
245
|
-
*/
|
|
246
|
-
type?: SplitButtonType
|
|
247
|
-
/**
|
|
248
|
-
* Value associated with the button. Passed in object to onClick handler
|
|
249
|
-
*/
|
|
250
|
-
value?: string
|
|
251
|
-
onClick?: ButtonOpenEventHandler
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
export class SplitButton extends React.Component<SplitButtonProps, any> {
|
|
255
|
-
render(): JSX.Element
|
|
256
|
-
}
|