ui-soxo-bootstrap-core 2.6.62-dev.2 → 2.6.62-dev.4

package/core/lib/elements/basic/table/table.js

@@ -3,7 +3,16 @@ import { Table } from 'antd';
 import PropTypes from 'prop-types';
 import { GlobalContext } from '../../../Store';
 
-const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange }) => {
+import './table.scss';
+
+/**
+ * Table with the theme styling.
+ *
+ * `freezeHeader` keeps the header row fixed while the rows scroll vertically. It is opt-in,
+ * use it for long lists only. The header cells stay inside the same table as the rows
+ * (see table.scss), so the columns always line up with the header.
+ */
+const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange, freezeHeader }) => {
   const { state } = useContext(GlobalContext);
 
   useEffect(() => {}, [state.theme.colors]);
@@ -60,6 +69,7 @@ const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,
     <Table
       title={title ? () => title : undefined}
       scroll={scroll}
+      className={freezeHeader ? 'frozen-header-table' : undefined}
       dataSource={dataSource}
       loading={loading}
       bordered
@@ -86,10 +96,12 @@ TableComponent.propTypes = {
   columns: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
   loading: PropTypes.bool,
+  freezeHeader: PropTypes.bool,
 };
 
 TableComponent.defaultProps = {
   loading: false,
+  freezeHeader: false,
 };
 
 export default TableComponent;

package/core/lib/elements/basic/table/table.scss

@@ -0,0 +1,37 @@
+// Table with a frozen header (freezeHeader).
+//
+// Not the antd `scroll.y` : there the header is a separate table and takes its column
+// widths from the body, so a header wider than its cells wraps or overlaps. Here the
+// header stays in the same table as the rows, the content scrolls in both directions
+// and the header cells stick to the top of it.
+.frozen-header-table {
+    .ant-table-content {
+        // rows scroll under the header, the pagination below the table stays in view
+        max-height: max(400px, calc(100vh - 220px));
+        overflow: auto !important;
+    }
+
+    // antd draws the top line of a bordered table on the `table` element, which scrolls
+    // away with the rows. Draw it on the content wrapper instead, that one stays in place.
+    &.ant-table-wrapper .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content {
+        border-top: 1px solid #f0f0f0;
+
+        >table {
+            border-top: 0;
+        }
+    }
+
+    .ant-table-thead>tr>th {
+        position: sticky;
+        top: 0;
+        z-index: 3;
+    }
+
+    // Header cells of the fixed columns stick to the top and to the side,
+    // above the header cells that scroll
+    .ant-table-thead>tr>th.ant-table-cell-fix-left,
+    .ant-table-thead>tr>th.ant-table-cell-fix-right {
+        top: 0;
+        z-index: 4;
+    }
+}

package/core/modules/steps/steps.scss

@@ -342,7 +342,7 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Thin connecting line drawn into the gap toward the next step.
+/* Thin connecting "strip" drawn into the gap toward the next step.
    Width matches the strip's gap so it spans the space without overhanging. */
 .steps-breadcrumb-item:not(:last-child)::after {
   content: '';
@@ -350,9 +350,9 @@
   left: 100%;
   top: 50%;
   width: clamp(28px, 3vw, 52px);
-  height: 1px;
-  background: rgba(37, 58, 91, 0.2);
-  transform: translateY(-50%);
+  height: 0px;
+  border-top: 0.5px solid #ffffff66;
+  transform: translateY(-50%) rotate(0deg);
 }
 
 .steps-breadcrumb-item:active {
@@ -414,11 +414,11 @@
   color: #253a5b;
 }
 
-/* COMPLETED — filled navy circle. */
+/* COMPLETED — translucent white circle (was solid navy/blue). */
 .steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #253a5b;
-  border-color: #253a5b;
-  color: #ffffff;
+  background: #ffffff80;
+  border-color: #ffffff80;
+  color: #253a5b;
 }
 
 /* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.62-dev.2",
+  "version": "2.6.62-dev.4",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"