diff --git a/.changeset/hip-shoes-listen.md b/.changeset/hip-shoes-listen.md
new file mode 100644
index 00000000000..5fb94d03452
--- /dev/null
+++ b/.changeset/hip-shoes-listen.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+Adds `--spectrum-table-selected-row-background-color-rgb` to `light-vars.css` and `dark-vars.css` for custom tokens.
diff --git a/.changeset/petite-toys-greet.md b/.changeset/petite-toys-greet.md
index b085079cfa0..11c8cae1034 100644
--- a/.changeset/petite-toys-greet.md
+++ b/.changeset/petite-toys-greet.md
@@ -82,6 +82,6 @@ In Storybook, several new stories have been added to the docs page and the testi
- `--mod-table-row-bottom-to-text--spacious`
- `--mod-table-row-top-to-text--compact`
- `--mod-table-row-top-to-text--spacious`
-- `--mod-table-thumbnail-block-spacing"`
+- `--mod-table-thumbnail-block-spacing`
- `--mod-table-thumbnail-block-spacing-compact`
- `--mod-table-thumbnail-block-spacing-spacious`
diff --git a/.changeset/real-jobs-flow.md b/.changeset/real-jobs-flow.md
new file mode 100644
index 00000000000..5e60e73c382
--- /dev/null
+++ b/.changeset/real-jobs-flow.md
@@ -0,0 +1,42 @@
+---
+"@spectrum-css/table": minor
+---
+
+### S2 table migration (continued)
+
+#### Net-new features
+
+- New sparkline SVGs available for cell content
+
+#### Description of other S2 table work
+
+A new `.spectrum-Table-headCell--alignEnd` class was created to correspond to tables that may have end-aligned numerical data so the head cell follows the text alignment correctly.
+
+Semantically, if a table should enable column sorting, the content of a column's head cell should actually be a button, since it is triggering an action. If the column header cell could trigger a menu, the content of that cell should also be a button. New markup has been included to improve the semantic design of the content of header cells, utilizing button components to signify an action can be triggered, or a menu can be triggered.
+
+In Storybook, new stories have been added to the docs page and the testing grid for Chromatic. These stories include `WithMenuButton`, `WithChartContent`. Documentation has been added for each of these stories, as well as expanded in other stories.
+
+#### Mods
+
+##### Renamed Modifiers
+
+| Old Modifier | New modifier |
+| ------------------------------ | ----------------------------------------- |
+| `--mod-table-row-active-color` | `--mod-table-row-background-color-active` |
+
+##### New Modifiers
+
+- `--mod-table-header-font-style`
+- `--mod-table-header-icons-color-active`
+- `--mod-table-header-icons-color-default`
+- `--mod-table-header-icons-color-hover`
+- `--mod-table-header-icons-color-key-focus`
+- `--mod-table-row-font-family`
+- `--mod-table-row-font-style`
+- `--mod-table-row-text-color-active`
+- `--mod-table-row-text-color-hover`
+
+##### Removed Modifiers
+
+- `--mod-table-header-background-color-quiet`
+- `--mod-table-row-background-color-quiet`
diff --git a/.storybook/assets/images/sparkline-informative.svg b/.storybook/assets/images/sparkline-informative.svg
new file mode 100644
index 00000000000..5998b3e03b0
--- /dev/null
+++ b/.storybook/assets/images/sparkline-informative.svg
@@ -0,0 +1,17 @@
+
diff --git a/.storybook/assets/images/sparkline-negative.svg b/.storybook/assets/images/sparkline-negative.svg
new file mode 100644
index 00000000000..d31715827f7
--- /dev/null
+++ b/.storybook/assets/images/sparkline-negative.svg
@@ -0,0 +1,17 @@
+
diff --git a/.storybook/assets/images/sparkline-notice.svg b/.storybook/assets/images/sparkline-notice.svg
new file mode 100644
index 00000000000..80d18bc0e30
--- /dev/null
+++ b/.storybook/assets/images/sparkline-notice.svg
@@ -0,0 +1,17 @@
+
diff --git a/.storybook/assets/images/sparkline-positive.svg b/.storybook/assets/images/sparkline-positive.svg
new file mode 100644
index 00000000000..f5a80fa6ec7
--- /dev/null
+++ b/.storybook/assets/images/sparkline-positive.svg
@@ -0,0 +1,17 @@
+
diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json
index 277dc9d978c..24bfc87b340 100644
--- a/components/table/dist/metadata.json
+++ b/components/table/dist/metadata.json
@@ -2,9 +2,12 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Table",
+ ".spectrum-Table .spectrum-Table-row--summary",
".spectrum-Table--compact",
".spectrum-Table--emphasized",
".spectrum-Table--quiet",
+ ".spectrum-Table--quiet .spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child",
+ ".spectrum-Table--quiet .spectrum-Table-headRow:first-child .spectrum-Table-headCell:last-child",
".spectrum-Table--spacious",
".spectrum-Table-body",
".spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child",
@@ -20,10 +23,11 @@
".spectrum-Table-cell--alignStart",
".spectrum-Table-cell--collapsible",
".spectrum-Table-cell--divider",
- ".spectrum-Table-cell.is-focused",
- ".spectrum-Table-cell.is-focused:after",
+ ".spectrum-Table-cell:focus",
".spectrum-Table-cell:focus-visible",
".spectrum-Table-cell:focus-visible:after",
+ ".spectrum-Table-cell:focus:after",
+ ".spectrum-Table-chartContent .spectrum-Table-chartImage",
".spectrum-Table-checkboxCell",
".spectrum-Table-checkboxCell .spectrum-Table-checkbox",
".spectrum-Table-collapseInner",
@@ -40,35 +44,52 @@
".spectrum-Table-head",
".spectrum-Table-head [role=\"row\"]",
".spectrum-Table-headCell",
- ".spectrum-Table-headCell.is-focused",
- ".spectrum-Table-headCell.is-focused:after",
+ ".spectrum-Table-headCell .spectrum-Table-menuButton",
+ ".spectrum-Table-headCell .spectrum-Table-menuButton:active",
+ ".spectrum-Table-headCell .spectrum-Table-menuButton:focus",
+ ".spectrum-Table-headCell .spectrum-Table-menuButton:focus-visible",
+ ".spectrum-Table-headCell .spectrum-Table-menuButton:focus:hover",
+ ".spectrum-Table-headCell .spectrum-Table-menuButton:hover",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton:active",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton:focus",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton:focus-visible",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton:hover",
".spectrum-Table-headCell.is-sortable",
+ ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton",
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon",
+ ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active",
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:after",
+ ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus",
+ ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible",
+ ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover",
".spectrum-Table-headCell.is-sortable.is-keyboardFocused",
".spectrum-Table-headCell.is-sortable:active",
".spectrum-Table-headCell.is-sortable:focus",
".spectrum-Table-headCell.is-sortable:focus-visible",
- ".spectrum-Table-headCell.is-sortable:focus:hover",
".spectrum-Table-headCell.is-sortable:hover",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon",
- ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:after",
+ ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after",
+ ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:active",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus-visible",
- ".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus:hover",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:hover",
+ ".spectrum-Table-headCell:focus",
".spectrum-Table-headCell:focus-visible",
".spectrum-Table-headCell:focus-visible:after",
+ ".spectrum-Table-headCell:focus:after",
".spectrum-Table-headRow .spectrum-ActionButton:after",
".spectrum-Table-headRow .spectrum-Table-checkboxCell",
".spectrum-Table-headRow .spectrum-Table-checkboxCell .spectrum-Table-checkbox",
".spectrum-Table-headRow .spectrum-Table-headCell",
+ ".spectrum-Table-headRow .spectrum-Table-headCell--alignEnd",
".spectrum-Table-headRow .spectrum-Table-headCell.is-sortable",
".spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child",
".spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child",
@@ -93,42 +114,31 @@
".spectrum-Table-row--sectionHeader:hover",
".spectrum-Table-row--summary",
".spectrum-Table-row--summary .spectrum-Table-cell",
+ ".spectrum-Table-row--summary:hover",
".spectrum-Table-row.is-drop-target",
".spectrum-Table-row.is-drop-target .spectrum-Table-cell",
".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-focused",
- ".spectrum-Table-row.is-focused .spectrum-Table-cell",
- ".spectrum-Table-row.is-focused .spectrum-Table-cell:first-child",
- ".spectrum-Table-row.is-focused .spectrum-Table-cell:first-child:before",
- ".spectrum-Table-row.is-focused .spectrum-Table-cell:last-child",
- ".spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-focused:first-child .spectrum-Table-cell",
- ".spectrum-Table-row.is-focused:last-child .spectrum-Table-cell",
- ".spectrum-Table-row.is-focused:last-child .spectrum-Table-cell:first-child:before",
".spectrum-Table-row.is-selected",
+ ".spectrum-Table-row.is-selected .spectrum-Table-cell",
".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-selected.is-focused",
+ ".spectrum-Table-row.is-selected:active",
".spectrum-Table-row.is-selected:focus-visible",
".spectrum-Table-row.is-selected:hover",
+ ".spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell",
".spectrum-Table-row:active",
".spectrum-Table-row:first-child",
".spectrum-Table-row:first-child .spectrum-Table-cell:last-child",
".spectrum-Table-row:focus",
- ".spectrum-Table-row:focus .spectrum-Table-cell",
".spectrum-Table-row:focus .spectrum-Table-cell:first-child",
".spectrum-Table-row:focus .spectrum-Table-cell:first-child:before",
- ".spectrum-Table-row:focus .spectrum-Table-cell:last-child",
+ ".spectrum-Table-row:focus .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
".spectrum-Table-row:focus-visible",
- ".spectrum-Table-row:focus-visible .spectrum-Table-cell",
".spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child",
".spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child:before",
- ".spectrum-Table-row:focus-visible .spectrum-Table-cell:last-child",
".spectrum-Table-row:focus-visible .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row:focus-visible:first-child .spectrum-Table-cell",
- ".spectrum-Table-row:focus-visible:last-child .spectrum-Table-cell",
+ ".spectrum-Table-row:focus-visible:hover",
".spectrum-Table-row:focus-visible:last-child .spectrum-Table-cell:first-child:before",
- ".spectrum-Table-row:focus:first-child .spectrum-Table-cell",
- ".spectrum-Table-row:focus:last-child .spectrum-Table-cell",
+ ".spectrum-Table-row:focus:hover",
".spectrum-Table-row:focus:last-child .spectrum-Table-cell:first-child:before",
".spectrum-Table-row:hover",
".spectrum-Table-row:hover .spectrum-Table-cell:first-child:before",
@@ -143,12 +153,14 @@
".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell",
".spectrum-Table-scroller .spectrum-Table-head",
".spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell",
- ".spectrum-Table-scroller.spectrum-Table--quiet",
".spectrum-Table-visualInner",
".spectrum-Table-visualInner .spectrum-Avatar",
".spectrum-Table-visualInner .spectrum-Icon",
".spectrum-Table-visualInner .spectrum-Thumbnail",
".spectrum-Table:dir(rtl)",
+ ".spectrum-Table:lang(ja)",
+ ".spectrum-Table:lang(ko)",
+ ".spectrum-Table:lang(zh)",
".spectrum-Table:not(.spectrum-Table-scroller)",
"[dir=\"rtl\"] .spectrum-Table"
],
@@ -177,11 +189,15 @@
"--mod-table-focus-indicator-color",
"--mod-table-focus-indicator-thickness",
"--mod-table-header-background-color",
- "--mod-table-header-background-color-quiet",
"--mod-table-header-background-color-scrollable",
"--mod-table-header-font-family",
"--mod-table-header-font-size",
+ "--mod-table-header-font-style",
"--mod-table-header-font-weight",
+ "--mod-table-header-icons-color-active",
+ "--mod-table-header-icons-color-default",
+ "--mod-table-header-icons-color-hover",
+ "--mod-table-header-icons-color-key-focus",
"--mod-table-header-line-height",
"--mod-table-header-row-bottom-to-text",
"--mod-table-header-row-checkbox-block-spacing",
@@ -201,18 +217,21 @@
"--mod-table-min-row-height-spacious",
"--mod-table-outer-border-inline-width",
"--mod-table-outer-border-inline-width-quiet",
- "--mod-table-row-active-color",
"--mod-table-row-background-color",
+ "--mod-table-row-background-color-active",
"--mod-table-row-background-color-hover",
- "--mod-table-row-background-color-quiet",
"--mod-table-row-bottom-to-text",
"--mod-table-row-checkbox-block-spacing",
"--mod-table-row-checkbox-block-spacing-compact",
"--mod-table-row-checkbox-block-spacing-spacious",
+ "--mod-table-row-font-family",
"--mod-table-row-font-size",
+ "--mod-table-row-font-style",
"--mod-table-row-font-weight",
"--mod-table-row-line-height",
"--mod-table-row-text-color",
+ "--mod-table-row-text-color-active",
+ "--mod-table-row-text-color-hover",
"--mod-table-row-top-to-text",
"--mod-table-section-header-background-color",
"--mod-table-section-header-block-end-spacing",
@@ -271,6 +290,10 @@
"--spectrum-table-focused-cell-border-radius",
"--spectrum-table-header-background-color",
"--spectrum-table-header-font-weight",
+ "--spectrum-table-header-icons-color-active",
+ "--spectrum-table-header-icons-color-default",
+ "--spectrum-table-header-icons-color-hover",
+ "--spectrum-table-header-icons-color-key-focus",
"--spectrum-table-header-row-bottom-to-text",
"--spectrum-table-header-row-checkbox-block-spacing",
"--spectrum-table-header-row-checkbox-to-top-medium",
@@ -279,15 +302,13 @@
"--spectrum-table-icon-color",
"--spectrum-table-icon-color-active",
"--spectrum-table-icon-color-default",
- "--spectrum-table-icon-color-focus",
- "--spectrum-table-icon-color-focus-hover",
"--spectrum-table-icon-color-hover",
"--spectrum-table-icon-color-key-focus",
"--spectrum-table-min-header-row-height",
"--spectrum-table-min-row-height",
"--spectrum-table-outer-border-inline-width",
- "--spectrum-table-row-active-color",
"--spectrum-table-row-background-color",
+ "--spectrum-table-row-background-color-active",
"--spectrum-table-row-background-color-hover",
"--spectrum-table-row-bottom-to-text",
"--spectrum-table-row-bottom-to-text-medium",
@@ -309,6 +330,9 @@
"--spectrum-table-row-hover-opacity",
"--spectrum-table-row-line-height",
"--spectrum-table-row-text-color",
+ "--spectrum-table-row-text-color-active",
+ "--spectrum-table-row-text-color-hover",
+ "--spectrum-table-row-text-color-key-focus",
"--spectrum-table-row-tier",
"--spectrum-table-row-top-to-text",
"--spectrum-table-row-top-to-text-medium",
@@ -323,9 +347,11 @@
"--spectrum-table-selected-cell-background-color",
"--spectrum-table-selected-cell-background-color-focus",
"--spectrum-table-selected-row-background-color",
- "--spectrum-table-selected-row-background-color-focus",
+ "--spectrum-table-selected-row-background-color-active",
+ "--spectrum-table-selected-row-background-color-hover",
"--spectrum-table-selected-row-background-color-non-emphasized",
"--spectrum-table-selected-row-background-color-non-emphasized-focus",
+ "--spectrum-table-selected-row-background-color-rgb",
"--spectrum-table-selected-row-background-opacity",
"--spectrum-table-selected-row-background-opacity-hover",
"--spectrum-table-selected-row-background-opacity-non-emphasized",
@@ -342,11 +368,10 @@
"--spectrum-avatar-size-100",
"--spectrum-avatar-size-50",
"--spectrum-avatar-size-75",
- "--spectrum-background-layer-1-color",
- "--spectrum-blue-900-rgb",
"--spectrum-body-color",
"--spectrum-bold-font-weight",
"--spectrum-checkbox-control-size-small",
+ "--spectrum-cjk-line-height-100",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-height-100",
"--spectrum-component-top-to-text-100",
@@ -358,7 +383,6 @@
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
- "--spectrum-gray-100",
"--spectrum-gray-200",
"--spectrum-gray-25",
"--spectrum-gray-300",
@@ -368,6 +392,9 @@
"--spectrum-line-height-100",
"--spectrum-logical-rotation",
"--spectrum-neutral-content-color-default",
+ "--spectrum-neutral-content-color-down",
+ "--spectrum-neutral-content-color-hover",
+ "--spectrum-neutral-content-color-key-focus",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-neutral-subdued-content-color-down",
"--spectrum-neutral-subdued-content-color-hover",
@@ -379,9 +406,7 @@
"--spectrum-text-to-visual-300",
"--spectrum-thumbnail-size-100",
"--spectrum-thumbnail-size-200",
- "--spectrum-thumbnail-size-75",
- "--spectrum-transparent-white-100",
- "--spectrum-transparent-white-25"
+ "--spectrum-thumbnail-size-75"
],
"passthroughs": [
"--mod-avatar-block-size",
@@ -400,10 +425,10 @@
"--mod-button-font-family",
"--mod-button-font-size",
"--mod-button-font-weight",
- "--mod-button-height",
"--mod-button-line-height",
"--mod-button-padding-label-to-icon",
"--mod-checkbox-margin-block",
+ "--mod-icon-color",
"--mod-thumbnail-size"
],
"high-contrast": [
@@ -411,11 +436,14 @@
"--highcontrast-table-cell-focus-indicator-color",
"--highcontrast-table-divider-color",
"--highcontrast-table-focus-indicator-color",
+ "--highcontrast-table-header-text-color",
+ "--highcontrast-table-header-text-color-hover",
"--highcontrast-table-icon-color",
"--highcontrast-table-icon-color-focus",
"--highcontrast-table-row-background-color",
"--highcontrast-table-row-background-color-hover",
"--highcontrast-table-row-text-color",
+ "--highcontrast-table-row-text-color-focus",
"--highcontrast-table-row-text-color-hover",
"--highcontrast-table-section-header-background-color",
"--highcontrast-table-section-header-text-color",
diff --git a/components/table/index.css b/components/table/index.css
index 3fd1f5f836b..9f358a08f3f 100644
--- a/components/table/index.css
+++ b/components/table/index.css
@@ -16,15 +16,17 @@
--spectrum-table-transition-duration: var(--spectrum-animation-duration-100);
/* Background colors */
- --spectrum-table-header-background-color: var(--spectrum-transparent-white-25);
+ --spectrum-table-header-background-color: var(--spectrum-gray-75);
--spectrum-table-row-background-color: var(--spectrum-gray-25);
- /* @todo Refactor or remove these properties once the RGB stripped value is available. */
- --spectrum-table-row-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
+
--spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
- --spectrum-table-section-header-background-color: var(--spectrum-gray-100);
- --spectrum-table-selected-row-background-color: rgb(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity));
+ --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
+
+ /* @todo Refactor or remove these properties once the RGB stripped value is available. */
+ --spectrum-table-selected-row-background-color: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity));
--spectrum-table-selected-row-background-color-non-emphasized: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized));
- --spectrum-table-selected-row-background-color-focus: rgb(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
+ --spectrum-table-selected-row-background-color-hover: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
+ --spectrum-table-selected-row-background-color-active: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover));
--spectrum-table-selected-row-background-color-non-emphasized-focus: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover));
--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color)));
@@ -33,8 +35,10 @@
--spectrum-table-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity));
--spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color);
- /* Row Selection */
- --spectrum-table-row-active-color: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); /* active/down state background color */
+ /* Row States */
+ /* @todo Refactor or remove these properties once the RGB stripped value is available. */
+ --spectrum-table-row-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity));
+ --spectrum-table-row-background-color-active: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); /* active/down state background color */
/* Border */
--spectrum-table-border-color: var(--spectrum-gray-300);
@@ -56,15 +60,18 @@
--spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus)));
/* Visual (avatar, icons, thumbnails) */
- --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
- --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
- --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down);
- --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
- --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-key-focus);
- --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+ --spectrum-table-icon-color-default: var(--spectrum-neutral-content-color-default);
+ --spectrum-table-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-table-icon-color-active: var(--spectrum-neutral-content-color-down);
+ --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
--spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
--spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default)));
+ --spectrum-table-header-icons-color-default: var(--spectrum-neutral-subdued-content-color-default);
+ --spectrum-table-header-icons-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
+ --spectrum-table-header-icons-color-active: var(--spectrum-neutral-subdued-content-color-down);
+ --spectrum-table-header-icons-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
+
/* Alignment */
--spectrum-table-default-vertical-align: middle;
@@ -77,6 +84,9 @@
--spectrum-table-row-font-style: var(--spectrum-default-font-style);
--spectrum-table-row-line-height: var(--spectrum-line-height-100);
--spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default);
+ --spectrum-table-row-text-color-hover: var(--spectrum-neutral-content-color-hover);
+ --spectrum-table-row-text-color-active: var(--spectrum-neutral-content-color-down);
+ --spectrum-table-row-text-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
--spectrum-table-row-font-size: var(--spectrum-font-size-100);
--spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight);
@@ -115,27 +125,32 @@
--mod-avatar-inline-size: var(--mod-table-avatar-size, var(--spectrum-table-avatar-size));
/* Button for menus in header cells */
- --mod-button-border-radius: 0;
- --mod-button-font-weight: var(--spectrum-table-header-font-weight);
- --mod-button-font-size: var(--spectrum-table-row-font-size);
- --mod-button-font-family: var(--spectrum-table-row-font-family);
- --mod-button-line-height: var(--spectrum-table-row-line-height);
+ --mod-button-font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight));
+ --mod-button-font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size));
+ --mod-button-font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family));
+ --mod-button-line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height));
--mod-button-background-color-default: transparent;
--mod-button-background-color-hover: transparent;
--mod-button-background-color-focus: transparent;
--mod-button-background-color-down: transparent;
- --mod-button-content-color-default: var(--spectrum-table-header-text-color);
- --mod-button-content-color-hover: var(--spectrum-table-header-text-color);
- --mod-button-content-color-focus: var(--spectrum-table-header-text-color);
- --mod-button-content-color-down: var(--spectrum-table-header-text-color);
- --mod-button-edge-to-text: var(--spectrum-table-cell-inline-spacing);
- --mod-button-padding-label-to-icon: var(--spectrum-table-visual-to-text);
- --mod-button-height: var(--spectrum-table-min-header-row-height);
- --mod-button-focus-ring-border-radius: var(--spectrum-table-focused-cell-border-radius);
+ --mod-button-content-color-default: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
+ --mod-button-content-color-hover: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
+ --mod-button-content-color-focus: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
+ --mod-button-content-color-down: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color));
+ --mod-button-edge-to-text: var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing));
+ --mod-button-padding-label-to-icon: var(--mod-table-visual-to-text, var(--spectrum-table-visual-to-text));
+ --mod-button-border-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-focused-cell-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
+ --mod-button-focus-ring-border-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-focused-cell-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-table-row-line-height: var(--spectrum-cjk-line-height-100);
+ }
}
/********* VARIANTS *********/
@@ -170,44 +185,60 @@
.spectrum-Table--emphasized,
.spectrum-Table-row .is-emphasized {
--spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)));
- --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus)));
+ --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover)));
}
.spectrum-Table--quiet {
--spectrum-table-border-radius: var(--mod-table-border-radius-quiet, 0px);
--spectrum-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width-quiet, 0px);
- --spectrum-table-header-background-color: var(--mod-table-header-background-color-quiet, var(--spectrum-transparent-white-100));
- --spectrum-table-row-background-color: var(--mod-table-row-background-color-quiet, var(--spectrum-transparent-white-100));
- --spectrum-table-border-color: transparent;
+}
+
+.spectrum-Table-scroller {
+ --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-gray-75));
}
.spectrum-Table-row {
- &:hover,
&:focus-visible,
- &.is-focused {
+ &:focus {
+ --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-focus);
+ --spectrum-table-row-text-color: var(--spectrum-table-row-text-color-key-focus);
+
+ &:hover {
+ --spectrum-table-row-text-color: var(--spectrum-table-row-text-color-key-focus);
+ }
+ }
+
+ &:hover {
--highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover);
--highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover);
--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover)));
+ --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover)));
}
&:active {
--highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover);
--highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover);
- --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-active-color, var(--spectrum-table-row-active-color)));
+ --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-active, var(--spectrum-table-row-background-color-active)));
+ --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-active, var(--spectrum-table-row-text-color-active)));
}
&.is-selected {
--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color);
--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color);
--spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color));
+ --spectrum-table-divider-color: var(--spectrum-table-focus-indicator-color);
+ --spectrum-table-border-color: var(--spectrum-table-focus-indicator-color);
&:hover,
- &:focus-visible,
- &.is-focused {
+ &:focus-visible {
--highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus);
--highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus);
--spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus));
}
+
+ &:active {
+ --spectrum-table-cell-background-color: var(--spectrum-table-selected-row-background-color-active);
+ }
}
&.is-drop-target,
@@ -220,26 +251,22 @@
.spectrum-Table-headCell {
&.is-sortable,
- &.spectrum-Table-hasMenuButton {
+ &.spectrum-Table-hasMenuButton,
+ .spectrum-Table-sortButton {
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-header-icons-color-default, var(--spectrum-table-header-icons-color-default)));
+
&:hover {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover)));
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-hover, var(--spectrum-table-header-icons-color-hover)));
}
&:active {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active)));
- }
-
- &:focus {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus)));
- }
-
- &:focus:hover {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover)));
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-active, var(--spectrum-table-header-icons-color-active)));
}
+ &:focus,
&:focus-visible,
&.is-keyboardFocused {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)));
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-key-focus, var(--spectrum-table-header-icons-color-key-focus)));
}
}
@@ -249,14 +276,33 @@
--spectrum-table-header-row-top-to-text: 0;
--spectrum-table-header-row-bottom-to-text: 0;
}
-}
-.spectrum-Table-scroller {
- --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75)));
+ /* These styles get applied to the icon within that menu button. */
+ & .spectrum-Table-menuButton {
+ --mod-icon-color: var(--spectrum-table-header-icons-color-default);
+
+ &:hover {
+ --mod-icon-color: var(--spectrum-table-header-icons-color-hover);
+ }
+
+ &:active {
+ --mod-icon-color: var(--spectrum-table-header-icons-color-active);
+ }
+
+ &:focus,
+ &:focus:hover,
+ &:focus-visible {
+ --mod-icon-color: var(--spectrum-table-header-icons-color-key-focus);
+ }
+ }
}
.spectrum-Table-row--summary {
--spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color)));
+
+ &:hover {
+ --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color)));
+ }
}
.spectrum-Table-row--sectionHeader {
@@ -286,6 +332,7 @@
font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family));
font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size));
font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight));
+ font-style: var(--mod-table-header-font-style, var(--spectrum-table-row-font-style));
line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height));
text-transform: var(--mod-table-header-text-transform, none);
@@ -299,7 +346,6 @@
background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color));
border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
- transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out;
cursor: var(--mod-table-cursor-header-default, initial);
outline: 0;
@@ -340,6 +386,17 @@
}
}
+/* Quiet table header rows do not have inline borders */
+.spectrum-Table--quiet .spectrum-Table-headRow:first-child {
+ .spectrum-Table-headCell:first-child {
+ border-inline-start: 0;
+ }
+
+ .spectrum-Table-headCell:last-child {
+ border-inline-end: 0;
+ }
+}
+
/********* ICONS- SORT, DISCLOSURE/MENU *********/
/* Head cell column text */
.spectrum-Table-columnTitle {
@@ -351,6 +408,21 @@
.spectrum-Table-headCell.is-sortable {
padding: 0;
+ /* Ensure the button text color is the same as the header text color, particularly in high contrast mode. */
+ .spectrum-Table-sortButton {
+ color: var(--highcontrast-table-header-text-color, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)));
+
+ /* Avoids flash of a different text color from the button in WHCM. */
+ forced-color-adjust: none;
+
+ &:hover,
+ &:focus,
+ &:focus-visible,
+ &:active {
+ color: var(--highcontrast-table-header-text-color-hover, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)));
+ }
+ }
+
/* Focus indicator- brings the focus indicator above the border and matches the table cell dimensions. */
.spectrum-Table-sortButton::after {
inset: calc(3 * var(--mod-table-border-width, var(--spectrum-table-border-width)));
@@ -366,13 +438,27 @@
/* Head cell column text in the button that opens the menu */
.spectrum-Table-headCell.spectrum-Table-hasMenuButton {
.spectrum-Table-sortButton {
- min-block-size: calc(var(--spectrum-table-min-header-row-height) + var(--mod-table-border-width, var(--spectrum-table-border-width)));
+ min-inline-size: 100%;
+ justify-content: flex-start;
+ color: var(--highcontrast-table-header-text-color, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)));
- /* Focus indicator- brings the focus indicator above the border and matches the table cell dimensions. */
- &::after {
- /* Multiply by 3 to account for the borders on the top, side and bottom of the table cell. */
- inset: calc(3 * var(--mod-table-border-width, var(--spectrum-table-border-width)));
+ /* Avoids flash of a different text color from the button in WHCM. */
+ forced-color-adjust: none;
+
+ &:hover {
+ color: var(--highcontrast-table-header-text-color-hover, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)));
+ }
+
+ /* Focus indicator- brings the focus indicator above the cell borders and matches the table cell dimensions. */
+ &:focus-visible::after {
+ inset: var(--mod-table-border-width, var(--spectrum-table-border-width));
z-index: 1;
+
+ /* Remove the box-shadow of .spectrum-Button, which was generating a different corner radius for the focus indicator. */
+ box-shadow: none;
+
+ /* Add focus indicator border to match the other table cell focus indicators. */
+ border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))));
}
.spectrum-Button-label {
@@ -408,7 +494,8 @@
text-align: start;
}
-.spectrum-Table-cell--alignEnd {
+.spectrum-Table-cell--alignEnd,
+.spectrum-Table-headRow .spectrum-Table-headCell--alignEnd {
text-align: end;
}
@@ -453,6 +540,8 @@
/* Cells within table body */
box-sizing: border-box;
+ font-family: var(--mod-table-row-font-family, var(--spectrum-table-row-font-family));
+ font-style: var(--mod-table-row-font-style, var(--spectrum-table-row-font-style));
font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size));
font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight));
line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
@@ -474,8 +563,8 @@
position: relative;
display: table-cell;
- &:focus-visible,
- &.is-focused {
+ &:focus,
+ &:focus-visible {
position: relative;
/* Remove the outline since we'll replace it with an ::after pseudo-element */
@@ -557,8 +646,20 @@
border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
}
+ /* Selected rows */
+ &.is-selected {
+ .spectrum-Table-cell {
+ /* Remove bottom border by default for all selected rows to conditionally add it back. */
+ border-block-end: none;
+ }
+ }
+
+ /* Adding the bottom border only to the last selected row in a sequence achieves 1px border between adjacent selected rows */
+ &.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell {
+ border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)));
+ }
+
/* Row focus indicator */
- &.is-focused,
&:focus-visible,
&:focus {
outline: none;
@@ -567,9 +668,8 @@
.spectrum-Table-cell:first-child {
position: relative;
border-inline-start: 0;
- border-block: var(--spectrum-table-border-width) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)));
- /* Because the ::before element technically removes the table's inline border, the first cell needs the entire cell padding to avoid horizontal layout shift when a row is focused. */
+ /* Because the ::before element technically removes the table's inline border, the first cell needs the entire cell-inline-padding padding to avoid horizontal layout shift when a row is focused. */
padding-inline-start: var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing));
/* The side row focus indicator line */
@@ -585,19 +685,6 @@
}
}
- /* All other cells in focused rows (including the first rows after the header row and last rows in the table) need the focus indicator border */
- &:first-child .spectrum-Table-cell,
- &:last-child .spectrum-Table-cell,
- .spectrum-Table-cell {
- border-block: var(--spectrum-table-border-width) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)));
- }
-
- /* Last cell of focused row needs the fancy new focus indicator borders at the end */
- .spectrum-Table-cell:last-child {
- border-inline-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)));
- border-block-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)));
- }
-
/* In a focused row that is last in the table, the first cell needs rounded corners at the bottom of the row focus indicator line */
&:last-child .spectrum-Table-cell:first-child::before {
border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius));
@@ -707,10 +794,6 @@
--mod-table-current-header-height should be dynamically updated with JS to match the table header height. */
scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-row-top-to-text, var(--spectrum-table-header-row-top-to-text)) + var(--mod-table-header-row-bottom-to-text, var(--spectrum-table-header-row-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width))));
- &.spectrum-Table--quiet {
- border-block-start: none;
- }
-
.spectrum-Table-head {
position: sticky;
inset-block-start: 0;
@@ -825,10 +908,10 @@
border: 0;
color: var(--spectrum-table-icon-color);
- transform: var(--spectrum-logical-rotation,);
+ transform: var(--spectrum-logical-rotation);
&[aria-expanded="true"] {
- transform: var(--spectrum-logical-rotation,) rotate(90deg);
+ transform: var(--spectrum-logical-rotation) rotate(90deg);
}
&::after {
@@ -844,16 +927,16 @@
}
&:focus {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus)));
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-key-focus)));
&:hover {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover)));
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus)));
}
}
&:focus-visible,
&.is-keyboardFocused {
- --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)));
+ --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)));
outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness));
outline-style: solid;
@@ -881,6 +964,15 @@
}
}
+/********* SPARKLINE CHARTS *********/
+.spectrum-Table-chartContent {
+ .spectrum-Table-chartImage {
+ display: block;
+ inline-size: fit-content;
+ block-size: auto;
+ }
+}
+
/********* HIGH CONTRAST *********/
@media (forced-colors: active) {
.spectrum-Table {
@@ -894,6 +986,10 @@
--highcontrast-table-selected-row-background-color: Highlight;
--highcontrast-table-selected-row-text-color: HighlightText;
+ /* Button text colors */
+ --highcontrast-table-header-text-color: CanvasText;
+ --highcontrast-table-header-text-color-hover: Highlight;
+
@supports (color: SelectedItem) {
--highcontrast-table-selected-row-background-color: SelectedItem;
--highcontrast-table-selected-row-text-color: SelectedItemText;
@@ -903,20 +999,28 @@
--highcontrast-table-selected-row-text-color-focus: HighlightText;
--highcontrast-table-row-background-color-hover: Highlight;
--highcontrast-table-row-text-color-hover: HighlightText;
+ --highcontrast-table-row-text-color-focus: HighlightText;
--highcontrast-table-section-header-text-color: Canvas;
--highcontrast-table-section-header-background-color: CanvasText;
--highcontrast-table-focus-indicator-color: Highlight;
--highcontrast-table-transition-duration: 0;
+
+ & .spectrum-Table-row--summary {
+ --highcontrast-table-row-text-color: CanvasText;
+ }
}
.spectrum-Table-cell {
/* Removes unstylable readability backplate. */
forced-color-adjust: none;
+ /* Make sure border colors are visible in high contrast mode */
+ border: var(--spectrum-table-border-width) solid Highlight;
+
&:focus-visible,
- &.is-focused {
+ &:focus {
&::after {
border-color: Highlight;
}
@@ -926,7 +1030,7 @@
.spectrum-Table-row {
&:hover,
&:focus-visible,
- &.is-focused {
+ &:focus {
.spectrum-Table-checkbox .spectrum-Checkbox-box::before {
outline: var(--highcontrast-table-row-text-color-hover) 1px solid;
}
@@ -935,11 +1039,6 @@
.spectrum-Table-cell:first-child::before {
background-color: Highlight;
}
-
- /* Make sure border colors are visible in high contrast mode */
- /* .spectrum-Table-cell {
- border-color: Highlight;
- } */
}
}
diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js
index ff16c7518bb..3979b332cce 100644
--- a/components/table/stories/table.stories.js
+++ b/components/table/stories/table.stories.js
@@ -116,6 +116,17 @@ export default {
rowItems: {
table: { disable: true },
},
+ hasChartContent: {
+ name: "Chart content in cells",
+ description: "In some instances, a chart can be displayed in the cells of the table.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ disable: true,
+ },
+ control: "boolean",
+ },
},
args: {
rootClass: "spectrum-Table",
@@ -129,6 +140,7 @@ export default {
useScroller: false,
hasColumnDividers: false,
hasMenu: false,
+ hasChartContent: false,
isSortable: false,
sortIcon: "Sort",
rowItems: [
@@ -381,11 +393,16 @@ TableStates.args = {
isSelected: true,
},
{
- cellContent: "Table row bravo",
+ cellContent: "Selected, hovered row",
+ isSelected: true,
+ isHovered: true,
},
{
- cellContent: "Selected unfocused row, no rounded corners",
+ cellContent: ["Selected unfocused row, with a focused cell", "Focused cell", "Unfocused cell"],
isSelected: true,
+ cellCustomClasses: {
+ 1: ["is-focus-visible"]
+ }
},
{
cellContent: "Focused unselected row, no rounded corners",
@@ -394,11 +411,13 @@ TableStates.args = {
{
cellContent: ["Table row with a focused cell", "Focused cell", "Unfocused cell"],
cellCustomClasses: {
- 1: ["is-focused"]
+ 1: ["is-focus-visible"]
}
},
{
- cellContent: "Table row echo",
+ cellContent: "Hovered row",
+ isHovered: true,
+
},
{
cellContent: "Focused selected row, with rounded corners",
@@ -413,7 +432,7 @@ TableStates.parameters = {
};
/**
- * Quiet tables are for when a table is meant to be supplementary, subtle, or lightweight. The quiet table utilizes the `.spectrum-Table--quiet` class and has a transparent background and no borders on the left and right.
+ * Quiet tables are for when a table is meant to be supplementary, subtle, or lightweight. The quiet table utilizes the `.spectrum-Table--quiet` class and does not have borders on the left and right.
*/
export const Quiet = Template.bind({});
Quiet.args = {
@@ -462,6 +481,39 @@ WithMenuButton.parameters = {
};
WithMenuButton.tags = ["!dev"];
+/**
+ * In some use cases, a sparkline chart can be displayed in a cell of the table. There are informative, negative, positive, and notice sparkline charts available for implementations.
+ */
+export const WithChartContent = Template.bind({});
+WithChartContent.args = {
+ hasChartContent: true,
+ rowItems: [
+ { cellContent: ["Informative sparkline", "200", "sparkline-informative.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },
+ { cellContent: ["Negative sparkline", "0", "sparkline-negative.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },
+ { cellContent: ["Positive sparkline", "600", "sparkline-positive.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },{ cellContent: ["Notice sparkline", "400", "sparkline-notice.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },
+ ]
+};
+WithChartContent.storyName = "With chart content";
+WithChartContent.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
/**
* A quiet multi-select table has emphasized styling by default, but excluding the `.spectrum-Table--emphasized` class will change the style of selected rows.
*/
@@ -494,7 +546,7 @@ WithColumnDividers.parameters = {
};
/**
- * Tables can have a summary row to show totals, at either the top or the bottom of the table. This example shows both the optional summary row at the bottom, and a row marked as selected.
+ * Tables can have a summary row to show totals, at either the top or the bottom of the table. This example shows both the optional summary row at the top, and a row marked as selected.
*/
export const SummaryAndSelected = Template.bind({});
SummaryAndSelected.args = {
diff --git a/components/table/stories/table.test.js b/components/table/stories/table.test.js
index 3d0eba27f69..efde820a61a 100644
--- a/components/table/stories/table.test.js
+++ b/components/table/stories/table.test.js
@@ -467,11 +467,16 @@ export const TableGroup = Variants({
isSelected: true,
},
{
- cellContent: "Table row bravo",
+ cellContent: "Selected, hovered row",
+ isSelected: true,
+ isHovered: true,
},
{
- cellContent: "Selected unfocused row, no rounded corners",
+ cellContent: ["Selected unfocused row, with a focused cell", "Focused cell", "Unfocused cell"],
isSelected: true,
+ cellCustomClasses: {
+ 1: ["is-focus-visible"]
+ }
},
{
cellContent: "Focused unselected row, no rounded corners",
@@ -480,18 +485,45 @@ export const TableGroup = Variants({
{
cellContent: ["Table row with a focused cell", "Focused cell", "Unfocused cell"],
cellCustomClasses: {
- 1: ["is-focused"]
+ 1: ["is-focus-visible"]
}
},
{
- cellContent: "Table row echo",
+ cellContent: "Hovered row",
+ isHovered: true,
+
},
{
cellContent: "Focused selected row, with rounded corners",
isFocused: true,
isSelected: true,
}
- ],
+ ]
+ },
+ {
+ testHeading: "Sparkline charts",
+ hasChartContent: true,
+ rowItems: [
+ { cellContent: ["Informative sparkline", "200", "sparkline-informative.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },
+ { cellContent: ["Negative sparkline", "0", "sparkline-negative.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },
+ { cellContent: ["Positive sparkline", "600", "sparkline-positive.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },{ cellContent: ["Notice sparkline", "400", "sparkline-notice.svg"],
+ textAlignment: {
+ 1: "end"
+ }
+ },
+ ]
}
],
});
diff --git a/components/table/stories/template.js b/components/table/stories/template.js
index f90d4e1e0e8..fb3838182ab 100644
--- a/components/table/stories/template.js
+++ b/components/table/stories/template.js
@@ -19,6 +19,7 @@ export const TableRowItem = ({
showCheckbox = false,
isSelected = false,
isFocused = false,
+ isHovered = false,
isSummaryRow = false,
isSectionHeader = false,
isEmphasized = true,
@@ -36,6 +37,7 @@ export const TableRowItem = ({
ariaControls,
customClasses = [],
cellCustomClasses = {},
+ hasChartContent = false,
} = {}, context = {}) => {
const useVisuals = visualElement !== undefined && !isSummaryRow && !isSectionHeader;
const useColumnDividers = hasColumnDividers && !isSummaryRow && !isSectionHeader;
@@ -103,7 +105,8 @@ export const TableRowItem = ({
[`${rootClass}-row--collapsible`]: isCollapsible,
[`${rootClass}-cell--divider`]: useColumnDividers,
["is-selected"]: isSelected,
- ["is-focused"]: isFocused,
+ ["is-focus-visible"]: isFocused,
+ ["is-hover"]: isHovered,
["is-expanded"]: isExpanded,
["is-last-tier"]: isLastTier,
["is-drop-target"]: isDropTarget,
@@ -199,7 +202,13 @@ export const TableRowItem = ({
[`${rootClass}-cell--alignEnd`]: getTextAlignment(2) === "end",
...cellCustomClasses?.[showCheckbox ? 3 : 2]?.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
- >${getCellContent(2)}`
+ >
+ ${when(hasChartContent, () => html`
+
+
})
+