[Feature]: DataTable Inbox Icon

packages/core/src/Adapters/__tests__/icon.test.ts

@@ -25,6 +25,7 @@ function createTestIconAdapter(
 describe("isSemanticIconName", () => {
   test("it should return true for default semantic names", () => {
     expect(isSemanticIconName("clear")).toBe(true);
+    expect(isSemanticIconName("inbox")).toBe(true);
     expect(isSemanticIconName("chevronUpDown")).toBe(true);
   });
 

packages/core/src/Adapters/icon.ts

@@ -24,6 +24,7 @@ export const SEMANTIC_ICON_NAMES = [
   "clear",
   "clock",
   "error",
+  "inbox",
   "minus",
   "eyeOff",
   "filter",

packages/react/docs/components/DataTable.md

@@ -159,7 +159,7 @@ When `page` and `pageCount` (or `totalCount`) are set, DataTable does not sort o
 
 ### Empty, loading, and footer
 
-Empty rows render `EmptyState` at the table `size`, with the i18n title `"No data"`. `slots.empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `slots.loading` replaces the indicator. `slots.footer` renders below the table, above pagination:
+Empty rows render `EmptyState` at the table `size`, with the semantic `inbox` icon and the i18n title `"No data"`. `slots.empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `slots.loading` replaces the indicator. `slots.footer` renders below the table, above pagination:
 
 ```tsx
 <DataTable

packages/react/docs/examples/icon-fontawesome.ts

@@ -26,6 +26,7 @@ import {
   faEye,
   faEyeSlash,
   faFilter,
+  faInbox,
   faMagnifyingGlass,
   faMinus,
   faPalette,
@@ -106,6 +107,7 @@ const icons = {
   bell: faBell,
   user: faUser,
   plus: faPlus,
+  inbox: faInbox,
   clear: faXmark,
   check: faCheck,
   clock: faClock,

packages/react/docs/examples/icon-heroicons.ts

@@ -24,6 +24,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
   FunnelIcon,
+  InboxIcon,
   InformationCircleIcon,
   MagnifyingGlassIcon,
   MinusIcon,
@@ -44,6 +45,7 @@ const icons = {
   bell: BellIcon,
   user: UserIcon,
   plus: PlusIcon,
+  inbox: InboxIcon,
   clear: XMarkIcon,
   check: CheckIcon,
   clock: ClockIcon,

packages/react/docs/examples/icon-lucide.ts

@@ -24,6 +24,7 @@ import {
   Eye,
   EyeOff,
   Filter,
+  Inbox,
   Info,
   Loader2,
   Minus,
@@ -48,6 +49,7 @@ const icons = {
   plus: Plus,
   check: Check,
   clock: Clock,
+  inbox: Inbox,
   minus: Minus,
   error: CircleX,
   eyeOff: EyeOff,

packages/react/docs/examples/icon-phosphor.ts

@@ -28,6 +28,7 @@ import {
   PlusIcon,
   SidebarIcon,
   SpinnerGapIcon,
+  TrayIcon,
   UserIcon,
   WarningCircleIcon,
   WarningIcon,
@@ -46,6 +47,7 @@ const icons = {
   info: InfoIcon,
   user: UserIcon,
   plus: PlusIcon,
+  inbox: TrayIcon,
   check: CheckIcon,
   clock: ClockIcon,
   minus: MinusIcon,

packages/react/docs/examples/icon-tabler.ts

@@ -23,6 +23,7 @@ import {
   IconEye,
   IconEyeOff,
   IconFilter,
+  IconInbox,
   IconInfoCircle,
   IconLayoutSidebar,
   IconLoader2,
@@ -45,6 +46,7 @@ const icons = {
   bell: IconBell,
   user: IconUser,
   plus: IconPlus,
+  inbox: IconInbox,
   check: IconCheck,
   clock: IconClock,
   minus: IconMinus,

packages/react/src/Components/DataTable/DataTable.tsx

@@ -482,6 +482,7 @@ function DataTable<T>(props: DataTableProps<T>) {
                     <div {...emptyBind}>
                       {slots?.empty ?? (
                         <EmptyState
+                          icon="inbox"
                           size={merged.size}
                           title={resolveMessage("No data")}
                         />

packages/react/src/Components/DataTable/__tests__/DataTable.cy.tsx

@@ -18,6 +18,13 @@ test("it should render a data table in the browser", () => {
   cy.contains("Ada Lovelace").should("be.visible");
 });
 
+test("it should render the default empty state", () => {
+  cy.mount(<DataTable rows={[]} columns={columns} />);
+
+  cy.get("svg").should("be.visible");
+  cy.contains("No data").should("be.visible");
+});
+
 test("it should render the bordered variant", () => {
   cy.mount(
     <DataTable

packages/react/src/Components/DataTable/__tests__/DataTable.test.tsx

@@ -266,6 +266,7 @@ test("it should render a default empty state", () => {
   const { container } = render(<DataTable rows={[]} columns={columns} />);
 
   expect(screen.getByText("No data")).toBeTruthy();
+  expect(container.querySelector("svg")).not.toBeNull();
   expect(container.querySelector(".max-w-md")).not.toBeNull();
 });
 

packages/vue/docs/components/DataTable.md

@@ -141,7 +141,7 @@ When `page` and `page-count` (or `total-count`) are set, DataTable does not sort
 
 ### Empty, loading, and footer
 
-Empty rows render `EmptyState` at the table `size`, with the i18n title `"No data"`. `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
+Empty rows render `EmptyState` at the table `size`, with the semantic `inbox` icon and the i18n title `"No data"`. `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
 
 ```vue
 <DataTable :rows="[]" :columns="columns" :loading="isLoading">

packages/vue/docs/examples/icon-fontawesome.ts

@@ -26,6 +26,7 @@ import {
   faEye,
   faEyeSlash,
   faFilter,
+  faInbox,
   faMagnifyingGlass,
   faMinus,
   faPalette,
@@ -94,6 +95,7 @@ const icons = {
   bell: faBell,
   user: faUser,
   plus: faPlus,
+  inbox: faInbox,
   clear: faXmark,
   check: faCheck,
   clock: faClock,

packages/vue/docs/examples/icon-heroicons.ts

@@ -24,6 +24,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
   FunnelIcon,
+  InboxIcon,
   InformationCircleIcon,
   MagnifyingGlassIcon,
   MinusIcon,
@@ -44,6 +45,7 @@ const icons = {
   bell: BellIcon,
   user: UserIcon,
   plus: PlusIcon,
+  inbox: InboxIcon,
   clear: XMarkIcon,
   check: CheckIcon,
   clock: ClockIcon,

packages/vue/docs/examples/icon-lucide.ts

@@ -23,6 +23,7 @@ import {
   Eye,
   EyeOff,
   Filter,
+  Inbox,
   Info,
   Loader2,
   Minus,
@@ -48,6 +49,7 @@ const icons = {
   plus: Plus,
   check: Check,
   clock: Clock,
+  inbox: Inbox,
   minus: Minus,
   error: CircleX,
   eyeOff: EyeOff,

packages/vue/docs/examples/icon-phosphor.ts

@@ -28,6 +28,7 @@ import {
   PhPlus,
   PhSidebar,
   PhSpinnerGap,
+  PhTray,
   PhUser,
   PhWarning,
   PhWarningCircle,
@@ -46,6 +47,7 @@ const icons = {
   info: PhInfo,
   user: PhUser,
   plus: PhPlus,
+  inbox: PhTray,
   check: PhCheck,
   clock: PhClock,
   minus: PhMinus,

packages/vue/docs/examples/icon-tabler.ts

@@ -23,6 +23,7 @@ import {
   IconEye,
   IconEyeOff,
   IconFilter,
+  IconInbox,
   IconInfoCircle,
   IconLayoutSidebar,
   IconLoader2,
@@ -45,6 +46,7 @@ const icons = {
   bell: IconBell,
   user: IconUser,
   plus: IconPlus,
+  inbox: IconInbox,
   check: IconCheck,
   clock: IconClock,
   minus: IconMinus,

packages/vue/src/Components/DataTable/DataTable.vue

@@ -328,6 +328,7 @@ const DataTableChild = (childProps: { node?: VNodeChild }) => {
                 <div v-bind="emptyBind">
                   <slot name="empty">
                     <EmptyState
+                      icon="inbox"
                       :size="merged.size"
                       :title="resolveMessage('No data')"
                     />

packages/vue/src/Components/DataTable/__tests__/DataTable.cy.ts

@@ -21,6 +21,18 @@ test("it should render a data table in the browser", () => {
   cy.contains("Ada Lovelace").should("be.visible");
 });
 
+test("it should render the default empty state", () => {
+  cy.mount(DataTable, {
+    props: {
+      columns,
+      rows: [],
+    },
+  });
+
+  cy.get("svg").should("be.visible");
+  cy.contains("No data").should("be.visible");
+});
+
 test("it should render the bordered variant", () => {
   cy.mount(DataTable, {
     props: {

packages/vue/src/Components/DataTable/__tests__/DataTable.test.ts

@@ -278,6 +278,7 @@ test("it should render a default empty state", () => {
   });
 
   expect(wrapper.text()).toContain("No data");
+  expect(wrapper.find("svg").exists()).toBe(true);
   expect(wrapper.find(".max-w-md").exists()).toBe(true);
 });