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] Add new beta rowHeightsOptions.autoBelowLineCount feature flag #8096

Merged
merged 9 commits into from
Oct 25, 2024

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Oct 23, 2024

Summary

closes #7835

As always, I recommend code reviewing by commit.

Warning

This is a beta feature added for Discover testing, and is and may contain performance issues or other bugs (see discussion in #7835 and various bug reports around auto height grids). This beta status can be removed if Discover is able to use this feature extensively in production without major user issues for an extended period of time.

Before After

QA

  • Go to https://eui.elastic.co/pr_8096/storybook/?path=/story/tabular-content-euidatagrid-rowheightsoptions-prop--auto-below-line-count
  • Open the display settings popover in the datagrid toolbar
  • Confirm the Lines per row control shows "Max" instead of "Static"
  • Confirm that the single sentence rows render at a single line/row height, and the longer sentences cap out at the line count specified (increase and decrease this number to test)
  • Confirm that switching to Auto height causes the full lorem ipsum text to be displayed
  • Toggle the autoBelowLineCount flag in the Storybook controls to compare this behavior, and confirm the false behavior acts as before/production

General checklist

  • Browser QA
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
      - [ ] Checked in both light and dark modes
      - [ ] Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
    • [ ] Added documentation Skipping documentation for now while feature is in beta
    • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
      - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist - N/A

- pass entire rowHeightsOptions obj instead of a flag, easier this way
- I removed grid styles in a previous PR but missed this cleanup

- not totally sure why typescript is only just catching this now, fun times
… passed

- `recalculateAutoHeight`/`isAutoHeight` runs instead
- setting this via className for increased consumer specificity

- requires passing entire `rowHeightsOptions` instead of just the singular `rowHeight`
- use custom faker data to highlight the UX issue being solved (very short rows + very long rows)
@cee-chen cee-chen marked this pull request as ready for review October 23, 2024 20:50
@cee-chen cee-chen requested a review from a team as a code owner October 23, 2024 20:50
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ Works as expected and the code looks clean to me, nice update!

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

elasticmachine commented Oct 25, 2024

💚 Build Succeeded

History

@cee-chen cee-chen enabled auto-merge (squash) October 25, 2024 18:37
@cee-chen cee-chen merged commit 040bf9a into elastic:main Oct 25, 2024
5 checks passed
@cee-chen cee-chen deleted the datagrid/auto-below-line-count branch October 25, 2024 19:02
cee-chen added a commit to elastic/kibana that referenced this pull request Oct 31, 2024
`v97.2.0`⏩`v97.3.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v97.3.0`](https://github.com/elastic/eui/releases/v97.3.0)

- `EuiDataGrid` now supports a new
`toolbarVisibility.showDisplaySelector.customRender` function that
allows completely customizing the rendering of the display selector
popover ([#8080](elastic/eui#8080))
- `EuiDataGrid`'s row height/lines per row setting has been streamlined
in both UI and UX ([#8080](elastic/eui#8080))
- `EuiDataGrid` now accepts consumer-passed display setting updates even
after users have changed their display preferences via UI
([#8080](elastic/eui#8080))
- Updated `EuiDataGrid` to vertically center all
`toolbarVisibility.additionalControls` nodes
([#8085](elastic/eui#8085))
- Updated `EuiDataGrid` with a beta
`rowHeightsOptions.autoBelowLineCount` feature flag
([#8096](elastic/eui#8096))
- Updated `EuiContextMenuPanel` to allow disabling initial focus via
`initialFocusedItemIndex={-1}`
([#8101](elastic/eui#8101))

**Bug fixes**

- Fixed `EuiComment`'s typing to correctly reflect all accepted props
([#8089](elastic/eui#8089))
- Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s
missing input borders
([#8100](elastic/eui#8100))
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 31, 2024
`v97.2.0`⏩`v97.3.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v97.3.0`](https://github.com/elastic/eui/releases/v97.3.0)

- `EuiDataGrid` now supports a new
`toolbarVisibility.showDisplaySelector.customRender` function that
allows completely customizing the rendering of the display selector
popover ([elastic#8080](elastic/eui#8080))
- `EuiDataGrid`'s row height/lines per row setting has been streamlined
in both UI and UX ([elastic#8080](elastic/eui#8080))
- `EuiDataGrid` now accepts consumer-passed display setting updates even
after users have changed their display preferences via UI
([elastic#8080](elastic/eui#8080))
- Updated `EuiDataGrid` to vertically center all
`toolbarVisibility.additionalControls` nodes
([elastic#8085](elastic/eui#8085))
- Updated `EuiDataGrid` with a beta
`rowHeightsOptions.autoBelowLineCount` feature flag
([elastic#8096](elastic/eui#8096))
- Updated `EuiContextMenuPanel` to allow disabling initial focus via
`initialFocusedItemIndex={-1}`
([elastic#8101](elastic/eui#8101))

**Bug fixes**

- Fixed `EuiComment`'s typing to correctly reflect all accepted props
([elastic#8089](elastic/eui#8089))
- Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s
missing input borders
([elastic#8100](elastic/eui#8100))

(cherry picked from commit 4e7d43a)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[DataGrid] Enable Auto Fit behavior when Cell row height - Custom is selected
4 participants