@pingux/astro 2.221.6 → 2.234.0-alpha.0

package/lib/components/ListView/ListView.stories.js

@@ -20,6 +20,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _context;
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -29,6 +30,7 @@ function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof _Symbol ? _Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = _Object$create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: _bindInstanceProperty(d).call(d, e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = _Object$getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(c); function f(e) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = _Object$create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
@@ -37,9 +39,8 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context12 = ownKeys(Object(t), !0)).call(_context12, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context13 = ownKeys(Object(t))).call(_context13, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context13, _context14; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context13 = ownKeys(Object(t), !0)).call(_context13, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context14 = ownKeys(Object(t))).call(_context14, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useRef, useState } from 'react';
 import { useAsyncList } from 'react-stately';
 import ClockTimeEightOutlineIcon from '@pingux/mdi-react/ClockTimeEightOutlineIcon';
@@ -49,9 +50,10 @@ import isChromatic from 'chromatic/isChromatic';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Button, IconWrapper, Item, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../..';
+import { Box, Button, EmptyState, IconWrapper, Item, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../..';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import animals from '../../utils/devUtils/constants/animals';
+import { userImage } from '../../utils/devUtils/constants/images';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { chartData } from '../ListViewItem/controls/chart/chartData';
 import ListViewReadme from './ListView.mdx';
@@ -80,7 +82,7 @@ export default {
 var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
-  id: '1',
+  id: '11111111111',
   icon: CogIcon,
   iconWrapperProps: {
     size: 'sm',
@@ -89,7 +91,7 @@ var items = [{
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',
-  id: '2',
+  id: '1111111',
   icon: ClockTimeEightOutlineIcon,
   iconWrapperProps: {
     size: 'sm',
@@ -105,6 +107,16 @@ var items = [{
     color: 'indigo'
   }
 }];
+var defaultStoryItems = _concatInstanceProperty(_context = []).call(_context, items, [{
+  key: 'Panda',
+  name: 'Panda',
+  id: '4',
+  image: {
+    src: userImage,
+    alt: 'avatar',
+    'aria-label': 'avatar'
+  }
+}]);
 var props = {
   disabledKeys: ['Snake']
 };
@@ -135,7 +147,7 @@ var ExampleContent = function ExampleContent(contentProps) {
       alignItems: 'center'
     },
     gap: "lg"
-  }, ___EmotionJSX(IconWrapper, {
+  }, icon && ___EmotionJSX(IconWrapper, {
     icon: icon,
     size: "sm",
     title: {
@@ -166,19 +178,17 @@ var Controls = function Controls() {
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
-    items: items
+    items: defaultStoryItems
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name
     }, ___EmotionJSX(ListViewItem, {
       data: {
         text: item.name,
-        icon: item.icon
-      },
-      iconProps: {
-        color: 'text.secondary'
+        icon: item.icon,
+        image: item.image
       },
-      iconWrapperProps: item.iconWrapperProps
+      colorId: item.id
     }, ___EmotionJSX(Controls, null)));
   });
 };
@@ -247,8 +257,8 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var getMockData = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regeneratorRuntime().wrap(function _callee$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             pageNumber = 1;
             if (cursor) {
@@ -256,21 +266,21 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
             }
             // With this we will emulate load even with mocked API, except for Chromatic runs
             if (args.useMockData) {
-              _context.next = 5;
+              _context2.next = 5;
               break;
             }
-            _context.next = 5;
+            _context2.next = 5;
             return new _Promise(function (resolve) {
               return _setTimeout(resolve, cursor ? 2000 : 3000);
             });
           case 5:
-            return _context.abrupt("return", {
+            return _context2.abrupt("return", {
               items: _sliceInstanceProperty(animals).call(animals, (pageNumber - 1) * 10, pageNumber * 10),
               cursor: "mock-".concat(pageNumber + 1)
             });
           case 6:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
       }, _callee);
     }));
@@ -281,17 +291,17 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var fetchApiData = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             if (!args.useMockData) {
-              _context2.next = 2;
+              _context3.next = 2;
               break;
             }
-            return _context2.abrupt("return", getMockData(null, null));
+            return _context3.abrupt("return", getMockData(null, null));
           case 2:
-            _context2.prev = 2;
-            _context2.next = 5;
+            _context3.prev = 2;
+            _context3.next = 5;
             return _Promise.race([
             // If no cursor is available, then we're loading the first page,
             // filtering the results returned via a query string that
@@ -306,27 +316,27 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
               }, 8000);
             })]);
           case 5:
-            res = _context2.sent;
-            _context2.next = 8;
+            res = _context3.sent;
+            _context3.next = 8;
             return res.json();
           case 8:
-            json = _context2.sent;
-            _context2.next = 11;
+            json = _context3.sent;
+            _context3.next = 11;
             return new _Promise(function (resolve) {
               return _setTimeout(resolve, cursor ? 8000 : 8000);
             });
           case 11:
-            return _context2.abrupt("return", {
+            return _context3.abrupt("return", {
               items: json.results,
               cursor: json.next
             });
           case 14:
-            _context2.prev = 14;
-            _context2.t0 = _context2["catch"](2);
-            return _context2.abrupt("return", getMockData(null, null));
+            _context3.prev = 14;
+            _context3.t0 = _context3["catch"](2);
+            return _context3.abrupt("return", getMockData(null, null));
           case 17:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
       }, _callee2, null, [[2, 14]]);
     }));
@@ -338,8 +348,8 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
     load: function load(_ref6) {
       return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         var signal, cursor, filterText;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regeneratorRuntime().wrap(function _callee3$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               signal = _ref6.signal, cursor = _ref6.cursor, filterText = _ref6.filterText;
               if (cursor) {
@@ -349,15 +359,15 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
 
               // check if we are mocking pages
               if (!(cursor && _includesInstanceProperty(cursor).call(cursor, 'mock'))) {
-                _context3.next = 4;
+                _context4.next = 4;
                 break;
               }
-              return _context3.abrupt("return", getMockData(signal, cursor));
+              return _context4.abrupt("return", getMockData(signal, cursor));
             case 4:
-              return _context3.abrupt("return", fetchApiData(signal, cursor, filterText));
+              return _context4.abrupt("return", fetchApiData(signal, cursor, filterText));
             case 5:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }, _callee3);
       }))();
@@ -450,11 +460,11 @@ WithCharts.parameters = {
   }
 };
 export var OnLoadPrev = function OnLoadPrev() {
-  var _context4, _context5;
-  var initialItems = _mapInstanceProperty(_context4 = _fillInstanceProperty(_context5 = new Array(10)).call(_context5, {
+  var _context5, _context6;
+  var initialItems = _mapInstanceProperty(_context5 = _fillInstanceProperty(_context6 = new Array(10)).call(_context6, {
     key: 'string',
     name: 'string'
-  })).call(_context4, function (_, index) {
+  })).call(_context5, function (_, index) {
     return {
       name: "name: ".concat(index),
       key: "name: ".concat(index),
@@ -479,21 +489,21 @@ export var OnLoadPrev = function OnLoadPrev() {
     setLoadingState = _useState0[1];
   var onLoadMore = /*#__PURE__*/function () {
     var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var _context6, _context7, _context8;
+      var _context7, _context8, _context9;
       var newItems;
-      return _regeneratorRuntime().wrap(function _callee4$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+      return _regeneratorRuntime().wrap(function _callee4$(_context0) {
+        while (1) switch (_context0.prev = _context0.next) {
           case 0:
             setLoadingState(loadingStates.LOADING_MORE);
-            _context9.next = 3;
+            _context0.next = 3;
             return new _Promise(function (resolve) {
               return _setTimeout(resolve, 3000);
             });
           case 3:
-            newItems = _mapInstanceProperty(_context6 = _fillInstanceProperty(_context7 = new Array(10)).call(_context7, {
+            newItems = _mapInstanceProperty(_context7 = _fillInstanceProperty(_context8 = new Array(10)).call(_context8, {
               key: 'string',
               name: 'string'
-            })).call(_context6, function (_, index) {
+            })).call(_context7, function (_, index) {
               return {
                 name: "name: ".concat(maxNum + index),
                 key: "name: ".concat(maxNum + index),
@@ -501,11 +511,11 @@ export var OnLoadPrev = function OnLoadPrev() {
               };
             });
             setMaxNum(maxNum + 10);
-            setListItems(_concatInstanceProperty(_context8 = []).call(_context8, listItems, newItems));
+            setListItems(_concatInstanceProperty(_context9 = []).call(_context9, listItems, newItems));
             setLoadingState(loadingStates.IDLE);
           case 7:
           case "end":
-            return _context9.stop();
+            return _context0.stop();
         }
       }, _callee4);
     }));
@@ -515,21 +525,21 @@ export var OnLoadPrev = function OnLoadPrev() {
   }();
   var onLoadPrev = /*#__PURE__*/function () {
     var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      var _context0, _context1, _context10;
+      var _context1, _context10, _context11;
       var newItems;
-      return _regeneratorRuntime().wrap(function _callee5$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
+      return _regeneratorRuntime().wrap(function _callee5$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
             setLoadingState(loadingStates.LOADING_MORE_PREPEND);
-            _context11.next = 3;
+            _context12.next = 3;
             return new _Promise(function (resolve) {
               return _setTimeout(resolve, 3000);
             });
           case 3:
-            newItems = _mapInstanceProperty(_context0 = _fillInstanceProperty(_context1 = new Array(10)).call(_context1, {
+            newItems = _mapInstanceProperty(_context1 = _fillInstanceProperty(_context10 = new Array(10)).call(_context10, {
               key: 'string',
               name: 'string'
-            })).call(_context0, function (_, index) {
+            })).call(_context1, function (_, index) {
               return {
                 name: "name: ".concat(minNum - (index + 1)),
                 key: "name: ".concat(minNum - (index + 1)),
@@ -537,11 +547,11 @@ export var OnLoadPrev = function OnLoadPrev() {
               };
             });
             setMinNum(minNum - 10);
-            setListItems(_concatInstanceProperty(_context10 = []).call(_context10, newItems, listItems));
+            setListItems(_concatInstanceProperty(_context11 = []).call(_context11, newItems, listItems));
             setLoadingState(loadingStates.IDLE);
           case 7:
           case "end":
-            return _context11.stop();
+            return _context12.stop();
         }
       }, _callee5);
     }));
@@ -571,4 +581,42 @@ export var OnLoadPrev = function OnLoadPrev() {
       }
     }, ___EmotionJSX(Controls, null)));
   }));
+};
+export var OnyxDefaultEmptyState = function OnyxDefaultEmptyState() {
+  return ___EmotionJSX(Box, {
+    height: "300px"
+  }, ___EmotionJSX(ListView, {
+    items: [],
+    "aria-label": "Empty Onyx ListView"
+  }));
+};
+export var AstroEmptyList = function AstroEmptyList() {
+  return ___EmotionJSX(Box, {
+    height: "300px"
+  }, ___EmotionJSX(ListView, {
+    items: [],
+    "aria-label": "Empty Astro ListView"
+  }));
+};
+export var CustomRenderEmptyState = function CustomRenderEmptyState() {
+  return ___EmotionJSX(Box, {
+    height: "300px"
+  }, ___EmotionJSX(ListView, {
+    items: [],
+    "aria-label": "ListView with a custom empty state",
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX(EmptyState, {
+        heading: "No results",
+        description: "Try adjusting your search."
+      }, ___EmotionJSX(Button, {
+        variant: "primary",
+        sx: {
+          mt: 'md'
+        },
+        onPress: function onPress() {
+          return action('Add Item pressed')();
+        }
+      }, "Add Item"));
+    }
+  }));
 };

package/lib/components/ListView/ListView.test.js

@@ -39,6 +39,8 @@ import { FocusScope } from 'react-aria';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import _ from 'lodash';
+import onyxDarkTheme from '../../styles/themeOverrides/nextGenDarkMode';
+import onyxTheme from '../../styles/themes/next-gen';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -439,6 +441,84 @@ test('renders neither loader nor item if the component is given no items nor a l
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
   expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
 });
+test.each([['Onyx', onyxTheme], ['Onyx dark', onyxDarkTheme]])('empty ListView renders the default EmptyState in the %s theme', function (_themeName, providerTheme) {
+  getComponentEmpty({}, {
+    renderFn: function renderFn(ui) {
+      return render(ui, {
+        providerTheme: providerTheme
+      });
+    }
+  });
+  expect(screen.getByText('No items exist')).toBeInTheDocument();
+  expect(screen.queryByRole('button')).not.toBeInTheDocument();
+});
+test('empty ListView renders nothing in the Astro theme', function () {
+  getComponentEmpty();
+  expect(screen.queryByText('No items exist')).not.toBeInTheDocument();
+});
+test('empty ListView renders the custom renderEmptyState in the Astro theme', function () {
+  getComponentEmpty({
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX("div", {
+        "data-testid": "custom-empty"
+      }, "No items");
+    }
+  });
+  expect(screen.getByTestId('custom-empty')).toBeInTheDocument();
+});
+test.each([['Onyx', onyxTheme], ['Onyx dark', onyxDarkTheme]])('renderEmptyState takes priority over the default EmptyState in the %s theme', function (_themeName, providerTheme) {
+  getComponentEmpty({
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX("div", {
+        "data-testid": "custom-empty"
+      }, "No items");
+    }
+  }, {
+    renderFn: function renderFn(ui) {
+      return render(ui, {
+        providerTheme: providerTheme
+      });
+    }
+  });
+  expect(screen.getByTestId('custom-empty')).toBeInTheDocument();
+  expect(screen.queryByText('No items exist')).not.toBeInTheDocument();
+});
+test('populated ListView renders its items in the Onyx theme', function () {
+  getComponent({}, {
+    renderFn: function renderFn(ui) {
+      return render(ui, {
+        providerTheme: onyxTheme
+      });
+    }
+  });
+  var options = screen.getAllByRole('gridcell');
+  expect(options).toHaveLength(items.length);
+  expect(options[0]).toHaveAttribute('data-id', items[0].name);
+});
+test('loading ListView does not render the default EmptyState in the Onyx theme', function () {
+  getComponentEmpty({
+    loadingState: loadingStates.LOADING
+  }, {
+    renderFn: function renderFn(ui) {
+      return render(ui, {
+        providerTheme: onyxTheme
+      });
+    }
+  });
+  expect(screen.getByRole('alert')).toBeInTheDocument();
+  expect(screen.queryByText('No items exist')).not.toBeInTheDocument();
+});
+test('loading ListView does not render renderEmptyState', function () {
+  getComponentEmpty({
+    loadingState: loadingStates.LOADING,
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX("div", {
+        "data-testid": "custom-empty"
+      }, "No items");
+    }
+  });
+  expect(screen.queryByTestId('custom-empty')).not.toBeInTheDocument();
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var options = screen.getAllByRole('gridcell');

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,7 +1,18 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "data", "iconProps", "iconWrapperProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+var _excluded = ["children", "className", "data", "iconProps", "iconWrapperProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots", "colorId"];
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { Box, Icon, IconWrapper, Image, Text } from '../..';
@@ -25,6 +36,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverEnd = _ref.onHoverEnd,
     onHoverStart = _ref.onHoverStart,
     slots = _ref.slots,
+    colorId = _ref.colorId,
     others = _objectWithoutProperties(_ref, _excluded);
   var icon = data.icon,
     image = data.image,
@@ -57,8 +69,12 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    colorId: others.id
-  }, iconWrapperProps)) : ___EmotionJSX(Box, {
+    colorId: colorId || others.id
+  }, iconWrapperProps, {
+    iconProps: _objectSpread(_objectSpread({
+      size: 'sm'
+    }, iconProps), iconWrapperProps === null || iconWrapperProps === void 0 ? void 0 : iconWrapperProps.iconProps)
+  })) : ___EmotionJSX(Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"
   }, ___EmotionJSX(Icon, _extends({
@@ -69,13 +85,20 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
     }
   }, iconProps))));
-  var renderImage = !icon && image && ___EmotionJSX(Box, {
+  var renderImage = !icon && image && (isOnyx ? ___EmotionJSX(Box, {
+    variant: "listViewItem.imageContainer"
+  }, ___EmotionJSX(Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label'],
+    variant: "images.avatar"
+  })) : ___EmotionJSX(Box, {
     width: "35px"
   }, ___EmotionJSX(Image, {
     src: image.src,
     alt: image.alt,
     "aria-label": image['aria-label']
-  }));
+  })));
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"

package/lib/components/ListViewItem/ListViewItem.stories.js

@@ -7,7 +7,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, IconWrapper, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Separator, Text } from '../..';
 import { useGetTheme } from '../../hooks';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { userImagePanelHeader } from '../../utils/devUtils/constants/images';
+import { userImage } from '../../utils/devUtils/constants/images';
 import { chartData } from './controls/chart/chartData';
 import ListViewItemReadMe from './ListViewItem.mdx';
 import { listViewItemArgTypes } from './listViewItemAttributes';
@@ -53,10 +53,7 @@ export var Default = function Default() {
       icon: AccountIcon,
       text: 'Fons Vernall'
     },
-    iconWrapperProps: {
-      size: 'sm',
-      color: 'blue'
-    }
+    colorId: "11111111111"
   }));
 };
 Default.parameters = {
@@ -88,7 +85,7 @@ export var WithImage = function WithImage() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
       image: {
-        src: userImagePanelHeader,
+        src: userImage,
         alt: 'avatar',
         'aria-label': 'avatar'
       },

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -103,6 +103,12 @@ var iconWrapper = {
 var imageWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
   ml: 'sm'
 });
+var imageContainer = {
+  width: '35px',
+  flexShrink: 0,
+  display: 'flex',
+  justifyContent: 'center'
+};
 var leftOfDataWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
   ml: 0
 });
@@ -152,6 +158,7 @@ export default {
   container: container,
   controls: controls,
   iconWrapper: iconWrapper,
+  imageContainer: imageContainer,
   imageWrapper: imageWrapper,
   leftOfDataWrapper: leftOfDataWrapper,
   linkedViewContainer: linkedViewContainer,

package/lib/components/ListViewItem/ListViewItem.test.js

@@ -10,11 +10,11 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { act } from '@testing-library/react';
-import { ListViewItem, ListViewItemSwitchField } from '../..';
+import { AstroProvider, ListViewItem, ListViewItemSwitchField, OnyxDarkTheme, OnyxTheme } from '../..';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -36,6 +36,13 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ListViewItem, _extends({}, defaultProps, props)));
 };
+var getComponentOnyx = function getComponentOnyx() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : OnyxTheme;
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return render(___EmotionJSX(AstroProvider, {
+    themeOverrides: [theme]
+  }, ___EmotionJSX(ListViewItem, _extends({}, defaultProps, props))));
+};
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {
@@ -78,6 +85,30 @@ describe('ListViewItem', function () {
     });
     screen.getByText(TEST_TEXT);
   });
+  test.each([['Onyx light', OnyxTheme], ['Onyx dark', OnyxDarkTheme]])('renders an 18px icon in %s ListViewItem', function (_, theme) {
+    var _context2;
+    getComponentOnyx(theme, {
+      id: 'test-id',
+      iconWrapperProps: {
+        color: 'green'
+      }
+    });
+    var icon = screen.getByRole('img', {
+      name: _concatInstanceProperty(_context2 = "".concat(defaultProps.data.text)).call(_context2, LIST_ITEM_ICON)
+    });
+    expect(icon).toHaveStyleRule('width', '18px');
+    expect(icon).toHaveStyleRule('height', '18px');
+  });
+  test('passes colorId to the avatar', function () {
+    var _context3;
+    getComponentOnyx(OnyxTheme, {
+      colorId: 'my-color-id'
+    });
+    var avatar = screen.getByRole('img', {
+      name: _concatInstanceProperty(_context3 = "".concat(defaultProps.data.text)).call(_context3, LIST_ITEM_ICON)
+    }).parentElement;
+    expect(avatar).toBeInTheDocument();
+  });
   test('renders icon if both icon and image are passed', function () {
     getComponent();
     var icon = screen.getByRole('img');