Fix tables without headers but with borders (#718)

* Fix tables without headers but with borders

* Update documentation

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 2.66.2 (2024-07-01)
+
+### Bugfixes
+
+- **Table**:
+  - Fix first row corners on table with borders and without header
+  - Prevent double border on last row without the need of adding `last` attribute on rows
+
 # 2.66.1 (2024-06-10)
 
 ### Improvements

projects/demo/src/app/demo/pages/table-page/table-page.component.html

@@ -128,9 +128,28 @@ <h4>Table with a border</h4>
         <pa-table-cell>Cell 2</pa-table-cell>
         <pa-table-cell>Cell 3</pa-table-cell>
       </pa-table-row>
-      <pa-table-row
-        last
-        clickable>
+      <pa-table-row clickable>
+        <pa-table-cell>Cell 1</pa-table-cell>
+        <pa-table-cell>Cell 2</pa-table-cell>
+        <pa-table-cell>Cell 3</pa-table-cell>
+      </pa-table-row>
+    </pa-table>
+
+    <h4>Table with a border but no header</h4>
+    <pa-table
+      border
+      columns="repeat(3, 1fr)">
+      <pa-table-row clickable>
+        <pa-table-cell>Cell 1</pa-table-cell>
+        <pa-table-cell>Cell 2</pa-table-cell>
+        <pa-table-cell>Cell 3</pa-table-cell>
+      </pa-table-row>
+      <pa-table-row clickable>
+        <pa-table-cell>Cell 1</pa-table-cell>
+        <pa-table-cell>Cell 2</pa-table-cell>
+        <pa-table-cell>Cell 3</pa-table-cell>
+      </pa-table-row>
+      <pa-table-row clickable>
         <pa-table-cell>Cell 1</pa-table-cell>
         <pa-table-cell>Cell 2</pa-table-cell>
         <pa-table-cell>Cell 3</pa-table-cell>

projects/demo/src/app/demo/pages/table-page/table-row/table-row-page.component.html

@@ -83,11 +83,6 @@ <h3>Inputs</h3>
         If true, hovering the row will change its background.
         <small>(default: false)</small>
       </dd>
-      <dt>last</dt>
-      <dd>
-        Flag marking a row as the last one so it can be styled accordingly (no border bottom for example).
-        <small>(default: false)</small>
-      </dd>
     </dl>
   </pa-demo-usage>
 

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.66.1",
+    "version": "2.66.2",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/src/lib/table/table-row/table-row.component.html

@@ -4,7 +4,6 @@
   [class.pa-hoverable]="hoverable"
   [class.pa-clickable]="clickable"
   [class.pa-disabled]="disabled"
-  [class.pa-table-grid--row--last]="last"
   [paFocusDisabled]="!hoverable">
   <ng-content></ng-content>
 </div>

projects/pastanaga-angular/src/lib/table/table-row/table-row.component.ts

@@ -10,5 +10,4 @@ export class TableRowComponent {
   @Input({ transform: booleanAttribute }) clickable = false;
   @Input({ transform: booleanAttribute }) disabled = false;
   @Input({ transform: booleanAttribute }) hoverable = false;
-  @Input({ transform: booleanAttribute }) last = false;
 }

projects/pastanaga-angular/src/styles/components/_tables.scss

@@ -15,6 +15,14 @@
         border-top-right-radius: $border-radius-default;
       }
     }
+    pa-table-row:first-of-type {
+      pa-table-cell:first-of-type .pa-table-grid--cell {
+        border-top-left-radius: $border-radius-default;
+      }
+      pa-table-cell:last-of-type .pa-table-grid--cell {
+        border-top-right-radius: $border-radius-default;
+      }
+    }
   }
 }
 
@@ -80,6 +88,23 @@
   }
 }
 
+pa-table-row:not(:last-of-type) .pa-table-grid--row {
+  .pa-table-grid--cell {
+    box-shadow: inset 0px -1px 0px $color-border-table-row;
+  }
+}
+pa-table-row:last-of-type .pa-table-grid--row {
+  pa-table-cell:first-of-type .pa-table-grid--cell,
+  pa-table-cell-menu:first-of-type .pa-table-grid--menu-cell {
+    border-bottom-left-radius: $border-radius-default;
+  }
+
+  pa-table-cell:last-of-type .pa-table-grid--cell,
+  pa-table-cell-menu:last-of-type .pa-table-grid--menu-cell {
+    border-bottom-right-radius: $border-radius-default;
+  }
+}
+
 .pa-table-grid--row {
   display: contents;
   font-size: font-size(s);
@@ -100,23 +125,6 @@
     z-index: 3;
   }
 
-  &:not(.pa-table-grid--row--last) {
-    .pa-table-grid--cell {
-      box-shadow: inset 0px -1px 0px $color-border-table-row;
-    }
-  }
-  &.pa-table-grid--row--last {
-    pa-table-cell:first-of-type .pa-table-grid--cell,
-    pa-table-cell-menu:first-of-type .pa-table-grid--menu-cell {
-      border-bottom-left-radius: $border-radius-default;
-    }
-
-    pa-table-cell:last-of-type .pa-table-grid--cell,
-    pa-table-cell-menu:last-of-type .pa-table-grid--menu-cell {
-      border-bottom-right-radius: $border-radius-default;
-    }
-  }
-
   &.pa-disabled .pa-table-grid--cell {
     cursor: default;
     opacity: 0.5;