Updates to EuiSelectableTemplateSitewide and some other fixes for the new header

CHANGELOG.md

@@ -1,10 +1,22 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `.browserslistrc` for global browser support reference ([#4022](https://github.com/elastic/eui/pull/4022))
+- Added ability to specify `color` of `EuiHeaderLink` ([#4008](https://github.com/elastic/eui/pull/4008))
+- Added `boolean` type to the `notification` prop of `EuiHeaderSectionItemButton` to show a simple dot ([#4008](https://github.com/elastic/eui/pull/4008))
+- Added `popoverButton` and `popoverButtonBreakpoints` props to `EuiSelectableTemplateSitewide` for responsive capabilities ([#4008](https://github.com/elastic/eui/pull/4008))
+- Added `isWithinMaxBreakpoint` service ([#4008](https://github.com/elastic/eui/pull/4008))
 
 **Bug fixes**
 
 - Fixed ref not being handled properly in `EuiValidatableControl` when used with [react-hook-form](https://react-hook-form.com/) ([#4001](https://github.com/elastic/eui/pull/4001))
+- Fixed `EuiNotificationBadge` `color` prop type ([#4008](https://github.com/elastic/eui/pull/4008))
+- Fixed z-index of `EuiBottomBar` to stay under header ([#4008](https://github.com/elastic/eui/pull/4008))
+- Fixed regression of `EuiSelectable` not abiding by the `showIcons` prop ([#4008](https://github.com/elastic/eui/pull/4008))
+- Fixed contrast of search input of `EuiSelectableTemplateSitewide` in dark header ([#4008](https://github.com/elastic/eui/pull/4008))
+
+**Breaking changes**
+
+- Changed `EuiHideFor` and `EuiShowFor` from using media queries to hide content to not rendering the content. Children are now required and `display` has been removed ([#4008](https://github.com/elastic/eui/pull/4008))
 
 ## [`28.4.0`](https://github.com/elastic/eui/tree/v28.4.0)
 

src-docs/src/components/guide_section/guide_section.js

@@ -525,7 +525,7 @@ export class GuideSection extends Component {
         wrap>
         <EuiFlexItem grow={false}>
           <EuiTitle size="s">
-            <h3>{componentName}</h3>
+            <h3 id={componentName}>{componentName}</h3>
           </EuiTitle>
         </EuiFlexItem>
         {extendedTypesElements.length > 0 && (

src-docs/src/views/header/header_dark.tsx

@@ -51,8 +51,8 @@ export default ({ theme }: { theme: any }) => (
             Production logs
           </EuiBadge>,
           <EuiHeaderSectionItemButton
-            aria-label="Notifications"
-            notification={'•'}>
+            aria-label="2 Notifications"
+            notification={'2'}>
             <EuiIcon type="cheer" size="m" />
           </EuiHeaderSectionItemButton>,
           <EuiHeaderSectionItemButton aria-label="Account menu">

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

@@ -238,6 +238,36 @@ export default ({ theme }) => {
     </EuiPopover>
   );
 
+  /**
+   * Sitewide search
+   */
+  const search = (
+    <EuiSelectableTemplateSitewide
+      options={[]}
+      searchProps={{
+        append: '⌘K',
+        compressed: true,
+      }}
+      popoverButton={
+        <EuiHeaderSectionItemButton aria-label="Sitewide search">
+          <EuiIcon type="search" size="m" />
+        </EuiHeaderSectionItemButton>
+      }
+      popoverButtonBreakpoints={['xs', 's']}
+      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>
+      }
+    />
+  );
+
   return (
     <>
       <EuiButton onClick={() => setFullScreen(true)} iconType="fullScreen">
@@ -255,38 +285,22 @@ export default ({ theme }) => {
                   <EuiHeaderLogo iconType="logoElastic" href="">
                     Elastic
                   </EuiHeaderLogo>,
+                  deploymentMenu,
                 ],
                 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>
-                    }
-                  />,
+                  <EuiShowFor sizes={['m', 'l', 'xl']}>{search}</EuiShowFor>,
                 ],
                 borders: 'none',
               },
               {
                 items: [
-                  deploymentMenu,
+                  <EuiShowFor sizes={['xs', 's']}>{search}</EuiShowFor>,
                   <EuiHeaderSectionItemButton
-                    aria-label="Notifications"
-                    notification={'•'}
+                    notification={true}
+                    aria-label="Notifictations: Updates available"
                     onClick={() =>
                       setIsAlertFlyoutVisible(!isAlertFlyoutVisible)
                     }>
@@ -317,13 +331,15 @@ export default ({ theme }) => {
               {
                 items: [
                   <EuiHeaderLinks>
-                    <EuiHeaderLink>Share</EuiHeaderLink>
-                    <EuiHeaderLink>Clone</EuiHeaderLink>
+                    <EuiHeaderLink color="primary">Share</EuiHeaderLink>
+                    <EuiHeaderLink color="primary" iconType="copy">
+                      Clone
+                    </EuiHeaderLink>
                     <EuiButton
                       iconType="minimize"
                       style={{ minWidth: 80 }}
                       size="s"
-                      color="secondary"
+                      color="primary"
                       onClick={() => {
                         setFullScreen(false);
                         document.body.classList.remove(

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

@@ -305,7 +305,6 @@ export const HeaderExample = {
       props: {
         EuiHeaderAlert,
       },
-      snippet: headerLinksSnippet,
       demo: <HeaderAlert />,
     },
     {

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

@@ -117,10 +117,10 @@ export default ({ flyoutOrPopover = 'flyout' }) => {
       aria-expanded={isFlyoutVisible}
       aria-haspopup="true"
       aria-label={`News feed: ${
-        { showBadge } ? 'Updates available' : 'No updates'
+        showBadge ? 'Updates available' : 'No updates'
       }`}
       onClick={() => showFlyout()}
-      notification={showBadge && '•'}>
+      notification={showBadge}>
       <EuiIcon type="cheer" size="m" />
     </EuiHeaderSectionItemButton>
   );

src-docs/src/views/responsive/responsive.js

@@ -1,48 +1,62 @@
 import React from 'react';
 
-import { EuiCode, EuiHideFor, EuiShowFor } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiHideFor,
+  EuiShowFor,
+  EuiText,
+  EuiSpacer,
+} from '../../../../src/components';
 
 export default () => (
-  <div>
+  <EuiText>
     <EuiHideFor sizes={['xs']}>
-      Hiding from <EuiCode>xs</EuiCode> screens only
+      <p>
+        Hiding from <EuiCode>xs</EuiCode> screens only
+      </p>
     </EuiHideFor>
-    <br />
     <EuiHideFor sizes={['xs', 's']}>
-      Hiding from <EuiCode>xs, s</EuiCode> screens
+      <p>
+        Hiding from <EuiCode>xs, s</EuiCode> screens
+      </p>
     </EuiHideFor>
-    <br />
     <EuiHideFor sizes={['xs', 's', 'm', 'l']}>
-      Hiding from <EuiCode>xs, s, m, l</EuiCode> screens
+      <p>
+        Hiding from <EuiCode>xs, s, m, l</EuiCode> screens
+      </p>
     </EuiHideFor>
-    <br />
     <EuiHideFor sizes={['xl']}>
-      Hiding from <EuiCode>xl</EuiCode> screens only
+      <p>
+        Hiding from <EuiCode>xl</EuiCode> screens only
+      </p>
     </EuiHideFor>
 
-    <br />
-    <br />
+    <EuiSpacer size="xxl" />
 
     <EuiShowFor sizes={['xs']}>
-      Showing for <EuiCode>xs</EuiCode> screens only
+      <p>
+        Showing for <EuiCode>xs</EuiCode> screens only
+      </p>
     </EuiShowFor>
-    <br />
     <EuiShowFor sizes={['xs', 's']}>
-      Showing for <EuiCode>xs, s</EuiCode> screens
+      <p>
+        Showing for <EuiCode>xs, s</EuiCode> screens
+      </p>
     </EuiShowFor>
-    <br />
     <EuiShowFor sizes={['xs', 's', 'm', 'l']}>
-      Showing for <EuiCode>xs, s, m, l</EuiCode> screens
+      <p>
+        Showing for <EuiCode>xs, s, m, l</EuiCode> screens
+      </p>
     </EuiShowFor>
-    <br />
     <EuiShowFor sizes={['xl']}>
-      Showing for <EuiCode>xl</EuiCode> screen only
+      <p>
+        Showing for <EuiCode>xl</EuiCode> screen only
+      </p>
     </EuiShowFor>
-    <EuiShowFor sizes={['m', 'l', 'xl']} display="block">
-      <div>
-        Showing for <EuiCode>m, l, xl</EuiCode> screen only as{' '}
-        <EuiCode>block</EuiCode>
-      </div>
+    <EuiShowFor sizes={['m', 'l', 'xl']}>
+      <p>
+        Showing for <EuiCode>m, l, xl</EuiCode> screen only
+      </p>
     </EuiShowFor>
-  </div>
+  </EuiText>
 );

src-docs/src/views/responsive/responsive_example.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { renderToHtml } from '../../services';
-import sizes from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_responsive.scss';
 
 import { GuideSectionTypes } from '../../components';
 
@@ -12,24 +11,26 @@ import {
   EuiCodeBlock,
 } from '../../../../src/components';
 
+import { BREAKPOINTS, BREAKPOINT_KEYS } from '../../../../src/services';
+import { EuiBreakpointSize } from '!!prop-loader!../../../../src/services/breakpoint';
+
 import Responsive from './responsive';
 const responsiveSource = require('!!raw-loader!./responsive');
 const responsiveHtml = renderToHtml(Responsive);
 const responsiveSnippet = [
   `<EuiHideFor sizes={['xs', 's']}>
   <!-- Content to hide from xs and s screens -->
 </EuiHideFor>`,
-  `<EuiShowFor sizes={['l', 'xl']} display="block">
-  <!-- <div>Content only showing for l and xl screens and displaying in block</div> -->
+  `<EuiShowFor sizes={['l', 'xl']}>
+  <!-- <div>Content only showing for l and xl screens</div> -->
 </EuiShowFor>`,
 ];
 
 function renderSizes(size, index) {
-  let code = `'${size}': ${sizes.euiBreakpoints[size]}px`;
+  let code = `'${size}': ${BREAKPOINTS[size]}px`;
 
-  if (index < sizes.euiBreakpointKeys.length - 1) {
-    code += ` (to ${sizes.euiBreakpoints[sizes.euiBreakpointKeys[index + 1]] -
-      1}px)`;
+  if (index > 0) {
+    code += ` (to ${BREAKPOINTS[BREAKPOINT_KEYS[index - 1]] - 1}px)`;
   } else {
     code += ' +';
   }
@@ -55,27 +56,28 @@ export const ResponsiveExample = {
       text: (
         <div>
           <p>
-            Pass an array of named breakpoints to either the{' '}
-            <strong>EuiShowFor</strong> or <strong>EuiHideFor</strong>{' '}
-            components to make them responsive.
+            These components will either render or not render their children
+            based on the current window width. Pass an array of named
+            breakpoints to the <EuiCode>sizes</EuiCode> prop to either show or
+            hide their children respectively.
           </p>
 
           <p>
-            The sizing correlates with our{' '}
-            <EuiCode language="scss">$euiBreakpoints</EuiCode> SASS map. The
-            named breakpoint starts at the pixel value provided and ends before
-            the next one.
+            The sizing options correlate with the keys in the{' '}
+            <EuiCode language="ts">EuiBreakpoints</EuiCode> type. The named
+            breakpoint starts at the pixel value provided and ends before the
+            next one.
           </p>
 
           <EuiCodeBlock language="scss" paddingSize="s">
-            {sizes.euiBreakpointKeys.map(function(size, index) {
+            {BREAKPOINT_KEYS.map(function(size, index) {
               return renderSizes(size, index);
             })}
           </EuiCodeBlock>
         </div>
       ),
       snippet: responsiveSnippet,
-      props: { EuiShowFor, EuiHideFor },
+      props: { EuiShowFor, EuiHideFor, EuiBreakpointSize },
       demo: <Responsive />,
     },
   ],

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

@@ -6,6 +6,7 @@ import { EuiSelectableTemplateSitewide } from '../../../../src/components/select
 import { EuiSelectableTemplateSitewideOption } from '../../../../src/components/selectable/selectable_templates/selectable_template_sitewide_option';
 import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 import { EuiLink } from '../../../../src/components/link';
+import { EuiButton } from '../../../../src/components/button';
 
 export default () => {
   const [searchValue, setSearchValue] = useState('');
@@ -95,6 +96,8 @@ export default () => {
       popoverProps={{
         className: 'customPopoverClass',
       }}
+      popoverButton={<EuiButton>Mobile toggle</EuiButton>}
+      popoverButtonBreakpoints={['xs', 's']}
       popoverFooter={
         <EuiText color="subdued" size="xs">
           <EuiFlexGroup

src-docs/src/views/selectable/selectable_example.js

@@ -550,6 +550,21 @@ export const SelectableExample = {
             options with the selected option having{' '}
             <EuiCode>{"checked: 'on'"}</EuiCode>.
           </p>
+          <h3>Popover toggle and responsiveness</h3>
+          <p>
+            The default display is to render the search input inline which
+            triggers a popover with the results. Or you can decide to trigger
+            the whole selectable component from a single button. By passing your
+            own button to <EuiCode>popoverButton</EuiCode>, the component will
+            use this to trigger the popover, putting the search inside.
+          </p>
+          <p>
+            This is a great way to handle reducing the size of the component for
+            smaller screens. The component offers a helper prop called{' '}
+            <EuiCode>popoverButtonBreakpoints</EuiCode> which will only render
+            the <EuiCode>popoverButton</EuiCode> if the window size matches
+            named breakpoint(s).
+          </p>
         </Fragment>
       ),
       props: { EuiSelectableTemplateSitewide, Options, MetaData },

src/components/badge/notification_badge/badge_notification.tsx

@@ -21,7 +21,7 @@ import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../../common';
 
-const colorToClassMap: { [color: string]: string | null } = {
+const colorToClassMap = {
   accent: null,
   subdued: 'euiNotificationBadge--subdued',
 };

src/components/bottom_bar/_bottom_bar.scss

@@ -7,7 +7,7 @@
   right: 0;
   left: 0;
   animation: euiBottomBarAppear $euiAnimSpeedSlow $euiAnimSlightResistance;
-  z-index: $euiZNavigation;
+  z-index: $euiZHeader - 2;
 
   &.euiBottomBar--paddingSmall {
     padding: $euiSizeS;

src/components/header/_mixins.scss

@@ -31,7 +31,11 @@
   }
 
   .euiHeaderNotification,
-  .euiHeaderSectionItemButton__notification {
+  .euiHeaderSectionItemButton__notification--badge {
     box-shadow: 0 0 0 1px $backgroundColor;
   }
+
+  .euiHeaderSectionItemButton__notification--dot {
+    stroke: $backgroundColor;
+  }
 }