EuiSelectableTemplateSitewide for Elastic's global search (#3800)

* [EuiSelectableListItem] Added `onFocusBadgeContent` prop for visible instructions
  * Fixing alignment of new li elements that used to be buttons
* First step towards custom option renders
* Added `searchableLabel` to EuiSelectableOption`
  * EuiHighlight as the span
  * Changing EuiSelectableItem’s `onFocusBadgeContent` to `onFocusBadge` To allow for altering the badge’s props as well as content
* Added ability to change empty messages directly on EuiSelectable to maintain id
* [EuiSelectableMessage] Added `bordered` prop
  * Updating some EuiSelectable docs and removing `<br>` from sitewide template
* [EuiBadge] Fix layout when only an icon is provided
  * Also fixes the implementation of the on focus badge for EuiComboBox and EuiSelectable
* Background color for EuiMark only in Amsterdam
* introduce EuiSelectableOption generic; use generic extension in EuiSelectableTemplateSitewideOption
* [EuiPopover] and [EuiSelectable] Fix some axe issues

CHANGELOG.md

@@ -6,12 +6,21 @@ No public interface changes since `28.1.0`.
 
 - Added `isLoading` and `isLoadingMessage` props to `EuiAccordion` ([#3879](https://github.com/elastic/eui/pull/3879))
 - Added `testenv` mock for `EuiFocusTrap` ([#3930](https://github.com/elastic/eui/pull/3930))
+- Added `EuiSelectableTemplateSitewide` as wrapper of `EuiSelectable` for Elastic's global search component ([#3800](https://github.com/elastic/eui/pull/3800))
+- Updated styles of `EuiMark` to override browser default ([#3800](https://github.com/elastic/eui/pull/3800))
+- Updated `EuiHighlight` to use `EuiMark` as matching element wrapper ([#3800](https://github.com/elastic/eui/pull/3800))
+- Enhanced `EuiSelectable`'s `option` type to allow for a separate `searchableLabel` and any generic keys ([#3800](https://github.com/elastic/eui/pull/3800))
+- Added `listProps.onFocusBadge`, `loadingMessage`, `noMatchesMessage`, and `emptyMessage` props to `EuiSelectable` ([#3800](https://github.com/elastic/eui/pull/3800))
+- Added `bordered` prop to `EuiSelectableMessage` ([#3800](https://github.com/elastic/eui/pull/3800))
 
 **Bug fixes**
 
 - Fixed bug in `EuiCodeBlock` content overlapping with control buttons when `whiteSpace` was set to `"pre"` ([#3853](https://github.com/elastic/eui/pull/3853))
 - Fixed `EuiFocusTrap` not applying provided `style` prop ([#3916](https://github.com/elastic/eui/pull/3916))
 - Fixed bug in `EuiDataGrid` when a new pagination object would cause every cell to render ([#3919](https://github.com/elastic/eui/pull/3919))
+- Fixed display of `EuiBadge` if only the `iconType` is passed ([#3800](https://github.com/elastic/eui/pull/3800))
+- Fixed accesssibility error in `EuiSelectable` when the `list` isn't on the page ([#3800](https://github.com/elastic/eui/pull/3800))
+- Fixed accesssibility error in `EuiPopover` when `ownFocus = false` ([#3800](https://github.com/elastic/eui/pull/3800))
 
 ## [`28.0.0`](https://github.com/elastic/eui/tree/v28.0.0)
 

src-docs/src/components/guide_components.scss

@@ -250,6 +250,11 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   font-weight: $euiFontWeightBold;
 }
 
+.euiSelectableTemplateSitewide__optionMeta--PINK {
+  font-weight: $euiFontWeightMedium;
+  color: $euiColorAccentText;
+}
+
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';

src-docs/src/views/badge/badge_with_icon.js

@@ -9,5 +9,7 @@ export default () => (
     </EuiBadge>
 
     <EuiBadge iconType="check">Default</EuiBadge>
+
+    <EuiBadge iconType="returnKey" />
   </div>
 );

src-docs/src/views/header/header_elastic_pattern.js

@@ -27,6 +27,8 @@ import {
   EuiShowFor,
   EuiText,
   EuiTitle,
+  EuiSelectableTemplateSitewide,
+  EuiSelectableMessage,
 } from '../../../../src/components';
 
 export default ({ theme }) => {
@@ -256,6 +258,29 @@ export default ({ theme }) => {
                 ],
                 borders: 'none',
               },
+              {
+                items: [
+                  <EuiSelectableTemplateSitewide
+                    options={[]}
+                    searchProps={{
+                      append: '⌘K',
+                      compressed: true,
+                    }}
+                    emptyMessage={
+                      <EuiSelectableMessage style={{ minHeight: 300 }}>
+                        <p>
+                          Please see the component page for{' '}
+                          <Link to="/forms/selectable">
+                            <strong>EuiSelectableTemplateSitewide</strong>
+                          </Link>{' '}
+                          on how to configure your sitewide search.
+                        </p>
+                      </EuiSelectableMessage>
+                    }
+                  />,
+                ],
+                borders: 'none',
+              },
               {
                 items: [
                   deploymentMenu,

src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js

@@ -62,7 +62,7 @@ export const HighlightAndMarkExample = {
       ],
       text: (
         <p>
-          Use <strong>EuiMark</strong> to wrap a string in an
+          Use <strong>EuiMark</strong> to wrap a string in a{' '}
           <EuiCode>mark</EuiCode> element.
         </p>
       ),

src-docs/src/views/highlight_and_mark/mark.js

@@ -5,9 +5,7 @@ import { EuiMark } from '../../../../src/components';
 export function Mark() {
   return (
     <Fragment>
-      The quick brown fox
-      <EuiMark>jumped over</EuiMark>
-      the lazy dog
+      The quick brown fox <EuiMark>jumped over</EuiMark> the lazy dog
     </Fragment>
   );
 }

src-docs/src/views/selectable/props.tsx

@@ -4,10 +4,23 @@ import {
   EuiSelectableOptionsListProps,
 } from '../../../../src/components/selectable';
 
+import {
+  EuiSelectableTemplateSitewideOption,
+  EuiSelectableTemplateSitewideMetaData,
+} from '../../../../src/components/selectable/selectable_templates/selectable_template_sitewide_option';
+
 export const EuiSelectableOptionProps: FunctionComponent<EuiSelectableOption> = () => (
   <div />
 );
 
 export const EuiSelectableOptionsList: FunctionComponent<EuiSelectableOptionsListProps> = () => (
   <div />
 );
+
+export const Options: FunctionComponent<EuiSelectableTemplateSitewideOption> = () => (
+  <div />
+);
+
+export const MetaData: FunctionComponent<EuiSelectableTemplateSitewideMetaData> = () => (
+  <div />
+);