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] Fix over-eager visual cutoff on cell contents #7320

Merged
merged 2 commits into from
Oct 26, 2023
Merged

[EuiDataGrid] Fix over-eager visual cutoff on cell contents #7320

merged 2 commits into from
Oct 26, 2023

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Oct 26, 2023 •
edited
Loading

Summary

This PR will close elastic/kibana#169757 once it's merged into Kibana main.

Before (avatar in left column is cut off at the bottom) After

This was regressed in #7255, although interestingly enough, this behavior was already semi-broken prior to that PR, but only for row heights set to lineCount or a static number. You can see this in previous EUI releases when you change the grid density setting to lineCount: 1 (as opposed to the default/single height):

What happened in #7255 was at I grabbed the pre-existing inline styles being set for those row heights and refactored them to CSS shared by all heights:

eui/src/components/datagrid/utils/row_heights.ts

Lines 131 to 134 in 976e603

return {
height: '100%',
overflow: 'hidden',
};

Which then revealed that the overflow: hidden style was actually incorrect/problematic and shouldn't have been set in the first place. The parent euiDataGridRowCell div already has its own overflow: hidden, so we don't need to set one on the inside wrapper.

QA

General checklist

  • Browser QA
    • Checked in Chrome, Safari, Edge, and Firefox
      - [ ] Checked in both light and dark modes
      - [ ] Checked in mobile
      - [ ] Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA - N/A
  • Code quality checklist - N/A, CSS only change (dreaming of visual regression tests...)
  • 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
    - [ ] Updated the Figma library counterpart

@cee-chen
Remove overflow: hidden from content wrapper
410e8d9 
- the main parent cell div already has `overflow: hidden`, so this change lets content be visible beyond the cell padding but still cut off beyond the cell itself
@cee-chen
changelog
eb50241
@cee-chen cee-chen marked this pull request as ready for review October 26, 2023 17:42
@cee-chen cee-chen requested a review from a team as a code owner October 26, 2023 17:42
@cee-chen cee-chen mentioned this pull request Oct 26, 2023
Closed
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

JasonStoltz
JasonStoltz approved these changes Oct 26, 2023
View reviewed changes
Copy link
Member

@JasonStoltz JasonStoltz left a comment

Choose a reason for hiding this comment

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

LGTM

@cee-chen cee-chen merged commit 9f1ada5 into elastic:main Oct 26, 2023
2 checks passed
@cee-chen cee-chen deleted the datagrid/fix branch October 26, 2023 19:08
@cee-chen cee-chen mentioned this pull request Oct 30, 2023
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request Nov 3, 2023
@cee-chen
Upgrade EUI to v90.0.0 (#170179)
d079e95 
`v89.1.0`⏩`v90.0.0`

The majority of changes in this PR come from:

- **EuiContextMenu** being converted to Emotion
(elastic/eui#7312). If your usage of
`EuiContextMenu` was significantly affected, we recommend pulling down
this PR and QAing it locally.

- `defaultProps` being removed from some very widespread components,
particularly **EuiButton**, in anticipation of React's upcoming
deprecation.
(elastic/eui@b7dc9b4)
**NOTE**: This only affected Enzyme snapshots, and did not affect
production behavior.

[Commits](https://github.com/elastic/kibana/pull/170179/commits) have
been broken up by component changes as well as types of changes.

---

## [`90.0.0`](https://github.com/elastic/eui/tree/v90.0.0)

- Updated the `eventColor` prop on `EuiCommentEvent` to apply the color
to the entire comment header.
([#7288](elastic/eui#7288))
- Updated `EuiBasicTable` and `EuiInMemoryTable` to support a new
controlled selection API: `selection.selected`
([#7321](elastic/eui#7321))

**Bug fixes**

- Fixed controlled `EuiFieldNumbers` not correctly updating native
validity state ([#7291](elastic/eui#7291))
- Fixed `EuiListGroupItem` to pass `style` props to the wrapping `<li>`
element alongside `className` and `css`. All other props will be passed
to the underlying content.
([#7298](elastic/eui#7298))
- Fixed `EuiListGroupItem`'s non-transitioned transform on hover/focus
([#7298](elastic/eui#7298))
- Fixed `EuiDataGrid`s with `gridStyle.stripes` sometimes showing buggy
row striping after being sorted
([#7301](elastic/eui#7301))
- Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to not conflict with
`gridStyle.stripes` if dynamically updated
([#7301](elastic/eui#7301))
- Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to support multiple
space-separated classes
([#7301](elastic/eui#7301))
- Fixed `EuiInputPopover` not calling `onPanelResize` callback prop
([#7305](elastic/eui#7305))
- Fixed `EuiDualRange` incorrectly positioning highlights when rendered
with `showInput="inputWithPopover"`
([#7305](elastic/eui#7305))
- Fixed `EuiTabs` incorrectly wrapping text when it should instead
either scroll or truncate
([#7309](elastic/eui#7309))
- `EuiContextMenu` now renders text colors correctly when used within an
`EuiBottomBar` ([#7312](elastic/eui#7312))
- Fixed the width of `EuiSuperDatePicker`'s Absolute date picker
([#7313](elastic/eui#7313))
- Fixed `EuiDataGrid` cells visually cutting off overflowing content a
little too quickly ([#7320](elastic/eui#7320))

**Deprecations**

- Deprecated `EuiBasicTable` and `EuiInMemoryTable`'s ref `setSelection`
API. Use the new `selection.selected` API instead.
([#7321](elastic/eui#7321))

**Breaking changes**

- Removed `EuiPageTemplate_Deprecated`, `EuiPageSideBar_Deprecated`, and
`EuiPageContent*_Deprecated`
([#7265](elastic/eui#7265))
- Removed the `ghost` color option from `EuiButton`, `EuiButtonEmpty`,
and `EuiButtonIcon`. Use an `<EuiThemeProvider colorMode="dark">`
wrapper and `color="text"` instead.
([#7296](elastic/eui#7296))

**Dependency updates**

- Updated `refractor` to v3.6.0
([#7127](elastic/eui#7127))
- Updated `rehype-raw` to v5.1.0
([#7127](elastic/eui#7127))
- Updated `vfile` to v4.2.1
([#7127](elastic/eui#7127))

**Accessibility**

- `EuiContextMenu` now correctly respects reduced motion preferences
([#7312](elastic/eui#7312))
- `EuiAccordion`s no longer attempt to focus child content when the
accordion is externally opened via `forceState`, but will continue to
focus expanded content when users click the toggle button.
([#7314](elastic/eui#7314))

**CSS-in-JS conversions**

- Converted `EuiContextMenu`, `EuiContextMenuPanel`, and
`EuiContextMenuItem` to Emotion; Removed `$euiContextMenuWidth`
([#7312](elastic/eui#7312))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JasonStoltz JasonStoltz JasonStoltz approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The active/recovered badge is not shown correctly in the alert table in observability
4 participants
@cee-chen @kibanamachine @elasticmachine @JasonStoltz