[EuiResizableButton] Add new prop to allow consumers to account for overlap with scrollbars #8021
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cee-chen
commented
Sep 12, 2024
| * This can occasionally occlude interactive elements like scrollbars. To prevent | ||
| * this overlap, use this prop to remove the overlap for the specified side. | ||
| */ | ||
| accountForScrollbars?: 'before' | 'after' | 'both'; |
Contributor
Author
There was a problem hiding this comment.
Very open to feedback on this prop name/API - I'm not 100% sold on it or anything but it was the best I could come up with 😅
Contributor
There was a problem hiding this comment.
Hmm, yeah it's kind of very specific but at the same time it might be not clear enough otherwise ...
Maybe accountForOverlap? 🤔
Contributor
Author
There was a problem hiding this comment.
I'm going to opt to merge this in as-is if that's okay! Overlap also feels a little vague to me, at least Scrollbars hints as to the purpose of the prop? 😅
Merged
9 tasks
Collaborator
💚 Build Succeeded
|
mgadewoll
approved these changes
Sep 16, 2024
Contributor
mgadewoll
left a comment
mgadewoll
left a comment
There was a problem hiding this comment.
LGTM 👍
I added a suggestion for the naming, which might be slightly less specific, but it's non-blocking.
| * This can occasionally occlude interactive elements like scrollbars. To prevent | ||
| * this overlap, use this prop to remove the overlap for the specified side. | ||
| */ | ||
| accountForScrollbars?: 'before' | 'after' | 'both'; |
Contributor
There was a problem hiding this comment.
Hmm, yeah it's kind of very specific but at the same time it might be not clear enough otherwise ...
Maybe accountForOverlap? 🤔
MichaelMarcialis
approved these changes
Sep 16, 2024
Contributor
MichaelMarcialis
left a comment
MichaelMarcialis
left a comment
There was a problem hiding this comment.
LGTM! I'm good with the prop name you have as well.
jbudz
pushed a commit
to elastic/kibana
that referenced
this pull request
Sep 30, 2024
`v95.11.0`⏩`v95.12.0-backport.0` > [!note] > A few fun highlights from this release: > - Content within `EuiDataGrid`, `EuiBasicTable`, and `EuiInMemoryTable`, when manually selected/highlighted by users, should now more cleanly copy and paste into various spreadsheet apps > - `EuiProvider` will now detect the user's system-level dark or light mode and default to that if no `colorMode` prop is passed manually _[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)_ --- ## [`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0) - Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content newlines/tabs when users copy and paste from their tabular data ([#8019](elastic/eui#8019)) - Updated `EuiResizableButton` with a new `accountForScrollbars` prop ([#8021](elastic/eui#8021)) - Updated `EuiProvider` to inherit from the user's OS/system light/dark mode setting if a `colorMode` prop has not been passed ([#8026](elastic/eui#8026)) **Bug fixes** - Fixed `EuiDatePicker`'s `onClear` button to not appear when the input is `disabled` ([#8020](elastic/eui#8020)) - Fixed several `EuiDataGrid` row height bugs: ([#8025](elastic/eui#8025)) - Fixed row heights not recalculating when `rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or `gridStyles.cellPadding` changed - Fixed incorrect height calculations for `rowHeightOptions.rowHeights` with `lineCount`s - Fixed control column content to align better with multi-line row heights, as well as custom line-heights ## [`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed `EuiProvider`'s system color mode detection causing errors during server-side rendering ([#8040](elastic/eui#8040)) - Fixed an `EuiDataGrid` rendering bug that was causing bouncing scrollbar issues ([#8041](elastic/eui#8041))
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Sep 30, 2024
`v95.11.0`⏩`v95.12.0-backport.0` > [!note] > A few fun highlights from this release: > - Content within `EuiDataGrid`, `EuiBasicTable`, and `EuiInMemoryTable`, when manually selected/highlighted by users, should now more cleanly copy and paste into various spreadsheet apps > - `EuiProvider` will now detect the user's system-level dark or light mode and default to that if no `colorMode` prop is passed manually _[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)_ --- ## [`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0) - Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content newlines/tabs when users copy and paste from their tabular data ([elastic#8019](elastic/eui#8019)) - Updated `EuiResizableButton` with a new `accountForScrollbars` prop ([elastic#8021](elastic/eui#8021)) - Updated `EuiProvider` to inherit from the user's OS/system light/dark mode setting if a `colorMode` prop has not been passed ([elastic#8026](elastic/eui#8026)) **Bug fixes** - Fixed `EuiDatePicker`'s `onClear` button to not appear when the input is `disabled` ([elastic#8020](elastic/eui#8020)) - Fixed several `EuiDataGrid` row height bugs: ([elastic#8025](elastic/eui#8025)) - Fixed row heights not recalculating when `rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or `gridStyles.cellPadding` changed - Fixed incorrect height calculations for `rowHeightOptions.rowHeights` with `lineCount`s - Fixed control column content to align better with multi-line row heights, as well as custom line-heights ## [`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed `EuiProvider`'s system color mode detection causing errors during server-side rendering ([elastic#8040](elastic/eui#8040)) - Fixed an `EuiDataGrid` rendering bug that was causing bouncing scrollbar issues ([elastic#8041](elastic/eui#8041)) (cherry picked from commit 8a89c85)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Follow up to #8010 (comment) and #7988
This PR adds the
accountForScrollbarsprop to EuiResizableButton, which allows consumers to conditionally remove the negative margins behavior on the button if it causes the button to block scrollbars.QA
General checklist
- [ ] Checked in both light and dark modes- [ ] Checked in mobileand screenreader modes@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examples- [ ] Added or updated jest and cypress tests- [ ] Updated visual regression tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)