[EuiPortal] Allow `insert` prop to be configured via `EuiProvider.componentDefaults` #6941

cee-chen · 2023-07-12T23:32:21Z

Summary

⚠️ This PR contains semi-messy git history (due to me not wanting to totally nuke @y1j2x34's commits/contributions) - since this PR is on the smaller side, I'd recommend simply reviewing the final files changed diff instead.

closes #6882 (although this work won't be available until this feature branch is merged into main and released)

Example usage:

<EuiProvider
  componentDefaults={{
    EuiPortal: { insert: { sibling: document.querySelector('.foo'), position: 'after' } },
  }}
>
  <App />
</EuiProvider>

See https://eui.elastic.co/pr_6923/#/utilities/provider#component-defaults for more documentation.

QA

Run yarn test-cypress-dev locally
Open Chrome component testing, select portal.spec.tsx
Confirm all / new EuiProvider.componentDefaults tests pass
Optionally inspect the DOM output of the two tests to confirm that 2 portal nodes rendered in the expected positions, based on the passed code

General checklist

Props have proper autodocs (using @default if default values are missing) and playground toggles
Added or updated ~~jest and~~ cypress tests
A changelog entry exists and is marked appropriately

Update EuiPortal component - update class naming to match other instances in EUI for consistency (e.g. EuiAccordionClass) - update function component typing and syntax - minor object spread syntax nit

- has to be Cypress, as our current version of jest/jsdom does not support `insertAdjacentElement` + clarify in comments of the new provider test how individual component tests should be handled

- not super necessary to have a separate file for it, these types are only used within EuiPortal - use `as const` array and typeof instead of `keyof` - simplify insert positions map typing

kibanamachine · 2023-07-12T23:55:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6941/

1Copenut

LGTM! The commit comments were especially helpful following the refactoring steps.

cee-chen · 2023-07-13T19:43:18Z

Thanks Trevor!

…ponentDefaults` (elastic#6941) * [EuiPortal] Add global settings for Portal-Based Components * changelog * Remove `PortalProvider` usage in favor of `EuiComponentDefaultsProvider` Update EuiPortal component - update class naming to match other instances in EUI for consistency (e.g. EuiAccordionClass) - update function component typing and syntax - minor object spread syntax nit * Add EuiPortal tests for provided `insert` behavior - has to be Cypress, as our current version of jest/jsdom does not support `insertAdjacentElement` + clarify in comments of the new provider test how individual component tests should be handled * changelog * Clean up types - not super necessary to have a separate file for it, these types are only used within EuiPortal - use `as const` array and typeof instead of `keyof` - simplify insert positions map typing --------- Co-authored-by: y1j2x34 <y1j2x34@qq.com>

…ponentDefaults` (#6941) * [EuiPortal] Add global settings for Portal-Based Components * changelog * Remove `PortalProvider` usage in favor of `EuiComponentDefaultsProvider` Update EuiPortal component - update class naming to match other instances in EUI for consistency (e.g. EuiAccordionClass) - update function component typing and syntax - minor object spread syntax nit * Add EuiPortal tests for provided `insert` behavior - has to be Cypress, as our current version of jest/jsdom does not support `insertAdjacentElement` + clarify in comments of the new provider test how individual component tests should be handled * changelog * Clean up types - not super necessary to have a separate file for it, these types are only used within EuiPortal - use `as const` array and typeof instead of `keyof` - simplify insert positions map typing --------- Co-authored-by: y1j2x34 <y1j2x34@qq.com>

…ponentDefaults` (elastic#6941) * [EuiPortal] Add global settings for Portal-Based Components * changelog * Remove `PortalProvider` usage in favor of `EuiComponentDefaultsProvider` Update EuiPortal component - update class naming to match other instances in EUI for consistency (e.g. EuiAccordionClass) - update function component typing and syntax - minor object spread syntax nit * Add EuiPortal tests for provided `insert` behavior - has to be Cypress, as our current version of jest/jsdom does not support `insertAdjacentElement` + clarify in comments of the new provider test how individual component tests should be handled * changelog * Clean up types - not super necessary to have a separate file for it, these types are only used within EuiPortal - use `as const` array and typeof instead of `keyof` - simplify insert positions map typing --------- Co-authored-by: y1j2x34 <y1j2x34@qq.com>

`v86.0.0`⏩`v87.1.0` ⚠️ The biggest set of type changes in this PR come from the breaking change that makes `pageSize` and `pageSizeOptions` now optional props for `EuiBasicTable.pagination`, `EuiInMemoryTable.pagination` and `EuiDataGrid.pagination`. This caused several other components that were cloning EUI's pagination type to start throwing type warnings about `pageSize` being optional. Where I came across these errors, I modified the extended types to require `pageSize`. These types and their usages may end up changing again in any case once the Shared UX team looks into #56406. --- ## [`87.1.0`](https://github.com/elastic/eui/tree/v87.1.0) - Updated the underlying library powering `EuiAutoSizer`. This primarily affects typing around the `disableHeight` and `disableWidth` props ([#6798](elastic/eui#6798)) - Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and `EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter typing ([#6798](elastic/eui#6798)) - Updated `EuiDatePickerRange` to support `compressed` display ([#7058](elastic/eui#7058)) - Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop ([#7061](elastic/eui#7061)) - Added a new `panelMinWidth` prop to `EuiInputPopover` ([#7071](elastic/eui#7071)) - Added a new `inputPopoverProps` prop for `EuiRange`s and `EuiDualRange`s with `showInput="inputWithPopover"` set ([#7082](elastic/eui#7082)) **Bug fixes** - Fixed `EuiToolTip` overriding instead of merging its `aria-describedby` tooltip ID with any existing `aria-describedby`s ([#7055](elastic/eui#7055)) - Fixed `EuiSuperDatePicker`'s `compressed` display ([#7058](elastic/eui#7058)) - Fixed `EuiAccordion` to remove tabbable children from sequential keyboard navigation when the accordion is closed ([#7064](elastic/eui#7064)) - Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs ([#7065](elastic/eui#7065)) **Accessibility** - Removed the default `dialog` role and `tabIndex` from push `EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual accessibility management. ([#7065](elastic/eui#7065)) ## [`87.0.0`](https://github.com/elastic/eui/tree/v87.0.0) - Added beta `componentDefaults` prop to `EuiProvider`, which will allow configuring certain default props globally. This list of components and defaults is still under consideration. ([#6923](elastic/eui#6923)) - `EuiPortal`'s `insert` prop can now be configured globally via `EuiProvider.componentDefaults` ([#6941](elastic/eui#6941)) - `EuiFocusTrap`'s `crossFrame` and `gapMode` props can now be configured globally via `EuiProvider.componentDefaults` ([#6942](elastic/eui#6942)) - `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and `showPerPageOptions` props can now be configured globally via `EuiProvider.componentDefaults` ([#6951](elastic/eui#6951)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid` now allow `pagination.pageSize` to be undefined. If undefined, `pageSize` defaults to `EuiTablePagination`'s `itemsPerPage` component default. ([#6993](elastic/eui#6993)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid`'s `pagination.pageSizeOptions` will now fall back to `EuiTablePagination`'s `itemsPerPageOptions` component default. ([#6993](elastic/eui#6993)) - Updated `EuiHeaderLinks`'s `gutterSize` spacings ([#7005](elastic/eui#7005)) - Updated `EuiHeaderAlert`'s stacking styles ([#7005](elastic/eui#7005)) - Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips. ([#7018](elastic/eui#7018)) - Updated `EuiBreadcrumbs` to support breadcrumbs that toggle popovers via `popoverContent` and `popoverProps` ([#7031](elastic/eui#7031)) - Improved the contrast ratio of disabled titles within `EuiSteps` and `EuiStepsHorizontal` to meet WCAG AA guidelines. ([#7032](elastic/eui#7032)) - Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a more clear visual indication of the current step ([#7048](elastic/eui#7048)) **Bug fixes** - Single uses of `<EuiHeaderSectionItem side="right" />` now align right as expected without needing a previous `side="left"` sibling. ([#7005](elastic/eui#7005)) - `EuiPageTemplate` now correctly displays `panelled={true}` ([#7044](elastic/eui#7044)) **Breaking changes** - `EuiTablePagination`'s default `itemsPerPage` is now `10` (was previously `50`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - `EuiTablePagination`'s default `itemsPerPageOptions` is now `[10, 25, 50]` (was previously `[10, 20, 50, 100]`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - Removed `border` prop from `EuiHeaderSectionItem` (unused since Amsterdam theme) ([#7005](elastic/eui#7005)) - Removed `borders` object configuration from `EuiHeader.sections` ([#7005](elastic/eui#7005)) **CSS-in-JS conversions** - Converted `EuiHeaderAlert` to Emotion; Removed unused `.euiHeaderAlert__dismiss` CSS ([#7005](elastic/eui#7005)) - Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and `EuiHeaderSectionItemButton` to Emotion ([#7005](elastic/eui#7005)) - Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed `$euiHeaderLinksGutterSizes` Sass variables ([#7005](elastic/eui#7005)) - Removed `$euiHeaderBackgroundColor` Sass variable; use `$euiColorEmptyShade` instead ([#7005](elastic/eui#7005)) - Removed `$euiHeaderChildSize` Sass variable; use `$euiSizeXXL` instead ([#7005](elastic/eui#7005)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

y1j2x34 and others added 6 commits July 12, 2023 16:33

[EuiPortal] Add global settings for Portal-Based Components

6939dcf

changelog

20bcbc6

Remove PortalProvider usage in favor of EuiComponentDefaultsProvider

79c9c71

Update EuiPortal component - update class naming to match other instances in EUI for consistency (e.g. EuiAccordionClass) - update function component typing and syntax - minor object spread syntax nit

Add EuiPortal tests for provided insert behavior

158e318

- has to be Cypress, as our current version of jest/jsdom does not support `insertAdjacentElement` + clarify in comments of the new provider test how individual component tests should be handled

changelog

68af7cc

Clean up types

5fa5858

- not super necessary to have a separate file for it, these types are only used within EuiPortal - use `as const` array and typeof instead of `keyof` - simplify insert positions map typing

cee-chen force-pushed the provider/portal branch from 527fc79 to 5fa5858 Compare July 12, 2023 23:33

cee-chen mentioned this pull request Jul 13, 2023

[EuiPortal] Add global settings for Portal-Based Components #6889

Closed

11 tasks

cee-chen requested a review from 1Copenut July 13, 2023 00:50

1Copenut approved these changes Jul 13, 2023

View reviewed changes

cee-chen merged commit 0ae73ae into elastic:feature/provider/component-defaults Jul 13, 2023

cee-chen deleted the provider/portal branch July 13, 2023 19:43

cee-chen mentioned this pull request Aug 3, 2023

[EuiProvider] Add new componentDefaults configuration #6995

Merged

cee-chen mentioned this pull request Aug 4, 2023

[EuiPortal] Shadow DOM Support for Portal-Based Components (e.g., Modal, Overlay Mask) #6882

Closed

cee-chen mentioned this pull request Aug 15, 2023

Upgrade EUI to v87.1.0 elastic/kibana#163961

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiPortal] Allow `insert` prop to be configured via `EuiProvider.componentDefaults` #6941

[EuiPortal] Allow `insert` prop to be configured via `EuiProvider.componentDefaults` #6941

cee-chen commented Jul 12, 2023 •

edited

Loading

kibanamachine commented Jul 12, 2023

1Copenut left a comment

cee-chen commented Jul 13, 2023

[EuiPortal] Allow insert prop to be configured via EuiProvider.componentDefaults #6941

[EuiPortal] Allow insert prop to be configured via EuiProvider.componentDefaults #6941

Conversation

cee-chen commented Jul 12, 2023 • edited Loading

Summary

QA

General checklist

kibanamachine commented Jul 12, 2023

1Copenut left a comment

Choose a reason for hiding this comment

cee-chen commented Jul 13, 2023

[EuiPortal] Allow `insert` prop to be configured via `EuiProvider.componentDefaults` #6941

[EuiPortal] Allow `insert` prop to be configured via `EuiProvider.componentDefaults` #6941

cee-chen commented Jul 12, 2023 •

edited

Loading