react icon indicating copy to clipboard operation
react copied to clipboard

Button props spilling to DOM element

Open cbix opened this issue 3 years ago • 0 comments

Description

The Button props leadingIcon, trailingIcon, variant and size are being passed down to the button or custom (polymorphic) component, leading to React warnings like

Warning: React does not recognize the `leadingIcon` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `leadingicon` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This happens because these props are not destructured like the others, however they serve no purpose outside the ButtonBase logic:

https://github.com/primer/react/blob/9eaa37e98b8cd12a0b953f190bcbff0f26a3dd22/src/Button/ButtonBase.tsx#L11 https://github.com/primer/react/blob/9eaa37e98b8cd12a0b953f190bcbff0f26a3dd22/src/Button/ButtonBase.tsx#L20

Steps to reproduce

With this code using react-router

<Button variant="outline" leadingIcon={MarkGithubIcon} as={Link} to="/github">Test</Button>

and development mode, check the console logs, they should give the warning mentioned above.

Version

v35.6.0

Browser

Chrome

cbix avatar Sep 20 '22 09:09 cbix