feat: Add no-data, remove borders from responsive mode (#2192)

* feat: Add no-data, remove borders from responsive [ci visual] * bring table text [ci visual] * remove reset [ci visual] * reverse no-wrap [ci visual] * add truncation mixin [ci visual]
SAP · Mar 15, 2021 · c2ad842 · c2ad842
1 parent b8621b5
commit c2ad842
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 15 deletions.
diff --git a/src/table.scss b/src/table.scss
@@ -124,6 +124,19 @@ $block: #{$fd-namespace}-table;
     }
   }
 
+  &__text {
+    @include fd-ellipsis();
+
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+
+    &--no-wrap {
+      white-space: nowrap;
+    }
+  }
+
   &__cell {
     text-align: left;
     text-shadow: var(--sapContent_TextShadow);
@@ -148,6 +161,10 @@ $block: #{$fd-namespace}-table;
       color: var(--sapInformationColor);
     }
 
+    &--no-data {
+      text-align: center;
+    }
+
     &--checkbox {
       width: $fd-table-cell-fit-content-width;
       vertical-align: baseline;
@@ -491,6 +508,21 @@ $block: #{$fd-namespace}-table;
     }
   }
 
+  &--responsive {
+    .#{$block}__body,
+    .#{$block}__header {
+      border: none;
+    }
+
+    .#{$block}__row {
+      @include fd-last-child() {
+        .#{$block}__cell {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+
   &--compact {
     .#{$block}__cell {
       height: $fd-table-compact-cell-height;

diff --git a/stories/table/__snapshots__/table.stories.storyshot b/stories/table/__snapshots__/table.stories.storyshot
@@ -6083,7 +6083,7 @@ exports[`Storyshots Components/Table Navigation from table rows 1`] = `
 
 
   <table
-    class="fd-table fd-table--no-horizontal-borders"
+    class="fd-table fd-table--responsive fd-table--no-horizontal-borders"
   >
 
 
@@ -6351,7 +6351,7 @@ exports[`Storyshots Components/Table Navigation from table rows 1`] = `
 
 
   <table
-    class="fd-table"
+    class="fd-table "
   >
 
 
@@ -7390,7 +7390,23 @@ exports[`Storyshots Components/Table Primary 1`] = `
         <td
           class="fd-table__cell"
         >
-          First Name
+
+
+          <div
+            class="fd-table__text fd-table__text--no-wrap"
+            style="max-width: 250px"
+          >
+
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+
+          </div>
+
+
         </td>
 
 
@@ -7437,7 +7453,21 @@ exports[`Storyshots Components/Table Primary 1`] = `
         <td
           class="fd-table__cell"
         >
-          First Name
+
+
+          <div
+            class="fd-table__text"
+            style="max-width: 250px"
+          >
+
+                    Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
+
+          </div>
+
+
         </td>
 
 
@@ -7551,7 +7581,7 @@ exports[`Storyshots Components/Table Responsive Table (pop-in mode) 1`] = `
 
 
     <table
-      class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in"
+      class="fd-table fd-table--responsive fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in"
     >
 
 
@@ -7818,7 +7848,7 @@ exports[`Storyshots Components/Table Responsive Table (pop-in mode) 1`] = `
 
 
     <table
-      class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in"
+      class="fd-table fd-table--responsive fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in"
     >
 
 
@@ -8138,7 +8168,7 @@ exports[`Storyshots Components/Table Responsive Table 1`] = `
 
 
   <table
-    class="fd-table fd-table--no-horizontal-borders"
+    class="fd-table fd-table--responsive fd-table--no-horizontal-borders"
   >
 
 
@@ -9204,3 +9234,8 @@ exports[`Storyshots Components/Table Semantic 1`] = `
 
 </section>
 `;
+
+exports[`Storyshots Components/Table Table without data 1`] = `
+
+
+`;
diff --git a/stories/table/table.stories.js b/stories/table/table.stories.js
@@ -87,14 +87,30 @@ export const primary = () => `
     <tbody class="fd-table__body">
         <tr class="fd-table__row">
             <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">
+                <div class="fd-table__text fd-table__text--no-wrap" style="max-width: 250px">
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                </div>
+            </td>
             <td class="fd-table__cell">Middle Name</td>
             <td class="fd-table__cell">Last Name</td>
             <td class="fd-table__cell">01/26/17</td>
         </tr>
         <tr class="fd-table__row">
             <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">
+                <div class="fd-table__text" style="max-width: 250px">
+                    Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
+                </div>
+            </td>
             <td class="fd-table__cell">Middle Name</td>
             <td class="fd-table__cell">Last Name</td>
             <td class="fd-table__cell">01/26/17</td>
@@ -1482,7 +1498,7 @@ export const navIcon = () => `
     <h4>Responsive Table - row navigation</h4>
     <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
 </div>
-<table class="fd-table fd-table--no-horizontal-borders">
+<table class="fd-table fd-table--responsive fd-table--no-horizontal-borders">
     <thead class="fd-table__header">
         <tr class="fd-table__row">
             <th class="fd-table__cell" scope="col">Name</th>
@@ -1539,7 +1555,7 @@ export const navIcon = () => `
     <h4>Table - icon button for navigation</h4>
     <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
 </div>
-<table class="fd-table">
+<table class="fd-table ">
     <thead class="fd-table__header">
         <tr class="fd-table__row">
             <th class="fd-table__cell" scope="col">Name</th>
@@ -1688,7 +1704,7 @@ export const responsiveTable = () => `
     <h4 style="margin: 0;">Responsive Table</h4>
     <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
 </div>
-<table class="fd-table fd-table--no-horizontal-borders">
+<table class="fd-table fd-table--responsive fd-table--no-horizontal-borders">
     <thead class="fd-table__header">
         <tr class="fd-table__row">
             <th class="fd-table__cell fd-table__cell--checkbox">
@@ -1761,7 +1777,7 @@ responsiveTable.storyName = 'Responsive Table';
 responsiveTable.parameters = {
     docs: {
         storyDescription: `
-The desktop responsive table markup is exactly the same as the regular table.
+The desktop responsive table should contain \`fd-table--responsive\` modifier.
     `
     }
 };
@@ -1772,7 +1788,7 @@ export const responsiveTablePopInMode = () => `
         <h4 style="margin: 0;">Responsive Table - Pop-in mode</h4>
         <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
     </div>
-    <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in">
+    <table class="fd-table fd-table--responsive fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in">
         <tbody class="fd-table__body">
             <tr class="fd-table__row fd-table__row--main fd-table__row--activable fd-table__row--hoverable">
                 <td class="fd-table__cell">
@@ -1835,7 +1851,7 @@ export const responsiveTablePopInMode = () => `
         <h4 style="margin: 0;">Responsive Table - Pop-in Mode with Checkboxes and Navigation Indicator</h4>
         <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
     </div>
-    <table class="fd-table fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in">
+    <table class="fd-table fd-table--responsive fd-table--no-horizontal-borders fd-table--no-vertical-borders fd-table--pop-in">
         <tbody class="fd-table__body">
             <tr class="fd-table__row fd-table__row--main">
                 <td class="fd-table__cell fd-table__cell--checkbox">
@@ -2211,3 +2227,46 @@ Information about the table such as a title, summary, and/or keyboard navigation
     `
     }
 };
+
+export const noDataTable = () => `
+      <table class="fd-table">
+         <thead class="fd-table__header">
+            <tr class="fd-table__row">
+               <th class="fd-table__cell" scope="col">
+                    Header Column
+               </th>
+               <th class="fd-table__cell" scope="col">
+                    Header Column
+               </th>
+               <th class="fd-table__cell" scope="col">
+                    Header Column
+               </th>
+               <th class="fd-table__cell" scope="col">
+                    Header Column
+               </th>
+               <th class="fd-table__cell" scope="col">
+                    Header Column
+               </th>
+               <th class="fd-table__cell" scope="col">
+                    Header Column
+               </th>
+            </tr>
+         </thead>
+         <tbody class="fd-table__body">
+            <tr class="fd-table__row">
+                <td colspan="100%" class="fd-table__cell fd-table__cell--no-data">No Items Found!</td>
+            </tr>
+         </tbody>
+      </table>
+    </div>
+</div>
+`;
+
+noDataTable.storyName = 'Table without data';
+noDataTable.parameters = {
+    docs: {
+        storyDescription: `
+Table can indicate that there is no data to display.
+    `
+    }
+};