fix(platform): platform table border fix (#12555)

* fix(platform): platform table border fix closes [#10729](#10729) - Fixing platform table borderless styles * - Fixed hidden header border * - Redo test changes --------- Co-authored-by: deno <[email protected]>
SAP · Oct 29, 2024 · 5b81b9c · 5b81b9c
1 parent 8f7fb1f
commit 5b81b9c
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 5 deletions.
diff --git a/libs/platform/table-helpers/pipes/cell-styles.pipe.ts b/libs/platform/table-helpers/pipes/cell-styles.pipe.ts
@@ -14,7 +14,10 @@ export class TableCellStylesPipe implements PipeTransform {
         isFrozenEndColumn: boolean,
         prevColumnWidthPx: number | null,
         columnWidth: string,
-        nextColumnWidthPx: number | null
+        nextColumnWidthPx: number | null,
+        noBorders?: boolean,
+        noBordersY?: boolean,
+        noBordersX?: boolean
     ): Record<string, number | string> {
         const styles: { [property: string]: number | string } = {};
 
@@ -29,9 +32,23 @@ export class TableCellStylesPipe implements PipeTransform {
             styles[key] = (nextColumnWidthPx || 0).toString();
         }
 
-        styles['min-width'] = columnWidth;
-        styles['max-width'] = columnWidth;
-        styles['width'] = columnWidth;
+        if (noBordersY) {
+            styles['border-top'] = 'none';
+            styles['border-bottom'] = 'none';
+        }
+
+        if (noBordersX) {
+            styles['border-left'] = 'none';
+            styles['border-right'] = 'none';
+        }
+
+        if (noBorders) {
+            styles['border'] = 'none';
+        } else {
+            styles['min-width'] = columnWidth;
+            styles['max-width'] = columnWidth;
+            styles['width'] = columnWidth;
+        }
 
         // The "start" value does align left when you are using a LTR browser.
         // In RTL browsers, the "start" value aligns right.

diff --git a/libs/platform/table/components/table-header-row/table-header-row.component.html b/libs/platform/table/components/table-header-row/table-header-row.component.html
@@ -2,6 +2,10 @@
     <th
         [class.fd-table__cell--fixed]="fixed"
         fd-table-cell
+        [ngClass]="{
+            'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,
+            'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders
+        }"
         fd-table-status-indicator
         fdkDisabled
         [style.min-width]="_fdpTableService._semanticHighlightingColumnWidth$()"
@@ -12,6 +16,10 @@
 @if (isShownSelectionColumn) {
     <th
         fd-table-cell
+        [ngClass]="{
+            'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,
+            'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders
+        }"
         [focusable]="true"
         [class.fd-table__cell--fixed]="fixed"
         class="fd-table__cell--checkbox"
@@ -82,6 +90,9 @@
                     : _tableColumnResizeService.getPrevColumnsWidth(column.name)
                     : _tableColumnResizeService.getColumnWidthStyle(column.name)
                     : _tableColumnResizeService.getNextColumnsWidth(column.name)
+                    : noBorders
+                    : noVerticalBorders
+                    : noHorizontalBorders
         "
         [fdPopoverTrigger]="(column | isColumnHasHeaderMenu) ? tablePopover.popover : null"
         (cellFocused)="_tableRowService.cellFocused($event)"
@@ -104,7 +115,15 @@
 }
 
 @if (_fdpTableService._isShownNavigationColumn$()) {
-    <th fd-table-cell class="fdp-table__cell--navigation is-last-child" role="columnheader"></th>
+    <th
+        fd-table-cell
+        [ngClass]="{
+            'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,
+            'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders
+        }"
+        class="fdp-table__cell--navigation is-last-child"
+        role="columnheader"
+    ></th>
 }
 
 <th

diff --git a/libs/platform/table/components/table-header-row/table-header-row.component.ts b/libs/platform/table/components/table-header-row/table-header-row.component.ts
@@ -122,6 +122,18 @@ export class TableHeaderRowComponent extends TableRowDirective implements OnInit
     @Input()
     freezeColumnsTo: string;
 
+    /** Table without horizontal borders. */
+    @Input()
+    noHorizontalBorders = false;
+
+    /** Table without vertical borders. */
+    @Input()
+    noVerticalBorders = false;
+
+    /** Table without borders. */
+    @Input()
+    noBorders = false;
+
     /** The column `name` to freeze columns after and including. */
     @Input()
     freezeEndColumnsTo: string;

diff --git a/libs/platform/table/table.component.html b/libs/platform/table/table.component.html
@@ -45,6 +45,9 @@
             <thead fd-table-header [nonInteractive]="nonInteractiveHeader" class="fdp-table__header">
                 <tr
                     fdp-table-header-row
+                    [noBorders]="noBorders"
+                    [noHorizontalBorders]="noHorizontalBorders"
+                    [noVerticalBorders]="noVerticalBorders"
                     [rowId]="id"
                     [fixed]="fixed"
                     [isShownSelectionColumn]="isSelectionColumnShown"

diff --git a/libs/platform/table/table.component.scss b/libs/platform/table/table.component.scss
@@ -433,6 +433,8 @@ fdk-dynamic-portal {
             &.fd-table__cell--mock-borderless {
                 border-left: none !important;
                 border-right: none !important;
+                border-bottom: none !important;
+                border-top: none !important;
             }
         }
 

diff --git a/libs/platform/table/table.component.ts b/libs/platform/table/table.component.ts
@@ -460,6 +460,7 @@ export class TableComponent<T = any>
         this._semanticHighlightingKey = value;
         this._setSemanticHighlighting();
     }
+
     get semanticHighlighting(): string {
         if (!this._semanticHighlightingKey && this._forceSemanticHighlighting) {
             return DEFAULT_HIGHLIGHTING_KEY;