Skip to content

Commit

Permalink
Convert cell styles to Emotion (row cells, header/footer cells, & cel…
Browse files Browse the repository at this point in the history
…l checkboxes) (#7631)

Co-authored-by: Jason Stoltzfus <[email protected]>
  • Loading branch information
cee-chen and JasonStoltz authored Mar 29, 2024
1 parent cf1a049 commit 968ca3d
Show file tree
Hide file tree
Showing 27 changed files with 445 additions and 319 deletions.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7631.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**DOM changes**

- `EuiTableRowCell` now applies passed `className`s to the parent `<td>` element, instead of to the inner cell content `<div>`.
2 changes: 2 additions & 0 deletions changelogs/upcoming/TBD.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@
- `$euiTableFocusClickableColor`
- Removed the following `EuiTable` Sass mixins:
- `euiTableActionsBackgroundMobile`
- `euiTableCellCheckbox`
- `euiTableCell`
90 changes: 45 additions & 45 deletions src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
<thead>
<tr>
<th
class="euiTableHeaderCell"
class="euiTableHeaderCell emotion-euiTableHeaderCell"
data-test-subj="tableHeaderCell_name_0"
role="columnheader"
scope="col"
Expand Down Expand Up @@ -47,10 +47,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
class="euiTableRow emotion-euiTableRow-desktop"
>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Name
</div>
Expand All @@ -69,10 +69,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
class="euiTableRow emotion-euiTableRow-desktop"
>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Name
</div>
Expand All @@ -91,10 +91,10 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = `
class="euiTableRow emotion-euiTableRow-desktop"
>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Name
</div>
Expand Down Expand Up @@ -129,7 +129,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
<thead>
<tr>
<th
class="euiTableHeaderCellCheckbox"
class="euiTableHeaderCellCheckbox emotion-euiTableHeaderCellCheckbox"
scope="col"
>
<div
Expand All @@ -154,13 +154,13 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
<th
aria-live="polite"
aria-sort="ascending"
class="euiTableHeaderCell"
class="euiTableHeaderCell emotion-euiTableHeaderCell"
data-test-subj="tableHeaderCell_name_0"
role="columnheader"
scope="col"
>
<button
class="euiTableHeaderButton euiTableHeaderButton-isSorted"
class="euiTableHeaderButton euiTableHeaderButton-isSorted emotion-euiTableHeaderCell__button"
data-test-subj="tableHeaderSortButton"
type="button"
>
Expand All @@ -186,7 +186,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</button>
</th>
<th
class="euiTableHeaderCell"
class="euiTableHeaderCell emotion-euiTableHeaderCell"
data-test-subj="tableHeaderCell_id_1"
role="columnheader"
scope="col"
Expand All @@ -208,7 +208,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</span>
</th>
<th
class="euiTableHeaderCell"
class="euiTableHeaderCell emotion-euiTableHeaderCell"
data-test-subj="tableHeaderCell_age_2"
role="columnheader"
scope="col"
Expand All @@ -230,7 +230,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</span>
</th>
<th
class="euiTableHeaderCell"
class="euiTableHeaderCell emotion-euiTableHeaderCell"
role="columnheader"
scope="col"
>
Expand All @@ -254,7 +254,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
>
<td
class="euiTableRowCellCheckbox"
class="euiTableRowCellCheckbox emotion-euiTableRowCellCheckbox-desktop"
>
<div
class="euiTableCellContent"
Expand All @@ -277,10 +277,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Name
</div>
Expand All @@ -291,10 +291,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
ID
</div>
Expand All @@ -309,10 +309,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Age
</div>
Expand All @@ -327,10 +327,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
>
<div
class="euiTableCellContent emotion-euiBasicTableActionsWrapper euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
>
<span
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
Expand Down Expand Up @@ -375,7 +375,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
>
<td
class="euiTableRowCellCheckbox"
class="euiTableRowCellCheckbox emotion-euiTableRowCellCheckbox-desktop"
>
<div
class="euiTableCellContent"
Expand All @@ -398,10 +398,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Name
</div>
Expand All @@ -412,10 +412,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
ID
</div>
Expand All @@ -430,10 +430,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Age
</div>
Expand All @@ -448,10 +448,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
>
<div
class="euiTableCellContent emotion-euiBasicTableActionsWrapper euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
>
<span
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
Expand Down Expand Up @@ -496,7 +496,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
class="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions emotion-euiTableRow-desktop"
>
<td
class="euiTableRowCellCheckbox"
class="euiTableRowCellCheckbox emotion-euiTableRowCellCheckbox-desktop"
>
<div
class="euiTableCellContent"
Expand All @@ -519,10 +519,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Name
</div>
Expand All @@ -533,10 +533,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
ID
</div>
Expand All @@ -551,10 +551,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--middle"
class="euiTableRowCell emotion-euiTableRowCell-middle-desktop"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop emotion-euiTableRowCell__mobileHeader"
>
Age
</div>
Expand All @@ -569,10 +569,10 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
class="euiTableRowCell euiTableRowCell--hasActions emotion-euiTableRowCell-middle-desktop-euiBasicTableActionsWrapper"
>
<div
class="euiTableCellContent emotion-euiBasicTableActionsWrapper euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
>
<span
class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
Expand Down Expand Up @@ -617,7 +617,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
<tfoot>
<tr>
<td
class="euiTableFooterCell"
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
Expand All @@ -628,7 +628,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableFooterCell"
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
Expand All @@ -639,7 +639,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableFooterCell"
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
Expand All @@ -655,7 +655,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableFooterCell"
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
Expand All @@ -666,7 +666,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
</div>
</td>
<td
class="euiTableFooterCell"
class="euiTableFooterCell emotion-euiTableFooterCell"
>
<div
class="euiTableCellContent"
Expand Down
Loading

0 comments on commit 968ca3d

Please sign in to comment.