Merge pull request github#32550 from github/repo-sync

Repo sync
Joshuacobarrubia · Apr 16, 2024 · d522cf9 · d522cf9
2 parents 8f38573 + a863eab
commit d522cf9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 57 deletions.
diff --git a/src/automated-pipelines/components/parameter-table/ParameterRow.tsx b/src/automated-pipelines/components/parameter-table/ParameterRow.tsx
@@ -52,12 +52,7 @@ export function ParameterRow({
     <>
       <tr className={`${isChild ? 'color-bg-subtle' : ''}`}>
         <td className={`${isChild ? 'px-3' : ''}`}>
-          <div
-            className={cx(
-              'pl-0 pt-1 pr-1 pb-1',
-              `${rowIndex > 0 && isChild ? 'pt-3 border-top color-border-muted' : ''}`,
-            )}
-          >
+          <div className={cx('pl-0 pt-1 pr-1 pb-1', `${rowIndex > 0 && isChild ? 'my-3' : ''}`)}>
             <div>
               {rowParams.name ? (
                 <>

diff --git a/src/frame/components/ui/MarkdownContent/stylesheets/table.scss b/src/frame/components/ui/MarkdownContent/stylesheets/table.scss
@@ -1,19 +1,20 @@
+@import "@primer/css/support/variables/typography.scss";
 @import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 .markdownBody {
   table {
-    display: table;
-    border-collapse: collapse;
-    position: relative;
-    font-size: 90%;
-    width: 100%;
-    line-height: 1.5;
+    display: table; // Primer CSS sets to block
+    width: 100%; // Primer CSS sets to max-content
+    font-size: $body-font-size;
+    text-align: left;
 
     // For mobile (small viewports) we need to fix the table
     // because if the table is larger than the viewport
     // it will force the width of the table causing issues
     // with the header on scroll
-    table-layout: fixed;
+    :not(:global(.has-nested-table)) & {
+      table-layout: fixed;
+    }
 
     // We want to keep table-layout: auto so that column widths dynamically adjust;
     // otherwise entries get needlessly squashed into narrow columns. As a workaround,
@@ -23,75 +24,63 @@
       table-layout: auto;
     }
 
-    code {
-      font-size: 85%;
-      padding: 0.2em 0.4em;
-      border-radius: 6px; // primer rounded-2
-    }
+    // **The follow selectors must be with `table` to override Primer CSS**
 
-    pre > code {
-      padding: 0;
+    // Remove zebra striping
+    tr:nth-child(2n) {
       background-color: transparent;
     }
 
-    thead tr {
-      border: none;
+    // Make the header sticky
+    thead {
+      position: sticky;
+      top: 105px; // 88 + 8 + 8 + 1, space for the site header
 
-      th {
-        @include breakpoint-xxl {
-          top: 65px !important; // 48 + 8 + 8 + 1
-        }
+      @include breakpoint-xxl {
+        top: 65px !important; // 48 + 8 + 8 + 1, space for the site header
       }
     }
 
-    th {
-      text-align: left;
-      position: sticky;
-      vertical-align: top;
-      z-index: 0;
-      top: 105px; // 88 + 8 + 8 + 1
-      background: var(--color-canvas-default);
-      box-shadow: 0 3px 0 0 var(--color-canvas-subtle);
-      padding: 0.75rem 0.5rem;
-      border: 0;
+    // Redraw borders as inset box-shadow to keep the border with sticky header
+    tr,
+    th,
+    td {
+      border: none;
     }
 
-    th[align="center"] {
-      text-align: center;
+    thead th,
+    thead td {
+      box-shadow: inset 0 -2px var(--color-border-muted);
     }
 
-    th[align="right"] {
-      text-align: right;
+    tbody th,
+    tbody td {
+      box-shadow: inset 0 -1px var(--color-border-muted);
     }
 
-    th:first-child,
-    td:first-child {
-      padding-left: 0;
+    tbody tr:last-child th,
+    tbody tr:last-child td {
+      box-shadow: none;
     }
 
+    // Adjust styling from Primer for spacing and text alignment
+    th,
     td {
       padding: 0.75rem 0.5rem;
-      border: 0;
       vertical-align: top;
     }
 
-    // markdown that has been converted to HTML is often wrapped in <p> tags
-    // don't let it interfere with the spacing
-    td p {
-      padding: 0;
-      margin: 0;
+    th:first-child,
+    td:first-child {
+      padding-left: 0;
     }
 
-    tr:nth-child(2n) {
-      background: none;
+    pre {
+      margin-top: 0.25rem; // Defaults to 0.5rem, but looks off with vertical-align: top
     }
 
-    :global(td.has-nested-table) {
-      width: 100%;
-
-      table {
-        table-layout: auto;
-      }
+    p:last-child {
+      margin-bottom: 0; // Autogenerated content
     }
   }
 }