@dhis2-ui/button 8.15.0-alpha.3 → 8.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
-
}
|