EuiInputPopover docs (#2269)

* first pass * snippet * comments * more spacing before window edge * Update src-docs/src/views/popover/popover_example.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/popover/popover_example.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> * CL * Update CHANGELOG.md Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · Sep 5, 2019 · 4ac7d29 · 4ac7d29
1 parent 7edd069
commit 4ac7d29
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added href prop to `EuiTab` and converted to TypeScript ([#2275](https://github.com/elastic/eui/pull/2275))
+- Created `EuiInputPopover` component (formally) ([#2269](https://github.com/elastic/eui/pull/2269))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/popover/input_popover.js b/src-docs/src/views/popover/input_popover.js
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import {
+  EuiInputPopover,
+  EuiFieldText,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => {
+  const [inputWidth, setInputWidth] = useState(200);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isPopoverOpenTwo, setIsPopoverOpenTwo] = useState(false);
+  const toggleIsPopoverOpen = (shouldBeOpen = !isPopoverOpen) => {
+    setIsPopoverOpen(shouldBeOpen);
+  };
+  const toggleIsPopoverOpenTwo = (shouldBeOpen = !isPopoverOpenTwo) => {
+    setIsPopoverOpenTwo(shouldBeOpen);
+  };
+
+  const input = <EuiFieldText onFocus={() => toggleIsPopoverOpen()} />;
+
+  const inputTwo = (
+    <EuiFieldText
+      onFocus={() => {
+        setInputWidth(400);
+        toggleIsPopoverOpenTwo();
+      }}
+      style={{ width: inputWidth }}
+    />
+  );
+
+  return (
+    <React.Fragment>
+      <EuiInputPopover
+        id="popover"
+        input={input}
+        isOpen={isPopoverOpen}
+        closePopover={() => {
+          toggleIsPopoverOpen(false);
+        }}>
+        Popover content
+      </EuiInputPopover>
+
+      <EuiSpacer />
+
+      <EuiInputPopover
+        id="popover"
+        input={inputTwo}
+        isOpen={isPopoverOpenTwo}
+        closePopover={() => {
+          toggleIsPopoverOpenTwo(false);
+          setInputWidth(200);
+        }}>
+        Popover will adjust in size as the input does
+      </EuiInputPopover>
+
+      <EuiSpacer size="xxl" />
+    </React.Fragment>
+  );
+};
diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
@@ -6,6 +6,7 @@ import { GuideSectionTypes } from '../../components';
 
 import {
   EuiCode,
+  EuiInputPopover,
   EuiPopover,
   EuiPopoverTitle,
   EuiPopoverFooter,
@@ -51,6 +52,10 @@ import PopoverBlock from './popover_block';
 const popoverBlockSource = require('!!raw-loader!./popover_block');
 const popoverBlockHtml = renderToHtml(PopoverBlock);
 
+import InputPopover from './input_popover';
+const inputPopoverSource = require('!!raw-loader!./input_popover');
+const inputPopoverHtml = renderToHtml(PopoverBlock);
+
 const popOverSnippet = `<EuiPopover
   button={button}
   isOpen={this.state.isPopoverOpen}
@@ -126,6 +131,13 @@ const popoverBlockSnippet = `<EuiPopover
   <!-- Popover anchor is display block -->
 </EuiPopover>`;
 
+const inputPopoverSnippet = `<EuiInputPopover
+  input={input}
+  isOpen={this.state.isPopoverOpen}
+  closePopover={this.closePopover}>
+  <!-- Popover content attached to input -->
+</EuiInputPopover>`;
+
 export const PopoverExample = {
   title: 'Popover',
   sections: [
@@ -386,5 +398,42 @@ export const PopoverExample = {
       snippet: popoverBlockSnippet,
       demo: <PopoverBlock />,
     },
+    {
+      title: 'Popover attached to input element',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inputPopoverSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: inputPopoverHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            <EuiCode>EuiInputPopover</EuiCode> is a specialized popover
+            component intended to be used with form elements. Stylistically, the
+            popover panel is
+            {'"attached"'} to the input. Functionally, consumers have control
+            over what events open and close the popover, and it can allow for
+            natural tab order.
+          </p>
+          <p>
+            Although some assumptions are made about keyboard behavior,
+            consumers should provide specific key event handlers depending on
+            the use case. For instance, a <EuiCode>type=text</EuiCode> input
+            could use the down key to trigger popover opening, but this
+            interaction would not be appropriate for{' '}
+            <EuiCode>type=number</EuiCode> inputs as they natively bind to the
+            down key.
+          </p>
+        </div>
+      ),
+      props: { EuiInputPopover },
+      snippet: inputPopoverSnippet,
+      demo: <InputPopover />,
+    },
   ],
 };
diff --git a/src/components/index.js b/src/components/index.js
@@ -204,6 +204,7 @@ export { EuiPagination, EuiPaginationButton } from './pagination';
 export { EuiPanel } from './panel';
 
 export {
+  EuiInputPopover,
   EuiPopover,
   EuiPopoverTitle,
   EuiPopoverFooter,