Skip to content

Button: replace :has([data-kbd-chord]) with a data attribute set from React #8724

Open

Description

@mattcosta7

Part of #8676 (P3).

Problem

Button/ButtonBase.module.css:28 and :217 use &:has([data-kbd-chord]), which applies to every Button. A :has() selector makes the browser re-check the button whenever its descendants change. Earlier work (#8115, #7901) removed many similar :has() selectors.

Proposed fix

Set a data-* attribute on the button from React when it renders a keybinding hint, as ActionList does for its item state. Then select on that attribute instead of :has().

Acceptance criteria

  • ButtonBase.module.css no longer uses :has([data-kbd-chord]).
  • Buttons with and without a keybinding hint look the same as before. Check the VRT snapshots for the affected stories.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions