diff --git a/docs/pages/components/table.md b/docs/pages/components/table.md
index 60daeca8f..8c663790e 100644
--- a/docs/pages/components/table.md
+++ b/docs/pages/components/table.md
@@ -205,6 +205,92 @@ It is recommended to add the parameter `area-selected="true` to the row that is
+
+## Table with semantic row highlithging
+Table rows support semantic row lighlithing with the modifiers `fd-table__row--valid`, `fd-table__row--warning`, `fd-table__row--error` and `fd-table__row--information`
+
+{% capture table-checkbox %}
+
+{% endcapture %}
+{% include display-component.html component=table-checkbox %}
+
+
+
## Table with Contextual Menu
When more than three actions exist per row and/or space doesn't allow for actions,
a contextual menu can be substituted in order to display all actions in one menu.
@@ -669,3 +755,9 @@ a contextual menu can be substituted in order to display all actions in one menu
{% endcapture %}
{% include display-component.html component=table-sort %}
+
+
diff --git a/scss/components/table.scss b/scss/components/table.scss
index 213b665e3..713e08bd8 100644
--- a/scss/components/table.scss
+++ b/scss/components/table.scss
@@ -23,6 +23,7 @@ $block: #{$fd-namespace}-table;
--fd-table-cell-spacing: var(--fd-width-gutter);
$fd-table-cell-padding: fd-space("s") !default;
+ $fd-table-header-cell-padding: fd-space(3) !default;
$fd-table-transition-params: $fd-animation--speed ease-in !default;
$fd-table-sort-icon-size: fd-space(3);
$fd-table-sort-column-header-background-color: fd-color("neutral", 2);
@@ -118,6 +119,18 @@ $block: #{$fd-namespace}-table;
&.fd-table__fixed-col {
@include fd-var-color("background-color", $fd-table-fixed-column-cell-color, --fd-color-background-2);
}
+
+ @include fd-rtl() {
+ &:first-child {
+ @include fd-var-size("padding-right", $fd-width--gutter, --fd-width-gutter);
+ }
+
+ text-align: right;
+ }
+ }
+ th {
+ padding-top: $fd-table-header-cell-padding;
+ padding-bottom: $fd-table-header-cell-padding;
}
&__sort-column {
@@ -209,4 +222,78 @@ $block: #{$fd-namespace}-table;
@include fd-var-color("background-color", fd-color-state("hover"), --fd-color-background-hover);
}
}
+
+ &__row--valid,
+ &__row--warning,
+ &__row--error,
+ &__row--information {
+ & td:first-child {
+ position: relative;
+ &::before {
+ position: absolute;
+ left: 0;
+ top: 0;
+ border: fd-space(.5) solid;
+ border-top-left-radius: fd-space(1);
+ border-bottom-left-radius: fd-space(1);
+ content: "";
+ height: 100%;
+ }
+ @include fd-rtl() {
+ &::before {
+ left: auto;
+ right: 0;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-top-right-radius: fd-space(1);
+ border-bottom-right-radius: fd-space(1);
+ }
+ }
+ }
+ }
+ &__row--valid {
+ &:hover {
+ --fd-color-background-hover: var(--fd-color-background-3);
+ }
+ @include fd-var-color("background-color", fd-color('background', 3), --fd-color-background-3);
+ & td:first-child {
+ &::before {
+ @include fd-var-color("border-color", fd-color('status', 1), --fd-color-status-1);
+ }
+ }
+ }
+ &__row--warning {
+ &:hover {
+ --fd-color-background-hover: var(--fd-color-background-4);
+ }
+ @include fd-var-color("background-color", fd-color('background', 4), --fd-color-background-4);
+ & td:first-child {
+ &::before {
+ @include fd-var-color("border-color", fd-color('status', 2), --fd-color-status-2);
+ }
+ }
+ }
+ &__row--error {
+ &:hover {
+ --fd-color-background-hover: var(--fd-color-background-5);
+ }
+ @include fd-var-color("background-color", fd-color('background', 5), --fd-color-background-5);
+ & td:first-child {
+ &::before {
+ @include fd-var-color("border-color", fd-color('status', 3), --fd-color-status-3);
+ }
+ }
+ }
+ &__row--information {
+ &:hover {
+ --fd-color-background-hover: var(--fd-color-background-6);
+ }
+ @include fd-var-color("background-color", fd-color('background', 6), --fd-color-background-6);
+ & td:first-child {
+ &::before {
+ @include fd-var-color("border-color", fd-color('status', 5), --fd-color-status-5);
+ border-color: fd-color('status', 5);
+ }
+ }
+ }
}
diff --git a/test/templates/table/component.njk b/test/templates/table/component.njk
index feb215270..915a0c53a 100644
--- a/test/templates/table/component.njk
+++ b/test/templates/table/component.njk
@@ -58,7 +58,7 @@ table:
{%- for row in properties.rows %}
-
+
{%- for item in row %}
{%- if item.label %}
{{ item.label }} |
diff --git a/test/templates/table/index.njk b/test/templates/table/index.njk
index 9cef18bcf..3077cfdeb 100644
--- a/test/templates/table/index.njk
+++ b/test/templates/table/index.njk
@@ -39,6 +39,75 @@
{% set example %}
{{ table(properties={
rows: [row, row, row],
+ rowClass : {"rowIndex": 2, "class": "fd-table__row--valid"},
+ headers: [
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ }
+ ]
+ })
+}}
+{{ table(properties={
+ rows: [row, row, row],
+ rowClass : {"rowIndex": 2, "class": "fd-table__row--warning"},
+ headers: [
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ }
+ ]
+ })
+}}
+
+{{ table(properties={
+ rows: [row, row, row],
+ rowClass : {"rowIndex": 2, "class": "fd-table__row--error"},
+ headers: [
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ },
+ {
+ label: "Header Column"
+ }
+ ]
+ })
+}}
+
+{{ table(properties={
+ rows: [row, row, row],
+ rowClass : {"rowIndex": 2, "class": "fd-table__row--information"},
headers: [
{
label: "Header Column"
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-dots_0_example-containerfd-loading-dots_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-dots_0_example-containerfd-loading-dots_0_desktop.png
deleted file mode 100644
index 6f291c2ae..000000000
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-dots_0_example-containerfd-loading-dots_0_desktop.png and /dev/null differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_0_example-containerfd-loading-spinner_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_0_example-containerfd-loading-spinner_0_desktop.png
deleted file mode 100644
index 20c019b8e..000000000
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_0_example-containerfd-loading-spinner_0_desktop.png and /dev/null differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_1_example-containerfd-loading-spinner__n1_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_1_example-containerfd-loading-spinner__n1_0_desktop.png
deleted file mode 100644
index acd527523..000000000
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_1_example-containerfd-loading-spinner__n1_0_desktop.png and /dev/null differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_2_example-containerfd-loading-spinner__n2_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_2_example-containerfd-loading-spinner__n2_0_desktop.png
deleted file mode 100644
index 2bf6802f8..000000000
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_loading-spinner_2_example-containerfd-loading-spinner__n2_0_desktop.png and /dev/null differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_spinner_0_example-containerfd-spinner_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_spinner_0_example-containerfd-spinner_0_desktop.png
deleted file mode 100644
index 10004698e..000000000
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_spinner_0_example-containerfd-spinner_0_desktop.png and /dev/null differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_spinner_1_example-containerfd-spinner__n1_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_spinner_1_example-containerfd-spinner__n1_0_desktop.png
deleted file mode 100644
index 9907c0ffb..000000000
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_spinner_1_example-containerfd-spinner__n1_0_desktop.png and /dev/null differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_0_example-containerfd-table_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_0_example-containerfd-table_0_desktop.png
index ac834941c..d7f4e1b9c 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_0_example-containerfd-table_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_0_example-containerfd-table_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_10_example-containerfd-table__n10_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_10_example-containerfd-table__n10_0_desktop.png
new file mode 100644
index 000000000..00dc448de
Binary files /dev/null and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_10_example-containerfd-table__n10_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_11_example-containerfd-table__n11_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_11_example-containerfd-table__n11_0_desktop.png
new file mode 100644
index 000000000..ac6b1dd3b
Binary files /dev/null and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_11_example-containerfd-table__n11_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_12_example-containerfd-table__n12_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_12_example-containerfd-table__n12_0_desktop.png
new file mode 100644
index 000000000..fcb6e664c
Binary files /dev/null and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_12_example-containerfd-table__n12_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_1_example-containerfd-table__n1_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_1_example-containerfd-table__n1_0_desktop.png
index e961bc4ce..41b2f4c9e 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_1_example-containerfd-table__n1_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_1_example-containerfd-table__n1_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_2_example-containerfd-table__n2_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_2_example-containerfd-table__n2_0_desktop.png
index 01ec676a0..c447b6297 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_2_example-containerfd-table__n2_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_2_example-containerfd-table__n2_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_3_example-containerfd-table__n3_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_3_example-containerfd-table__n3_0_desktop.png
index 98a0b7e57..f86fa067d 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_3_example-containerfd-table__n3_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_3_example-containerfd-table__n3_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_4_example-containerfd-table__n4_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_4_example-containerfd-table__n4_0_desktop.png
index 26c3a7424..d8c2b6cf8 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_4_example-containerfd-table__n4_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_4_example-containerfd-table__n4_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_5_example-containerfd-table__n5_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_5_example-containerfd-table__n5_0_desktop.png
index 5e79d538b..e62e910cd 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_5_example-containerfd-table__n5_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_5_example-containerfd-table__n5_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_6_example-containerfd-table__n6_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_6_example-containerfd-table__n6_0_desktop.png
index ec4f163f1..454759f45 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_6_example-containerfd-table__n6_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_6_example-containerfd-table__n6_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_7_example-containerfd-table__n7_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_7_example-containerfd-table__n7_0_desktop.png
index 7a540b2b0..122d02db1 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_7_example-containerfd-table__n7_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_7_example-containerfd-table__n7_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_8_example-containerfd-table__n8_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_8_example-containerfd-table__n8_0_desktop.png
index b22e6a86d..34a675595 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_8_example-containerfd-table__n8_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_8_example-containerfd-table__n8_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_9_example-containerfd-table__n9_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_9_example-containerfd-table__n9_0_desktop.png
index e7699301c..3b4fe9627 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_9_example-containerfd-table__n9_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_table_9_example-containerfd-table__n9_0_desktop.png differ