Revert "[EuiPopover] Default to ownFocus (elastic#4228)"

This reverts commit da291a1.
chandlerprall · Nov 25, 2020 · 74841de · 74841de
1 parent c0b8a25
commit 74841de
Show file tree

Hide file tree

Showing 39 changed files with 151 additions and 145 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,7 +46,6 @@
 
 - Added `EuiColorPaletteDisplay` component ([#3865](https://github.com/elastic/eui/pull/3865))
 - Added `initialFocusedItemIndex` support to `EuiContextMenuPanelDescriptor` ([#4223](https://github.com/elastic/eui/pull/4223))
-- Updated the default of the `EuiPopover`s `ownFocus` prop from `false` to `true` ([#4228](https://github.com/elastic/eui/pull/4228))
 - Added `role="alert"` and `aria-live="assertive"` to `EuiForm`'s `EuiCallOut` for the errors ([#4238](https://github.com/elastic/eui/pull/4238))
 - Added `menuDown` and `menuUp` glyphs to `EuiIcon` ([#4244](https://github.com/elastic/eui/pull/4244))
 - Removed spacer after `childrenBetween` in `EuiInMemoryTable` ([#4248](https://github.com/elastic/eui/pull/4248))

diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
@@ -98,6 +98,7 @@ export default () => {
       <EuiFormRow label="Unruly focus management">
         <EuiPopover
           id="popover"
+          ownFocus={true}
           button={button}
           isOpen={isPopoverOpen}
           closePopover={closePopover}>

diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js
@@ -146,6 +146,7 @@ export default () => {
 
       <EuiPopover
         id="popover"
+        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}>

diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js
@@ -95,7 +95,8 @@ const SelectionButton = () => {
             selected
           </EuiButtonEmpty>
         }
-        closePopover={() => setIsPopoverOpen(false)}>
+        closePopover={() => setIsPopoverOpen(false)}
+        ownFocus={true}>
         <EuiPopoverTitle>
           {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}
         </EuiPopoverTitle>
@@ -264,7 +265,8 @@ const trailingControlColumns = [
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}>
+            closePopover={() => setIsPopoverOpen(false)}
+            ownFocus={true}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
               <button onClick={() => {}} component="span">

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -179,7 +179,8 @@ const trailingControlColumns = [
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}>
+            closePopover={() => setIsPopoverOpen(false)}
+            ownFocus={true}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
               <button onClick={() => {}} component="span">

diff --git a/src-docs/src/views/expression/columns.js b/src-docs/src/views/expression/columns.js
@@ -155,6 +155,7 @@ export default () => {
         }
         isOpen={example1.isOpen}
         closePopover={closeExample1}
+        ownFocus
         display="block"
         panelPaddingSize="s"
         anchorPosition="downLeft">
@@ -175,6 +176,7 @@ export default () => {
         }
         isOpen={example2.isOpen}
         closePopover={closeExample2}
+        ownFocus
         display="block"
         anchorPosition="downLeft">
         {renderPopover2()}

diff --git a/src-docs/src/views/expression/expression.js b/src-docs/src/views/expression/expression.js
@@ -143,6 +143,7 @@ export default () => {
           }
           isOpen={example1.isOpen}
           closePopover={closeExample1}
+          ownFocus
           panelPaddingSize="s"
           anchorPosition="downLeft">
           {renderPopover1()}
@@ -163,6 +164,7 @@ export default () => {
           }
           isOpen={example2.isOpen}
           closePopover={closeExample2}
+          ownFocus
           anchorPosition="downLeft">
           {renderPopover2()}
         </EuiPopover>

diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js
@@ -71,6 +71,7 @@ export default () => {
       </EuiFilterButton>
       <EuiPopover
         id="popover"
+        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}

diff --git a/src-docs/src/views/filter_group/filter_group_multi.js b/src-docs/src/views/filter_group/filter_group_multi.js
@@ -84,6 +84,7 @@ export default () => {
     <EuiFilterGroup>
       <EuiPopover
         id="popoverExampleMultiSelect"
+        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}

diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js
@@ -112,6 +112,7 @@ export default () => {
     <div>
       <EuiPopover
         id="inlineFormPopover"
+        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}>
@@ -120,6 +121,7 @@ export default () => {
       &emsp;
       <EuiPopover
         id="formPopover"
+        ownFocus
         button={button2}
         isOpen={isPopover2Open}
         closePopover={closePopover2}>

diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
@@ -161,6 +161,7 @@ const HeaderUserMenu = () => {
   return (
     <EuiPopover
       id={id}
+      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"
@@ -285,6 +286,7 @@ const HeaderSpacesMenu = () => {
   return (
     <EuiPopover
       id={id}
+      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downLeft"
@@ -356,6 +358,7 @@ const HeaderAppMenu = () => {
   return (
     <EuiPopover
       id={popoverId}
+      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"

diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
@@ -277,6 +277,7 @@ const HeaderUserMenu = () => {
   return (
     <EuiPopover
       id={id}
+      ownFocus
       repositionOnScroll
       button={button}
       isOpen={isOpen}

diff --git a/src-docs/src/views/header/header_elastic_pattern.js b/src-docs/src/views/header/header_elastic_pattern.js
@@ -145,6 +145,7 @@ export default ({ theme }) => {
   const userMenu = (
     <EuiPopover
       id="guideHeaderUserMenuExample"
+      ownFocus
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
@@ -180,6 +181,7 @@ export default ({ theme }) => {
   const spacesMenu = (
     <EuiPopover
       id="guideHeaderSpacesMenuExample"
+      ownFocus
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
@@ -215,6 +217,7 @@ export default ({ theme }) => {
   const deploymentMenu = (
     <EuiPopover
       id="guideHeaderDeploymentMenuExample"
+      ownFocus
       repositionOnScroll
       button={
         <EuiBadge

diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js
@@ -17,6 +17,7 @@ export default () => {
 
   return (
     <EuiPopover
+      ownFocus
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}>

diff --git a/src-docs/src/views/popover/popover_anchor_position.js b/src-docs/src/views/popover/popover_anchor_position.js
@@ -86,6 +86,7 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -103,6 +104,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -120,6 +122,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -141,6 +144,7 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -158,6 +162,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -175,6 +180,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -196,6 +202,7 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -213,6 +220,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -230,6 +238,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -251,6 +260,7 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -268,6 +278,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -285,6 +296,7 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
+            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"

diff --git a/src-docs/src/views/popover/popover_block.js b/src-docs/src/views/popover/popover_block.js
@@ -17,6 +17,7 @@ export default () => {
 
   return (
     <EuiPopover
+      ownFocus
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}

diff --git a/src-docs/src/views/popover/popover_container.js b/src-docs/src/views/popover/popover_container.js
@@ -29,6 +29,7 @@ export default () => {
   return (
     <EuiPanel panelRef={setPanelRef}>
       <EuiPopover
+        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}

diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
@@ -59,21 +59,22 @@ const inputPopoverSource = require('!!raw-loader!./input_popover');
 const inputPopoverHtml = renderToHtml(PopoverBlock);
 
 const popOverSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
   <!-- Popover content -->
 </EuiPopover>`;
 
 const trapFocusSnippet = `<EuiPopover
-  ownFocus={false}
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
   <!-- Popover content -->
 </EuiPopover>`;
 
 const popoverAnchorSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -82,6 +83,7 @@ const popoverAnchorSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitleSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
@@ -91,6 +93,7 @@ const popoverWithTitleSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverPanelClassNameSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -100,6 +103,7 @@ const popoverPanelClassNameSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitlePaddingSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -110,6 +114,7 @@ const popoverWithTitlePaddingSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverContainerSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -118,6 +123,7 @@ const popoverContainerSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverFixedSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -126,6 +132,7 @@ const popoverFixedSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverBlockSnippet = `<EuiPopover
+  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}

diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.js
@@ -28,6 +28,7 @@ export default () => {
       <EuiButton onClick={toggleExample}>Toggle example</EuiButton>
       {isExampleShown && (
         <EuiPopover
+          ownFocus
           button={button}
           isOpen={isPopoverOpen}
           closePopover={closePopover}

diff --git a/src-docs/src/views/popover/popover_htmlelement_anchor.js b/src-docs/src/views/popover/popover_htmlelement_anchor.js
@@ -19,6 +19,7 @@ const PopoverApp = (props) => {
 
   return (
     <EuiWrappingPopover
+      ownFocus
       button={props.anchor}
       isOpen={isPopoverOpen}
       closePopover={closePopover}>

diff --git a/src-docs/src/views/popover/popover_panel_class_name.js b/src-docs/src/views/popover/popover_panel_class_name.js
@@ -11,6 +11,7 @@ export default () => {
 
   return (
     <EuiPopover
+      ownFocus
       button={
         <EuiButton
           iconType="arrowDown"