fix(#3637): adjust the checkbox on table header row to prevent height increase

Author: mxsoco

apps/prs/angular/src/app/app.component.html

@@ -250,10 +250,14 @@
             url="/bugs/3685"
           ></goab-work-side-menu-item>
           <goab-work-side-menu-item
-          label="3635 Input Leading icon color"
-          url="/bugs/3635"
-        ></goab-work-side-menu-item>
-      </goab-work-side-menu-group>
+            label="3635 Input Leading icon color"
+            url="/bugs/3635"
+          ></goab-work-side-menu-item>
+          <goab-work-side-menu-item
+            label="3637 Checkbox Table Header Row Height Bug"
+            url="/bugs/3637"
+          ></goab-work-side-menu-item>
+        </goab-work-side-menu-group>
         <goab-work-side-menu-group icon="star" heading="Features">
           <goab-work-side-menu-item
             label="1328"

apps/prs/angular/src/app/app.routes.ts

@@ -53,6 +53,7 @@ import { Bug3505Component } from "../routes/bugs/3505/bug3505.component";
 import { Bug3614Component } from "../routes/bugs/3614/bug3614.component";
 import { Bug3685Component } from "../routes/bugs/3685/bug3685.component";
 import { Bug3635Component } from "../routes/bugs/3635/bug3635.component";
+import { Bug3637Component } from "../routes/bugs/3637/bug3637.component";
 
 import { Feat1328Component } from "../routes/features/feat1328/feat1328.component";
 import { Feat1383Component } from "../routes/features/feat1383/feat1383.component";
@@ -148,6 +149,7 @@ export const appRoutes: Route[] = [
   { path: "bugs/3505", component: Bug3505Component },
   { path: "bugs/3685", component: Bug3685Component },
   { path: "bugs/3635", component: Bug3635Component },
+  { path: "bugs/3637", component: Bug3637Component },
   // Feature routes
   { path: "features/1328", component: Feat1328Component },
   { path: "features/1383", component: Feat1383Component },

apps/prs/angular/src/routes/bugs/3637/bug3637.component.html

@@ -0,0 +1,33 @@
+<div>
+  <h1>3637 - Checkbox Table Header Row Height Bug </h1>
+
+  <goab-data-grid keyboardNav="table" keyboardIconPosition="right">
+    <goab-table width="100%" mb="xl">
+      <thead>
+        <tr>
+          <th className="goa-table-cell--checkbox"><goab-checkbox name="" text=""></goab-checkbox></th>
+          <th>
+            <goab-table-sort-header name="name">Name</goab-table-sort-header>
+          </th>
+          <th>
+            <goab-table-sort-header name="status">Status</goab-table-sort-header>
+          </th>
+          <th>Assigned to</th>
+          <th>
+            <goab-table-sort-header name="due-date">Due date</goab-table-sort-header>
+          </th>
+          <th>
+            <goab-table-sort-header name="jurisdiction">Jurisdiction</goab-table-sort-header>
+          </th>
+          <th>File number</th>
+          <th>
+            <goab-table-sort-header name="priority">Priority</goab-table-sort-header>
+          </th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </goab-table>
+  </goab-data-grid>
+</div>

apps/prs/angular/src/routes/bugs/3637/bug3637.component.ts

@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+  GoabDataGrid,
+  GoabTable,
+  GoabTableSortHeader,
+  GoabCheckbox
+} from "@abgov/angular-components";
+
+
+@Component({
+  standalone: true,
+  selector: "abgov-bug3637",
+  templateUrl: "./bug3637.component.html",
+  imports: [CommonModule,
+  GoabDataGrid,
+  GoabTable,
+  GoabTableSortHeader,
+  GoabCheckbox
+],
+})
+export class Bug3637Component {}

apps/prs/react/src/app/app.tsx

@@ -241,6 +241,10 @@ export function App() {
                   label="3635 Input Leading icon color"
                   url="/bugs/3635"
                 />
+                <GoabWorkSideMenuItem
+                  label="3637 Checkbox Table Header Row Height Bug"
+                  url="/bugs/3637"
+                />
               </GoabWorkSideMenuGroup>
 
               <GoabWorkSideMenuGroup icon="star" heading="Features">

apps/prs/react/src/main.tsx

@@ -55,6 +55,7 @@ import { Bug3505Route } from "./routes/bugs/bug3505";
 import { Bug3614Route } from "./routes/bugs/bug3614";
 import { Bug3685Route } from "./routes/bugs/bug3685";
 import { Bug3635Route } from "./routes/bugs/bug3635";
+import { Bug3637Route } from "./routes/bugs/bug3637";
 
 import { EverythingRoute } from "./routes/everything";
 import { EverythingBRoute } from "./routes/everything-b";
@@ -157,6 +158,7 @@ root.render(
           <Route path="bugs/3614" element={<Bug3614Route />} />
           <Route path="bugs/3685" element={<Bug3685Route />} />
           <Route path="bugs/3635" element={<Bug3635Route />} />
+          <Route path="bugs/3637" element={<Bug3637Route />} />
 
           <Route path="features/1383" element={<Feat1383Route />} />
           <Route path="features/1547" element={<Feat1547Route />} />

apps/prs/react/src/routes/bugs/bug3637.tsx

@@ -0,0 +1,46 @@
+import {
+  GoabDataGrid,
+  GoabTable,
+  GoabTableSortHeader,
+  GoabCheckbox
+} from "@abgov/react-components";
+
+export function Bug3637Route() {
+
+  return (
+    <div>
+      <h1>3637 - Checkbox Table Header Row Height Bug </h1>
+      <div className="table-wrapper">
+        <GoabDataGrid keyboardNav="table" keyboardIconPosition="right">
+          <GoabTable width="100%">
+            <thead>
+              <tr>
+                <th className="goa-table-cell--checkbox"><GoabCheckbox name="" text=""></GoabCheckbox></th>
+                <th>
+                  <GoabTableSortHeader name="name">Name</GoabTableSortHeader>
+                </th>
+                <th>
+                  <GoabTableSortHeader name="status">Status</GoabTableSortHeader>
+                </th>
+                <th>Assigned to</th>
+                <th>
+                  <GoabTableSortHeader name="due-date">Due date</GoabTableSortHeader>
+                </th>
+                <th>
+                  <GoabTableSortHeader name="jurisdiction">Jurisdiction</GoabTableSortHeader>
+                </th>
+                <th>File number</th>
+                <th>
+                  <GoabTableSortHeader name="priority">Priority</GoabTableSortHeader>
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </GoabTable>
+        </GoabDataGrid>
+      </div>
+    </div>
+  );
+}

libs/web-components/src/assets/css/components.css

@@ -151,10 +151,12 @@ goa-table td.goa-table-cell--text {
   padding-bottom: var(--goa-table-padding-cell-text, var(--goa-space-s)) !important;
 }
 
-goa-table td.goa-table-cell--checkbox {
+goa-table td.goa-table-cell--checkbox,
+goa-table th.goa-table-cell--checkbox {
   padding-top: var(--goa-table-padding-cell-checkbox, 2px) !important;
   padding-bottom: var(--goa-table-padding-cell-checkbox, 2px) !important;
   text-align: center;
+  vertical-align: middle;
 }
 
 goa-table td.goa-table-cell--form-field {