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

fix(datagrid): remove container background #8220

Conversation

weronikaolejniczak
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak commented Dec 11, 2024

Summary

This PR removes the background from the EuiDataGrid content container.

Before After
Screenshot 2024-12-11 at 09 35 11 Screenshot 2024-12-11 at 09 34 49

Note

Rows are colored separately so changing the container background-color to transparent (initial) doesn't affect them.

closes #8136

QA

Testing path

  1. Run Storybook.
  2. Add a story for EuiDataGrid with the code from the reproduction sandbox (EuiPanel wrapping EuiDataGrid).
  3. Verify that the space underneath the EuiDataGrid is transparent.

Additionally:

  • Check zebra striping.
  • Check row highlighting.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • 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)

@weronikaolejniczak weronikaolejniczak force-pushed the fix/8136-data-grid-background branch 2 times, most recently from bcb5a04 to d18f803 Compare December 11, 2024 08:21
@weronikaolejniczak weronikaolejniczak force-pushed the fix/8136-data-grid-background branch from d18f803 to 177c22d Compare December 11, 2024 08:23
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review December 11, 2024 08:38
@weronikaolejniczak weronikaolejniczak requested a review from a team as a code owner December 11, 2024 08:38
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.

🚢 🐈‍⬛ LGTM 👍

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@weronikaolejniczak weronikaolejniczak merged commit 351bc8f into elastic:main Dec 12, 2024
5 checks passed
mgadewoll added a commit to elastic/kibana that referenced this pull request Dec 19, 2024
`v98.1.0-borealis.0`⏩`v98.2.1-borealis.2`

_[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)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([#8247](elastic/eui#8247))
- [Visual Refresh] Fix transparent color variable definitions
([8249](elastic/eui#8249))
- [Visual Refresh] Update EuiToken colors
([8250](elastic/eui#8250))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make data grid's container gray background transparent
4 participants