@apify/ui-library 1.157.3 → 1.158.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.157.3",
+    "version": "1.158.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1b8df40de0e34029c29f0c4632d9bbf7784e0839"
+    "gitHead": "a95d2c32be1c155877006b808c4cf292d4c64806"
 }

package/src/components/table/table.styled.ts

@@ -75,6 +75,8 @@ export const StyledTable = styled.table`
         background-color: ${theme.color.neutral.backgroundMuted};
         border-bottom: solid 1px ${theme.color.neutral.separatorSubtle};
         color: ${theme.color.neutral.textMuted};
+        /* Same size the SortLabel button sets for itself, so plain and sortable headers match. */
+        ${theme.typography.shared.desktop.bodyS};
     }
 
     /* Body styling */
@@ -144,10 +146,10 @@ export const StyledTable = styled.table`
         }
     }
 
-    /* Empty row */
+    /* Empty row. Keeps the padding every other cell has; the content (spinner, empty state) brings
+       its own vertical space, the same way the old table did. */
     .${tableClassNames.ROW_EMPTY_CELL} {
         text-align: center;
-        padding: ${theme.space.space16};
     }
 `;
 

package/src/components/table/table_loading_row.tsx

@@ -1,13 +1,20 @@
 import type { FC, ReactNode } from 'react';
+import styled from 'styled-components';
 
-import { InlineSpinner } from '../spinner';
+import { theme } from '../../design_system/theme';
+import { BlockSpinner } from '../spinner';
 import { tableClassNames } from './table.styled';
 import { tableTestIds } from './table.test_ids';
 
+/** `BlockSpinner` defaults to an 8rem box, which is taller than a table row needs. */
+const RowSpinner = styled(BlockSpinner)`
+    min-height: ${theme.space.space40};
+`;
+
 export const TableLoadingRow: FC<{ colSpan: number; children?: ReactNode }> = ({ colSpan, children }) => (
     <tr data-test={tableTestIds.LOADING_ROW} className={tableClassNames.ROW_EMPTY}>
         <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
-            {children ?? <InlineSpinner />}
+            {children ?? <RowSpinner small />}
         </td>
     </tr>
 );