v4: Add interaction utils

[mdo]

This might be overstepping things for our next v4 release, but I noticed how highly requested the .cursor-pointer utility was in #23709 and couldn't help but stub out a PR to address it. I've taken the v5 approach of an interactions page and included this new util, and the user-select one from v5. Decided not to include pointer-events utils because of browser compatibility.

I'd really like to ship small enhancements to v4 for folks with highly requested features like this, especially if it helps bridge the gap between v4 and v5. My biggest question is how we version/release this though.

Do we squeeze this into a v4.4.2 despite of it being a new feature and thus requiring a semver minor bump? Or do we upgrade v4.4.2 to v4.5?

[XhmikosR]

Squashed the patches.

TBH I'd prefer it if we didn't make it a new minor release. On the other hand, semver...

Let's wait for the others to chime in.

[MartijnCuppens]

I'd prefer it if we didn't make it a new minor release

I agree

[mdo]

Revisiting this, if @twbs/css-review is into it, I'm inclined to sneak this into v4.4.2 to help close the gap between v4 and v5. Really think this will be some solid good will for our users :).

[XhmikosR]

We never followed semver 100% and this, at least, is not a breaking change, so I think we can add it.

[MartijnCuppens]

I'm gonna stick with what I said in #30563 (comment). I don't want people to abuse this property.

What I am willing to consider is adding

[role="button"] {
  cursor: pointer;
}

to reboot since this will be required anyway.

[XhmikosR]

That's a valid concern of course, but on the other hand, one can buy a gun legally (in some countries); if they kill someone the store cannot be held liable for any murders. 😇

But I definitely see your point. Maybe if we added a warning callout it'd be better?

[ffoodd]

I'd be on both sides on this one:

• I agree with @MartijnCuppens about cursors and don't think it should be a utility at all. I already know tons of people who'd just add a div with .btn things and .cursor-pointer—and it'll probably be bad. [role="button"] seems more accurate.
• user-select on the other hand seems handy, I don't see any weird use cases (but I may be a bit naive on this).

[mdo]

Updated to reflect the team's feedback! Thanks y'all.

[ffoodd]

Shouldn't [role="button"] sit in reboot, as suggested by @MartijnCuppens? I think it shouldn't be considered as a utility since it needs accessibility and scripting considerations to ne used the right way.

Maybe even provide a sentence with explanation or link?

[mdo]

Think I got the feedback applied @MartijnCuppens and @ffoodd. Let me know with any suggested changes or review comments if there's something I can clarify more in the docs <3.

[ffoodd]

LGTM. We'll probably add some warning about the button role usage, but I think it's more @patrickhlauke's business here.

[MartijnCuppens]

[XhmikosR]

FYI the utilities/interactions.scss wasn't included in utilities.scss. I fixed this in my v4-dev PR #30768.