[EuiResizableButton] Add new prop to allow consumers to account for overlap with scrollbars #8021

cee-chen · 2024-09-12T22:54:30Z

Summary

This PR adds the accountForScrollbars prop to EuiResizableButton, which allows consumers to conditionally remove the negative margins behavior on the button if it causes the button to block scrollbars.

Before	After

QA

Go to https://eui.elastic.co/pr_8021/#/layout/resizable-container
Confirm all demos on the page with scrollbars do not have their scrollbars click-blocked by the resizable button
Go to https://eui.elastic.co/pr_8021/storybook/?path=/story/layout-euiresizablecontainer-subcomponents-euiresizablebutton--playground
Confirm controls + permutations behave as expected

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~~
Docs site QA
- Updated documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
  ~~- [ ] Checked Code Sandbox works for any docs examples~~
Code quality checklist - fairly straightforward style prop, so I skipped writing tests
- [ ] Added or updated jest and cypress tests
- [ ] Updated 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 - N/A

cee-chen · 2024-09-12T23:03:39Z

packages/eui/src/components/resizable_container/resizable_button.tsx

+     * 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';


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 😅

Hmm, yeah it's kind of very specific but at the same time it might be not clear enough otherwise ...
Maybe accountForOverlap? 🤔

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? 😅

elasticmachine · 2024-09-12T23:29:35Z

💚 Build Succeeded

Buildkite Build
Commit: 2b3d5e9

mgadewoll

LGTM 👍
I added a suggestion for the naming, which might be slightly less specific, but it's non-blocking.

mgadewoll · 2024-09-16T09:30:37Z

packages/eui/src/components/resizable_container/resizable_button.tsx

+     * 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';


Hmm, yeah it's kind of very specific but at the same time it might be not clear enough otherwise ...
Maybe accountForOverlap? 🤔

MichaelMarcialis

LGTM! I'm good with the prop name you have as well.

`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))

`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)

`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))

cee-chen added 4 commits September 12, 2024 15:43

Add new accountForScrollbars prop

9daaa82

Update snapshots + stories

74d7cee

Update all src-docs examples with scrolling text

772c0aa

changelog

2b3d5e9

cee-chen commented Sep 12, 2024

View reviewed changes

cee-chen mentioned this pull request Sep 12, 2024

[EuiFlyoutResizable] Do not extend resize click area past flyout for flyouts with no overlays #8010

Merged

9 tasks

cee-chen marked this pull request as ready for review September 13, 2024 00:08

cee-chen requested a review from a team as a code owner September 13, 2024 00:08

cee-chen requested a review from MichaelMarcialis September 13, 2024 15:41

mgadewoll approved these changes Sep 16, 2024

View reviewed changes

MichaelMarcialis approved these changes Sep 16, 2024

View reviewed changes

cee-chen merged commit 301a9cd into elastic:main Sep 17, 2024
6 checks passed

cee-chen deleted the resizable-button branch September 17, 2024 00:43

cee-chen mentioned this pull request Sep 24, 2024

Upgrade EUI to v95.12.0 elastic/kibana#193805

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiResizableButton] Add new prop to allow consumers to account for overlap with scrollbars #8021

[EuiResizableButton] Add new prop to allow consumers to account for overlap with scrollbars #8021

cee-chen commented Sep 12, 2024 •

edited

Loading

cee-chen Sep 12, 2024

mgadewoll Sep 16, 2024

cee-chen Sep 17, 2024

elasticmachine commented Sep 12, 2024

mgadewoll left a comment

mgadewoll Sep 16, 2024

MichaelMarcialis left a comment

[EuiResizableButton] Add new prop to allow consumers to account for overlap with scrollbars #8021

[EuiResizableButton] Add new prop to allow consumers to account for overlap with scrollbars #8021

Conversation

cee-chen commented Sep 12, 2024 • edited Loading

Summary

QA

General checklist

cee-chen Sep 12, 2024

Choose a reason for hiding this comment

mgadewoll Sep 16, 2024

Choose a reason for hiding this comment

cee-chen Sep 17, 2024

Choose a reason for hiding this comment

elasticmachine commented Sep 12, 2024

💚 Build Succeeded

mgadewoll left a comment

Choose a reason for hiding this comment

mgadewoll Sep 16, 2024

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

cee-chen commented Sep 12, 2024 •

edited

Loading