Skip to content

Convert cell styles to Emotion (row cells, header/footer cells, & cell checkboxes) #7631

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

Merged
cee-chen merged 15 commits into from
Mar 29, 2024
Merged

Convert cell styles to Emotion (row cells, header/footer cells, & cell checkboxes) #7631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
70fb721
[EuiTableRowCell] Set up Emotion styles + move some "row" styles that…
cee-chen Mar 27, 2024
1065b0b
[EuiTableRowCell] Fix where `className` is applied to ⚠️
cee-chen Mar 27, 2024
2f6a1a4
Convert custom actions mobile CSS to Emotion
cee-chen Mar 28, 2024
25e1170
[misc][EuiBasicTable] Remove unnecessary const definition
cee-chen Mar 28, 2024
2c8a544
Convert enlarge mobile CSS
cee-chen Mar 27, 2024
e74fa41
Convert valign styles
cee-chen Mar 27, 2024
31e2f5a
Convert `.euiTableRowCell__mobileHeader` CSS
cee-chen Mar 28, 2024
b70aca7
Convert cell checkbox CSS to Emotion
cee-chen Mar 28, 2024
2cbe0c8
[EuiTableHeaderCell][EuiTableFooterCell] Convert + clean up styles
cee-chen Mar 28, 2024
747ad68
[EuiTableHeaderCell] Convert + clean up sort button styles
cee-chen Mar 28, 2024
069ddeb
Clean up/delete mixins Sass files
cee-chen Mar 28, 2024
82f90fd
Update downstream snapshots
cee-chen Mar 28, 2024
8ffe0ba
changelogs
cee-chen Mar 28, 2024
d489157
Jason saving my butt
cee-chen Mar 29, 2024
413041a
[PR feedback] Add test for custom `render`ed actions
cee-chen Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelogs/upcoming/7631.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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