Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Mar 15, 2021
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
27d97d3
feat: Add no-data, remove borders from responsive [ci visual]
JKMarkowski Mar 10, 2021
48a428e
bring table text [ci visual]
JKMarkowski Mar 12, 2021
d085462
remove reset [ci visual]
JKMarkowski Mar 12, 2021
cbf53f7
reverse no-wrap [ci visual]
JKMarkowski Mar 12, 2021
e4a7075
add truncation mixin [ci visual]
JKMarkowski Mar 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,16 @@ $block: #{$fd-namespace}-table;
}
}

&__text {
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
Comment on lines +130 to +132
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could use the mixin here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@itmilos why did you resolve this comment?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of the Definitions of Done is Mixins are used for repeatable code (fd-rtl, fd-ellipsis, fd-flex, fd-selected, fd-focus, ect.) and there's a mixin fd-ellipsis that has these 3 rules


&--no-wrap {
white-space: nowrap;
}
}

&__cell {
text-align: left;
text-shadow: var(--sapContent_TextShadow);
Expand All @@ -148,6 +158,10 @@ $block: #{$fd-namespace}-table;
color: var(--sapInformationColor);
}

&--no-data {
text-align: center;
}

&--checkbox {
width: $fd-table-cell-fit-content-width;
vertical-align: baseline;
Expand Down Expand Up @@ -491,6 +505,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;
Expand Down
49 changes: 42 additions & 7 deletions stories/table/__snapshots__/table.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>


Expand Down Expand Up @@ -6351,7 +6351,7 @@ exports[`Storyshots Components/Table Navigation from table rows 1`] = `


<table
class="fd-table"
class="fd-table "
>


Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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"
>


Expand Down Expand Up @@ -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"
>


Expand Down Expand Up @@ -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"
>


Expand Down Expand Up @@ -9204,3 +9234,8 @@ exports[`Storyshots Components/Table Semantic 1`] = `

</section>
`;

exports[`Storyshots Components/Table Table without data 1`] = `


`;
75 changes: 67 additions & 8 deletions stories/table/table.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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.
`
}
};
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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.
`
}
};