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

fix: components in active table rows #2186

Merged
merged 2 commits into from
Mar 6, 2021
Merged

fix: components in active table rows #2186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
007eca9
fix: fix elements in active table rows [ci visual]
droshev Mar 5, 2021
958d914
chore: trigger another chromatic build [ci visual]
droshev Mar 6, 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
6 changes: 6 additions & 0 deletions src/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
89 changes: 83 additions & 6 deletions stories/table/__snapshots__/table.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>


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


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


Expand Down
31 changes: 24 additions & 7 deletions stories/table/table.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,10 @@ In these cases, use the **Tree** instead.
'multi-input',
'checkbox',
'select',
'menu'
'menu',
'text',
'object-number',
'object-marker'
]
}
};
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down