From 433f67a337d4128119f59dda282dcb3a7ec01e51 Mon Sep 17 00:00:00 2001 From: deno Date: Thu, 25 Feb 2021 17:18:20 -0500 Subject: [PATCH] fix: update table navigation icons and states (#2157) BREAKING CHANGE: update responsive table navigation icon --- src/table.scss | 21 +- .../__snapshots__/table.stories.storyshot | 738 ++++++++++++++++-- stories/table/table.stories.js | 192 ++++- 3 files changed, 873 insertions(+), 78 deletions(-) diff --git a/src/table.scss b/src/table.scss index b45a7645f2..f3f426e276 100644 --- a/src/table.scss +++ b/src/table.scss @@ -274,12 +274,27 @@ $block: #{$fd-namespace}-table; background-color: var(--sapList_Hover_SelectionBackground); } } + + &--activable { + @include fd-selected() { + @include fd-active() { + background-color: var(--sapList_Active_Background); + } + } + } } } &__cell, &__row { &--hoverable { + @include fd-selected() { + .#{$block}__cell { + @include fd-hover() { + background-color: var(--sapList_Hover_SelectionBackground); + } + } + } &, .#{$block}__cell { @include fd-hover() { @@ -291,6 +306,10 @@ $block: #{$fd-namespace}-table; &--activable { @include fd-trigger-element(); + + @include fd-selected() { + @include fd-trigger-element(); + } } &--focusable { @@ -404,7 +423,7 @@ $block: #{$fd-namespace}-table; } } - &.#{$block}__row--activable { + &.#{$block}__row--activable:not(:hover) { @include fd-active() { + .#{$block}__row--secondary { @include fd-table-active(); diff --git a/stories/table/__snapshots__/table.stories.storyshot b/stories/table/__snapshots__/table.stories.storyshot index c5c4e9cf1d..f67f8b9712 100644 --- a/stories/table/__snapshots__/table.stories.storyshot +++ b/stories/table/__snapshots__/table.stories.storyshot @@ -5988,6 +5988,572 @@ exports[`Storyshots Components/Table Menu header 1`] = ` + +`; + +exports[`Storyshots Components/Table Navigation from table rows 1`] = ` +
+ + +
+ + +

+ Responsive Table - row navigation +

+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + Status + + Price + + Country + + + +
+ Banana + + + + + + Available + + + + + + 5 EUR + + India + + + + + + +
+ Pineapple + + + + + + Out of stock + + + + + + 2 EUR + + Mexico + + + + + + +
+ Orange + + + + + + Temporary unavailable + + + + + + 6 EUR + + Spain + + + + + + +
+ + + +
+ + +

+ Table - icon button for navigation +

+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + Status + + Price + + Country + + + +
+ Banana + + + + + + Available + + + + + + 5 EUR + + India + + + + + + +
+ Pineapple + + + + + + Out of stock + + + + + + 2 EUR + + Mexico + + + + + + +
+ Orange + + + + + + Temporary unavailable + + + + + + 6 EUR + + Spain + + + + + + +
+ +
`; @@ -6000,9 +6566,7 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` > -

+

Table with Navigation Indication State

@@ -6016,7 +6580,7 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` @@ -6030,6 +6594,28 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` > + + + + + @@ -6142,10 +6744,34 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` + + + @@ -6204,10 +6822,32 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` + + + @@ -7522,7 +8154,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = ` @@ -7592,7 +8224,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = ` @@ -7604,7 +8236,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = ` @@ -7674,7 +8306,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = ` @@ -7686,7 +8318,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = ` @@ -7756,7 +8388,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = ` diff --git a/stories/table/table.stories.js b/stories/table/table.stories.js index 85bc02fa61..a1e232e64d 100644 --- a/stories/table/table.stories.js +++ b/stories/table/table.stories.js @@ -1460,14 +1460,151 @@ It’s important to hardcode the width of the columns, otherwise the cells will } }; -export const navIndicators = () => ` +export const navIcon = () => `
-

Table with Navigation Indication State

+

Responsive Table - row navigation

+ +
+
+ + + + + + + + + + + + + @@ -6117,22 +6727,14 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` - +
+ + + + + + @@ -6179,22 +6805,14 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` - +
+ + + + + + @@ -6241,22 +6881,14 @@ exports[`Storyshots Components/Table Navigation indicators 1`] = ` - - + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusPriceCountry
Banana + + Available + + 5 EURIndia + +
Pineapple + + Out of stock + + 2 EURMexico + +
Orange + + Temporary unavailable + + 6 EURSpain + +
+ +
+

Table - icon button for navigation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusPriceCountry
Banana + + Available + + 5 EURIndia + +
Pineapple + + Out of stock + + 2 EURMexico + +
Orange + + Temporary unavailable + + 6 EURSpain + +
+`; + +navIcon.storyName = 'Navigation from table rows'; +navIcon.parameters = { + docs: { + storyDescription: ` +Responsive table allows navigation from a line item. For that purpose you need to add a column with the icon \`sap-icon--slim-arrow-right\` at the end. The entire line needs to be clickable + +You have an option to add icon button \`sap-icon--navigation-right-arrow\` as a separate column for non responsive table. + ` + } +}; + +export const navIndicators = () => ` +
+

Table with Navigation Indication State

+ +
+ + + + @@ -1476,37 +1613,43 @@ export const navIndicators = () => ` - + + - - + + - - + + - @@ -1517,7 +1660,8 @@ navIndicators.storyName = 'Navigation indicators'; navIndicators.parameters = { docs: { storyDescription: ` -The table component can display navigation indicators. You can also display a “navigated” indicator, as indicated in the second row, to mark an item that is currently open. To display a navigated indicator, add the \`fd-table__cell--navigated\` class to the desired table cell. + +The table component can display navigation indicators. When multi-selection is used in a master-detail scenario, it is not clear which item was last opened, you can mark it as a “navigated” indicator, as indicated in the second row, to mark an item that is currently open. To display a navigated indicator, add the \`fd-table__cell--navigated\` class to the desired table cell. ` } }; @@ -1542,7 +1686,7 @@ export const responsiveTable = () => ` - + - + - +
+ + + Column Header Column Header Column Header
+ + + user.name@email.com First Name Last Name 01/26/17 - + +
+ + + user.name@email.com First Name Last Name 01/26/17 - + +
+ + + user.name@email.com First Name Last Name 01/26/17 - + +
@@ -1556,10 +1700,10 @@ export const responsiveTable = () => ` 5 EUR India - +
@@ -1573,10 +1717,10 @@ export const responsiveTable = () => ` 2 EUR Mexico - +
@@ -1590,7 +1734,7 @@ export const responsiveTable = () => ` 6 EUR Spain - +