Skip to content

Conversation

@hatfieldMichael
Copy link

Removing pointer events from disabled button components.

Description

Disabled buttons shouldn't interact with the cursor and suggest to the user that they are interactive elements.

@aduth
Copy link
Contributor

aduth commented Dec 21, 2021

I'm not a maintainer, but I wonder if this is something where the cursor: pointer styles should be unset or not applied when the button is disabled.

I would expect native browser behavior to handle the default disabled interaction. If the design system wants to add a "pointer" styling to indicate that a button is interactive, it should only do so for buttons which are actually interactive (i.e. not disabled buttons).

@hatfieldMichael
Copy link
Author

It's not just the changes to the cursor, either, it seems like if you do things like make an outlined button disabled you get unintentional style changes on hover.

Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, @hatfieldMichael. Thanks for the contribution!

The cursor: pointer styling was removed in release 2.12.0 in PR #4132. The issue at that time was to prevent users from adding the .usa-button--disabled class and instead have them use the disabled attribute.

I agree with @aduth, maybe we should remove cursor: pointer; on .usa-button:15 and add it to non-disabled buttons.

.usa-button {
  …

  &:not([disabled]) {
    cursor: pointer;
  }

@mejiaj mejiaj self-assigned this Jan 31, 2022
@mejiaj mejiaj assigned mahoneycm and unassigned mejiaj Mar 4, 2022
@mejiaj
Copy link
Contributor

mejiaj commented Apr 19, 2023

@mahoneycm can you confirm if this issue still applies with your work on disabled styles?

@mahoneycm
Copy link
Contributor

@mejiaj #5063 should address these issues

Disabled form elements, including button, will receive cursor: not-allowed and will not be affected when in hover or active states

@mahoneycm
Copy link
Contributor

Closing in favor of #5063

@mahoneycm mahoneycm closed this Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants