@carbon/ibm-products 1.69.0 → 1.70.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 (83) hide show
  1. package/css/index-full-carbon.css +17 -5
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +16 -5
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +17 -5
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -4
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +17 -5
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ButtonMenu/ButtonMenu.js +11 -1
  18. package/es/components/Datagrid/Datagrid/DatagridContent.js +9 -8
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
  21. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  22. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
  23. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
  24. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +14 -6
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -10
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -8
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
  29. package/es/components/Datagrid/useActionsColumn.js +18 -14
  30. package/es/components/Datagrid/useFiltering.js +3 -1
  31. package/es/components/Datagrid/useNestedRowExpander.js +2 -2
  32. package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
  33. package/es/components/Datagrid/utils/filterPropsForTesting.js +150 -0
  34. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
  35. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
  36. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
  37. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
  38. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
  39. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
  40. package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -6
  41. package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -6
  42. package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
  43. package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
  44. package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
  45. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
  46. package/es/components/FilterSummary/FilterSummary.js +19 -15
  47. package/es/components/InterstitialScreen/InterstitialScreen.js +8 -7
  48. package/lib/components/ButtonMenu/ButtonMenu.js +11 -1
  49. package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -8
  50. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  51. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
  52. package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  53. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
  54. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
  55. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +14 -6
  56. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -10
  57. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
  58. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
  59. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
  60. package/lib/components/Datagrid/useActionsColumn.js +17 -13
  61. package/lib/components/Datagrid/useFiltering.js +2 -0
  62. package/lib/components/Datagrid/useNestedRowExpander.js +1 -1
  63. package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
  64. package/lib/components/Datagrid/utils/filterPropsForTesting.js +159 -0
  65. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
  66. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
  67. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
  68. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
  69. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
  70. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
  71. package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -6
  72. package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -6
  73. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
  74. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
  75. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
  76. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
  77. package/lib/components/FilterSummary/FilterSummary.js +18 -14
  78. package/lib/components/InterstitialScreen/InterstitialScreen.js +8 -6
  79. package/package.json +2 -2
  80. package/scss/components/Datagrid/_datagrid.scss +9 -1
  81. package/scss/components/Datagrid/styles/_datagrid.scss +10 -4
  82. package/scss/components/InterstitialScreen/_interstitial-screen.scss +1 -0
  83. package/scss/components/SidePanel/_side-panel.scss +5 -1
@@ -0,0 +1,150 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
+ /**
4
+ * Copyright IBM Corp. 2024, 2024
5
+ *
6
+ * This source code is licensed under the Apache-2.0 license found in the
7
+ * LICENSE file in the root directory of this source tree.
8
+ */
9
+
10
+ import { handleFilterTagLabelText } from './handleFilterTagLabelText';
11
+ export var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
12
+ return {
13
+ id: "".concat(index),
14
+ labelText: "Dummy checkbox ".concat(index + 1),
15
+ value: 'dummy-checkbox',
16
+ disabled: true
17
+ };
18
+ });
19
+ export var filterProps = function filterProps() {
20
+ var _Dropdown;
21
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
22
+ _ref$includeManyCheck = _ref.includeManyCheckboxes,
23
+ includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
24
+ _ref$dropdownOnChange = _ref.dropdownOnChange,
25
+ dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
26
+ var checkboxList = [{
27
+ id: 'normal',
28
+ labelText: 'Normal',
29
+ value: 'normal'
30
+ }, {
31
+ id: 'minor-warning',
32
+ labelText: 'Minor warning',
33
+ value: 'minor-warning'
34
+ }, {
35
+ id: 'critical',
36
+ labelText: 'Critical',
37
+ value: 'critical'
38
+ }].concat(_toConsumableArray(includeManyCheckboxes ? generateDummyCheckboxes : []));
39
+ return {
40
+ autoHideFilters: includeManyCheckboxes ? false : true,
41
+ variation: 'panel',
42
+ panelIconDescription: 'Open filters',
43
+ sections: [{
44
+ categoryTitle: 'Category title',
45
+ hasAccordion: true,
46
+ filters: [{
47
+ filterLabel: 'Joined',
48
+ filter: {
49
+ type: 'date',
50
+ column: 'joined',
51
+ props: {
52
+ DatePicker: {
53
+ datePickerType: 'range'
54
+ },
55
+ DatePickerInput: {
56
+ start: {
57
+ id: 'date-picker-input-id-start',
58
+ placeholder: 'mm/dd/yyyy',
59
+ labelText: 'Joined start date'
60
+ },
61
+ end: {
62
+ id: 'date-picker-input-id-end',
63
+ placeholder: 'mm/dd/yyyy',
64
+ labelText: 'Joined end date'
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }, {
70
+ filterLabel: 'Status',
71
+ filter: {
72
+ type: 'dropdown',
73
+ column: 'status',
74
+ props: {
75
+ Dropdown: (_Dropdown = {
76
+ id: 'marital-status-dropdown'
77
+ }, _defineProperty(_Dropdown, 'aria-label', 'Marital status dropdown'), _defineProperty(_Dropdown, "items", ['relationship', 'complicated', 'single']), _defineProperty(_Dropdown, "label", 'Marital status'), _defineProperty(_Dropdown, "titleText", 'Marital status'), _defineProperty(_Dropdown, "onChange", dropdownOnChange), _Dropdown)
78
+ }
79
+ }
80
+ }]
81
+ }, {
82
+ categoryTitle: 'Category title',
83
+ filters: [{
84
+ filterLabel: 'Role',
85
+ filter: {
86
+ type: 'radio',
87
+ column: 'role',
88
+ props: {
89
+ FormGroup: {
90
+ legendText: 'Role'
91
+ },
92
+ RadioButtonGroup: {
93
+ orientation: 'vertical',
94
+ legend: 'Role legend',
95
+ name: 'role-radio-button-group'
96
+ },
97
+ RadioButton: [{
98
+ id: 'developer',
99
+ labelText: 'Developer',
100
+ value: 'developer'
101
+ }, {
102
+ id: 'designer',
103
+ labelText: 'Designer',
104
+ value: 'designer'
105
+ }, {
106
+ id: 'researcher',
107
+ labelText: 'Researcher',
108
+ value: 'researcher'
109
+ }]
110
+ }
111
+ }
112
+ }, {
113
+ filterLabel: 'Visits',
114
+ filter: {
115
+ type: 'number',
116
+ column: 'visits',
117
+ props: {
118
+ NumberInput: {
119
+ min: 0,
120
+ id: 'visits-number-input',
121
+ invalidText: 'A valid value is required',
122
+ label: 'Visits',
123
+ placeholder: 'Type a number amount of visits'
124
+ }
125
+ }
126
+ }
127
+ }, {
128
+ filterLabel: 'Password strength',
129
+ filter: {
130
+ type: 'checkbox',
131
+ column: 'passwordStrength',
132
+ props: {
133
+ FormGroup: {
134
+ legendText: 'Password strength'
135
+ },
136
+ Checkbox: checkboxList
137
+ }
138
+ }
139
+ }]
140
+ }],
141
+ renderLabel: function renderLabel(key, value) {
142
+ return handleFilterTagLabelText(key, value);
143
+ },
144
+ renderDateLabel: function renderDateLabel(start, end) {
145
+ var startDateObj = new Date(start);
146
+ var endDateObj = new Date(end);
147
+ return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
148
+ }
149
+ };
150
+ };
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  /**
@@ -30,6 +30,7 @@ var componentName = 'ErrorEmptyState';
30
30
  export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
+ illustrationDescription = _ref.illustrationDescription,
33
34
  illustrationTheme = _ref.illustrationTheme,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
@@ -41,9 +42,9 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--error")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,11 @@ ErrorEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ /**
83
+ * The alt text for empty state svg images. If not provided , title will be used.
84
+ */
85
+ illustrationDescription: PropTypes.string,
80
86
  /**
81
87
  * Empty state illustration theme variations.
82
88
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--noData")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoDataIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NoDataEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--noTags")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NoTagsEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--notFound")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NotFoundEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -42,8 +43,8 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration, {
44
45
  size: size,
45
- title: title,
46
- theme: illustrationTheme
46
+ theme: illustrationTheme,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NotificationsEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  /**
@@ -31,6 +31,7 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -42,8 +43,8 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration, {
44
45
  size: size,
45
- title: title,
46
- theme: illustrationTheme
46
+ theme: illustrationTheme,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ UnauthorizedEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var ErrorIllustration = function ErrorIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 38.9,
38
38
  y1: 77.08,
@@ -209,7 +209,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
209
209
  })));
210
210
  };
211
211
  ErrorIllustration.propTypes = {
212
+ alt: PropTypes.string.isRequired,
212
213
  size: PropTypes.oneOf(['lg', 'sm']),
213
- theme: PropTypes.oneOf(['light', 'dark']),
214
- title: PropTypes.string
214
+ theme: PropTypes.oneOf(['light', 'dark'])
215
215
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NoDataIllustration = function NoDataIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 11.12,
38
38
  y1: 43.34,
@@ -172,7 +172,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
172
172
  })));
173
173
  };
174
174
  NoDataIllustration.propTypes = {
175
+ alt: PropTypes.string.isRequired,
175
176
  size: PropTypes.oneOf(['lg', 'sm']),
176
- theme: PropTypes.oneOf(['light', 'dark']),
177
- title: PropTypes.string
177
+ theme: PropTypes.oneOf(['light', 'dark'])
178
178
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NoTagsIllustration = function NoTagsIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -33,7 +33,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
33
33
  viewBox: "0 0 80 80",
34
34
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
35
35
  role: "img"
36
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
37
37
  id: "prefix__c_dark_".concat(svgId),
38
38
  x1: 34.96,
39
39
  y1: 5.37,
@@ -479,7 +479,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
479
479
  })));
480
480
  };
481
481
  NoTagsIllustration.propTypes = {
482
+ alt: PropTypes.string.isRequired,
482
483
  size: PropTypes.oneOf(['lg', 'sm']),
483
- theme: PropTypes.oneOf(['light', 'dark']),
484
- title: PropTypes.string
484
+ theme: PropTypes.oneOf(['light', 'dark'])
485
485
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NotFoundIllustration = function NotFoundIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 2.6,
38
38
  y1: -12.81,
@@ -356,7 +356,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
356
356
  })));
357
357
  };
358
358
  NotFoundIllustration.propTypes = {
359
+ alt: PropTypes.string.isRequired,
359
360
  size: PropTypes.oneOf(['lg', 'sm']),
360
- theme: PropTypes.oneOf(['light', 'dark']),
361
- title: PropTypes.string
361
+ theme: PropTypes.oneOf(['light', 'dark'])
362
362
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NotificationsIllustration = function NotificationsIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 30.05,
38
38
  y1: 54.31,
@@ -327,7 +327,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
327
327
  })));
328
328
  };
329
329
  NotificationsIllustration.propTypes = {
330
+ alt: PropTypes.string.isRequired,
330
331
  size: PropTypes.oneOf(['lg', 'sm']),
331
- theme: PropTypes.oneOf(['light', 'dark']),
332
- title: PropTypes.string
332
+ theme: PropTypes.oneOf(['light', 'dark'])
333
333
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -33,7 +33,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
33
33
  viewBox: "0 0 80 80",
34
34
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
35
35
  role: "img"
36
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
37
37
  id: "prefix__b_dark_".concat(svgId),
38
38
  x1: 17.33,
39
39
  y1: 40.68,
@@ -300,7 +300,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
300
300
  })));
301
301
  };
302
302
  UnauthorizedIllustration.propTypes = {
303
+ alt: PropTypes.string.isRequired,
303
304
  size: PropTypes.oneOf(['lg', 'sm']),
304
- theme: PropTypes.oneOf(['light', 'dark']),
305
- title: PropTypes.string
305
+ theme: PropTypes.oneOf(['light', 'dark'])
306
306
  };