fix: components in active table rows (#2186)

* fix: fix elements in active table rows [ci visual] * chore: trigger another chromatic build [ci visual]
SAP · Mar 6, 2021 · c6e9d52 · c6e9d52
1 parent cb97bb5
commit c6e9d52
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 13 deletions.
diff --git a/src/table.scss b/src/table.scss
@@ -305,6 +305,12 @@ $block: #{$fd-namespace}-table;
     }
 
     &--activable {
+      @include fd-active() {
+        * {
+          color: var(--sapList_Active_TextColor) !important;
+        }
+      }
+
       @include fd-trigger-element();
 
       @include fd-selected() {

diff --git a/stories/table/__snapshots__/table.stories.storyshot b/stories/table/__snapshots__/table.stories.storyshot
@@ -5377,21 +5377,68 @@ exports[`Storyshots Components/Table Interactive 1`] = `
         <td
           class="fd-table__cell"
         >
-          On This Row
+          <p
+            class="fd-text"
+          >
+            On This Row will cause
+          </p>
         </td>
 
 
         <td
           class="fd-table__cell"
         >
-          Will cause
+
+
+          <span
+            class="fd-object-number fd-object-number--negative"
+          >
+
+
+            <span
+              class="fd-object-number__text"
+            >
+              -2,000.00
+            </span>
+            <span
+              class="fd-object-number__unit"
+            >
+              EUR
+            </span>
+
+
+          </span>
+
+
         </td>
 
 
         <td
           class="fd-table__cell"
         >
-          Highlight of Whole Row
+
+
+          <span
+            class="fd-object-status fd-object-status--negative"
+          >
+
+
+            <i
+              class="fd-object-status__icon sap-icon--message-error"
+              role="presentation"
+            />
+
+
+            <span
+              class="fd-object-status__text"
+            >
+              Highlight of Whole Row
+            </span>
+
+
+          </span>
+
+
         </td>
 
 
@@ -5420,7 +5467,29 @@ exports[`Storyshots Components/Table Interactive 1`] = `
         <td
           class="fd-table__cell fd-table__cell--activable"
         >
-          Will cause
+
+
+          <a
+            class="fd-object-marker fd-object-marker--link"
+          >
+
+
+            <i
+              class="fd-object-marker__icon sap-icon--private"
+              role="presentation"
+            />
+
+
+            <span
+              class="fd-object-marker__text"
+            >
+              Will cause
+            </span>
+
+
+          </a>
+
+
         </td>
 
 
@@ -8562,14 +8631,22 @@ exports[`Storyshots Components/Table Semantic 1`] = `
         <td
           class="fd-table__cell"
         >
-          First Name
+          <p
+            class="fd-text"
+          >
+            First Name
+          </p>
         </td>
 
 
         <td
           class="fd-table__cell"
         >
-          Last Name
+          <p
+            class="fd-text"
+          >
+            Last Name
+          </p>
         </td>
 
 

diff --git a/stories/table/table.stories.js b/stories/table/table.stories.js
@@ -61,7 +61,10 @@ In these cases, use the **Tree** instead.
             'multi-input',
             'checkbox',
             'select',
-            'menu'
+            'menu',
+            'text',
+            'object-number',
+            'object-marker'
         ]
     }
 };
@@ -390,14 +393,28 @@ export const interactive = () => `
     <tbody class="fd-table__body">
         <tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
             <td class="fd-table__cell">Clicking on any Cell</td>
-            <td class="fd-table__cell">On This Row</td>
-            <td class="fd-table__cell">Will cause</td>
-            <td class="fd-table__cell">Highlight of Whole Row</td>
+            <td class="fd-table__cell"><p class="fd-text">On This Row will cause</p></td>
+            <td class="fd-table__cell">
+                <span class="fd-object-number fd-object-number--negative">
+                    <span class="fd-object-number__text">-2,000.00</span><span class="fd-object-number__unit">EUR</span>
+                </span>
+            </td>
+            <td class="fd-table__cell">
+                <span class="fd-object-status fd-object-status--negative">
+                    <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+                    <span class="fd-object-status__text">Highlight of Whole Row</span>
+                </span>
+            </td>
             <td class="fd-table__cell">01/26/17</td>
         </tr>
         <tr class="fd-table__row">
             <td class="fd-table__cell fd-table__cell--activable">Clicking On Cell</td>
-            <td class="fd-table__cell fd-table__cell--activable">Will cause</td>
+            <td class="fd-table__cell fd-table__cell--activable">
+                <a class="fd-object-marker fd-object-marker--link">
+                    <i class="fd-object-marker__icon sap-icon--private" role="presentation"></i>
+                    <span class="fd-object-marker__text">Will cause</span>
+                </a>
+            </td>
             <td class="fd-table__cell fd-table__cell--activable">Highlight of cell</td>
             <td class="fd-table__cell fd-table__cell--activable">Last Name</td>
             <td class="fd-table__cell fd-table__cell--activable">01/26/17</td>
@@ -461,8 +478,8 @@ export const semanticRows = () => `
                 <label class="fd-checkbox__label" for="Ai9ek611"></label>
             </td>
             <td class="fd-table__cell"><a class="fd-link">user.name@email.com</a></td>
-            <td class="fd-table__cell">First Name</td>
-            <td class="fd-table__cell">Last Name</td>
+            <td class="fd-table__cell"><p class="fd-text">First Name</p></td>
+            <td class="fd-table__cell"><p class="fd-text">Last Name</p></td>
             <td class="fd-table__cell">01/26/17</td>
         </tr>
         <tr class="fd-table__row">