@axinom/mosaic-ui 0.49.0 → 0.49.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.49.0",
+  "version": "0.49.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a013c09e64dbd8e829e6da59048ccf7ed56d0eac"
+  "gitHead": "c1b5b3e9f204889c7ebaad43ea51f7dfb3556d80"
 }

package/src/components/EmptyStation/EmptyStation.stories.tsx

@@ -15,14 +15,7 @@ const groups = createGroups({
     'onBulkActionsToggled',
     'setTabTitle',
   ],
-  Content: [
-    'title',
-    'subtitle',
-    'children',
-    'bulkActions',
-    'stationError',
-    'actions',
-  ],
+  Content: ['title', 'subtitle', 'children', 'stationError', 'actions'],
   Styling: ['className'],
 });
 
@@ -35,10 +28,6 @@ const meta: Meta<typeof EmptyStation> = {
       ...groups.actions,
       control: 'boolean',
     },
-    bulkActions: {
-      ...groups.bulkActions,
-      control: 'boolean',
-    },
     stationError: {
       ...groups.stationError,
       control: 'boolean',
@@ -56,19 +45,21 @@ export const Default: StoryObj<typeof EmptyStation> = {
           ? [
               {
                 label: 'Test Action',
+                kind: 'action',
                 onClick: action('Action.onClick'),
                 icon: IconName.X,
               },
-            ]
-          : undefined
-      }
-      bulkActions={
-        args.bulkActions
-          ? [
               {
-                label: 'Test Bulk Action',
-                onClick: action('BulkAction.onClick'),
-                icon: IconName.X,
+                label: 'Bulk Actions',
+                icon: IconName.Bulk,
+                kind: 'group',
+                actions: [
+                  {
+                    label: 'Test Bulk Action',
+                    onClick: action('BulkAction.onClick'),
+                    icon: IconName.X,
+                  },
+                ],
               },
             ]
           : undefined

package/src/components/EmptyStation/EmptyStation.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import { MessageBar, MessageBarProps } from '../MessageBar';
-import { StationError } from '../models';
 import { PageHeader, PageHeaderProps } from '../PageHeader';
+import { StationError } from '../models';
 import classes from './EmptyStation.scss';
 
 export type EmptyStationProps = PageHeaderProps & {

package/src/components/List/ListRow/ListRow.scss

@@ -39,13 +39,18 @@
 
     span {
       padding: 5px 0;
-      display: grid;
+      display: block;
+      width: 100%;
     }
 
     &.nowrap {
-      white-space: nowrap;
-      text-overflow: ellipsis;
       overflow: hidden;
+
+      span {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     }
   }
 

package/src/components/List/ListRow/ListRow.spec.tsx

@@ -588,9 +588,7 @@ describe('ListRow', () => {
           />,
         );
 
-        const wrapperDivs = wrapper.findWhere((node) =>
-          node.prop('data-test-id')?.startsWith('list-entry-property'),
-        );
+        const wrapperDivs = wrapper.find('.cell');
 
         wrapperDivs.forEach((node) => {
           const style = node.prop('style');

package/src/components/List/ListRow/ListRow.tsx

@@ -107,13 +107,26 @@ const renderData = <T extends Data>(
   }
 
   if (value === null || value === undefined) {
-    return { columnData: <span />, tooltip: undefined };
+    return {
+      columnData: (
+        <span
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+        />
+      ),
+      tooltip: undefined,
+    };
   }
 
   if (typeof value === 'number') {
     const columnData = numberFormatter.format(value);
     return {
-      columnData: <span>{columnData}</span>,
+      columnData: (
+        <span
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+        >
+          {columnData}
+        </span>
+      ),
       tooltip: getTooltip(columnData),
     };
   }
@@ -121,13 +134,25 @@ const renderData = <T extends Data>(
   if (value instanceof Date) {
     const columnData = dateFormatter.format(value);
     return {
-      columnData: <span>{columnData}</span>,
+      columnData: (
+        <span
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+        >
+          {columnData}
+        </span>
+      ),
       tooltip: getTooltip(columnData),
     };
   }
 
   return {
-    columnData: <span>{String(value)}</span>,
+    columnData: (
+      <span
+        data-test-id={`list-entry-property:${column.propertyName as string}`}
+      >
+        {String(value)}
+      </span>
+    ),
     tooltip: getTooltip(String(value)),
   };
 };
@@ -148,11 +173,11 @@ const renderData = <T extends Data>(
 export const ListRow = <T extends Data>({
   columnSizes,
   columnGap,
-  rowHeight,
   actionSize,
   horizontalTextAlign,
   verticalTextAlign,
   textWrap = false,
+  rowHeight = textWrap ? undefined : '50px',
   data,
   itemSelected = false,
   isTrigger = false,
@@ -234,7 +259,6 @@ export const ListRow = <T extends Data>({
         <div
           className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
           title={tooltip}
-          data-test-id={`list-entry-property:${column.propertyName as string}`}
           style={{
             justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
             alignSelf: verticalTextAlign, // Vertical alignment based on props

package/src/components/List/ListRow/ListRowLoader.tsx

@@ -18,7 +18,7 @@ export interface ListRowLoaderProps<T extends Data> {
 export const ListRowLoader = <T extends Data>({
   columnSizes,
   columnGap,
-  rowHeight,
+  rowHeight = '50px',
   columns,
 }: PropsWithChildren<ListRowLoaderProps<T>>): JSX.Element => {
   const textLoaderHeight = 10;