Add display modifiers to EuiShowFor; Convert EuiShowFor and EuiHideFo…

…r to TS (#2503)

CHANGELOG.md

@@ -1,15 +1,19 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `14.10.0`.
+- Converted `EuiShowFor` and `EuiHideFor` to TS ([#2503](https://github.com/elastic/eui/pull/2503))
 
 **Bug fixes**
 
 - Created `.euiTableCaption` with `position: relative` to avoid double border under header row ([#2484](https://github.com/elastic/eui/pull/2484))
 
+**Breaking changes**
+
+- Added `display` modifier to `EuiShowFor` ([#2503](https://github.com/elastic/eui/pull/2503))
+
 ## [`14.10.0`](https://github.com/elastic/eui/tree/v14.10.0)
 
 - Added new `euiControlBar` component for bottom-of-screen navigational elements. ([#2204](https://github.com/elastic/eui/pull/2204))
-- Convert `EuiFlyout` to TypeScript ([#2500](https://github.com/elastic/eui/pull/2500))
+- Converted `EuiFlyout` to TypeScript ([#2500](https://github.com/elastic/eui/pull/2500))
 - Added an animation to the arrow on `EuiAccordion` as it opens / closes ([#2507](https://github.com/elastic/eui/pull/2507))
 - Upgraded `react-input-autosize` to `2.2.2`
 

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

@@ -38,5 +38,11 @@ export default () => (
     <EuiShowFor sizes={['xl']}>
       Showing for <EuiCode>xl</EuiCode> screen only
     </EuiShowFor>
+    <EuiShowFor sizes={['m', 'l', 'xl']} display="block">
+      <div>
+        Showing for <EuiCode>m, l, xl</EuiCode> screen only as{' '}
+        <EuiCode>block</EuiCode>
+      </div>
+    </EuiShowFor>
   </div>
 );

src-docs/src/views/utility_classes/utility_classes.js

@@ -204,13 +204,35 @@ export default () => (
     <EuiSpacer />
 
     <EuiCode className="eui-showFor--xs">.eui-showFor--xs</EuiCode>
-    <EuiSpacer />
     <EuiCode className="eui-showFor--s">.eui-showFor--s</EuiCode>
-    <EuiSpacer />
     <EuiCode className="eui-showFor--m">.eui-showFor--m</EuiCode>
-    <EuiSpacer />
     <EuiCode className="eui-showFor--l">.eui-showFor--l</EuiCode>
-    <EuiSpacer />
     <EuiCode className="eui-showFor--xl">.eui-showFor--xl</EuiCode>
+
+    <EuiSpacer />
+
+    <h5>Modifiers</h5>
+    <p>
+      The <EuiCode>.eui-showFor--[size]</EuiCode> classes will force display of{' '}
+      <EuiCode>inline</EuiCode> when showing the element. You can modify this
+      display property by appending <EuiCode>block</EuiCode>,{' '}
+      <EuiCode>inlineBlock</EuiCode>, or <EuiCode>flex</EuiCode> to the class.
+    </p>
+
+    <EuiCode className="eui-showFor--xs">.eui-showFor--xs (inline)</EuiCode>
+    <EuiCode className="eui-showFor--s">.eui-showFor--s (inline)</EuiCode>
+    <EuiCode className="eui-showFor--m">.eui-showFor--m--block</EuiCode>
+    <EuiCode className="eui-showFor--l">.eui-showFor--l--inlineBlock</EuiCode>
+    <EuiCode className="eui-showFor--xl">.eui-showFor--xl--flex</EuiCode>
+
+    <EuiSpacer />
+
+    <div
+      style={{ background: wrappingExampleStyle.background }}
+      className="eui-showFor--xs eui-showFor--s eui-showFor--m--block eui-showFor--l--inlineBlock eui-showFor--xl--flex">
+      <span style={wrappingExampleStyle}>span</span>
+      <span style={wrappingExampleStyle}>span</span>
+      <span style={wrappingExampleStyle}>span</span>
+    </div>
   </EuiText>
 );

src/components/responsive/__snapshots__/hide_for.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiHideFor l is rendered 1`] = `
+<span
+  class="eui-hideFor--l"
+/>
+`;
+
+exports[`EuiHideFor m is rendered 1`] = `
+<span
+  class="eui-hideFor--m"
+/>
+`;
+
+exports[`EuiHideFor renders and copies classes 1`] = `
+<div
+  class="eui-hideFor--xs"
+>
+  Child
+</div>
+`;
+
+exports[`EuiHideFor renders for multiple breakpoints 1`] = `
+<span
+  class="eui-hideFor--xs eui-hideFor--l"
+>
+  Child
+</span>
+`;
+
+exports[`EuiHideFor renders wraps children in a span 1`] = `
+<span
+  class="eui-hideFor--xs"
+>
+  Child
+</span>
+`;
+
+exports[`EuiHideFor s is rendered 1`] = `
+<span
+  class="eui-hideFor--s"
+/>
+`;
+
+exports[`EuiHideFor xl is rendered 1`] = `
+<span
+  class="eui-hideFor--xl"
+/>
+`;
+
+exports[`EuiHideFor xs is rendered 1`] = `
+<span
+  class="eui-hideFor--xs"
+/>
+`;

src/components/responsive/__snapshots__/show_for.test.tsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiShowFor block is rendered 1`] = `
+<span
+  class="eui-showFor--xs--block"
+/>
+`;
+
+exports[`EuiShowFor flex is rendered 1`] = `
+<span
+  class="eui-showFor--xs--flex"
+/>
+`;
+
+exports[`EuiShowFor inlineBlock is rendered 1`] = `
+<span
+  class="eui-showFor--xs--inlineBlock"
+/>
+`;
+
+exports[`EuiShowFor l is rendered 1`] = `
+<span
+  class="eui-showFor--l"
+/>
+`;
+
+exports[`EuiShowFor m is rendered 1`] = `
+<span
+  class="eui-showFor--m"
+/>
+`;
+
+exports[`EuiShowFor renders and copies classes 1`] = `
+<div
+  class="eui-showFor--xs"
+>
+  Child
+</div>
+`;
+
+exports[`EuiShowFor renders for multiple breakpoints 1`] = `
+<span
+  class="eui-showFor--xs eui-showFor--l"
+>
+  Child
+</span>
+`;
+
+exports[`EuiShowFor renders wraps children in a span 1`] = `
+<span
+  class="eui-showFor--xs"
+>
+  Child
+</span>
+`;
+
+exports[`EuiShowFor s is rendered 1`] = `
+<span
+  class="eui-showFor--s"
+/>
+`;
+
+exports[`EuiShowFor xl is rendered 1`] = `
+<span
+  class="eui-showFor--xl"
+/>
+`;
+
+exports[`EuiShowFor xs is rendered 1`] = `
+<span
+  class="eui-showFor--xs"
+/>
+`;

src/components/responsive/hide_for.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiHideForBreakpoints, EuiHideFor } from './hide_for';
+
+const BREAKPOINTS: EuiHideForBreakpoints[] = ['xs', 's', 'm', 'l', 'xl'];
+
+describe('EuiHideFor', () => {
+  test('renders wraps children in a span', () => {
+    const component = render(
+      <EuiHideFor sizes={['xs']} {...requiredProps}>
+        Child
+      </EuiHideFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('renders and copies classes', () => {
+    const component = render(
+      <EuiHideFor sizes={['xs']}>
+        <div>Child</div>
+      </EuiHideFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  BREAKPOINTS.forEach(size => {
+    test(`${size} is rendered`, () => {
+      const component = render(
+        <EuiHideFor sizes={[size]} {...requiredProps} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  test('renders for multiple breakpoints', () => {
+    const component = render(
+      <EuiHideFor sizes={['xs', 'l']}>Child</EuiHideFor>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/responsive/hide_for.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent, ReactElement } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export type EuiHideForBreakpoints = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export interface EuiHideForProps {
+  children?: React.ReactNode;
+  /**
+   * List of all the responsive sizes to show the children for.
+   * Options are `'xs' | 's' | 'm' | 'l' | 'xl'`
+   */
+  sizes: EuiHideForBreakpoints[];
+}
+
+const responsiveSizesToClassNameMap = {
+  xs: 'eui-hideFor--xs',
+  s: 'eui-hideFor--s',
+  m: 'eui-hideFor--m',
+  l: 'eui-hideFor--l',
+  xl: 'eui-hideFor--xl',
+};
+
+export const EuiHideFor: FunctionComponent<EuiHideForProps> = ({
+  children,
+  sizes,
+}) => {
+  const utilityClasses = sizes.map(function(item) {
+    return responsiveSizesToClassNameMap[item];
+  });
+
+  if (React.isValidElement(children)) {
+    return (
+      <React.Fragment>
+        {React.Children.map(children, (child: ReactElement<CommonProps>) =>
+          React.cloneElement(child, {
+            className: classNames(child.props.className, utilityClasses),
+          })
+        )}
+      </React.Fragment>
+    );
+  } else {
+    return <span className={classNames(utilityClasses)}>{children}</span>;
+  }
+};