[EuiOverlayMask] Restore missing above/below header information #6289
Conversation
This file contains 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
breehall
approved these changes
Oct 4, 2022
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6289/ |
cee-chen
commented
Oct 4, 2022
| @@ -91,7 +91,8 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({ | |||
| useEffect(() => { | |||
| if (!overlayMaskNode) return; | |||
| overlayMaskNode.className = classNames('euiOverlayMask', className); | |||
| }, [overlayMaskNode, className]); | |||
| overlayMaskNode.dataset.relativeToHeader = headerZindexLocation; | |||
| }, [overlayMaskNode, className, headerZindexLocation]); | |||
|
|
|||
| return ( | |||
| <EuiPortal portalRef={combinedMaskRef}> | |||
There was a problem hiding this comment.
Random aside while I'm here: I'm really not a huge fan of how <Global> was used here to set .euiOverlayMask styles. This is exactly the kind of use case we should be using @emotion/css for instead. I've updated my emotion/CSS PR to convert this accordingly: 04a81c6
There was a problem hiding this comment.
Thanks for the extra conversion! Today I re-Learned about the cx function
chandlerprall
approved these changes
Oct 4, 2022
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Oct 4, 2022
- this data attr isn't technically in yet but will be once elastic/eui#6289 merges - at the very least this isn't breaking any more than it currently already is!
|
@chandlerprall let me know if you want to do the patch backport for Kibana! If not, I can grab it tomorrow |
1 task
mistic
pushed a commit
to elastic/kibana
that referenced
this pull request
Nov 7, 2022
* Updated EUI to version 67.1.2. Updated instaces of ButtonColor from EUI to EuiButtonColor. * Updated to EuiCard instances that utilize the betaBadgeProps object to return an empty string instead of undefined when the label is unavailable * Removed two instances of the deprecated internetExplorerOnly() mixin * Updated two instances of the ButtonColor import to EuiButtonColor as is was renamed in PR #6150 * Updated snapshots in Jest Test Suite #1 to account for EuiButton and EuiCard Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiToolTipAnchor component that replaced the tooltip anchor styles * Updated snapshots in Jest Test Suite #2 to account forEuiButton, EuiDescriptionList, EuiButtonIcon, and EuiBadge Emotion conversions. * Updated snapshots in Jest Test Suite #3 to account for EuiDescriptionList, EuiButton, and EuiBadge Emotion conversions. Updated snapshots for EuiTooltip as if now contains the new EuiTooltipAnchor component that replaced the tooltop anchor styles * Updated snapshots in Jest Test Suite #4 to account for EuiButton Emotion conversion. * Updated snapshots in Jest Test Suite #5 to account for EuiButton Emotion conversion. * Updated snapshots in Jest Test Suite #8 to account for EuiButtonIcon and EuiButton Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. * Updated snapshots in Jest Test Suite #9 to account for EuiFlyout and EuiButton Emotion conversions. * Updated snapshots in Jest Test Suite #10 to account for EuiButton, EuiBadge, EuiButtonIcon, and EuiCard Emotion conversions. Updated snapshots for EuiToolTtip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles * Updated instances of EuiButtonIconColor to use EuiButtonIconProps['color'] as it was removed in PR #6150 * Updated tests that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * Updated snapshots in Jest Test Suite #1 to account for EuiButton and EuiCard Emotion conversions * Added the EuiFlyout mixins and variables to Lens Sass file as EuiFlyout has been converted to Emotion and the Sass styles are no longer available in EUI * Added the EuiCallOutTypes variable to Step Progress Sass file as EuiCallOut has been converted to Emotion and the Sass styles are no longer available in EUI * Updated snapshots in Jest Test Suite #2 to account for recent Emotion conversions. Updated snapshots in server_status.test.tsx to render EuiBadge before checking the snapshots to reduce the snapshot churn caused by Emotion. Updated tests that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Added imports for the added flyout mixin. Removed references to EuiCallOut mixin as the component has been converted to Emotion and is no longer available for use. * Updated unit tests and snapshots in Jest Test Suite #10. Updated snaphshots to account for EuiBadge, EuiDescriptionList, EuiFlyout, and EuiCard Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. Updated tests that target EuiButton to simulate click events to target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #11 that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * Updated unit tests in Jest Test Suite #12 by updating tests that target EuiButton to simulate click events. Instead, these tests now target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #1 by updating tests that target EuiButton to simulate click events. Instead, these tests now target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #2 by updating tests that use EuiButton to simulate click events. Instead, these test have been updated to target a button element to prevent undefined click event errors. * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Updated reference to mixins Sass file. Updated snapshots for Jest Test Suite #5 to account for EuiButton Emotion conversion. Updated unit tests that target EuiButton to simulate click events. These tests have been updated to target a button element to prevent undefined click event errors * Updated unit tests in Jest Test Suites 3, 7, 8, 13, and 14. Updated snapshot to account for EuiButton Emotion conversion. Updated tests that target EuiButton to simulate click events. These tests now target a generic button element to prevent undefined click event errors. Updated a few snapshots by adding .render() before checking the snapshot. This will prevent large snapshots coming from recent Emotion conversions * Updated snapshots in Jest Test Suite #10 to account for the recent EuiButton Emotion conversion * Updated unit tests in Jest Test Suite #2 by editing tests that target EuiButton to simulate click events. These tests now target a button element in order to prevent undefinde click event errors * Updated snapshots in Jest Test Suite #10 to account for EuiButton and EuiDescriptionList Emotion conversions * Updated test cases in Jest Test Suites 3, 7, and 8. Updated snapshots to account for EuiButton and EuiPagination Emotion conversions. Updated tests that target EuiButton to simulate click events. These tests now target a button element to prevent undefined click errors * Updated test cases in Jest Test Suite 14. Updated snapshots to account for EuiButton Emotion conversion. Opted to use .render() when updating a few snapshots to reduce the large length of snapshots caused by Emotion * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Revised a change to betaBadgeProps to ensure that the label is available. If not, the value for the badge with be set to undefined. * Resolved two linting errors * Resolved two linting errors * Updated Jest unit tests in various suites. Updated snapshots to account for EuiButton Emotion conversion. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. * Updated EuiFlyout in query_flyout.tsx to remove the onClick function from maskProps as it is no longer available. Updated this flyout to use ownFocus and not to close when the overlay mask is clicked. * Removed the use of EuiButtonIconColor in favor of EuiButtonIconProps['color'] * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Updated Cypress test looking for strict equality on EuiPaginationButton class names to match a substring of the Emotion generated class name * Removed unneeded debugging code. Updated snapshots for various test suites to account for the recent EuiButton Emotion conversion * Updated a few EuiButton, EuiButtonEmpty, and EuiText components that set the color as ghost. The ghost color mode has been deprecated as of PR #6150. These components now are wrapped in EuiThemeProvider with a dark colorMode to create the previous ghost color. * Resolved TS error with EuiCard betaBadgeProps * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Remove references to now-removed EuiFlyout CSS classes/vars * Remove now-removed euiBadge className references - Convert directly to EuiBadge instead of using CSS - Remove confusing and now-possibly-irrelevant CSS badge overrides - left/right icons are now set via JSX and not via flex-direction * Pre-emptively fix various euiOverlayMask CSS overrides - this data attr isn't technically in yet but will be once elastic/eui#6289 merges - at the very least this isn't breaking any more than it currently already is! * Update to v67.1.3 * v67.1.4 * Resolved test failing test case in Security/Manage/Blocklist. The test did not remove focus from the last combo box in the form, which didn't allow the disbaled attribute to be removed from the flyout submit button. I've updated the mock file for Blocklist to return focus to the first form element in the flyout to allow the disabled attribute to be removed. * Updated snapshots to account for the recent EuiText Emotion conversion * Fix Log's custom tooltips relying on EuiTooltip classNames that no longer exist * Fix Vega vis custom tooltips relying on EuiTooltip classNames that no longer exist - this one is trickier than Log's as it's not using React, so we need to use Emotion's Global to set a static className * Convert remaining vega_vis.scss to Emotion - as an example of how other global + non global styles could be handled in the future * Fix references to removed `euiPaginationButton-isActive` className - use aria-current attribute instead * Added missing EuiFlyoutAnimation keyframes for EuiFlyout. This resolved test that failed because they used onAnimationEnd because the FlyoutAnimation could not be found. * Reolved Jest Tests in suites 1 and 5. Updated snapshots to account for the recent EuiButton Emotion conversion. Updated snapshots for EuiToolTip as it now contains the new EuiToolTipAnchor component that replaced the tooltip anchor styles. * iterate on rules_list.test.tsx * bump eui to v67.1.5 * Updatde snapshots for jest test suites to account for the recent EuiButton, EuiOverlayMask, EuiTooltip, and EuiBadge Emotion conversions * Resolved failing security test by updating the target element for CONNECTOR_TITLE. EuiCard has recently been converted to Emotion and the card title is no longer wrapper in a span. * Resolved failing test case in Runtime Fields. The modify runtime field test was failing because the combobox responsbible for adding and updating scripts was not appearing. The textbox did not appear because the shared setFieldScript function targets and toggles the script textbox when opening the flyout. When a runtime field is being modified, the toggle is already active and using the shared function will trigger the toggle again (losing access to the script textbox). Also resolved an issue that prevented the warning EuiCallout to appear when changing the type of a runtime field from its original type. Resolved this by adding an enter keypress at the end of setFieldType function to confirm the type selection, thus triggering the EuiCallout * Resolved two tests that were failing in Lens. These test were failing because they were checking for equality in class names that no longer exist within EuiButtonGroup as it was recently converted to Emotion. These tests were updated to check for a substring of the new and longer class name * Quick fix in test case failing because of misspelling in data-test-sub * Updated snapshot for Jest test case as EuiButton as recently been converted to Emotion * Removed console.log statement. Oops! * Resolved a failing test case in Lens. They were failing because they were checking for equality in class names that no longer exist within EuiButtonGroup as it was recently converted to Emotion. These tests were updated to check for a substring of the new and longer class name. Updated a Security test case by giving a target button the data-test-subj attribute for easier querying * Removed reference to EuiFlyout mixin as it has been converted to Emotion. Updated the reference to an interal copy of EuiFlyout styles * Corrected spelling error in EuiFlyout animation in Lens app * Update EUI with latest backport * Update button snapshots * fix another button snapshot * More snapshot fixes * [EuiButton][Security] Fix button relying on now-removed `euiButton__text` CSS - replace removed CSS with `eui-textTruncate` util instead - combine/DRY out unnecessary span - was affecting min-width of truncation util + increase screenshot diff limit - this was smaller than updating the actual baseline screenshots for whatever reason (likely render diff between local and CI) * Fix remaining Jest tests affected by Emotion conversions - because Emotion creates its own wrapper, `.first()` can no longer be used - prefer `.last()` instead * Fix Jest test affected by EuiButton Emotion conversion + removed modifier class - targeting the native DOM node + filtering by disabled true/false gets us back to the 'correct' lengths * Fix + improve flyout test - `.last()` changes to account for EuiButton Emotion conversion is needed, but the last onClose assertion still fails due to us having modified inputs, and the confirm modal being displayed - split test into two separate tests - one testing the onClose call, and the other testing the confirm modal * derpin * Skip rules_list Jest suite * Update new EuiButton snapshot * Upgraded EUI version to 67.1.7 * [EuiCard] Update snapshots * [EuiPopover] Update snapshots * [QA] Fix missing Vega warn/error message colors ;_; * [CI] Auto-commit changed files from 'node scripts/generate codeowners' * Fix Lens kbnToolbarButton regressions - Caused by flattening of EUI button CSS specificity - background-color was previously relying on isDisabled CSS specificity to override its #fff color - `text` color modifier & `!important` is no longer needed and overrides Emotion CSS flatly - isDisabled class is no longer needed - euiButton no longer sets `pointer-events: none` on disabled buttons (fixes tooltip bug in webkit as well) * Backport EUI 67.1.8 fixes * Update EuiCard snapshots * Fix EuiModal form wrapper causing overflow issues - see https://elastic.github.io/eui/#/layout/modal#forms-in-a-modal * Workaround for `.kbnOverlayMountWrapper` mount point causing overflow issues - not sure what all is using this modal service to be honest, but the wrapper is causing issues with the modal layout, this fixes overflow issues but will not fix any mask-image issues as a result * more snapshot updates * EuiButton - added textProps to EuiButton to prevent very long button names from spilling over outside of the container * EuiButton - Update EuiButton related snapshots. Updated tests that target EuiButton directly to use a data-telementary-id for more specific element querying required by Emotion * QA - Removed unnecessary comment in code * Temporary fix for EuiCard[selectable][layout=horizontal] instances on security solutions' rule page * Temporary fix for EuiCard[selectable][layout=horizontal] instances on osquery live query and canvas's datasource selector * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Fix CSS specificity, where canvas's solutionToolbarButton's background-color now takes precedence over EuiButton's primary styles * Removed update to search_marker_tooltip that removed the euiTooltip styles and replaced then with Emotion styling. Added EuiTooltip Sass styles for the component to rely on to test for a styling bug that is causing the tooltip and the tooltip arrow to be out of sync with each other. * Lint Sass file * Lint Sass file * Removed overflow:hidden style from .vgaVis_view as it was causing euiScrollStyles not to present the scroll bars in Vega Vis * Remove typo from EuiButton textProps object. 'className' should not have been included in the actual class name * Revert tooltip Sass This reverts commit 20e6ead, a5cd2de, and c605cbd * Fix Emotion tooltip arrows Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Constance Chen <constance.chen@elastic.co> Co-authored-by: Chandler Prall <chandler.prall@elastic.co>
jbudz
pushed a commit
to elastic/kibana
that referenced
this pull request
Nov 18, 2022
## Summary `eui@67.1.8` ⏩ `eui@70.2.2`⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and `EuiFlexGrid`, primarily around switching margins and negative margins to `gap`. Please do a quick QA pass of your app to scan for any issues. We're happy to help resolve minor fixes, or potentially follow up after PR merges. You can find us over in #eui! ## [`70.2.4`](https://github.com/elastic/eui/tree/v70.2.4) **Bug fixes** - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) ## [`70.2.3`](https://github.com/elastic/eui/tree/v70.2.3) **Bug fixes** - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) ## [`70.2.2`](https://github.com/elastic/eui/tree/v70.2.2) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) ## [`70.2.1`](https://github.com/elastic/eui/tree/v70.2.1) **Bug fixes** - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) ## [`70.2.0`](https://github.com/elastic/eui/tree/v70.2.0) - Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`, but will always remain accessible to keyboard and screen reader users. ([#6036](elastic/eui#6036)) - `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus within its children ([#6036](elastic/eui#6036)) - Added `onFocus` prop callback to `EuiSuperDatePicker` ([#6320](elastic/eui#6320)) **Bug fixes** - Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value` ([#6317](elastic/eui#6317)) - Fixed incorrect padding on `xl`-sized `EuiTabs` ([#6336](elastic/eui#6336)) - Fixed `EuiCard` not correctly merging `css` on its child `icon`s ([#6341](elastic/eui#6341)) - Fixed `EuiCheckableCard` not setting `css` on the correct DOM node ([#6341](elastic/eui#6341)) - Fixed a webkit rendering issue with `EuiModal`s containing `EuiBasicTable`s tall enough to scroll ([#6343](elastic/eui#6343)) - Fixed bug in `to_initials` that truncates custom initials ([#6346](elastic/eui#6346)) - Fix bug in `EuiCard` where layout breaks when `horizontal` and `selectable` are both passed ([#6348](elastic/eui#6348)) ## [`70.1.0`](https://github.com/elastic/eui/tree/v70.1.0) - Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the consumer render a hint below the search bar that will be displayed on focus. ([#6319](elastic/eui#6319)) - Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`. ([#6329](elastic/eui#6329)) **Bug fixes** - Fixed `EuiButton`'s cursor style when the button is disabled ([#6323](elastic/eui#6323)) - Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props ([#6324](elastic/eui#6324)) - Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content ([#6326](elastic/eui#6326)) - Temporarily patched `EuiModal` to not cause scroll-jumping issues on modal open ([#6327](elastic/eui#6327)) - Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers ([#6329](elastic/eui#6329)) - Fixed `EuiButton` not correctly passing `textProps` for children inside fragments or i18n components ([#6332](elastic/eui#6332)) - Fixed `EuiButton` not correctly respecting `minWidth={0}` ([#6332](elastic/eui#6332)) **CSS-in-JS conversions** - Converted `EuiTabs` to Emotion ([#6311](elastic/eui#6311)) ## [`70.0.0`](https://github.com/elastic/eui/tree/v70.0.0) - Added the `enabled` option to the `<EuiInMemoryTable />` `executeQueryOptions` prop. This option prevents the Query from being executed when controlled by the consumer. ([#6284](elastic/eui#6284)) **Bug fixes** - Fixed `EuiOverlayMask` to set a `[data-relative-to-header=above|below]` attribute to replace the `--aboveHeader` and `--belowHeader` classNames removed in its Emotion conversion ([#6289](elastic/eui#6289)) - Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers ([#6293](elastic/eui#6293)) - Fixed `EuiToolTip` not respecting reduced motion preferences ([#6295](elastic/eui#6295)) - Fixed a bug with `EuiTour` where passing any `panelProps` would cause the beacon to disappear ([#6298](elastic/eui#6298)) **Breaking changes** - `@emotion/css` is now a required peer dependency, alongside `@emotion/react` ([#6288](elastic/eui#6288)) - `@emotion/cache` is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations ([#6288](elastic/eui#6288)) **CSS-in-JS conversions** - Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed `euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`; ([#6263](elastic/eui#6263)) - Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion ([#6287](elastic/eui#6287)) ## [`69.0.0`](https://github.com/elastic/eui/tree/v69.0.0) - Added support for `fullWidth` prop on EuiForm, which will be the default for all rows/controls within ([#6229](elastic/eui#6229)) - Added support for `onResizeStart` and `onResizeEnd` callbacks to `EuiResizableContainer` ([#6236](elastic/eui#6236)) - Added optional case sensitive option matching to `EuiComboBox` with the `isCaseSensitive` prop ([#6268](elastic/eui#6268)) - `EuiFlexItem` now supports `grow={0}` ([#6270](elastic/eui#6270)) - Added the `alignItems` prop to `EuiFlexGrid` ([#6281](elastic/eui#6281)) - Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `indexTemporary`, `infinity`, `sortAscending`, and `sortDescending` glyphs to `EuiIcon` ([#6282](elastic/eui#6282)) **Bug fixes** - Fixed `EuiTextProps` to show the `color` type option `inherit` as default ([#6267](elastic/eui#6267)) - `EuiFlexGroup` now correctly respects `gutterSize` when responsive ([#6270](elastic/eui#6270)) - Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides ([#6280](elastic/eui#6280)) **Breaking changes** - `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup` instead for normal flex display ([#6270](elastic/eui#6270)) - `EuiFlexGrid` now uses modern `display: grid` CSS ([#6270](elastic/eui#6270)) - `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap` CSS instead of margins and negative margins ([#6270](elastic/eui#6270)) - `EuiFlexGroup` no longer applies responsive styles to `column` or `columnReverse` directions ([#6270](elastic/eui#6270)) **CSS-in-JS conversions** - Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion ([#6270](elastic/eui#6270)) ## [`68.0.0`](https://github.com/elastic/eui/tree/v68.0.0) - Added `beta` glyph to `EuiIcon` ([#6250](elastic/eui#6250)) - Added `launch` and `spaces` glyphs to `EuiIcon` ([#6260](elastic/eui#6260)) - Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a string of query selectors to fall back to if the `destinationId` does not have a valid target. Defaults to `main` ([#6261](elastic/eui#6261)) - `EuiSkipLink` is now always an `a` tag to ensure that it is always placed within screen reader link menus. ([#6261](elastic/eui#6261)) **Bug fixes** - Fixed `EuiSuperDatePicker` not correctly merging passed `className`s ([#6253](elastic/eui#6253)) - Fixed `EuiColorStops` not correctly merging in passed `data-test-subj`s, `style`s, or `...rest` ([#6255](elastic/eui#6255)) - Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper instead of the panel. Use `wrapperProps.style` to pass styles to the wrapper. ([#6255](elastic/eui#6255)) - Fixed custom `onClick`s passed to `EuiSkipLink` overriding `overrideLinkBehavior` ([#6261](elastic/eui#6261)) **Breaking changes** - Removed `inherit` and `ghost` color from `EuiListGroupItem` ([#6207](elastic/eui#6207)) - Changed default color to `text` instead of `inherit` ([#6207](elastic/eui#6207)) **CSS-in-JS conversions** - Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed `$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and `$euiListGroupItemSizeTypes`; ([#6207](elastic/eui#6207)) - Converted `EuiBadgeGroup` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiBetaBadge` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiNotificationBadge` to Emotion ([#6258](elastic/eui#6258)) Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
edmarmoretti
pushed a commit
to edmarmoretti/eui
that referenced
this pull request
May 3, 2023
…tic#6289) * Add [data-realative-to-header] attribute with above/below information * changelog
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Several Kibana CSS stylesheets were hooking into the now-removed
euiOverlayMask--aboveHeaderandeuiOverlayMask--belowHeaderclasses.Because of the way EuiOverlayMask's Emotion CSS styles were written, there isn't even a randomly generated Emotion className for those styles to update to. So we need to provide a data attribute instead, and backport this fix.
Checklist