@instructure/ui-alerts 7.9.0 → 7.13.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/es/Alert/index.js +29 -18
  3. package/lib/Alert/index.js +30 -18
  4. package/package.json +14 -14
  5. package/src/Alert/README.md +39 -1
  6. package/src/Alert/index.js +19 -8
  7. package/src/Alert/styles.css +4 -1
  8. package/types/index.d.ts +4 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-alerts
9
+
10
+ # [7.12.0](https://github.com/instructure/instructure-ui/compare/v7.11.0...v7.12.0) (2021-10-15)
11
+
12
+ **Note:** Version bump only for package @instructure/ui-alerts
13
+
14
+ # [7.11.0](https://github.com/instructure/instructure-ui/compare/v7.10.0...v7.11.0) (2021-09-17)
15
+
16
+ **Note:** Version bump only for package @instructure/ui-alerts
17
+
18
+ # [7.10.0](https://github.com/instructure/instructure-ui/compare/v7.9.0...v7.10.0) (2021-08-27)
19
+
20
+ ### Features
21
+
22
+ - **ui-alerts:** add `hasShadow` property to Alerts ([11c5d0f](https://github.com/instructure/instructure-ui/commit/11c5d0f))
23
+
6
24
  # [7.9.0](https://github.com/instructure/instructure-ui/compare/v7.8.0...v7.9.0) (2021-07-16)
7
25
 
8
26
  **Note:** Version bump only for package @instructure/ui-alerts
package/es/Alert/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
1
2
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
3
  import _createClass from "@babel/runtime/helpers/esm/createClass";
3
4
  import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -43,18 +44,19 @@ import { Transition } from '@instructure/ui-motion';
43
44
  import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable';
44
45
  import { uid } from '@instructure/uid';
45
46
  var styles = {
46
- componentId: 'cvphu',
47
+ componentId: 'eMdva',
47
48
  template: function template(theme) {
48
- return "\n\n.cvphu_bgqc{background:".concat(theme.background || 'inherit', ";border-radius:").concat(theme.borderRadius || 'inherit', ";border-style:").concat(theme.borderStyle || 'inherit', ";border-width:").concat(theme.borderWidth || 'inherit', ";box-shadow:").concat(theme.boxShadow || 'inherit', ";color:").concat(theme.color || 'inherit', ";display:flex;min-width:12rem}\n\n.cvphu_bgqc,.cvphu_caGd{box-sizing:border-box}\n\n.cvphu_caGd{flex:1;font-family:").concat(theme.contentFontFamily || 'inherit', ";font-size:").concat(theme.contentFontSize || 'inherit', ";font-weight:").concat(theme.contentFontWeight || 'inherit', ";line-height:").concat(theme.contentLineHeight || 'inherit', ";min-width:0.0625rem;padding:").concat(theme.contentPadding || 'inherit', "}\n\n.cvphu_dnnz{align-items:center;border-right:").concat(theme.borderWidth || 'inherit', " ").concat(theme.borderStyle || 'inherit', ";color:").concat(theme.iconColor || 'inherit', ";flex:0 0 2.5rem;font-size:1.125rem;justify-content:center}\n\n.cvphu_fsGh,.cvphu_dnnz{box-sizing:border-box;display:flex}\n\n.cvphu_fsGh{align-items:flex-start;margin-right:").concat(theme.closeButtonMarginRight || 'inherit', ";margin-top:").concat(theme.closeButtonMarginTop || 'inherit', ";order:1}\n\n.cvphu_cOXX{border-color:").concat(theme.successBorderColor || 'inherit', "}\n\n.cvphu_cOXX .cvphu_dnnz{background-color:").concat(theme.successIconBackground || 'inherit', ";border-right-color:").concat(theme.successIconBackground || 'inherit', "}\n\n.cvphu_pypk{border-color:").concat(theme.infoBorderColor || 'inherit', "}\n\n.cvphu_pypk .cvphu_dnnz{background:").concat(theme.infoIconBackground || 'inherit', ";border-right-color:").concat(theme.infoIconBackground || 'inherit', "}\n\n.cvphu_ddvR{border-color:").concat(theme.dangerBorderColor || 'inherit', "}\n\n.cvphu_ddvR .cvphu_dnnz{background:").concat(theme.dangerIconBackground || 'inherit', ";border-right-color:").concat(theme.dangerIconBackground || 'inherit', "}\n\n.cvphu_eRqw{border-color:").concat(theme.warningBorderColor || 'inherit', "}\n\n.cvphu_eRqw .cvphu_dnnz{background:").concat(theme.warningIconBackground || 'inherit', ";border-right-color:").concat(theme.warningIconBackground || 'inherit', "}");
49
+ return "\n\n.eMdva_bgqc{background:".concat(theme.background || 'inherit', ";border-radius:").concat(theme.borderRadius || 'inherit', ";border-style:").concat(theme.borderStyle || 'inherit', ";border-width:").concat(theme.borderWidth || 'inherit', ";box-sizing:border-box;color:").concat(theme.color || 'inherit', ";display:flex;min-width:12rem}\n\n.eMdva_MrVJ{box-shadow:").concat(theme.boxShadow || 'inherit', "}\n\n.eMdva_caGd{box-sizing:border-box;flex:1;font-family:").concat(theme.contentFontFamily || 'inherit', ";font-size:").concat(theme.contentFontSize || 'inherit', ";font-weight:").concat(theme.contentFontWeight || 'inherit', ";line-height:").concat(theme.contentLineHeight || 'inherit', ";min-width:0.0625rem;padding:").concat(theme.contentPadding || 'inherit', "}\n\n.eMdva_dnnz{align-items:center;border-right:").concat(theme.borderWidth || 'inherit', " ").concat(theme.borderStyle || 'inherit', ";color:").concat(theme.iconColor || 'inherit', ";flex:0 0 2.5rem;font-size:1.125rem;justify-content:center}\n\n.eMdva_fsGh,.eMdva_dnnz{box-sizing:border-box;display:flex}\n\n.eMdva_fsGh{align-items:flex-start;margin-right:").concat(theme.closeButtonMarginRight || 'inherit', ";margin-top:").concat(theme.closeButtonMarginTop || 'inherit', ";order:1}\n\n.eMdva_cOXX{border-color:").concat(theme.successBorderColor || 'inherit', "}\n\n.eMdva_cOXX .eMdva_dnnz{background-color:").concat(theme.successIconBackground || 'inherit', ";border-right-color:").concat(theme.successIconBackground || 'inherit', "}\n\n.eMdva_pypk{border-color:").concat(theme.infoBorderColor || 'inherit', "}\n\n.eMdva_pypk .eMdva_dnnz{background:").concat(theme.infoIconBackground || 'inherit', ";border-right-color:").concat(theme.infoIconBackground || 'inherit', "}\n\n.eMdva_ddvR{border-color:").concat(theme.dangerBorderColor || 'inherit', "}\n\n.eMdva_ddvR .eMdva_dnnz{background:").concat(theme.dangerIconBackground || 'inherit', ";border-right-color:").concat(theme.dangerIconBackground || 'inherit', "}\n\n.eMdva_eRqw{border-color:").concat(theme.warningBorderColor || 'inherit', "}\n\n.eMdva_eRqw .eMdva_dnnz{background:").concat(theme.warningIconBackground || 'inherit', ";border-right-color:").concat(theme.warningIconBackground || 'inherit', "}");
49
50
  },
50
- 'alert': 'cvphu_bgqc',
51
- 'content': 'cvphu_caGd',
52
- 'icon': 'cvphu_dnnz',
53
- 'closeButton': 'cvphu_fsGh',
54
- 'success': 'cvphu_cOXX',
55
- 'info': 'cvphu_pypk',
56
- 'error': 'cvphu_ddvR',
57
- 'warning': 'cvphu_eRqw'
51
+ 'alert': 'eMdva_bgqc',
52
+ 'hasShadow': 'eMdva_MrVJ',
53
+ 'content': 'eMdva_caGd',
54
+ 'icon': 'eMdva_dnnz',
55
+ 'closeButton': 'eMdva_fsGh',
56
+ 'success': 'eMdva_cOXX',
57
+ 'info': 'eMdva_pypk',
58
+ 'error': 'eMdva_ddvR',
59
+ 'warning': 'eMdva_eRqw'
58
60
  };
59
61
  import theme from "./theme.js";
60
62
  /**
@@ -124,19 +126,19 @@ var Alert = (_dec = deprecated('8.0.0', {
124
126
  return {
125
127
  error: {
126
128
  Icon: IconNoSolid,
127
- classNames: classNames(styles.alert, styles.error)
129
+ className: styles.error
128
130
  },
129
131
  info: {
130
132
  Icon: IconInfoBorderlessSolid,
131
- classNames: classNames(styles.alert, styles.info)
133
+ className: styles.info
132
134
  },
133
135
  success: {
134
136
  Icon: IconCheckMarkSolid,
135
- classNames: classNames(styles.alert, styles.success)
137
+ className: styles.success
136
138
  },
137
139
  warning: {
138
140
  Icon: IconWarningBorderlessSolid,
139
- classNames: classNames(styles.alert, styles.warning)
141
+ className: styles.warning
140
142
  }
141
143
  }[this.props.variant];
142
144
  }
@@ -297,13 +299,16 @@ var Alert = (_dec = deprecated('8.0.0', {
297
299
  }, {
298
300
  key: "renderAlert",
299
301
  value: function renderAlert() {
302
+ var _classNames;
303
+
300
304
  var _this$variantUI2 = this.variantUI(),
301
- classNames = _this$variantUI2.classNames;
305
+ className = _this$variantUI2.className;
302
306
 
307
+ var classes = classNames((_classNames = {}, _defineProperty(_classNames, styles.alert, true), _defineProperty(_classNames, className, true), _defineProperty(_classNames, styles.hasShadow, this.props.hasShadow), _classNames));
303
308
  return /*#__PURE__*/React.createElement(View, {
304
309
  as: "div",
305
310
  margin: this.props.margin,
306
- className: classNames,
311
+ className: classes,
307
312
  onKeyUp: this.handleKeyUp
308
313
  }, this.renderIcon(), /*#__PURE__*/React.createElement("div", {
309
314
  className: styles.content
@@ -405,7 +410,12 @@ var Alert = (_dec = deprecated('8.0.0', {
405
410
  * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
406
411
  * This is necessary to close the alert from the outside and still run the transition.
407
412
  */
408
- open: PropTypes.bool
413
+ open: PropTypes.bool,
414
+
415
+ /**
416
+ * If the alert should have a shadow.
417
+ */
418
+ hasShadow: PropTypes.bool
409
419
  }, _class2.defaultProps = {
410
420
  variant: 'info',
411
421
  margin: 'x-small 0',
@@ -419,7 +429,8 @@ var Alert = (_dec = deprecated('8.0.0', {
419
429
  liveRegion: void 0,
420
430
  renderCloseButtonLabel: void 0,
421
431
  closeButtonLabel: void 0,
422
- children: null
432
+ children: null,
433
+ hasShadow: true
423
434
  }, _temp)) || _class) || _class);
424
435
  export default Alert;
425
436
  export { Alert };
package/lib/Alert/index.js CHANGED
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.Alert = exports.default = void 0;
11
11
 
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
12
14
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
15
 
14
16
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -60,18 +62,19 @@ var _theme = _interopRequireDefault(require("./theme.js"));
60
62
  var _dec, _dec2, _class, _class2, _temp;
61
63
 
62
64
  var styles = {
63
- componentId: 'cvphu',
65
+ componentId: 'eMdva',
64
66
  template: function template(theme) {
65
- return "\n\n.cvphu_bgqc{background:".concat(theme.background || 'inherit', ";border-radius:").concat(theme.borderRadius || 'inherit', ";border-style:").concat(theme.borderStyle || 'inherit', ";border-width:").concat(theme.borderWidth || 'inherit', ";box-shadow:").concat(theme.boxShadow || 'inherit', ";color:").concat(theme.color || 'inherit', ";display:flex;min-width:12rem}\n\n.cvphu_bgqc,.cvphu_caGd{box-sizing:border-box}\n\n.cvphu_caGd{flex:1;font-family:").concat(theme.contentFontFamily || 'inherit', ";font-size:").concat(theme.contentFontSize || 'inherit', ";font-weight:").concat(theme.contentFontWeight || 'inherit', ";line-height:").concat(theme.contentLineHeight || 'inherit', ";min-width:0.0625rem;padding:").concat(theme.contentPadding || 'inherit', "}\n\n.cvphu_dnnz{align-items:center;border-right:").concat(theme.borderWidth || 'inherit', " ").concat(theme.borderStyle || 'inherit', ";color:").concat(theme.iconColor || 'inherit', ";flex:0 0 2.5rem;font-size:1.125rem;justify-content:center}\n\n.cvphu_fsGh,.cvphu_dnnz{box-sizing:border-box;display:flex}\n\n.cvphu_fsGh{align-items:flex-start;margin-right:").concat(theme.closeButtonMarginRight || 'inherit', ";margin-top:").concat(theme.closeButtonMarginTop || 'inherit', ";order:1}\n\n.cvphu_cOXX{border-color:").concat(theme.successBorderColor || 'inherit', "}\n\n.cvphu_cOXX .cvphu_dnnz{background-color:").concat(theme.successIconBackground || 'inherit', ";border-right-color:").concat(theme.successIconBackground || 'inherit', "}\n\n.cvphu_pypk{border-color:").concat(theme.infoBorderColor || 'inherit', "}\n\n.cvphu_pypk .cvphu_dnnz{background:").concat(theme.infoIconBackground || 'inherit', ";border-right-color:").concat(theme.infoIconBackground || 'inherit', "}\n\n.cvphu_ddvR{border-color:").concat(theme.dangerBorderColor || 'inherit', "}\n\n.cvphu_ddvR .cvphu_dnnz{background:").concat(theme.dangerIconBackground || 'inherit', ";border-right-color:").concat(theme.dangerIconBackground || 'inherit', "}\n\n.cvphu_eRqw{border-color:").concat(theme.warningBorderColor || 'inherit', "}\n\n.cvphu_eRqw .cvphu_dnnz{background:").concat(theme.warningIconBackground || 'inherit', ";border-right-color:").concat(theme.warningIconBackground || 'inherit', "}");
67
+ return "\n\n.eMdva_bgqc{background:".concat(theme.background || 'inherit', ";border-radius:").concat(theme.borderRadius || 'inherit', ";border-style:").concat(theme.borderStyle || 'inherit', ";border-width:").concat(theme.borderWidth || 'inherit', ";box-sizing:border-box;color:").concat(theme.color || 'inherit', ";display:flex;min-width:12rem}\n\n.eMdva_MrVJ{box-shadow:").concat(theme.boxShadow || 'inherit', "}\n\n.eMdva_caGd{box-sizing:border-box;flex:1;font-family:").concat(theme.contentFontFamily || 'inherit', ";font-size:").concat(theme.contentFontSize || 'inherit', ";font-weight:").concat(theme.contentFontWeight || 'inherit', ";line-height:").concat(theme.contentLineHeight || 'inherit', ";min-width:0.0625rem;padding:").concat(theme.contentPadding || 'inherit', "}\n\n.eMdva_dnnz{align-items:center;border-right:").concat(theme.borderWidth || 'inherit', " ").concat(theme.borderStyle || 'inherit', ";color:").concat(theme.iconColor || 'inherit', ";flex:0 0 2.5rem;font-size:1.125rem;justify-content:center}\n\n.eMdva_fsGh,.eMdva_dnnz{box-sizing:border-box;display:flex}\n\n.eMdva_fsGh{align-items:flex-start;margin-right:").concat(theme.closeButtonMarginRight || 'inherit', ";margin-top:").concat(theme.closeButtonMarginTop || 'inherit', ";order:1}\n\n.eMdva_cOXX{border-color:").concat(theme.successBorderColor || 'inherit', "}\n\n.eMdva_cOXX .eMdva_dnnz{background-color:").concat(theme.successIconBackground || 'inherit', ";border-right-color:").concat(theme.successIconBackground || 'inherit', "}\n\n.eMdva_pypk{border-color:").concat(theme.infoBorderColor || 'inherit', "}\n\n.eMdva_pypk .eMdva_dnnz{background:").concat(theme.infoIconBackground || 'inherit', ";border-right-color:").concat(theme.infoIconBackground || 'inherit', "}\n\n.eMdva_ddvR{border-color:").concat(theme.dangerBorderColor || 'inherit', "}\n\n.eMdva_ddvR .eMdva_dnnz{background:").concat(theme.dangerIconBackground || 'inherit', ";border-right-color:").concat(theme.dangerIconBackground || 'inherit', "}\n\n.eMdva_eRqw{border-color:").concat(theme.warningBorderColor || 'inherit', "}\n\n.eMdva_eRqw .eMdva_dnnz{background:").concat(theme.warningIconBackground || 'inherit', ";border-right-color:").concat(theme.warningIconBackground || 'inherit', "}");
66
68
  },
67
- 'alert': 'cvphu_bgqc',
68
- 'content': 'cvphu_caGd',
69
- 'icon': 'cvphu_dnnz',
70
- 'closeButton': 'cvphu_fsGh',
71
- 'success': 'cvphu_cOXX',
72
- 'info': 'cvphu_pypk',
73
- 'error': 'cvphu_ddvR',
74
- 'warning': 'cvphu_eRqw'
69
+ 'alert': 'eMdva_bgqc',
70
+ 'hasShadow': 'eMdva_MrVJ',
71
+ 'content': 'eMdva_caGd',
72
+ 'icon': 'eMdva_dnnz',
73
+ 'closeButton': 'eMdva_fsGh',
74
+ 'success': 'eMdva_cOXX',
75
+ 'info': 'eMdva_pypk',
76
+ 'error': 'eMdva_ddvR',
77
+ 'warning': 'eMdva_eRqw'
75
78
  };
76
79
 
77
80
  /**
@@ -139,19 +142,19 @@ var Alert = (_dec = (0, _deprecated.deprecated)('8.0.0', {
139
142
  return {
140
143
  error: {
141
144
  Icon: _IconNoSolid.IconNoSolid,
142
- classNames: (0, _classnames.default)(styles.alert, styles.error)
145
+ className: styles.error
143
146
  },
144
147
  info: {
145
148
  Icon: _IconInfoBorderlessSolid.IconInfoBorderlessSolid,
146
- classNames: (0, _classnames.default)(styles.alert, styles.info)
149
+ className: styles.info
147
150
  },
148
151
  success: {
149
152
  Icon: _IconCheckMarkSolid.IconCheckMarkSolid,
150
- classNames: (0, _classnames.default)(styles.alert, styles.success)
153
+ className: styles.success
151
154
  },
152
155
  warning: {
153
156
  Icon: _IconWarningBorderlessSolid.IconWarningBorderlessSolid,
154
- classNames: (0, _classnames.default)(styles.alert, styles.warning)
157
+ className: styles.warning
155
158
  }
156
159
  }[this.props.variant];
157
160
  }
@@ -314,13 +317,16 @@ var Alert = (_dec = (0, _deprecated.deprecated)('8.0.0', {
314
317
  }, {
315
318
  key: "renderAlert",
316
319
  value: function renderAlert() {
320
+ var _classNames;
321
+
317
322
  var _this$variantUI2 = this.variantUI(),
318
- classNames = _this$variantUI2.classNames;
323
+ className = _this$variantUI2.className;
319
324
 
325
+ var classes = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.alert, true), (0, _defineProperty2.default)(_classNames, className, true), (0, _defineProperty2.default)(_classNames, styles.hasShadow, this.props.hasShadow), _classNames));
320
326
  return /*#__PURE__*/_react.default.createElement(_View.View, {
321
327
  as: "div",
322
328
  margin: this.props.margin,
323
- className: classNames,
329
+ className: classes,
324
330
  onKeyUp: this.handleKeyUp
325
331
  }, this.renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
326
332
  className: styles.content
@@ -418,7 +424,12 @@ var Alert = (_dec = (0, _deprecated.deprecated)('8.0.0', {
418
424
  * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
419
425
  * This is necessary to close the alert from the outside and still run the transition.
420
426
  */
421
- open: _propTypes.default.bool
427
+ open: _propTypes.default.bool,
428
+
429
+ /**
430
+ * If the alert should have a shadow.
431
+ */
432
+ hasShadow: _propTypes.default.bool
422
433
  }, _class2.defaultProps = {
423
434
  variant: 'info',
424
435
  margin: 'x-small 0',
@@ -432,7 +443,8 @@ var Alert = (_dec = (0, _deprecated.deprecated)('8.0.0', {
432
443
  liveRegion: void 0,
433
444
  renderCloseButtonLabel: void 0,
434
445
  closeButtonLabel: void 0,
435
- children: null
446
+ children: null,
447
+ hasShadow: true
436
448
  }, _temp)) || _class) || _class);
437
449
  exports.Alert = Alert;
438
450
  var _default = Alert;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-alerts",
3
- "version": "7.9.0",
3
+ "version": "7.13.0",
4
4
  "description": "An alert component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -23,22 +23,22 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "^7.9.0",
27
- "@instructure/ui-color-utils": "^7.9.0",
28
- "@instructure/ui-test-utils": "^7.9.0"
26
+ "@instructure/ui-babel-preset": "^7.13.0",
27
+ "@instructure/ui-color-utils": "^7.13.0",
28
+ "@instructure/ui-test-utils": "^7.13.0"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.9.2",
32
- "@instructure/console": "^7.9.0",
33
- "@instructure/ui-a11y-content": "^7.9.0",
34
- "@instructure/ui-buttons": "^7.9.0",
35
- "@instructure/ui-icons": "^7.9.0",
36
- "@instructure/ui-motion": "^7.9.0",
37
- "@instructure/ui-react-utils": "^7.9.0",
38
- "@instructure/ui-themeable": "^7.9.0",
39
- "@instructure/ui-utils": "^7.9.0",
40
- "@instructure/ui-view": "^7.9.0",
41
- "@instructure/uid": "^7.9.0",
32
+ "@instructure/console": "^7.13.0",
33
+ "@instructure/ui-a11y-content": "^7.13.0",
34
+ "@instructure/ui-buttons": "^7.13.0",
35
+ "@instructure/ui-icons": "^7.13.0",
36
+ "@instructure/ui-motion": "^7.13.0",
37
+ "@instructure/ui-react-utils": "^7.13.0",
38
+ "@instructure/ui-themeable": "^7.13.0",
39
+ "@instructure/ui-utils": "^7.13.0",
40
+ "@instructure/ui-view": "^7.13.0",
41
+ "@instructure/uid": "^7.13.0",
42
42
  "classnames": "^2",
43
43
  "keycode": "^2",
44
44
  "prop-types": "^15"
package/src/Alert/README.md CHANGED
@@ -66,7 +66,7 @@ example: true
66
66
 
67
67
  Given a `liveRegion` property, Alerts will guarantee a screenreader will announce their text.
68
68
  Use `liveRegionPoliteness` to choose an `aria-live` politeness setting of either `polite`
69
- or `assertive` (default). Use `isLiveRegionAtomic` to choose an `aria-atomic` setting
69
+ or `assertive` (default). Use `isLiveRegionAtomic` to choose an `aria-atomic` setting
70
70
  of either `true` or `false` (default).
71
71
 
72
72
  Due to a bug in some screen readers, the live region element should be static, either through
@@ -197,6 +197,44 @@ class Example extends React.Component {
197
197
  render(<Example />)
198
198
  ```
199
199
 
200
+ When Alerts are used inline, the shadow can be removed with the `hasShadow` property.
201
+
202
+ ```js
203
+ ---
204
+ example: true
205
+ ---
206
+ <View as="div" background="primary" padding="large">
207
+ <View
208
+ as="div"
209
+ background="primary"
210
+ padding="small medium"
211
+ borderWidth="small"
212
+ borderRadius="small"
213
+ margin="x-small 0"
214
+ >
215
+ {lorem.paragraph()}
216
+ </View>
217
+ <Alert
218
+ variant="info"
219
+ margin="x-small 0"
220
+ renderCloseButtonLabel="Close"
221
+ hasShadow={false}
222
+ >
223
+ This is an inline Alert, so it shouldn't have a shadow.
224
+ </Alert>
225
+ <View
226
+ as="div"
227
+ background="primary"
228
+ padding="small medium"
229
+ borderWidth="small"
230
+ borderRadius="small"
231
+ margin="x-small 0"
232
+ >
233
+ {lorem.paragraph()}
234
+ </View>
235
+ </View>
236
+ ```
237
+
200
238
  ### Guidelines
201
239
 
202
240
  ```js
package/src/Alert/index.js CHANGED
@@ -115,7 +115,11 @@ class Alert extends Component {
115
115
  * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
116
116
  * This is necessary to close the alert from the outside and still run the transition.
117
117
  */
118
- open: PropTypes.bool
118
+ open: PropTypes.bool,
119
+ /**
120
+ * If the alert should have a shadow.
121
+ */
122
+ hasShadow: PropTypes.bool
119
123
  }
120
124
 
121
125
  static defaultProps = {
@@ -131,7 +135,8 @@ class Alert extends Component {
131
135
  liveRegion: undefined,
132
136
  renderCloseButtonLabel: undefined,
133
137
  closeButtonLabel: undefined,
134
- children: null
138
+ children: null,
139
+ hasShadow: true
135
140
  }
136
141
 
137
142
  constructor(props) {
@@ -148,19 +153,19 @@ class Alert extends Component {
148
153
  return {
149
154
  error: {
150
155
  Icon: IconNoSolid,
151
- classNames: classNames(styles.alert, styles.error)
156
+ className: styles.error
152
157
  },
153
158
  info: {
154
159
  Icon: IconInfoBorderlessSolid,
155
- classNames: classNames(styles.alert, styles.info)
160
+ className: styles.info
156
161
  },
157
162
  success: {
158
163
  Icon: IconCheckMarkSolid,
159
- classNames: classNames(styles.alert, styles.success)
164
+ className: styles.success
160
165
  },
161
166
  warning: {
162
167
  Icon: IconWarningBorderlessSolid,
163
- classNames: classNames(styles.alert, styles.warning)
168
+ className: styles.warning
164
169
  }
165
170
  }[this.props.variant]
166
171
  }
@@ -337,12 +342,18 @@ class Alert extends Component {
337
342
  }
338
343
 
339
344
  renderAlert() {
340
- const { classNames } = this.variantUI()
345
+ const { className } = this.variantUI()
346
+ const classes = classNames({
347
+ [styles.alert]: true,
348
+ [className]: true,
349
+ [styles.hasShadow]: this.props.hasShadow
350
+ })
351
+
341
352
  return (
342
353
  <View
343
354
  as="div"
344
355
  margin={this.props.margin}
345
- className={classNames}
356
+ className={classes}
346
357
  onKeyUp={this.handleKeyUp}
347
358
  >
348
359
  {this.renderIcon()}
package/src/Alert/styles.css CHANGED
@@ -2,7 +2,6 @@
2
2
  color: var(--color);
3
3
  background: var(--background);
4
4
  box-sizing: border-box;
5
- box-shadow: var(--boxShadow);
6
5
  display: flex;
7
6
  min-width: 12rem;
8
7
  border-width: var(--borderWidth);
@@ -10,6 +9,10 @@
10
9
  border-radius: var(--borderRadius);
11
10
  }
12
11
 
12
+ .hasShadow {
13
+ box-shadow: var(--boxShadow);
14
+ }
15
+
13
16
  .content {
14
17
  box-sizing: border-box;
15
18
  flex: 1;
package/types/index.d.ts CHANGED
@@ -64,6 +64,10 @@ export interface AlertProps {
64
64
  * This is necessary to close the alert from the outside and still run the transition.
65
65
  */
66
66
  open?: boolean;
67
+ /**
68
+ * If the alert should have a shadow.
69
+ */
70
+ hasShadow?: boolean;
67
71
  }
68
72
 
69
73
  export class Alert extends React.Component<AlertProps, any> {