Skip to content

Commit

Permalink
DRY out new EuiTableCellContent internal subcomponent & convert to …
Browse files Browse the repository at this point in the history 
…Emotion (#7641)
  • Loading branch information
@cee-chen
cee-chen authored Apr 3, 2024
1 parent 793b54c commit 7725261
Show file tree
Hide file tree
Showing 25 changed files with 422 additions and 373 deletions.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7641.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**DOM changes**

- `EuiTableRowCell`s with `textOnly` set to `false` will no longer attempt to apply the `.euiTableCellContent__text` className to child elements.
104 changes: 64 additions & 40 deletions src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiBasicTable actions custom item actions 1`] = `
<tr
class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-mobile"
>
<td
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-mobile-customActions"
>
<div
class="euiTableCellContent emotion-euiTableCellContent-wrapText-actions"
>
<div
class=""
>
<button
data-test-subj="customAction-1"
>
Custom action
</button>
</div>
</div>
</td>
</tr>
`;

exports[`EuiBasicTable renders (bare-bones) 1`] = `
<div
aria-label="aria-label"
Expand All @@ -22,11 +46,11 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
<div
class="euiTableCellContent emotion-euiTableCellContent-euiTableHeaderCell__content"
>
<span
class="euiTableCellContent__text"
class="eui-textTruncate"
title="Name; description"
>
Name
Expand All @@ -36,7 +60,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
>
description
</span>
</span>
</div>
</th>
</tr>
</thead>
Expand All @@ -55,7 +79,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
Name
</div>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -77,7 +101,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
Name
</div>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -99,7 +123,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
Name
</div>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
<span
class="euiTableCellContent__text"
Expand Down Expand Up @@ -164,11 +188,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
data-test-subj="tableHeaderSortButton"
type="button"
>
<span
class="euiTableCellContent"
<div
class="euiTableCellContent emotion-euiTableCellContent-euiTableHeaderCell__content"
>
<span
class="euiTableCellContent__text"
class="eui-textTruncate"
title="Name; your name"
>
Name
Expand All @@ -182,7 +206,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableSortIcon"
data-euiicon-type="sortUp"
/>
</span>
</div>
</button>
</th>
<th
Expand All @@ -191,11 +215,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent"
<div
class="euiTableCellContent emotion-euiTableCellContent-euiTableHeaderCell__content"
>
<span
class="euiTableCellContent__text"
class="eui-textTruncate"
title="ID; your id"
>
ID
Expand All @@ -205,19 +229,19 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
>
your id
</span>
</span>
</div>
</th>
<th
class="euiTableHeaderCell emotion-euiTableHeaderCell"
data-test-subj="tableHeaderCell_age_2"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent euiTableCellContent--alignRight"
<div
class="euiTableCellContent emotion-euiTableCellContent-right-euiTableHeaderCell__content"
>
<span
class="euiTableCellContent__text"
class="eui-textTruncate"
title="Age; your age"
>
Age
Expand All @@ -227,23 +251,23 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
>
your age
</span>
</span>
</div>
</th>
<th
class="euiTableHeaderCell emotion-euiTableHeaderCell"
role="columnheader"
scope="col"
>
<span
class="euiTableCellContent euiTableCellContent--alignRight"
<div
class="euiTableCellContent emotion-euiTableCellContent-right-euiTableHeaderCell__content"
>
<span
class="euiTableCellContent__text"
class="eui-textTruncate"
title="Actions"
>
Actions
</span>
</span>
</div>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -285,7 +309,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Name
</div>
<div
class="euiTableCellContent euiTableCellContent--overflowingContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
NAME1
</div>
Expand All @@ -299,7 +323,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
ID
</div>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -317,7 +341,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Age
</div>
<div
class="euiTableCellContent euiTableCellContent--alignRight"
class="euiTableCellContent emotion-euiTableCellContent-right-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -330,7 +354,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-desktop-actions"
>
<div
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
class="euiTableCellContent emotion-euiTableCellContent-right-wrapText-actions-desktop"
>
<span
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
Expand Down Expand Up @@ -406,7 +430,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Name
</div>
<div
class="euiTableCellContent euiTableCellContent--overflowingContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
NAME2
</div>
Expand All @@ -420,7 +444,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
ID
</div>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -438,7 +462,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Age
</div>
<div
class="euiTableCellContent euiTableCellContent--alignRight"
class="euiTableCellContent emotion-euiTableCellContent-right-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -451,7 +475,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-desktop-actions"
>
<div
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
class="euiTableCellContent emotion-euiTableCellContent-right-wrapText-actions-desktop"
>
<span
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
Expand Down Expand Up @@ -527,7 +551,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Name
</div>
<div
class="euiTableCellContent euiTableCellContent--overflowingContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
NAME3
</div>
Expand All @@ -541,7 +565,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
ID
</div>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -559,7 +583,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
Age
</div>
<div
class="euiTableCellContent euiTableCellContent--alignRight"
class="euiTableCellContent emotion-euiTableCellContent-right-wrapText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -572,7 +596,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-hasActions-middle-desktop-actions"
>
<div
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
class="euiTableCellContent emotion-euiTableCellContent-right-wrapText-actions-desktop"
>
<span
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
Expand Down Expand Up @@ -620,7 +644,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-truncateText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -631,7 +655,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-truncateText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -642,7 +666,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-truncateText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -658,7 +682,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-truncateText"
>
<span
class="euiTableCellContent__text"
Expand All @@ -669,7 +693,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
class="euiTableCellContent emotion-euiTableCellContent-truncateText"
>
<span
class="euiTableCellContent__text"
Expand Down
Loading

0 comments on commit 7725261

Please sign in to comment.