Add quiet table setting and improve table borders

packages/standard-components/manifest.json

@@ -1579,6 +1579,11 @@
             "value": "spectrum--large"
           }
         ]
+      },
+      {
+        "type": "boolean",
+        "label": "Quiet",
+        "key": "quiet"
       }
     ],
     "dataContext": {

packages/standard-components/src/table/Table.svelte

@@ -9,6 +9,7 @@
   export let columns
   export let showAutoColumns
   export let rowCount
+  export let quiet
 
   const component = getContext("component")
   const { styleable, Provider } = getContext("sdk")
@@ -28,7 +29,7 @@
       return ""
     }
     const actualCount = Math.min(rowCount, dataCount)
-    return `height: ${36 + actualCount * 56}px;`
+    return `height: ${35 + actualCount * 56}px;`
   }
 
   const sortRows = (rows, sortColumn, sortOrder) => {
@@ -72,13 +73,14 @@
   }
 </script>
 
+<div use:styleable={$component.styles}>
   <div
     lang="en"
     dir="ltr"
-  use:styleable={$component.styles}
+    class:quiet
     class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-  <div style={contentStyle}>
-    <table class="spectrum-Table">
+    <div class="content" style={contentStyle}>
+      <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
         <thead class="spectrum-Table-head">
           <tr>
             {#if $component.children}
@@ -110,7 +112,7 @@
           {#each sortedRows as row}
             <tr class="spectrum-Table-row">
               {#if $component.children}
-              <td class="spectrum-Table-cell">
+                <td class="spectrum-Table-cell spectrum-Table-cell--divider">
                   <div class="spectrum-Table-cell-content">
                     <Provider data={row}>
                       <slot />
@@ -131,11 +133,17 @@
       </table>
     </div>
   </div>
+</div>
 
 <style>
   .spectrum {
     position: relative;
     overflow: auto;
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  .spectrum.quiet {
+    border: none !important;
   }
   table {
     width: 100%;
@@ -149,8 +157,6 @@
     position: sticky;
     top: 0;
     background-color: var(--spectrum-global-color-gray-100);
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
     z-index: 2;
   }
   .spectrum-Table-headCell-content {
@@ -161,13 +167,23 @@
     align-items: center;
     user-select: none;
   }
-  .spectrum-Table-cell {
+  td {
     padding-top: 0;
     padding-bottom: 0;
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    border-bottom: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  tr:first-child td {
     border-top: none !important;
   }
+  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
+    width: 1px;
+    border-right: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
   .spectrum-Table-cell-content {
     height: 55px;
     white-space: nowrap;
@@ -184,4 +200,9 @@
   .spectrum-Table-sortedIcon.visible {
     opacity: 1;
   }
+  .spectrum,
+  th {
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
 </style>