[EuiInputPopover] Add `panelMinWidth` prop #7071

cee-chen · 2023-08-12T01:28:23Z

Summary

See this conversation elastic/kibana#162651 (comment) with @Heenawter and @andreadelrio about some of the new Discover work being done to standardize the visual behavior of input popovers.

Prior to this prop, EuiInputPopover widths were entirely tied to the width of the input element. Now, consumers can specify a minimum width, allowing wider content to display at desired widths if necessary, e.g.:

This PR also fixes EuiPopver to allow EuiInputPopover to respect different side anchors and to update the popover position if the input resizes.

QA

https://eui.elastic.co/pr_7071_buildkite/#/layout/popover#popover-attached-to-input-element

General checklist

Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs (using @default if default values are missing) and playground toggles
Added documentation
Added or updated ~~jest and~~ cypress tests
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

~~- [ ] Checked in both light and dark modes~~
- [ ] Checked in mobile
~~- [ ] Checked Code Sandbox works for any docs examples~~
~~- [ ] Updated the Figma library counterpart~~
~~- [ ] Checked for breaking changes and labeled appropriately~~

- use a resizable textarea instead of width state - toggle fns make no sense

+ misc cleanup - optional chaining syntax

- needs to be cypress as jsdom can't process `getBoundingClientRect`

- by removing forced left-aligned `attachToAnchor` from EuiPopover + adjust types of `EuiInputPopover` to only accept the down positions

kibanamachine · 2023-08-12T01:53:23Z

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

- Describe width behavior + note new `minWidth` prop - Enhance `minWidth` demo to allow showing the different behaviors combined with `anchorPosition` + key down behavior mentioned in description

cee-chen · 2023-08-14T03:36:20Z

src/components/form/super_select/__snapshots__/super_select.test.tsx.snap

@@ -145,7 +145,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
      class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-bottom"
      data-popover-panel="true"
      role="dialog"
-      style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
+      style="top: 8px; left: -22px; will-change: transform, opacity; z-index: 2000;"


I'm not totally sure why this snapshot changed - I QA'd all components dogfooding EuiInputPopover (EuiComboBox, EuiSuperSelect, EuiRange, and EuiAutoRefresh) and all of them are still rendering the correct widths/positions for the popover. I'll put this down as Jest/jsdom gremlins 🤷

kibanamachine · 2023-08-14T03:57:23Z

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

- was off by 2.5px on headless vs headed, so tweak widths so it stops doing that + explicitly set viewport width (in case the default changes in the future)

Heenawter

Tested this in Kibana, and it does exactly what we need it to do for the options list control - thanks so much for tackling this so quickly! 🎉

Quick question though - would it be possible to make this prop available for the EuiDualRange component for when showInput="inputWithPopover"? We use this for our range slider control and, while less important than with the options list control, it would still be valuable to make the popover extend past the input on our smaller sizes:

cee-chen · 2023-08-14T16:10:29Z

@Heenawter I was wondering if EuiRange/DualRange would need this! Yes, I can certainly add a new prop that allows consumers to pass popover props to those components.

kibanamachine · 2023-08-14T16:17:57Z

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

elasticmachine · 2023-08-14T16:31:47Z

💚 Build Succeeded

Buildkite Build
Commit: 6961e64

History

💔 Build #327 failed 7bacd72
💔 Build #314 failed 0ab6197

cc @cee-chen

breehall

This is a great improvement to the input popover. Tested in staging and the panelMinWidth prop and the anchorPosition were both respected. I pulled this branch and ran the Cypress tests locally. They passed, so I think CI may need to be kicked off again for the tests.

breehall · 2023-08-14T19:08:37Z

src-docs/src/views/popover/popover_example.js

+            Functionally, consumers have control over what events open and close
+            the popover, and it can allow for natural tab order. Although some
+            assumptions are made about keyboard behavior, consumers should
+            provide specific key event handlers depending on the use case. For
+            instance, a <EuiCode>type=text</EuiCode> input could use the down
+            key to trigger popover opening, but this interaction would not be
+            appropriate for <EuiCode>type=number</EuiCode> inputs as they
+            natively bind to the down key.


Great explanation here. This is super informative!

breehall · 2023-08-14T19:18:17Z

src/components/popover/input_popover.tsx

+  /**
+   * Alignment of the popover relative to the input
+   */
+  anchorPosition?: 'downLeft' | 'downRight' | 'downCenter';


This is just a thought, no action required. I like the decision you made here to just set the prop to equal one of these three values instead of creating a separate type (which the pattern we're currently using in most components). Especially since there are only three values being used.

breehall · 2023-08-14T19:19:52Z

src/components/popover/input_popover.spec.tsx

+    // Cypress doesn't seem to have a way to mimic manual dragging/resizing, so we'll do it programmatically
+    cy.get('textarea').then(($el) => ($el[0].style.width = '500px'));
+    cy.get('[data-popover-panel]').should('have.css', 'left', '50px');
+  });


andreadelrio · 2023-08-14T21:54:12Z

@cee-chen thank you so much for the quick turnaround on this.

cee-chen · 2023-08-15T02:25:34Z

Thanks a ton all!

@Heenawter, as a heads up, since Bree's already reviewed this, I'll go ahead and merge it in and add inputPopoverProps support for EuiRange/EuiDualRange in a second follow-up PR.

edit: follow-up PR: #7082

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

cee-chen added 5 commits August 11, 2023 18:28

[docs] Clean up EuiInputPopover demo

7900c05

- use a resizable textarea instead of width state - toggle fns make no sense

Add panelMinWidth prop

8af7525

+ misc cleanup - optional chaining syntax

Write tests for EuiInputPopover

0f5c695

- needs to be cypress as jsdom can't process `getBoundingClientRect`

Allow custom anchorPosition

839e227

- by removing forced left-aligned `attachToAnchor` from EuiPopover + adjust types of `EuiInputPopover` to only accept the down positions

Fix input popover not repositioning on input resize

c59469f

cee-chen force-pushed the input-popover-min-width branch from db1862b to 0ab6197 Compare August 12, 2023 01:29

[docs] Improve EuiInputPopover docs

e707e07

- Describe width behavior + note new `minWidth` prop - Enhance `minWidth` demo to allow showing the different behaviors combined with `anchorPosition` + key down behavior mentioned in description

cee-chen force-pushed the input-popover-min-width branch from 0ab6197 to 893bdbf Compare August 14, 2023 03:15

cee-chen requested review from a team and breehall August 14, 2023 03:28

cee-chen marked this pull request as ready for review August 14, 2023 03:28

cee-chen added 2 commits August 13, 2023 20:34

Fix downstream types/snapshots

127c1ee

changelog

7bacd72

cee-chen force-pushed the input-popover-min-width branch from 893bdbf to 7bacd72 Compare August 14, 2023 03:34

cee-chen commented Aug 14, 2023

View reviewed changes

Fix failing Cypress test

6961e64

- was off by 2.5px on headless vs headed, so tweak widths so it stops doing that + explicitly set viewport width (in case the default changes in the future)

Heenawter reviewed Aug 14, 2023

View reviewed changes

cee-chen self-assigned this Aug 14, 2023

breehall approved these changes Aug 14, 2023

View reviewed changes

andreadelrio mentioned this pull request Aug 15, 2023

[Controls] Migrate range slider to EuiDualRange and make styling consistent across all controls elastic/kibana#162651

Merged

6 tasks

cee-chen merged commit 90a52ae into elastic:main Aug 15, 2023
1 check passed

cee-chen deleted the input-popover-min-width branch August 15, 2023 02:25

cee-chen mentioned this pull request Aug 15, 2023

[EuiRange][EuiDualRange] Add new inputPopoverProps prop #7082

Merged

3 tasks

cee-chen mentioned this pull request Aug 15, 2023

Upgrade EUI to v87.1.0 elastic/kibana#163961

Merged

cee-chen mentioned this pull request Sep 14, 2023

[EuiComboBox] Update with panelMinWidth behavior #7192

Closed

cee-chen mentioned this pull request Sep 21, 2023

[EuiPopover][EuiInputPopover] Misc fixes and CSS cleanup #7211

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiInputPopover] Add `panelMinWidth` prop #7071

[EuiInputPopover] Add `panelMinWidth` prop #7071

cee-chen commented Aug 12, 2023 •

edited

Loading

kibanamachine commented Aug 12, 2023

cee-chen Aug 14, 2023

kibanamachine commented Aug 14, 2023

Heenawter left a comment •

edited

Loading

cee-chen commented Aug 14, 2023

kibanamachine commented Aug 14, 2023

elasticmachine commented Aug 14, 2023

breehall left a comment

breehall Aug 14, 2023

breehall Aug 14, 2023

breehall Aug 14, 2023

andreadelrio commented Aug 14, 2023

cee-chen commented Aug 15, 2023 •

edited

Loading

[EuiInputPopover] Add panelMinWidth prop #7071

[EuiInputPopover] Add panelMinWidth prop #7071

Conversation

cee-chen commented Aug 12, 2023 • edited Loading

Summary

QA

General checklist

kibanamachine commented Aug 12, 2023

cee-chen Aug 14, 2023

Choose a reason for hiding this comment

kibanamachine commented Aug 14, 2023

Heenawter left a comment • edited Loading

Choose a reason for hiding this comment

cee-chen commented Aug 14, 2023

kibanamachine commented Aug 14, 2023

elasticmachine commented Aug 14, 2023

💚 Build Succeeded

History

breehall left a comment

Choose a reason for hiding this comment

breehall Aug 14, 2023

Choose a reason for hiding this comment

breehall Aug 14, 2023

Choose a reason for hiding this comment

breehall Aug 14, 2023

Choose a reason for hiding this comment

andreadelrio commented Aug 14, 2023

cee-chen commented Aug 15, 2023 • edited Loading

[EuiInputPopover] Add `panelMinWidth` prop #7071

[EuiInputPopover] Add `panelMinWidth` prop #7071

cee-chen commented Aug 12, 2023 •

edited

Loading

Heenawter left a comment •

edited

Loading

cee-chen commented Aug 15, 2023 •

edited

Loading