Skip to content

Button: Outline variant hover border is not applied correctly #2392

@mijpeterson

Description

@mijpeterson

Description

"outline" variant Buttons, on hover, do not apply the theme's hoverBorder color.
image

This is likely due to a typo inside the Button styles file: https://github.com/primer/react/blob/main/src/Button/styles.ts#L135

That line is currently written as:

borderColor: 'outline.hoverBorder',

when it should probably be written as:

borderColor: 'btn.outline.hoverBorder',

Steps to reproduce

  1. Navigate to https://codesandbox.io/s/twilight-fire-1qpyl1?file=/src/App.js
  2. Open the dev tools and inspect the button
  3. Simulate the hover state on the button
  4. Observe the button's CSS property:
    image

Version

35.10.0

Browser

Edge

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingreact

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions