Skip to content

Commit

Permalink
[EUI] Add scrollLock workaround CSS to Kibana's body (#153227)
Browse files Browse the repository at this point in the history
## Summary

The `scrollLock` property on `EuiFocusTrap` "freezes" the width of the
of the body so that the removal/addition of the scrollbar when a full
screen focus trap opens (e.g. a modal, flyout, or other fullscreen mode)
doesn't cause the page width to jump/rerender.

It turns however, that this behavior (which sets a `margin-right` on the
`body` for the width of the scrollbar) does not work as expected in
Kibana due to its existing `width: 100%; min-width: 100%` CSS on its
`body`. As such, we need to temporarily work around this by setting
`padding-right` instead until
theKashey/react-focus-on#65 is fixed.

d59faae can be reverted if not desired in this PR.

### Checklist

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
cee-chen and kibanamachine authored Mar 20, 2023
1 parent a39089f commit b665651
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/core/public/styles/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,12 @@
.euiPageHeader--bottomBorder:not(.euiPageHeader--tabsAtBottom):not([class*='euiPageHeader--padding']) {
padding-bottom: $euiSizeL;
}

// Kibana's body ignores the `margin-right !important` set by react-remove-scroll-bar
// (used by EUI's focus trap component & prevents page width jumps on full-screen overlays)
// due to the 100% width/min-width CSS set by Kibana in other places. To work around this, we
// grab the `--removed-body-scroll-bar-size` var added by the library & manually set `padding`
// TODO: Use `gapMode` instead once https://github.com/theKashey/react-focus-on/issues/65 is fixed
.kbnBody {
padding-right: var(--removed-body-scroll-bar-size, 0);
}
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
{
size: 's',
'data-test-subj': 'customizePanel',
// @ts-ignore - TODO: Remove this once https://github.com/elastic/eui/pull/6645 lands in Kibana
focusTrapProps: { scrollLock: true },
}
);
overlayTracker?.openOverlay(handle);
Expand Down

0 comments on commit b665651

Please sign in to comment.