From 2c84c01885453ac2fbc8f2dcae0105cd09027fc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Gonz=C3=A1lez?= Date: Sun, 1 Dec 2024 01:51:57 -0400 Subject: [PATCH 1/3] [DefaultItemAction] Tooltip is shown if disabled. - Workaround to solve cursor not-allowed issue with button icon pointer events none, using a wrapper div. --- .../basic_table/basic_table.styles.ts | 4 ++++ .../basic_table/default_item_action.styles.ts | 17 +++++++++++++++++ .../basic_table/default_item_action.tsx | 19 ++++++++----------- 3 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 packages/eui/src/components/basic_table/default_item_action.styles.ts diff --git a/packages/eui/src/components/basic_table/basic_table.styles.ts b/packages/eui/src/components/basic_table/basic_table.styles.ts index 2aaea2280e0..21810ce4395 100644 --- a/packages/eui/src/components/basic_table/basic_table.styles.ts +++ b/packages/eui/src/components/basic_table/basic_table.styles.ts @@ -57,3 +57,7 @@ export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css` export const safariLoadingWorkaround = css` position: relative; `; + +export const iconButtonWrapper = css` + cursor: not-allowed; +`; diff --git a/packages/eui/src/components/basic_table/default_item_action.styles.ts b/packages/eui/src/components/basic_table/default_item_action.styles.ts new file mode 100644 index 00000000000..ccdc1e8573a --- /dev/null +++ b/packages/eui/src/components/basic_table/default_item_action.styles.ts @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +export const euiIconButtonWrapperStyles = () => { + return { + isDisabled: css` + cursor: not-allowed; + `, + }; +}; diff --git a/packages/eui/src/components/basic_table/default_item_action.tsx b/packages/eui/src/components/basic_table/default_item_action.tsx index e026adf6ceb..b4ff31c97e4 100644 --- a/packages/eui/src/components/basic_table/default_item_action.tsx +++ b/packages/eui/src/components/basic_table/default_item_action.tsx @@ -22,6 +22,8 @@ import { DefaultItemAction as Action, callWithItemIfFunction, } from './action_types'; +import { useEuiMemoizedStyles } from '../../services'; +import { euiIconButtonWrapperStyles } from './default_item_action.styles'; export interface DefaultItemActionProps { action: Action; @@ -65,6 +67,9 @@ export const DefaultItemAction = ({ let ariaLabelledBy: ReactNode; let button; + const styles = useEuiMemoizedStyles(euiIconButtonWrapperStyles); + const cssStyles = [styles.isDisabled]; + if (action.type === 'icon') { if (!icon) { throw new Error(`Cannot render item action [${action.name}]. It is configured to render as an icon but no @@ -81,9 +86,6 @@ export const DefaultItemAction = ({ href={href} target={action.target} data-test-subj={dataTestSubj} - // If action is disabled, the normal tooltip can't show - attempt to - // provide some amount of affordance with a browser title tooltip - title={!enabled ? tooltipContent : undefined} /> ); // actionContent (action.name) is a ReactNode and must be rendered @@ -112,19 +114,14 @@ export const DefaultItemAction = ({ ); } - return enabled ? ( - <> + return ( +
{button} {/* SR text has to be rendered outside the tooltip, otherwise EuiToolTip's own aria-labelledby won't properly clone */} {ariaLabelledBy} - - ) : ( - <> - {button} - {ariaLabelledBy} - +
); }; From 4f9d54d2cbfda9a571dc86c47c28594dac9371d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Gonz=C3=A1lez?= Date: Sun, 1 Dec 2024 02:04:07 -0400 Subject: [PATCH 2/3] [DefaultItemAction] Snapshot reloaded to pass tests --- .../__snapshots__/basic_table.test.tsx.snap | 168 ++++++++++-------- .../default_item_action.test.tsx.snap | 74 ++++---- .../expanded_item_actions.test.tsx.snap | 58 +++--- 3 files changed, 170 insertions(+), 130 deletions(-) diff --git a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 8f693343da0..7e5fda4ff04 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -485,42 +485,50 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
- - - - + +
+
- - + + +