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.

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

[DefaultItemAction] Tooltip now is shown when DefaultItemAction is disabled #8209

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Cedgo1997
Copy link

@Cedgo1997 Cedgo1997 commented Dec 7, 2024

Summary

This PR provides:

About implementation

  • Removed the option to show a native title when the item is disabled.
    image

  • Implemented a wrapper container to show the status not-allowed when it's disable. This workaround arose because when disabled, the user-select: none property overrode the not-allowed status, preventing the corresponding icon from being displayed. So, the solution was to apply the cursor: not-allowed, to a higher level wrapper.

image

  • A default_item_action.styles.ts file was added to include all the aditional styles to this new wrapper (and many more in the future if necessary for this component).

image

Here's a short video with the visible changes implemented:

2024-12-06.23-56-08.mp4

QA

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox (And Opera and Brave)
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- Workaround to solve cursor not-allowed issue with button icon pointer events none, using a wrapper div.
@Cedgo1997 Cedgo1997 requested a review from a team as a code owner December 7, 2024 04:09
Copy link

github-actions bot commented Dec 7, 2024

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant