[EuiHide/ShowFor] Add all and none options for sizes

Then update `popoverBreakpoints` prop in EuiHeaderLinks to also allow for `all` and `none`.
elastic · Sep 16, 2020 · cf00811 · cf00811
1 parent 7c6f700
commit cf00811
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 102 deletions.
diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
@@ -45,10 +45,6 @@ export default () => {
           <EuiHeaderSectionItem border="right">
             <EuiHeaderLogo>Elastic</EuiHeaderLogo>
           </EuiHeaderSectionItem>
-          {/* TODO: How to say "none"
-          <EuiHeaderLinks popoverBreakpoints={}>
-            <EuiHeaderLink href="">Home</EuiHeaderLink>
-          </EuiHeaderLinks> */}
         </EuiHeaderSection>
 
         <EuiHeaderSection side="right">

diff --git a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap b/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
@@ -6,25 +6,8 @@ exports[`EuiHeaderLinks gutterSize l is rendered 1`] = `
   class="euiHeaderLinks"
 >
   <div
-    class="euiHeaderLinks__list euiHeaderLinks__list--gutterL eui-hideFor--xs eui-hideFor--s"
+    class="euiHeaderLinks__list euiHeaderLinks__list--gutterL"
   />
-  <div
-    class="euiPopover euiPopover--anchorDownRight eui-showFor--xs eui-showFor--s"
-  >
-    <div
-      class="euiPopover__anchor"
-    >
-      <button
-        aria-label="Open menu"
-        class="euiHeaderSectionItem__button"
-        type="button"
-      >
-        <div
-          data-euiicon-type="apps"
-        />
-      </button>
-    </div>
-  </div>
 </nav>
 `;
 
@@ -34,25 +17,8 @@ exports[`EuiHeaderLinks gutterSize m is rendered 1`] = `
   class="euiHeaderLinks"
 >
   <div
-    class="euiHeaderLinks__list euiHeaderLinks__list--gutterM eui-hideFor--xs eui-hideFor--s"
+    class="euiHeaderLinks__list euiHeaderLinks__list--gutterM"
   />
-  <div
-    class="euiPopover euiPopover--anchorDownRight eui-showFor--xs eui-showFor--s"
-  >
-    <div
-      class="euiPopover__anchor"
-    >
-      <button
-        aria-label="Open menu"
-        class="euiHeaderSectionItem__button"
-        type="button"
-      >
-        <div
-          data-euiicon-type="apps"
-        />
-      </button>
-    </div>
-  </div>
 </nav>
 `;
 
@@ -62,25 +28,8 @@ exports[`EuiHeaderLinks gutterSize s is rendered 1`] = `
   class="euiHeaderLinks"
 >
   <div
-    class="euiHeaderLinks__list euiHeaderLinks__list--gutterS eui-hideFor--xs eui-hideFor--s"
+    class="euiHeaderLinks__list euiHeaderLinks__list--gutterS"
   />
-  <div
-    class="euiPopover euiPopover--anchorDownRight eui-showFor--xs eui-showFor--s"
-  >
-    <div
-      class="euiPopover__anchor"
-    >
-      <button
-        aria-label="Open menu"
-        class="euiHeaderSectionItem__button"
-        type="button"
-      >
-        <div
-          data-euiicon-type="apps"
-        />
-      </button>
-    </div>
-  </div>
 </nav>
 `;
 
@@ -90,25 +39,8 @@ exports[`EuiHeaderLinks gutterSize xs is rendered 1`] = `
   class="euiHeaderLinks"
 >
   <div
-    class="euiHeaderLinks__list euiHeaderLinks__list--gutterXS eui-hideFor--xs eui-hideFor--s"
+    class="euiHeaderLinks__list euiHeaderLinks__list--gutterXS"
   />
-  <div
-    class="euiPopover euiPopover--anchorDownRight eui-showFor--xs eui-showFor--s"
-  >
-    <div
-      class="euiPopover__anchor"
-    >
-      <button
-        aria-label="Open menu"
-        class="euiHeaderSectionItem__button"
-        type="button"
-      >
-        <div
-          data-euiicon-type="apps"
-        />
-      </button>
-    </div>
-  </div>
 </nav>
 `;
 
@@ -119,38 +51,29 @@ exports[`EuiHeaderLinks is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiHeaderLinks__list euiHeaderLinks__list--gutterS eui-hideFor--xs eui-hideFor--s"
+    class="euiHeaderLinks__list euiHeaderLinks__list--gutterS"
   />
-  <div
-    class="euiPopover euiPopover--anchorDownRight eui-showFor--xs eui-showFor--s"
-  >
-    <div
-      class="euiPopover__anchor"
-    >
-      <button
-        aria-label="Open menu"
-        class="euiHeaderSectionItem__button"
-        type="button"
-      >
-        <div
-          data-euiicon-type="apps"
-        />
-      </button>
-    </div>
-  </div>
 </nav>
 `;
 
-exports[`EuiHeaderLinks popover props is rendered 1`] = `
+exports[`EuiHeaderLinks popover props is never rendered with "none" 1`] = `
 <nav
   aria-label="App menu"
   class="euiHeaderLinks"
 >
   <div
-    class="euiHeaderLinks__list euiHeaderLinks__list--gutterS eui-hideFor--xs eui-hideFor--s eui-hideFor--m eui-hideFor--l eui-hideFor--xl"
+    class="euiHeaderLinks__list euiHeaderLinks__list--gutterS"
   />
+</nav>
+`;
+
+exports[`EuiHeaderLinks popover props is rendered 1`] = `
+<nav
+  aria-label="App menu"
+  class="euiHeaderLinks"
+>
   <div
-    class="euiPopover euiPopover--anchorDownRight eui-showFor--xs eui-showFor--s eui-showFor--m eui-showFor--l eui-showFor--xl"
+    class="euiPopover euiPopover--anchorDownRight"
   >
     <div
       class="euiPopover__anchor customAnchorClass"

diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx
@@ -55,5 +55,11 @@ describe('EuiHeaderLinks', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('is never rendered with "none"', () => {
+      const component = render(<EuiHeaderLinks popoverBreakpoints={'none'} />);
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/header/header_links/header_links.tsx b/src/components/header/header_links/header_links.tsx
@@ -50,7 +50,7 @@ export type EuiHeaderLinksProps = CommonProps &
     /**
      * A list of named breakpoints at which to show the popover version
      */
-    popoverBreakpoints?: EuiBreakpointSize[];
+    popoverBreakpoints?: EuiBreakpointSize[] | 'all' | 'none';
     /**
      * Extend the functionality of the EuiPopover.button which is a EuiHeaderSectionItemButton.
      * With the addition of `iconType` to change the display icon which defaults to `apps`

diff --git a/src/components/responsive/__snapshots__/hide_for.test.tsx.snap b/src/components/responsive/__snapshots__/hide_for.test.tsx.snap
@@ -12,8 +12,16 @@ exports[`EuiHideFor m is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiHideFor never renders for "all" 1`] = `null`;
+
 exports[`EuiHideFor renders 1`] = `null`;
 
+exports[`EuiHideFor renders for "none" 1`] = `
+<span>
+  Child
+</span>
+`;
+
 exports[`EuiHideFor renders for multiple breakpoints 1`] = `null`;
 
 exports[`EuiHideFor s is rendered 1`] = `null`;

diff --git a/src/components/responsive/__snapshots__/show_for.test.tsx.snap b/src/components/responsive/__snapshots__/show_for.test.tsx.snap
@@ -4,12 +4,20 @@ exports[`EuiShowFor l is rendered 1`] = `null`;
 
 exports[`EuiShowFor m is rendered 1`] = `null`;
 
+exports[`EuiShowFor never renders for "none" 1`] = `null`;
+
 exports[`EuiShowFor renders 1`] = `
 <span>
   Child
 </span>
 `;
 
+exports[`EuiShowFor renders for "all" 1`] = `
+<span>
+  Child
+</span>
+`;
+
 exports[`EuiShowFor renders for multiple breakpoints 1`] = `
 <span>
   Child

diff --git a/src/components/responsive/hide_for.test.tsx b/src/components/responsive/hide_for.test.tsx
@@ -60,4 +60,24 @@ describe('EuiHideFor', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('renders for "none"', () => {
+    const component = render(
+      <EuiHideFor sizes={'none'}>
+        <span>Child</span>
+      </EuiHideFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('never renders for "all"', () => {
+    const component = render(
+      <EuiHideFor sizes={'all'}>
+        <span>Child</span>
+      </EuiHideFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/responsive/hide_for.tsx b/src/components/responsive/hide_for.tsx
@@ -37,7 +37,7 @@ export interface EuiHideForProps {
    * List of all the responsive sizes to hide the children for.
    * Array of #EuiBreakpointSize
    */
-  sizes: EuiHideForBreakpoints[];
+  sizes: EuiHideForBreakpoints[] | 'all' | 'none';
 }
 
 export const EuiHideFor: FunctionComponent<EuiHideForProps> = ({
@@ -65,7 +65,10 @@ export const EuiHideFor: FunctionComponent<EuiHideForProps> = ({
     };
   }, [functionToCallOnWindowResize]);
 
-  if (sizes.includes(currentBreakpoint as EuiBreakpointSize)) {
+  if (
+    sizes === 'all' ||
+    sizes.includes(currentBreakpoint as EuiBreakpointSize)
+  ) {
     return null;
   }
 

diff --git a/src/components/responsive/show_for.test.tsx b/src/components/responsive/show_for.test.tsx
@@ -60,4 +60,24 @@ describe('EuiShowFor', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('renders for "all"', () => {
+    const component = render(
+      <EuiShowFor sizes={'all'}>
+        <span>Child</span>
+      </EuiShowFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('never renders for "none"', () => {
+    const component = render(
+      <EuiShowFor sizes={'none'}>
+        <span>Child</span>
+      </EuiShowFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/responsive/show_for.tsx b/src/components/responsive/show_for.tsx
@@ -37,7 +37,7 @@ export interface EuiShowForProps {
    * List of all the responsive sizes to show the children for.
    * Array of #EuiBreakpointSize
    */
-  sizes: EuiShowForBreakpoints[];
+  sizes: EuiShowForBreakpoints[] | 'all' | 'none';
 }
 
 export const EuiShowFor: FunctionComponent<EuiShowForProps> = ({
@@ -65,7 +65,10 @@ export const EuiShowFor: FunctionComponent<EuiShowForProps> = ({
     };
   }, [sizes, functionToCallOnWindowResize]);
 
-  if (sizes.includes(currentBreakpoint as EuiBreakpointSize)) {
+  if (
+    sizes === 'all' ||
+    sizes.includes(currentBreakpoint as EuiBreakpointSize)
+  ) {
     return <>{children}</>;
   }