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 %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column HeaderColumn HeaderColumn HeaderColumn Header
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
user.name@email.comFirst NameLast Name01/26/17
+{% 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