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

Improve Button disabled styles #4611

Closed
magicznyleszek opened this issue Sep 4, 2023 · 0 comments
Closed

Improve Button disabled styles #4611

magicznyleszek opened this issue Sep 4, 2023 · 0 comments
Assignees
Labels
enhancement Ideas, improvements and features Front end UI & UX User interface problems and improvements

Comments

@magicznyleszek
Copy link
Member

Description

We need the tooltip for disabled button to work.

Ideas

We can modify the Button component to stop using pointer-events (and opacity: 0.5) and thus allowing tooltips to work on disabled button. We would need to add some :not([disabled]) for some selectors (like hover styles or cursor) - to be checked if doable.

Make tooltips readable. In our design system, disabled buttons are styled with opacity: 0.5. All DOM descendents including tooltips can never be more than 50% opaque after that, so tooltips would need a wrapper anyway or do css hacks case-per-case (possible here because of single icon buttons, but not feasible in the general case.) I don't see a good way forward with this, other than to normalize tooltip wrappers, or redesign disabled buttons (and any other input fields where this would apply).

We might alternatively make the button.tsx file wrap the button if tooltip was provided.

The override

For now let's use <span data-tip={t('Blah blah')}> wrapper for button :)

Additional details

See #4580 (comment)

@magicznyleszek magicznyleszek added enhancement Ideas, improvements and features UI & UX User interface problems and improvements Front end labels Sep 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Ideas, improvements and features Front end UI & UX User interface problems and improvements
Projects
None yet
Development

No branches or pull requests

2 participants