Skip to content

Commit

Permalink
reverse no-wrap [ci visual]
Browse files Browse the repository at this point in the history
  • Loading branch information
@JKMarkowski
JKMarkowski committed Mar 12, 2021
1 parent d085462 commit 7c6bfa0
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 20 deletions.
7 changes: 3 additions & 4 deletions src/table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,12 @@ $block: #{$fd-namespace}-table;
}

&__text {
word-break: break-all;
white-space: nowrap;
word-break: break-word;;
overflow: hidden;
text-overflow: ellipsis;

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

Expand Down
17 changes: 9 additions & 8 deletions stories/table/__snapshots__/table.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7393,16 +7393,16 @@ exports[`Storyshots Components/Table Primary 1`] = `


<div
class="fd-table__text"
class="fd-table__text fd-table__text--no-wrap"
style="max-width: 250px"
>

Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, 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
Very long Text Not Wrapped, limited by max-width

</div>

Expand Down Expand Up @@ -7456,13 +7456,14 @@ exports[`Storyshots Components/Table Primary 1`] = `


<div
class="fd-table__text fd-table__text--wrap"
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>

Expand Down
17 changes: 9 additions & 8 deletions stories/table/table.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@ export const primary = () => `
<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">
<div class="fd-table__text" style="max-width: 250px">
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
Very long Text, limited by max-width
<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>
Expand All @@ -104,7 +104,8 @@ export const primary = () => `
<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">
<div class="fd-table__text fd-table__text--wrap" style="max-width: 250px">
<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
Expand Down

0 comments on commit 7c6bfa0

Please sign in to comment.