diff --git a/.changeset/petite-toys-greet.md b/.changeset/petite-toys-greet.md
index b085079cfa0..2256b606b05 100644
--- a/.changeset/petite-toys-greet.md
+++ b/.changeset/petite-toys-greet.md
@@ -14,12 +14,15 @@ Compared to the S1 table, this component has updated corner rounding, updated co
- For tables with sortable column, there are three new S2 icons used: `Sort` to indicate "general" sorting, `SortUp` for ascending sort direction, `SortDown` for descending sort direction.
- Tables support thumbnail, avatar, and icon components as content within a cell.
- Focus indicators for entire rows have been updated for rows to include a side focus indicator.
+- New sparkline SVGs available for cell content
#### Description of other S2 table work
T-shirt sizing for tables is not technically supported, so t-shirt size classes (i.e. `.spectrum-Table--sizeS`), have been removed across all density variants.
-The `.spectrum-Table-cell--alignRight` class has been renamed to `.spectrum-Table-cell--alignEnd` to reflect the preference for "logical" positioning. The `.spectrum-Table-cell--alignCenter` class has been refactored to `.spectrum-Table-cell--alignStart`.
+The `.spectrum-Table-cell--alignRight` class has been renamed to `.spectrum-Table-cell--alignEnd` to reflect the preference for "logical" positioning. The `.spectrum-Table-cell--alignCenter` class has been refactored to `.spectrum-Table-cell--alignStart`. 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 S1, the CSS table component only supported thumbnails. Because the S2 table supports thumbnails, as well as avatars and icons, most of the language regarding thumbnails has also changed. For instance, the `showThumbnail` storybook arg was refactored to `visualElement`. The following CSS classes have been removed or refactored to remove the thumbnail language in favor of "visual" instead:
@@ -39,7 +42,7 @@ Individual cell focus rings have rounded corners.
The outer table border extends all the way around the `thead`/`div` equivalent.
-In Storybook, several new stories have been added to the docs page and the testing grid for Chromatic. These stories include `EmptyState`, `LoadingState`, `SingleSelect`, `NumericalData`, `TableStates`, `Sortable`. Documentation has been added for each of these stories, as well as expanded in other stories.
+In Storybook, several new stories have been added to the docs page and the testing grid for Chromatic. These stories include `EmptyState`, `LoadingState`, `SingleSelect`, `NumericalData`, `TableStates`, `Sortable`, `WithMenuButton`, `WithChartContent`. Documentation has been added for each of these stories, as well as expanded in other stories.
#### Mods
@@ -62,6 +65,7 @@ In Storybook, several new stories have been added to the docs page and the testi
| `--mod-table-row-checkbox-block-spacing--compact` | `--mod-table-row-checkbox-block-spacing-compact` |
| `--mod-table-row-checkbox-block-spacing--spacious` | `--mod-table-row-checkbox-block-spacing-spacious` |
| `--mod-table-thumbnail-to-text` | `--mod-table-visual-to-text` |
+| `--mod-table-row-active-color` | `--mod-table-row-background-color-active` |
##### New Modifiers
@@ -72,6 +76,15 @@ In Storybook, several new stories have been added to the docs page and the testi
- `--mod-table-summary-row-bottom-to-text`
- `--mod-table-summary-row-min-height`
- `--mod-table-summary-row-top-to-text`
+- `--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
@@ -82,6 +95,8 @@ 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`
+- `--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..96ab647398c 100644
--- a/components/table/dist/metadata.json
+++ b/components/table/dist/metadata.json
@@ -5,6 +5,8 @@
".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",
@@ -12,6 +14,7 @@
".spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell",
".spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell",
".spectrum-Table-body.is-drop-target",
+ ".spectrum-Table-body.is-drop-target .spectrum-Table-headRow",
".spectrum-Table-body.is-drop-target .spectrum-Table-row",
".spectrum-Table-body.is-drop-target .spectrum-Table-row .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
".spectrum-Table-body.is-drop-target:after",
@@ -24,6 +27,7 @@
".spectrum-Table-cell.is-focused:after",
".spectrum-Table-cell:focus-visible",
".spectrum-Table-cell:focus-visible:after",
+ ".spectrum-Table-chartContent .spectrum-Table-chartImage",
".spectrum-Table-checkboxCell",
".spectrum-Table-checkboxCell .spectrum-Table-checkbox",
".spectrum-Table-collapseInner",
@@ -40,6 +44,18 @@
".spectrum-Table-head",
".spectrum-Table-head [role=\"row\"]",
".spectrum-Table-headCell",
+ ".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-focused",
".spectrum-Table-headCell.is-focused:after",
".spectrum-Table-headCell.is-sortable",
@@ -49,19 +65,18 @@
".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.is-focused:after",
+ ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after",
".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-visible",
".spectrum-Table-headCell:focus-visible:after",
@@ -69,8 +84,23 @@
".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.is-drop-target",
+ ".spectrum-Table-headRow.is-focused",
+ ".spectrum-Table-headRow.is-focused:hover",
+ ".spectrum-Table-headRow.is-selected",
+ ".spectrum-Table-headRow.is-selected.is-focused",
+ ".spectrum-Table-headRow.is-selected:active",
+ ".spectrum-Table-headRow.is-selected:focus-visible",
+ ".spectrum-Table-headRow.is-selected:hover",
+ ".spectrum-Table-headRow:active",
".spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child",
+ ".spectrum-Table-headRow:focus",
+ ".spectrum-Table-headRow:focus-visible",
+ ".spectrum-Table-headRow:focus-visible:hover",
+ ".spectrum-Table-headRow:focus:hover",
+ ".spectrum-Table-headRow:hover",
".spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child",
".spectrum-Table-main",
".spectrum-Table-row",
@@ -93,42 +123,37 @@
".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:hover",
".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-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 +168,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 +204,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 +232,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 +305,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 +317,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 +345,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 +362,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 +383,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 +398,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 +407,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 +421,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",
@@ -390,7 +430,6 @@
"--mod-button-background-color-down",
"--mod-button-background-color-focus",
"--mod-button-background-color-hover",
- "--mod-button-border-radius",
"--mod-button-content-color-default",
"--mod-button-content-color-down",
"--mod-button-content-color-focus",
@@ -404,6 +443,7 @@
"--mod-button-line-height",
"--mod-button-padding-label-to-icon",
"--mod-checkbox-margin-block",
+ "--mod-icon-color",
"--mod-thumbnail-size"
],
"high-contrast": [
@@ -416,6 +456,7 @@
"--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..97362224f32 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,7 +125,6 @@
--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);
@@ -124,18 +133,24 @@
--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-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(--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-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,36 +185,50 @@
.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,
+ &.is-focused,
&: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,
@@ -208,6 +237,10 @@
--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 +253,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 +278,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 +334,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 +348,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 +388,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 +410,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 +440,28 @@
/* 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,
+ &.is-focused::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 +497,8 @@
text-align: start;
}
-.spectrum-Table-cell--alignEnd {
+.spectrum-Table-cell--alignEnd,
+.spectrum-Table-headRow .spectrum-Table-headCell--alignEnd {
text-align: end;
}
@@ -453,6 +543,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));
@@ -557,6 +649,19 @@
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,
@@ -567,9 +672,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 +689,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 +798,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 +912,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 +931,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 +968,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 +990,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,6 +1003,7 @@
--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;
@@ -915,6 +1016,9 @@
/* 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 {
&::after {
@@ -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..bfdf26bbba9 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: [
@@ -384,8 +396,11 @@ TableStates.args = {
cellContent: "Table row bravo",
},
{
- cellContent: "Selected unfocused row, no rounded corners",
+ cellContent: ["Selected unfocused row, with a focused cell", "Focused cell", "Unfocused cell"],
isSelected: true,
+ cellCustomClasses: {
+ 1: ["is-focused"]
+ }
},
{
cellContent: "Focused unselected row, no rounded corners",
@@ -413,7 +428,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 +477,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 +542,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..9bfcb6e8e7a 100644
--- a/components/table/stories/table.test.js
+++ b/components/table/stories/table.test.js
@@ -492,6 +492,31 @@ export const TableGroup = Variants({
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..967e133b5ae 100644
--- a/components/table/stories/template.js
+++ b/components/table/stories/template.js
@@ -36,6 +36,7 @@ export const TableRowItem = ({
ariaControls,
customClasses = [],
cellCustomClasses = {},
+ hasChartContent = false,
} = {}, context = {}) => {
const useVisuals = visualElement !== undefined && !isSummaryRow && !isSectionHeader;
const useColumnDividers = hasColumnDividers && !isSummaryRow && !isSectionHeader;
@@ -199,7 +200,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`
+
+
})
+