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.

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

Jump to bottom

[EuiDataGrid] Add rowHeightSwitcher logic + API change #5372

Merged
merged 31 commits into from
Nov 24, 2021
Merged

[EuiDataGrid] Add rowHeightSwitcher logic + API change #5372

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
916c1c7
Rename styleSelector to displaySelector + update types & docs
cee-chen Nov 9, 2021
79c878d
Refactor out nested object helper
cee-chen Nov 9, 2021
58fe94f
Update displaySelector with conditional density/row height options
cee-chen Nov 9, 2021
37aecd6
Add rowHeightsOptions controls to popover
cee-chen Nov 10, 2021
129b2bb
Add conditional lineCount row and logic
cee-chen Nov 10, 2021
742051d
Fix styles not applying correctly for rowHeightsOptions that have und…
cee-chen Nov 11, 2021
be59b08
Fix multiline content not top-aligning correctly when in single/undef…
cee-chen Nov 10, 2021
75e933a
Fix single/undefined row heights to account for passed lineHeight API…
cee-chen Nov 11, 2021
39aa176
Add changelog entry
cee-chen Nov 11, 2021
8580dc8
[PR feedback] Increase default lineCount to 2
cee-chen Nov 16, 2021
0a4eae8
Merge branch 'feat/datagrid/toolbar-reorg-and-row-height-switcher' in…
cee-chen Nov 17, 2021
7e34537
Fix changelog
cee-chen Nov 17, 2021
d31a66d
Fix control column appearance by switching them back to vertical cent…
cee-chen Nov 17, 2021
670dc2c
Tweak various height alignments on compressed grid settings
cee-chen Nov 17, 2021
c3f237d
Fix expand action button background color mismatch for auto/lineCount…
cee-chen Nov 17, 2021
4dac79e
PR feedback: convert cell actions CSS selectors to mixin
cee-chen Nov 18, 2021
cb51f97
Fix sasslint issues
cee-chen Nov 18, 2021
b70aa3d
PR feedback: Change line count number to EuiRange
cee-chen Nov 18, 2021
52d70e3
PR feedback - remove height tweaks for compressed auto fit
cee-chen Nov 18, 2021
3891366
[PR feedback] Remove `showStyleSelector`
cee-chen Nov 18, 2021
cab4a06
Remove unused unit tests
cee-chen Nov 18, 2021
571be25
[PR feedback] Intelligently disable toolbar control if all nested opt…
cee-chen Nov 18, 2021
9348b1d
Merge branch 'feat/datagrid/toolbar-reorg-and-row-height-switcher' in…
cee-chen Nov 19, 2021
3dd2d3f
Do not fall back to undefined/single for static heights
cee-chen Nov 23, 2021
0ab5aac
PR changelog feedback
constancecchen Nov 23, 2021
f226ad7
Update grid density to also intelligently detect initial state
cee-chen Nov 23, 2021
be0db10
Merge branch 'feat/datagrid/toolbar-reorg-and-row-height-switcher' in…
cee-chen Nov 23, 2021
fc9f65c
[PR feedback] Improve typing to avoid any usage
cee-chen Nov 24, 2021
4250a73
[PR feedback] Document recommendation for disabling row height switch…
cee-chen Nov 24, 2021
fc4105c
[Pr feedback] Simplify getNestedObjectOptions
cee-chen Nov 24, 2021
0b9ca21
Add workaround for failing Cypress tests
cee-chen Nov 24, 2021
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
7 changes: 2 additions & 5 deletions src/components/datagrid/_data_grid_data_row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
> * {
max-width: 100%;
width: 100%;
height: 100%;
}

&.euiDataGridRowCell--firstColumn {
Expand Down Expand Up @@ -139,7 +140,7 @@
.euiDataGridRowCell__expandFlex {
position: relative; // for positioning expand button
display: flex;
align-items: center;
align-items: baseline;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this fix (be59b08), cell contents that are multiline due to <br>s/<p>s/other non-text-wrapping means would not correctly be aligned on 'Single'/undefined row heights:

Before (center-aligned)

After (top/base-aligned)

Note that this actually already an issue on production, this PR simply makes it more obvious because the row height switcher easily allows users to switch to single/undefined row heights on multi-line content, whereas previously a consumer would likely set a static row height or lineCount.

Also ignore the incorrect line height in this screenshot, this is an issue that gets fixed in the next commit.

height: 100%;
}

Expand All @@ -152,10 +153,6 @@
height: 100%;
}

.euiDataGridRowCell__alignBaseLine {
align-items: baseline;
}

.euiDataGridRowCell__expandButton {
display: flex;
flex-grow: 0;
Expand Down
4 changes: 1 addition & 3 deletions src/components/datagrid/body/data_grid_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,9 +483,7 @@ export class EuiDataGridCell extends Component<
isDefinedHeight,
};

const anchorClass = classNames('euiDataGridRowCell__expandFlex', {
euiDataGridRowCell__alignBaseLine: isDefinedHeight,
});
const anchorClass = 'euiDataGridRowCell__expandFlex';
const expandClass = isDefinedHeight
? 'euiDataGridRowCell__contentByHeight'
: 'euiDataGridRowCell__expandContent';
Expand Down