[EuiBasicTable][EuiInMemoryTable] Fix collapsed custom actions render…

…ing an extra `<button>` wrapper + cleanup (#7361)
elastic · Nov 14, 2023 · 1b1d980 · 1b1d980
1 parent dfae45c
commit 1b1d980
Show file tree

Hide file tree

Showing 9 changed files with 432 additions and 318 deletions.
diff --git a/changelogs/upcoming/7361.md b/changelogs/upcoming/7361.md
@@ -0,0 +1,5 @@
+- Improved `EuiBasicTable`/`EuiInMemoryTable's mobile UI for custom actions
+
+**Accessibility**
+
+- Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions
diff --git a/src-docs/src/views/tables/actions/actions.tsx b/src-docs/src/views/tables/actions/actions.tsx
@@ -171,6 +171,11 @@ export default () => {
               );
             },
           },
+          {
+            render: () => {
+              return <EuiLink onClick={() => {}}>Edit</EuiLink>;
+            },
+          },
           ...actions,
         ];
       }

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -1,6 +1,219 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CollapsedItemActions render 1`] = `
+exports[`CollapsedItemActions custom actions 1`] = `
+<body>
+  <div>
+    <div
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
+      id="id-actions"
+    >
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <button
+          aria-label="All actions"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
+          data-test-subj="euiCollapsedItemActionsButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="boxesHorizontal"
+          />
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-left"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: -22px; left: -16px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-left"
+          data-popover-arrow="left"
+          style="left: 0px; top: 10px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          <div
+            class="euiContextMenuPanel euiBasicTable__collapsedActions emotion-euiContextMenuPanel"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                class="euiContextMenuItem euiBasicTable__collapsedCustomAction emotion-euiContextMenuItem-m-center"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <span>
+                    <button
+                      data-test-subj="customAction"
+                    >
+                      hello
+                    </button>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="euiContextMenuItem euiBasicTable__collapsedCustomAction emotion-euiContextMenuItem-m-center"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  <span>
+                    <a
+                      href="#"
+                    >
+                      world
+                    </a>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`CollapsedItemActions default actions 1`] = `
+<body>
+  <div>
+    <div
+      class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
+      id="id-actions"
+    >
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <button
+          aria-label="All actions"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
+          data-test-subj="euiCollapsedItemActionsButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="boxesHorizontal"
+          />
+        </button>
+      </span>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-left"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: -22px; left: -16px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="euiPopover__arrow emotion-euiPopoverArrow-left"
+          data-popover-arrow="left"
+          style="left: 0px; top: 10px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. Press Escape, or tap/click outside the dialog to close.
+        </p>
+        <div>
+          <div
+            class="euiContextMenuPanel euiBasicTable__collapsedActions emotion-euiContextMenuPanel"
+            tabindex="-1"
+          >
+            <div>
+              <button
+                class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
+                data-test-subj="defaultAction"
+                type="button"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  default1
+                </span>
+              </button>
+              <a
+                class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
+                href="https://www.elastic.co/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                >
+                  default2
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`CollapsedItemActions renders 1`] = `
 <div
   class="euiPopover emotion-euiPopover-inline-block"
   id="id-actions"
@@ -24,52 +237,3 @@ exports[`CollapsedItemActions render 1`] = `
   </span>
 </div>
 `;
-
-exports[`CollapsedItemActions render with href and _target provided 1`] = `
-<EuiPopover
-  anchorPosition="leftCenter"
-  button={
-    <EuiI18n
-      default="All actions"
-      token="euiCollapsedItemActions.allActions"
-    >
-      [Function]
-    </EuiI18n>
-  }
-  closePopover={[Function]}
-  display="inline-block"
-  hasArrow={true}
-  id="id-actions"
-  isOpen={true}
-  ownFocus={true}
-  panelPaddingSize="none"
-  popoverRef={[Function]}
-  repositionToCrossAxis={true}
->
-  <EuiContextMenuPanelClass
-    items={
-      Array [
-        <EuiContextMenuItem
-          disabled={false}
-          onClick={[Function]}
-        >
-          default1
-        </EuiContextMenuItem>,
-        <EuiContextMenuItem
-          onClick={[Function]}
-        >
-          <div />
-        </EuiContextMenuItem>,
-        <EuiContextMenuItem
-          disabled={false}
-          href="https://www.elastic.co/"
-          onClick={[Function]}
-          target="_blank"
-        >
-          default2
-        </EuiContextMenuItem>,
-      ]
-    }
-  />
-</EuiPopover>
-`;
diff --git a/src/components/basic_table/__snapshots__/custom_item_action.test.tsx.snap b/src/components/basic_table/__snapshots__/custom_item_action.test.tsx.snap
@@ -4,10 +4,7 @@ exports[`CustomItemAction render 1`] = `
 <div
   className="test"
 >
-  <span
-    onBlur={[Function]}
-    onFocus={[Function]}
-  >
+  <span>
     test
   </span>
 </div>

diff --git a/src/components/basic_table/action_types.ts b/src/components/basic_table/action_types.ts
@@ -72,7 +72,7 @@ export type DefaultItemAction<T> = ExclusiveUnion<
 
 export interface CustomItemAction<T> {
   /**
-   * The function that renders the action. Note that the returned node is expected to have `onFocus` and `onBlur` functions
+   * Allows rendering a totally custom action
    */
   render: (item: T, enabled: boolean) => ReactElement;
   /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -171,6 +171,11 @@ export default () => { @@
                   );
                 },
               },
+              {
+                render: () => {
+                  return <EuiLink onClick={() => {}}>Edit</EuiLink>;
+                },
+              },
               ...actions,
             ];
           }
@@ Expand Down @@