@dhis2-ui/button 8.15.0-alpha.3 → 8.15.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/build/cjs/button/button.js +5 -9
  2. package/build/cjs/button/button.stories.js +40 -8
  3. package/build/cjs/button/button.styles.js +2 -2
  4. package/build/cjs/dropdown-button/dropdown-button.js +12 -6
  5. package/build/cjs/split-button/split-button.js +12 -6
  6. package/build/es/button/button.js +5 -9
  7. package/build/es/button/button.stories.js +35 -7
  8. package/build/es/button/button.styles.js +2 -2
  9. package/build/es/dropdown-button/dropdown-button.js +12 -6
  10. package/build/es/split-button/split-button.js +12 -6
  11. package/package.json +8 -11
  12. package/types/index.d.ts +0 -256
package/build/cjs/button/button.js CHANGED
@@ -132,11 +132,9 @@ Button.propTypes = {
132
132
  dataTest: _propTypes.default.string,
133
133
 
134
134
  /**
135
- * Indicates that the button makes potentially dangerous
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: _uiConstants.sharedPropTypes.buttonVariantPropType,
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: _uiConstants.sharedPropTypes.buttonVariantPropType,
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: _uiConstants.sharedPropTypes.buttonVariantPropType,
168
+ secondary: _propTypes.default.bool,
173
169
 
174
170
  /** Makes the button small. Mutually exclusive with `large` prop */
175
171
  small: _uiConstants.sharedPropTypes.sizePropType,
package/build/cjs/button/button.stories.js CHANGED
@@ -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 DemoIcon = /*#__PURE__*/_react.default.createElement("svg", {
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: "#inherit"
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: DemoIcon,
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: DemoIcon,
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: DemoIcon,
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: DemoIcon,
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: DemoIcon
309
+ icon: DemoIcon24
278
310
  };
279
311
  Loading.parameters = {
280
312
  docs: {
package/build/cjs/button/button.styles.js CHANGED
@@ -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-441677069{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(_uiConstants.colors.grey900, ";height:36px;padding:0 ").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(_uiConstants.colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-441677069:disabled{cursor:not-allowed;}", "button.jsx-441677069:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-441677069:focus.jsx-441677069:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:active.jsx-441677069:focus,button.jsx-441677069:disabled.jsx-441677069:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-441677069:active,button.jsx-441677069:active.jsx-441677069:focus{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-441677069:focus{background-color:#f9fafb;}", "button.jsx-441677069:disabled{border-color:".concat(_uiConstants.colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".small.jsx-441677069{height:28px;padding:0 8px;font-size:14px;line-height:16px;}", ".large.jsx-441677069{height:43px;padding:0 ".concat(_uiConstants.spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-441677069{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".primary.jsx-441677069:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-441677069:active,.primary.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-441677069:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-441677069:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-441677069{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-441677069:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-441677069:active,.secondary.jsx-441677069:active.jsx-441677069:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-441677069:focus{background-color:transparent;}", ".secondary.jsx-441677069:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".destructive.jsx-441677069{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".destructive.jsx-441677069:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-441677069:active,.destructive.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-441677069:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-441677069:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".icon-only.jsx-441677069{padding:0 0 0 5px;}", ".button-icon.jsx-441677069{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:5px;}", ".small.icon-only.jsx-441677069{padding:0 0 0 1px;}", ".small.jsx-441677069 .button-icon.jsx-441677069{margin-right:2px;}", ".small.icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:1px;}", ".toggled.jsx-441677069{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-441677069:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-441677069:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-441677069:active,.toggled.jsx-441677069:active.jsx-441677069:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-441677069:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-441677069{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-441677069+.button-icon.jsx-441677069{display:none;}", ".icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 8px 0 4px;}", ".small.icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 4px;}"];
11
- _defaultExport.__hash = "441677069";
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;
package/build/cjs/dropdown-button/dropdown-button.js CHANGED
@@ -183,8 +183,10 @@ DropdownButton.propTypes = {
183
183
  component: _propTypes2.default.element,
184
184
  dataTest: _propTypes2.default.string,
185
185
 
186
- /** Button variant. Mutually exclusive with `primary` and `secondary` props */
187
- destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
186
+ /**
187
+ * Applies 'destructive' button appearance, implying a dangerous action.
188
+ */
189
+ destructive: _propTypes2.default.bool,
188
190
 
189
191
  /** Make the button non-interactive */
190
192
  disabled: _propTypes2.default.bool,
@@ -200,11 +202,15 @@ DropdownButton.propTypes = {
200
202
  /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
201
203
  open: _propTypes2.default.bool,
202
204
 
203
- /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
204
- primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
205
+ /**
206
+ * Applies 'primary' button appearance, implying the most important action.
207
+ */
208
+ primary: _propTypes2.default.bool,
205
209
 
206
- /** Button variant. Mutually exclusive with `primary` and `destructive` props */
207
- secondary: _uiConstants.sharedPropTypes.buttonVariantPropType,
210
+ /**
211
+ * Applies 'secondary' button appearance.
212
+ */
213
+ secondary: _propTypes2.default.bool,
208
214
 
209
215
  /** Button size. Mutually exclusive with `large` prop */
210
216
  small: _uiConstants.sharedPropTypes.sizePropType,
package/build/cjs/split-button/split-button.js CHANGED
@@ -146,8 +146,10 @@ SplitButton.propTypes = {
146
146
  component: _propTypes.default.element,
147
147
  dataTest: _propTypes.default.string,
148
148
 
149
- /** Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props */
150
- destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
149
+ /**
150
+ * Applies 'destructive' button appearance, implying a dangerous action.
151
+ */
152
+ destructive: _propTypes.default.bool,
151
153
 
152
154
  /** Disables the button and makes it uninteractive */
153
155
  disabled: _propTypes.default.bool,
@@ -162,11 +164,15 @@ SplitButton.propTypes = {
162
164
  large: _uiConstants.sharedPropTypes.sizePropType,
163
165
  name: _propTypes.default.string,
164
166
 
165
- /** Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props */
166
- primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
167
+ /**
168
+ * Applies 'primary' button appearance, implying the most important action.
169
+ */
170
+ primary: _propTypes.default.bool,
167
171
 
168
- /** Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props */
169
- secondary: _uiConstants.sharedPropTypes.buttonVariantPropType,
172
+ /**
173
+ * Applies 'secondary' button appearance.
174
+ */
175
+ secondary: _propTypes.default.bool,
170
176
 
171
177
  /** Changes button size. Mutually exclusive with `large` prop */
172
178
  small: _uiConstants.sharedPropTypes.sizePropType,
package/build/es/button/button.js CHANGED
@@ -110,11 +110,9 @@ Button.propTypes = {
110
110
  dataTest: PropTypes.string,
111
111
 
112
112
  /**
113
- * Indicates that the button makes potentially dangerous
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: sharedPropTypes.buttonVariantPropType,
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: sharedPropTypes.buttonVariantPropType,
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: sharedPropTypes.buttonVariantPropType,
146
+ secondary: PropTypes.bool,
151
147
 
152
148
  /** Makes the button small. Mutually exclusive with `large` prop */
153
149
  small: sharedPropTypes.sizePropType,
package/build/es/button/button.stories.js CHANGED
@@ -47,14 +47,23 @@ export default {
47
47
  }
48
48
  }
49
49
  };
50
- const DemoIcon = /*#__PURE__*/React.createElement("svg", {
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: "#inherit"
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: DemoIcon,
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: DemoIcon,
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: DemoIcon,
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: DemoIcon,
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: DemoIcon
272
+ icon: DemoIcon24
245
273
  };
246
274
  Loading.parameters = {
247
275
  docs: {
package/build/es/button/button.styles.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { colors, theme, spacers } from '@dhis2/ui-constants';
2
- const _defaultExport = ["button.jsx-441677069{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(colors.grey900, ";height:36px;padding:0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-441677069:disabled{cursor:not-allowed;}", "button.jsx-441677069:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-441677069:focus.jsx-441677069:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:active.jsx-441677069:focus,button.jsx-441677069:disabled.jsx-441677069:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-441677069:hover{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-441677069:active,button.jsx-441677069:active.jsx-441677069:focus{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-441677069:focus{background-color:#f9fafb;}", "button.jsx-441677069:disabled{border-color:".concat(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-441677069{height:28px;padding:0 8px;font-size:14px;line-height:16px;}", ".large.jsx-441677069{height:43px;padding:0 ".concat(spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-441677069{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".primary.jsx-441677069:hover{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-441677069:active,.primary.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-441677069:focus{background:".concat(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-441677069:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".secondary.jsx-441677069{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-441677069:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-441677069:active,.secondary.jsx-441677069:active.jsx-441677069:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-441677069:focus{background-color:transparent;}", ".secondary.jsx-441677069:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".destructive.jsx-441677069{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".destructive.jsx-441677069:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-441677069:active,.destructive.jsx-441677069:active.jsx-441677069:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-441677069:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-441677069:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".icon-only.jsx-441677069{padding:0 0 0 5px;}", ".button-icon.jsx-441677069{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:5px;}", ".small.icon-only.jsx-441677069{padding:0 0 0 1px;}", ".small.jsx-441677069 .button-icon.jsx-441677069{margin-right:2px;}", ".small.icon-only.jsx-441677069 .button-icon.jsx-441677069{margin-right:1px;}", ".toggled.jsx-441677069{background:".concat(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-441677069:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-441677069:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-441677069:active,.toggled.jsx-441677069:active.jsx-441677069:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-441677069:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".loader.jsx-441677069{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-441677069+.button-icon.jsx-441677069{display:none;}", ".icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 8px 0 4px;}", ".small.icon-only.jsx-441677069 .loader.jsx-441677069{margin:0 4px;}"];
3
- _defaultExport.__hash = "441677069";
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/build/es/dropdown-button/dropdown-button.js CHANGED
@@ -163,8 +163,10 @@ DropdownButton.propTypes = {
163
163
  component: PropTypes.element,
164
164
  dataTest: PropTypes.string,
165
165
 
166
- /** Button variant. Mutually exclusive with `primary` and `secondary` props */
167
- destructive: sharedPropTypes.buttonVariantPropType,
166
+ /**
167
+ * Applies 'destructive' button appearance, implying a dangerous action.
168
+ */
169
+ destructive: PropTypes.bool,
168
170
 
169
171
  /** Make the button non-interactive */
170
172
  disabled: PropTypes.bool,
@@ -180,11 +182,15 @@ DropdownButton.propTypes = {
180
182
  /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
181
183
  open: PropTypes.bool,
182
184
 
183
- /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
184
- primary: sharedPropTypes.buttonVariantPropType,
185
+ /**
186
+ * Applies 'primary' button appearance, implying the most important action.
187
+ */
188
+ primary: PropTypes.bool,
185
189
 
186
- /** Button variant. Mutually exclusive with `primary` and `destructive` props */
187
- secondary: sharedPropTypes.buttonVariantPropType,
190
+ /**
191
+ * Applies 'secondary' button appearance.
192
+ */
193
+ secondary: PropTypes.bool,
188
194
 
189
195
  /** Button size. Mutually exclusive with `large` prop */
190
196
  small: sharedPropTypes.sizePropType,
package/build/es/split-button/split-button.js CHANGED
@@ -124,8 +124,10 @@ SplitButton.propTypes = {
124
124
  component: PropTypes.element,
125
125
  dataTest: PropTypes.string,
126
126
 
127
- /** Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props */
128
- destructive: sharedPropTypes.buttonVariantPropType,
127
+ /**
128
+ * Applies 'destructive' button appearance, implying a dangerous action.
129
+ */
130
+ destructive: PropTypes.bool,
129
131
 
130
132
  /** Disables the button and makes it uninteractive */
131
133
  disabled: PropTypes.bool,
@@ -140,11 +142,15 @@ SplitButton.propTypes = {
140
142
  large: sharedPropTypes.sizePropType,
141
143
  name: PropTypes.string,
142
144
 
143
- /** Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props */
144
- primary: sharedPropTypes.buttonVariantPropType,
145
+ /**
146
+ * Applies 'primary' button appearance, implying the most important action.
147
+ */
148
+ primary: PropTypes.bool,
145
149
 
146
- /** Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props */
147
- secondary: sharedPropTypes.buttonVariantPropType,
150
+ /**
151
+ * Applies 'secondary' button appearance.
152
+ */
153
+ secondary: PropTypes.bool,
148
154
 
149
155
  /** Changes button size. Mutually exclusive with `large` prop */
150
156
  small: sharedPropTypes.sizePropType,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/button",
3
- "version": "8.15.0-alpha.3",
3
+ "version": "8.15.1",
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-alpha.3",
37
- "@dhis2-ui/loader": "8.15.0-alpha.3",
38
- "@dhis2-ui/popper": "8.15.0-alpha.3",
39
- "@dhis2/ui-constants": "8.15.0-alpha.3",
40
- "@dhis2/ui-icons": "8.15.0-alpha.3",
35
+ "@dhis2-ui/layer": "8.15.1",
36
+ "@dhis2-ui/loader": "8.15.1",
37
+ "@dhis2-ui/popper": "8.15.1",
38
+ "@dhis2/ui-constants": "8.15.1",
39
+ "@dhis2/ui-icons": "8.15.1",
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
- }