@spectrum-web-components/table 0.38.0 → 0.39.1

package/README.md

@@ -45,10 +45,8 @@ import {
 
 ## Example
 
-To ensure that the table scrolls, make sure to add a `style` attribute to `<sp-table>` with your desired height. Otherwise, the table will automatically show all its items.
-
 ```html
-<sp-table size="m">
+<sp-table>
     <sp-table-head>
         <sp-table-head-cell>Column Title</sp-table-head-cell>
         <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -94,10 +92,8 @@ When `selects="single"`, the `<sp-table>` will manage a _single_ selection in th
 
 ```html
 <sp-table
-    size="m"
     selects="single"
     selected='["row1"]'
-    style="height: 200px"
     onchange="spAlert(this, `Selected: ${JSON.stringify(this.selected)}`)"
 >
     <sp-table-head>
@@ -137,12 +133,10 @@ When `selects="single"`, the `<sp-table>` will manage a _single_ selection in th
 
 ### `selects="multiple"`
 
-When `selects="multiple"`, the `<sp-table>` will manage a selection in the array value of `selected` in via a presence toggle. Additionally, an `<sp-table-checkbox-cell>` will be made available in the `<sp-table-head>` in order to select/deselect all items in the `<sp-table>`.
+When `selects="multiple"`, the `<sp-table>` manages selections via a presence toggle and adds them to the `selected` array. Additionally, an `<sp-table-checkbox-cell>` will be made available in the `<sp-table-head>` in order to select/deselect all items in the `<sp-table>`.
 
 ```html
 <sp-table
-    size="m"
-    style="height: 200px"
     selects="multiple"
     selected='["row1", "row2"]'
     onchange="spAlert(this, `Selected: ${JSON.stringify(this.selected)}`)"
@@ -182,13 +176,273 @@ When `selects="multiple"`, the `<sp-table>` will manage a selection in the array
 </sp-table>
 ```
 
+## Emphasized
+
+Use the `emphasized` attribute to add priority to the information that is delivered within your `<table>` element. In particular, this affects the appearance of selected rows, and will set the emphasized style for the checkboxes within `sp-table-checkbox-cell`.
+Leaving off the `emphasized` attribute will display the non-emphasized colors.
+
+```html
+<sp-table emphasized selects="multiple" selected='["row1"]'>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+## Density
+
+The optional `density` property changes the spacing around table cell content from the "regular" default. It accepts the values of `compact` or `spacious`.
+
+<sp-tabs selected="compact" auto label="Density Attribute Options">
+<sp-tab value="compact">Compact</sp-tab>
+<sp-tab-panel value="compact">
+
+```html
+<sp-table density="compact">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="spacious">Spacious</sp-tab>
+<sp-tab-panel value="spacious">
+
+```html
+<sp-table density="spacious">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Sizes
+
+<sp-tabs selected="s" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-table size="s">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium (Default)</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-table>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-table size="l">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-table size="xl">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Quiet
+
+When using the `quiet` property, the overall look of the table will change. The quiet variant of Table has a transparent background and no borders on the left and right.
+
+```html
+<sp-table quiet>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
 ## Virtualized Table
 
 For large amounts of data, the `<sp-table>` can be virtualised to easily add table rows by using properties.
 
 ```html-live
 <sp-table
-    size="m"
     id="table-virtualized-demo"
     style="height: 200px"
     scroller="true"
@@ -311,7 +565,6 @@ By default the `selected` property will surface an array of item indexes that ar
 
 ```html-live
 <sp-table
-    size="m"
     id="table-item-value-demo"
     style="height: 200px"
     scroller="true"
@@ -414,7 +667,6 @@ All values in the item array are assumed to be homogenous by default. This means
 
 ```html-live
 <sp-table
-    size="m"
     id="table-row-type-demo"
     style="height: 200px"
     scroller="true"
@@ -528,7 +780,6 @@ For each table column you want to sort, use the `sortable` attribute in its resp
 
 ```html-live
 <sp-table
-    size="m"
     id="sorted-virtualized-table"
     style="height: 200px"
     scroller="true"

package/custom-elements.json

@@ -200,6 +200,41 @@
               "attribute": "scroller",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Deliver the Table with additional visual emphasis to selected rows.",
+              "attribute": "emphasized",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Display with \"quiet\" variant styles.",
+              "attribute": "quiet",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "'compact' | 'spacious' | undefined"
+              },
+              "privacy": "public",
+              "description": "Changes the spacing around table cell content.",
+              "attribute": "density",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "tableBody",
@@ -445,6 +480,32 @@
               "default": "false",
               "description": "Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.",
               "fieldName": "scroller"
+            },
+            {
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Deliver the Table with additional visual emphasis to selected rows.",
+              "fieldName": "emphasized"
+            },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display with \"quiet\" variant styles.",
+              "fieldName": "quiet"
+            },
+            {
+              "name": "density",
+              "type": {
+                "text": "'compact' | 'spacious' | undefined"
+              },
+              "description": "Changes the spacing around table cell content.",
+              "fieldName": "density"
             }
           ],
           "mixins": [
@@ -591,6 +652,18 @@
           "description": "",
           "name": "TableCheckboxCell",
           "members": [
+            {
+              "kind": "field",
+              "name": "headCell",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether or not the checkbox cell is in the table head.",
+              "attribute": "head-cell",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "role",
@@ -651,6 +724,17 @@
               "attribute": "selects-single",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "emphasized",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "click",
@@ -663,6 +747,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "head-cell",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether or not the checkbox cell is in the table head.",
+              "fieldName": "headCell"
+            },
             {
               "name": "role",
               "type": {
@@ -702,6 +795,14 @@
               },
               "default": "false",
               "fieldName": "selectsSingle"
+            },
+            {
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "emphasized"
             }
           ],
           "superclass": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/table",
-    "version": "0.38.0",
+    "version": "0.39.1",
     "publishConfig": {
         "access": "public"
     },
@@ -117,13 +117,13 @@
     "dependencies": {
         "@lit-labs/observers": "^2.0.0",
         "@lit-labs/virtualizer": "^2.0.6",
-        "@spectrum-web-components/base": "^0.38.0",
-        "@spectrum-web-components/checkbox": "^0.38.0",
-        "@spectrum-web-components/icon": "^0.38.0",
-        "@spectrum-web-components/icons-ui": "^0.38.0"
+        "@spectrum-web-components/base": "^0.39.1",
+        "@spectrum-web-components/checkbox": "^0.39.1",
+        "@spectrum-web-components/icon": "^0.39.1",
+        "@spectrum-web-components/icons-ui": "^0.39.1"
     },
     "devDependencies": {
-        "@spectrum-css/table": "^4.0.66"
+        "@spectrum-css/table": "^5.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -132,5 +132,5 @@
         "./elements.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
+    "gitHead": "d374f8645b54b978d830c95ff777b5b1e9172ac7"
 }

package/src/Table.d.ts

@@ -46,6 +46,18 @@ export declare class Table extends Table_base {
      * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.
      */
     scroller: boolean;
+    /**
+     * Deliver the Table with additional visual emphasis to selected rows.
+     */
+    emphasized: boolean;
+    /**
+     * Display with "quiet" variant styles.
+     */
+    quiet: boolean;
+    /**
+     * Changes the spacing around table cell content.
+     */
+    density?: 'compact' | 'spacious';
     private tableBody?;
     private tableHeadCheckboxCell?;
     private get tableHead();

package/src/Table.dev.js

@@ -36,7 +36,7 @@ export var RowType = /* @__PURE__ */ ((RowType2) => {
   return RowType2;
 })(RowType || {});
 export class Table extends SizedMixin(SpectrumElement, {
-  validSizes: ["s", "m"],
+  validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: true
 }) {
   constructor() {
@@ -51,6 +51,8 @@ export class Table extends SizedMixin(SpectrumElement, {
       return `${index}`;
     };
     this.scroller = false;
+    this.emphasized = false;
+    this.quiet = false;
   }
   static get styles() {
     return [styles];
@@ -147,6 +149,7 @@ export class Table extends SizedMixin(SpectrumElement, {
           row.selected = this.selectedSet.has(row.value);
           if (!row.querySelector(":scope > sp-table-checkbox-cell")) {
             const clonedCheckbox = checkbox.cloneNode();
+            checkbox.emphasized = this.emphasized;
             row.insertAdjacentElement("afterbegin", clonedCheckbox);
             checkbox.checked = row.selected;
           }
@@ -157,6 +160,8 @@ export class Table extends SizedMixin(SpectrumElement, {
         this.tableHeadCheckboxCell = document.createElement(
           "sp-table-checkbox-cell"
         );
+        this.tableHeadCheckboxCell.headCell = true;
+        this.tableHeadCheckboxCell.emphasized = this.emphasized;
         (_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
           "afterbegin",
           this.tableHeadCheckboxCell
@@ -214,6 +219,8 @@ export class Table extends SizedMixin(SpectrumElement, {
       this.tableHeadCheckboxCell = document.createElement(
         "sp-table-checkbox-cell"
       );
+      this.tableHeadCheckboxCell.headCell = true;
+      this.tableHeadCheckboxCell.emphasized = this.emphasized;
       const allSelected = this.selected.length === this.tableRows.length;
       this.manageHeadCheckbox(allSelected);
       (_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
@@ -224,6 +231,7 @@ export class Table extends SizedMixin(SpectrumElement, {
         const checkbox = document.createElement(
           "sp-table-checkbox-cell"
         );
+        checkbox.emphasized = this.emphasized;
         row.insertAdjacentElement("afterbegin", checkbox);
         row.selected = this.selectedSet.has(row.value);
         checkbox.checked = row.selected;
@@ -243,6 +251,7 @@ export class Table extends SizedMixin(SpectrumElement, {
     if (!this.tableHeadCheckboxCell)
       return;
     this.tableHeadCheckboxCell.selectsSingle = this.selects === "single";
+    this.tableHeadCheckboxCell.emphasized = this.emphasized;
     this.tableHeadCheckboxCell.checked = allSelected;
     this.tableHeadCheckboxCell.indeterminate = this.selected.length > 0 && !allSelected;
   }
@@ -400,4 +409,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Table.prototype, "scroller", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Table.prototype, "emphasized", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Table.prototype, "quiet", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Table.prototype, "density", 2);
 //# sourceMappingURL=Table.dev.js.map