[EuiPopover] Default to ownFocus (elastic#4228)

* Defaulting to ownfocus * Defaulting ownFocus to true * Trap focus example * Removing ownFocus prop * Adding CL * Test for default ownFocus and tour step popover ownFocus changed to false. * Update src-docs/src/views/popover/popover_example.js Co-authored-by: Caroline Horn <[email protected]> * Fixing tests Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Chandler Prall <[email protected]>
chandlerprall · Nov 11, 2020 · da291a1 · da291a1
1 parent 85e7a92
commit da291a1
Show file tree

Hide file tree

Showing 39 changed files with 145 additions and 151 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - 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,7 +98,6 @@ 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,7 +146,6 @@ 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,8 +95,7 @@ const SelectionButton = () => {
             selected
           </EuiButtonEmpty>
         }
-        closePopover={() => setIsPopoverOpen(false)}
-        ownFocus={true}>
+        closePopover={() => setIsPopoverOpen(false)}>
         <EuiPopoverTitle>
           {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}
         </EuiPopoverTitle>
@@ -265,8 +264,7 @@ const trailingControlColumns = [
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={true}>
+            closePopover={() => setIsPopoverOpen(false)}>
             <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,8 +179,7 @@ const trailingControlColumns = [
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
               />
             }
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={true}>
+            closePopover={() => setIsPopoverOpen(false)}>
             <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,7 +155,6 @@ export default () => {
         }
         isOpen={example1.isOpen}
         closePopover={closeExample1}
-        ownFocus
         display="block"
         panelPaddingSize="s"
         anchorPosition="downLeft">
@@ -176,7 +175,6 @@ 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,7 +143,6 @@ export default () => {
           }
           isOpen={example1.isOpen}
           closePopover={closeExample1}
-          ownFocus
           panelPaddingSize="s"
           anchorPosition="downLeft">
           {renderPopover1()}
@@ -164,7 +163,6 @@ 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,7 +71,6 @@ 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,7 +84,6 @@ 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,7 +112,6 @@ export default () => {
     <div>
       <EuiPopover
         id="inlineFormPopover"
-        ownFocus
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}>
@@ -121,7 +120,6 @@ 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,7 +161,6 @@ const HeaderUserMenu = () => {
   return (
     <EuiPopover
       id={id}
-      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"
@@ -286,7 +285,6 @@ const HeaderSpacesMenu = () => {
   return (
     <EuiPopover
       id={id}
-      ownFocus
       button={button}
       isOpen={isOpen}
       anchorPosition="downLeft"
@@ -358,7 +356,6 @@ 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,7 +277,6 @@ 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,7 +145,6 @@ export default ({ theme }) => {
   const userMenu = (
     <EuiPopover
       id="guideHeaderUserMenuExample"
-      ownFocus
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
@@ -181,7 +180,6 @@ export default ({ theme }) => {
   const spacesMenu = (
     <EuiPopover
       id="guideHeaderSpacesMenuExample"
-      ownFocus
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
@@ -217,7 +215,6 @@ 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,7 +17,6 @@ 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,7 +86,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -104,7 +103,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -122,7 +120,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -144,7 +141,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -162,7 +158,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -180,7 +175,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -202,7 +196,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -220,7 +213,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -238,7 +230,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -260,7 +251,6 @@ export default () => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -278,7 +268,6 @@ export default () => {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            ownFocus
             button={
               <EuiButton
                 iconType="arrowDown"
@@ -296,7 +285,6 @@ 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,7 +17,6 @@ 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,7 +29,6 @@ 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,22 +59,21 @@ 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}
@@ -83,7 +82,6 @@ const popoverAnchorSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitleSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}>
@@ -93,7 +91,6 @@ const popoverWithTitleSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverPanelClassNameSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -103,7 +100,6 @@ const popoverPanelClassNameSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverWithTitlePaddingSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -114,7 +110,6 @@ const popoverWithTitlePaddingSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverContainerSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -123,7 +118,6 @@ const popoverContainerSnippet = `<EuiPopover
 </EuiPopover>`;
 
 const popoverFixedSnippet = `<EuiPopover
-  ownFocus
   button={button}
   isOpen={isPopoverOpen}
   closePopover={closePopover}
@@ -132,7 +126,6 @@ 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,7 +28,6 @@ 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,7 +19,6 @@ 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,7 +11,6 @@ export default () => {
 
   return (
     <EuiPopover
-      ownFocus
       button={
         <EuiButton
           iconType="arrowDown"