[Euisearchbar] Add option to render hint #6319

sebelga · 2022-10-20T07:23:30Z

In this PR I've added an option to the <EuiSearchBar /> component to render a hint below. By default it displays underneath the bar on focus but its visibility can also be controlled using the isOpen prop of the <EuiInputPopover /> component.

Fixes #6005

kibanamachine · 2022-10-20T07:53:58Z

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

sebelga · 2022-10-20T11:51:32Z

jenkin test this

kibanamachine · 2022-10-20T12:19:36Z

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

kibanamachine · 2022-10-20T15:15:02Z

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

cee-chen · 2022-10-24T18:59:13Z

Assigning @1Copenut as well to take a look at this PR and QA that it meets accessibility standards/requirements

src-docs/src/views/search_bar/props_info.js

1Copenut

I think this hint is a net gain for our search bar, much appreciated.

I think we should adjust the search bar labels in our docs examples to be shorter, something like "Query string search" or "Search bar". The current label reads more like instructions how to use the input, and should be moved into the hint.

Let's have the hint text be less similar to the placeholder so we illustrate the difference and value in having it as a third instruction set beyond label and placeholder.

src/components/search_bar/search_bar.tsx

1Copenut · 2022-10-24T20:57:39Z

src/components/search_bar/search_bar.tsx

+  /**
+   * Hint to render below the search bar
+   */
+  hint?: {


The hint needs to have its tabindex removed or set to "-1". Right now it has a tabindex of "0" that allows it to take keyboard focus, but because we're using a portal, it's not a sibling element to the input it represents. This situation could be confusing for users who navigate the screen with sight and assistive technology together.

Isn't this something that should be handled globally by the <EuiInputPopover /> component for every consumer who want to display a popover underneath an <input /> ?

I looked into it, the z-index is set to 2000. Setting it to -1 is not possible as it hides the popover. If this needs to be changed globally for all consumers of the EuiInputPopover I'd prefer it to be a different PR as I don't know the impact if could have.

Oh, I was looking at tabindex in the HTML structure. I agree z-index needs to remain where it is to ensure the popover appears and is above other block elements in the stacking order. A tabindex of -1 ensures the hint cannot take keyboard focus.

sebelga · 2022-10-25T11:15:10Z

Thanks for the review @constancecchen and @1Copenut I addressed your feedback. Can you have another look? Thanks!

kibanamachine · 2022-10-25T11:36:23Z

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

1Copenut · 2022-10-25T15:20:02Z

Thanks for the review @constancecchen and @1Copenut I addressed your feedback. Can you have another look? Thanks!

Sure thing. I pulled latest changes at 9:00 am Central Time on 25 October. I have two more changes to request for accessibility. Adding two screen shots below to hopefully illustrate those points. Let me know if you want to review together or have questions about the change requests.

Request 1: Move the unique ID to EuiPopoverPanel

Request 2: Remove the tabindex or set it to -1"

sebelga · 2022-10-25T15:26:12Z

@1Copenut I am not sure I follow what you mean.

I am consuming an already existing EUI component. If I am understanding you correctly you are suggesting to make changes to that component. I would prefer to create an issue for this and fix what you saw separately.

Unless there is something in the code that I added you want me to change? Can you indicate me the change? Cheers.

src/components/search_bar/search_box.tsx

sebelga · 2022-10-27T10:26:43Z

Thanks for clarifying and sorry for misreading tabIndex for z-index!
I fixed the issue in 7fa168b

kibanamachine · 2022-10-27T10:51:10Z

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

cee-chen

Code LGTM - just 1 optional cleanup comment. Screen reader QA worked great as well (tested in FF/VO), although I'd definitely appreciate another pass from you Trevor!

src/components/search_bar/search_bar.tsx

src/components/search_bar/search_box.tsx

1Copenut

Please see my one requested change, no additional review needed from me. If you want to verify the change, download the axe browser plugin and run it on the page with a hint open. Should be no a11y errors in the plugin.

Thank you for the second change set @sebelga!

src/components/search_bar/search_box.tsx

sebelga · 2022-10-28T12:58:10Z

Thanks for the review! 👍 I addressed the latest feedback in 1205818

kibanamachine · 2022-10-28T13:25:45Z

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

cee-chen · 2022-10-28T16:56:39Z

Thanks for the great contributions @sebelga!! 🎉

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

sebelga added 4 commits October 19, 2022 16:07

Add hint prop to render below the search box

7f3cdfd

Update example to show hint

dd53637

Update props info

ea44af2

Add unit tests

d331195

sebelga self-assigned this Oct 20, 2022

Add release note

c1aa561

Update jest snapshot

b060ca9

chandlerprall self-requested a review October 20, 2022 17:34

cee-chen requested a review from 1Copenut October 24, 2022 18:59

cee-chen reviewed Oct 24, 2022

View reviewed changes

src-docs/src/views/search_bar/props_info.js Show resolved Hide resolved

1Copenut requested changes Oct 24, 2022

View reviewed changes

sebelga added 2 commits October 25, 2022 12:04

Rename popoverProps

4a653d7

Add aria-describedby to hint

3ba98f0

cee-chen reviewed Oct 25, 2022

View reviewed changes

src/components/search_bar/search_box.tsx Outdated Show resolved Hide resolved

Address CR feedback

7fa168b

sebelga requested review from 1Copenut and cee-chen October 27, 2022 14:36

cee-chen approved these changes Oct 27, 2022

View reviewed changes

src/components/search_bar/search_bar.tsx Outdated Show resolved Hide resolved

chandlerprall reviewed Oct 27, 2022

View reviewed changes

src/components/search_bar/search_box.tsx Show resolved Hide resolved

1Copenut approved these changes Oct 27, 2022

View reviewed changes

src/components/search_bar/search_box.tsx Outdated Show resolved Hide resolved

chandlerprall approved these changes Oct 27, 2022

View reviewed changes

Address CR feedback

1205818

sebelga enabled auto-merge (squash) October 28, 2022 12:59

sebelga merged commit 0267215 into elastic:main Oct 28, 2022

chandlerprall mentioned this pull request Nov 1, 2022

[Backport] Elastic Stack 8.6 #6335

Closed

8 tasks

breehall mentioned this pull request Nov 1, 2022

Bumping EUI to version 67.1.8 elastic/kibana#141279

Merged

cee-chen mentioned this pull request Nov 8, 2022

Upgrade EUI to v70.2.4 elastic/kibana#144845

Merged

1Copenut mentioned this pull request Nov 17, 2022

[EuiSelectableTemplateSitewide] Allow for default enter key action #6376

Open

edmarmoretti pushed a commit to edmarmoretti/eui that referenced this pull request May 3, 2023

[Euisearchbar] Add option to render hint (elastic#6319)

3733f71

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Euisearchbar] Add option to render hint #6319

[Euisearchbar] Add option to render hint #6319

sebelga commented Oct 20, 2022 •

edited

Loading

kibanamachine commented Oct 20, 2022

sebelga commented Oct 20, 2022

kibanamachine commented Oct 20, 2022

kibanamachine commented Oct 20, 2022

cee-chen commented Oct 24, 2022

1Copenut left a comment •

edited

Loading

1Copenut Oct 24, 2022

sebelga Oct 25, 2022

sebelga Oct 25, 2022

1Copenut Oct 25, 2022

sebelga commented Oct 25, 2022

kibanamachine commented Oct 25, 2022

1Copenut commented Oct 25, 2022

sebelga commented Oct 25, 2022

sebelga commented Oct 27, 2022

kibanamachine commented Oct 27, 2022

cee-chen left a comment

1Copenut left a comment •

edited

Loading

sebelga commented Oct 28, 2022

kibanamachine commented Oct 28, 2022

cee-chen commented Oct 28, 2022

[Euisearchbar] Add option to render hint #6319

[Euisearchbar] Add option to render hint #6319

Conversation

sebelga commented Oct 20, 2022 • edited Loading

kibanamachine commented Oct 20, 2022

sebelga commented Oct 20, 2022

kibanamachine commented Oct 20, 2022

kibanamachine commented Oct 20, 2022

cee-chen commented Oct 24, 2022

1Copenut left a comment • edited Loading

Choose a reason for hiding this comment

1Copenut Oct 24, 2022

Choose a reason for hiding this comment

sebelga Oct 25, 2022

Choose a reason for hiding this comment

sebelga Oct 25, 2022

Choose a reason for hiding this comment

1Copenut Oct 25, 2022

Choose a reason for hiding this comment

sebelga commented Oct 25, 2022

kibanamachine commented Oct 25, 2022

1Copenut commented Oct 25, 2022

sebelga commented Oct 25, 2022

sebelga commented Oct 27, 2022

kibanamachine commented Oct 27, 2022

cee-chen left a comment

Choose a reason for hiding this comment

1Copenut left a comment • edited Loading

Choose a reason for hiding this comment

sebelga commented Oct 28, 2022

kibanamachine commented Oct 28, 2022

cee-chen commented Oct 28, 2022

sebelga commented Oct 20, 2022 •

edited

Loading

1Copenut left a comment •

edited

Loading

1Copenut left a comment •

edited

Loading