@linzjs/step-ag-grid 28.4.2 → 28.5.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "28.4.2",
+  "version": "28.5.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridNoRowsOverlay.tsx

@@ -1,4 +1,4 @@
-import { LuiStatusSpinner } from '@linzjs/lui';
+import { LuiIcon, LuiStatusSpinner } from '@linzjs/lui';
 import { ForwardedRef, forwardRef } from 'react';
 
 const GridLoadingOverlayComponentFr = (
@@ -40,10 +40,20 @@ export const GridNoRowsOverlayFr = (props: GridNoRowsOverlayProps, externalRef:
     return <GridLoadingOverlayComponent ref={externalRef} headerRowHeight={props.headerRowHeight} />;
   }
   if (props.rowCount === 0) {
-    return <div ref={externalRef}>{props.noRowsOverlayText ?? 'There are currently no rows'}</div>;
+    return (
+      <div ref={externalRef} className={'GridNoRowsOverlay'}>
+        <LuiIcon name="ic_info_outline" alt="" size="md" />
+        {props.noRowsOverlayText ?? 'There are currently no rows'}
+      </div>
+    );
   }
   if (props.filteredRowCount === 0) {
-    return <div ref={externalRef}>{props.noRowsMatchingOverlayText ?? 'All rows have been filtered'}</div>;
+    return (
+      <div ref={externalRef} className={'GridNoRowsOverlay'}>
+        <LuiIcon name="ic_info_outline" alt="" size="md" />
+        {props.noRowsMatchingOverlayText ?? 'All rows have been filtered'}
+      </div>
+    );
   }
   return <div ref={externalRef} />;
 };

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -1,3 +1,5 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 

package/src/styles/Grid.scss

@@ -143,4 +143,13 @@ div.ag-ltr div.ag-header-cell-resize {
 .step-ag-grid__alert-icon {
   max-width: 34px;
   width: 34px;
-}
+}
+
+.GridNoRowsOverlay {
+  display: flex;
+  gap: 4px;
+  fill: lui.$fuscous;
+  color: lui.$fuscous;
+  font-size: lui.$base-font-size;
+  @include lui.font-regular();
+}