Skip to content

Commit

Permalink
[Emotion] Convert EuiBasicTable (#6539)
Browse files Browse the repository at this point in the history
* [tech debt] convert `useEuiTheme` tests to RTL `renderHook`

- which is generally a nicer API than the one I yolo'd

* [tech debt] Add more missing unit tests for `useEuiTheme`

* [tech debt] write basic unit test for `withEuiTheme`

* Add new `RenderWithEuiTheme` render prop util

* Convert `tbody` loading styles to Emotion

- I opted not to create a top-level component for this due to the very limited styles being applied, and due to HOC/theme access shenanigans

* Fix error/empty states not rendering loading styles

- by only rendering one `<tbody>`, not multiple

* Write basic `loading` test
+ switch `render` to RTL

* [extra] Massive clean up of EuiBasicTable unit tests

- switch to RTL totally (shallow was not handling the new render prop well)
- DRY out various repeated props
- stop use snapshots for every single test - use specific assertions instead. For visual rendering for various prop combos, we should use Storybook
- leave snapshots in for two specific render tests - barebones & kitchen sink props

* Delete scss files

* Add `shouldRenderCustomStyles` test

* changelog

* Add affordance for reduced motion media query

- this matches how EuiProgress behaves

+ clean up animation shorthand

* Add CSS workaround/fix for visual Safari bug

- apparently `position: relative` on the parent and not on the `tbody` was a cross-browser fix :(
  • Loading branch information
cee-chen authored Jan 23, 2023
1 parent af90c05 commit be23158
Show file tree
Hide file tree
Showing 14 changed files with 1,275 additions and 4,922 deletions.
4,982 changes: 707 additions & 4,275 deletions src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
</div>
</div>
<table
class="euiTable euiTable--responsive"
class="euiTable css-0 euiTable--responsive"
id="__table_generated-id"
tabindex="-1"
>
Expand Down Expand Up @@ -55,7 +55,9 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
</th>
</tr>
</thead>
<tbody>
<tbody
class="css-0"
>
<tr
class="euiTableRow"
>
Expand Down Expand Up @@ -651,7 +653,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
</div>
</div>
<table
class="euiTable euiTable--responsive"
class="euiTable css-0 euiTable--responsive"
id="__table_generated-id"
tabindex="-1"
>
Expand Down Expand Up @@ -684,7 +686,9 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
</th>
</tr>
</thead>
<tbody>
<tbody
class="css-0"
>
<tr
class="euiTableRow"
>
Expand Down
41 changes: 0 additions & 41 deletions src/components/basic_table/_basic_table.scss

This file was deleted.

1 change: 0 additions & 1 deletion src/components/basic_table/_index.scss

This file was deleted.

52 changes: 51 additions & 1 deletion src/components/basic_table/basic_table.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,57 @@
* Side Public License, v 1.
*/

import { css } from '@emotion/react';
import { css, keyframes } from '@emotion/react';

import { logicalCSS, euiCantAnimate } from '../../global_styling';
import { UseEuiTheme } from '../../services';

const tableLoadingLine = keyframes`
from {
${logicalCSS('left', 0)}
${logicalCSS('width', 0)}
}
20% {
${logicalCSS('left', 0)}
${logicalCSS('width', '40%')}
}
80% {
${logicalCSS('left', '60%')}
${logicalCSS('width', '40%')}
}
100% {
${logicalCSS('left', '100%')}
${logicalCSS('width', 0)}
}
`;

export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css`
position: relative;
overflow: hidden;
&::before {
position: absolute;
content: '';
${logicalCSS('width', '100%')}
${logicalCSS('height', euiTheme.border.width.thick)}
background-color: ${euiTheme.colors.primary};
animation: ${tableLoadingLine} 1s linear infinite;
${euiCantAnimate} {
animation-duration: 2s;
}
}
`;

// Fix to make the loading indicator position correctly in Safari
// For whatever annoying reason, Safari doesn't respect `position: relative;`
// on `tbody` without `position: relative` on the parent `table`
export const safariLoadingWorkaround = () => css`
position: relative;
`;

// Unsets the extra height caused by tooltip/popover wrappers around table action buttons
// Without this, the row height jumps whenever actions are disabled
Expand Down
Loading

0 comments on commit be23158

Please sign in to comment.