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.

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

[EuiDataGrid] Cell actions redesign #7343

Merged
merged 22 commits into from
Nov 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
785dd57
[setup] Remove extra `__contentWrapper` DOM node and move padding/fon…
cee-chen Nov 5, 2023
f566d54
Fix cell height CSS to account for removed wrapper
cee-chen Nov 5, 2023
903d4fb
Update auto row heights to no longer account for padding
cee-chen Nov 8, 2023
cb66d42
Absolutely position and color cell actions based on new designs
cee-chen Nov 5, 2023
9e32d30
Tweak focus outline to account for cell actions position
cee-chen Nov 5, 2023
70d2683
Switch previous cell animation to a pop up one
cee-chen Nov 5, 2023
9bce7a8
Improve cell action hover UI
cee-chen Nov 5, 2023
137f621
Fix cell actions displaying above cell headers (all except first row)
cee-chen Nov 5, 2023
7c664d6
Align the cell expansion popover to the cell actions instead of to th…
cee-chen Nov 5, 2023
2443a79
Add logic to dynamically make the cell popover follow the text alignment
cee-chen Nov 5, 2023
3f49668
Fix EuiPopovers not removing arrow buffer if arrow is being hidden
cee-chen Nov 5, 2023
a1238d5
Allow cell popovers to expand to larger cell widths
cee-chen Nov 5, 2023
006e5a2
Fix missing cell popover opacity transition
cee-chen Nov 5, 2023
a0f8685
[cleanup] Remove more now-unnecessary height-based CSS/logic
cee-chen Nov 5, 2023
96f765d
Update all downstream datagrid snapshots
cee-chen Nov 15, 2023
5774dba
Fix misc flaky Cypress failures
cee-chen Nov 15, 2023
d654516
[PR feedback] Add Inter font stylesheet to Cypress index.html instead…
cee-chen Nov 16, 2023
62da584
[PR feedback] method name
cee-chen Nov 16, 2023
375d5fd
[Design feedback] Re-add animation delay, shade hover actions darker
cee-chen Nov 16, 2023
d3992f5
[Design feedback] Increase hover delay
cee-chen Nov 20, 2023
b044581
[Design feedback] Workaround for border-radius discrepancy when cell …
cee-chen Nov 20, 2023
268fd17
[cleanup] DRY out cell outlien color to a CSS variable
cee-chen Nov 20, 2023
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
6 changes: 6 additions & 0 deletions changelogs/upcoming/7343.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
- Updated `EuiDataGrid` cell actions to display above cells instead of within them, to avoid content clipping issues
- Updated `EuiDataGrid` cell expansion popovers to sit on top of cells instead of below/next to them

**Bug fixes**

- Fixed incorrect `EuiPopover` positioning calculations when `hasArrow` was set to false
1 change: 1 addition & 0 deletions cypress/support/component-index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="css-styles">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
<title>Components App</title>
</head>

Expand Down
13 changes: 0 additions & 13 deletions src/components/combo_box/combo_box.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,6 @@ import {
type EuiComboBoxOptionOption,
} from './index';

// CI doesn't have access to the Inter font, so we need to manually include it
// for truncation font calculations to work correctly
before(() => {
const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute(
'href',
'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'
);
document.head.appendChild(linkElem);
cy.wait(1000); // Wait a second to give the font time to load/swap in
});

describe('EuiComboBox', () => {
describe('focus management', () => {
it('keeps focus on the input box when clicking a disabled item', () => {
Expand Down
Loading