Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiBasicTable][EuiInMemoryTable] Fix collapsed custom actions rendering an extra <button> wrapper + cleanup #7361

Merged
merged 8 commits into from
Nov 14, 2023
Merged

[EuiBasicTable][EuiInMemoryTable] Fix collapsed custom actions rendering an extra <button> wrapper + cleanup #7361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c5858b1
[docs] Fix table actions example not rendering the collapsed toggle f…
cee-chen Nov 14, 2023
cd5f6ac
Fix custom actions to not render a `<button>` context menu item
cee-chen Nov 14, 2023
f5c6554
[misc] Add targetable classNames
cee-chen Nov 14, 2023
ea89a13
Improve tests
cee-chen Nov 14, 2023
f0b17d9
[cleanup] Remove totally unnecessary focus/blur JS logic on custom ac…
cee-chen Nov 14, 2023
a5ea254
[optional][tech debt] Convert from class components to function compo…
cee-chen Nov 14, 2023
40df74f
[enhancement] Improve mobile display of custom actions
cee-chen Nov 14, 2023
5fe0e6a
changelog typo
cee-chen Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions changelogs/upcoming/7361.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
- Improved `EuiBasicTable`/`EuiInMemoryTable's mobile UI for custom actions

**Accessibility**

- Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions
5 changes: 5 additions & 0 deletions src-docs/src/views/tables/actions/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,11 @@ export default () => {
);
},
},
{
render: () => {
return <EuiLink onClick={() => {}}>Edit</EuiLink>;
},
},
...actions,
];
}
Expand Down
264 changes: 214 additions & 50 deletions src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
`;
5 changes: 1 addition & 4 deletions src/components/basic_table/__snapshots__/custom_item_action.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ exports[`CustomItemAction render 1`] = `
<div
className="test"
>
<span
onBlur={[Function]}
onFocus={[Function]}
>
<span>
test
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/basic_table/action_types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down
Loading
Loading