[terra-table] Table section pinned divider overlay (#1898)

cerner · Nov 20, 2023 · 457d4b4 · 457d4b4
1 parent 2fb2c49
commit 457d4b4
Show file tree

Hide file tree

Showing 17 changed files with 9 additions and 2 deletions.
diff --git a/...ight-theme/en/chrome_large/flowsheet-data-grid-spec/flowsheet-with-sections.png b/...ight-theme/en/chrome_large/flowsheet-data-grid-spec/flowsheet-with-sections.png
diff --git a/...ght-theme/en/chrome_medium/flowsheet-data-grid-spec/flowsheet-with-sections.png b/...ght-theme/en/chrome_medium/flowsheet-data-grid-spec/flowsheet-with-sections.png
diff --git a/...sion-theme/en/chrome_large/flowsheet-data-grid-spec/flowsheet-with-sections.png b/...sion-theme/en/chrome_large/flowsheet-data-grid-spec/flowsheet-with-sections.png
diff --git a/...ion-theme/en/chrome_medium/flowsheet-data-grid-spec/flowsheet-with-sections.png b/...ion-theme/en/chrome_medium/flowsheet-data-grid-spec/flowsheet-with-sections.png
diff --git a/...ault-theme/en/chrome_large/flowsheet-data-grid-spec/flowsheet-with-sections.png b/...ault-theme/en/chrome_large/flowsheet-data-grid-spec/flowsheet-with-sections.png
diff --git a/...ult-theme/en/chrome_medium/flowsheet-data-grid-spec/flowsheet-with-sections.png b/...ult-theme/en/chrome_medium/flowsheet-data-grid-spec/flowsheet-with-sections.png
diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
@@ -14,6 +14,7 @@
   * Updated About page of `terra-table` to provide accessibility documentation for Home and End keys.
   * Removed alpha notice for FlowsheetDataGrid.
   * Removed unsupported props `isMasked` and `isSelectable` from FlowsheetDataGrid subcomponent documentation.
+  * Updated examples and tests in `terra-table` to validate sections in a table with pinned columns.
 
 ## 1.44.0 - (November 9, 2023)
 

diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableWithSections.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableWithSections.jsx
@@ -90,7 +90,8 @@ const TableWithSections = () => {
   return (
     <Table
       id="table-with-sections"
-      overflowColumns={tableData.cols}
+      pinnedColumns={tableData.cols.slice(0, 2)}
+      overflowColumns={tableData.cols.slice(2)}
       sections={tableSections}
       onSectionSelect={handleSectionSelect}
       isStriped

diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/table/TableWithSections.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/table/TableWithSections.test.jsx
@@ -90,7 +90,8 @@ const TableWithSections = () => {
   return (
     <Table
       id="table-with-sections"
-      overflowColumns={tableData.cols}
+      pinnedColumns={tableData.cols.slice(0, 2)}
+      overflowColumns={tableData.cols.slice(2)}
       sections={tableSections}
       onSectionSelect={handleSectionSelect}
     />

diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md
@@ -15,6 +15,7 @@
 * Fixed
   * Fixed tab index issues in the column header cells.
   * Fixed screenreader issue due to space in the headers attribute.
+  * Fixed pinned column divider covering section headers.
 
 ## 5.1.1-alpha.1 - (November 9, 2023)
 

diff --git a/packages/terra-table/src/subcomponents/Section.module.scss b/packages/terra-table/src/subcomponents/Section.module.scss
@@ -10,6 +10,9 @@
   }
 
   .header {
+    position: relative;
+    z-index: 3;
+
     th {
       border-left: var(--terra-table-cell-border-left, 1px solid #dedfe0);
       border-right: var(--terra-table-cell-border-right, 1px solid #dedfe0);

diff --git a/...ence/clinical-lowlight-theme/en/chrome_large/table-spec/table-with-sections.png b/...ence/clinical-lowlight-theme/en/chrome_large/table-spec/table-with-sections.png
diff --git a/...nce/clinical-lowlight-theme/en/chrome_medium/table-spec/table-with-sections.png b/...nce/clinical-lowlight-theme/en/chrome_medium/table-spec/table-with-sections.png
diff --git a/...reference/orion-fusion-theme/en/chrome_large/table-spec/table-with-sections.png b/...reference/orion-fusion-theme/en/chrome_large/table-spec/table-with-sections.png
diff --git a/...eference/orion-fusion-theme/en/chrome_medium/table-spec/table-with-sections.png b/...eference/orion-fusion-theme/en/chrome_medium/table-spec/table-with-sections.png
diff --git a/...eference/terra-default-theme/en/chrome_large/table-spec/table-with-sections.png b/...eference/terra-default-theme/en/chrome_large/table-spec/table-with-sections.png
diff --git a/...ference/terra-default-theme/en/chrome_medium/table-spec/table-with-sections.png b/...ference/terra-default-theme/en/chrome_medium/table-spec/table-with-sections.png