Button props spilling to DOM element

[cbix]

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:

react/src/Button/ButtonBase.tsx

Line 11 in 9eaa37e

const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium'} = props

react/src/Button/ButtonBase.tsx

Line 20 in 9eaa37e

<StyledButton as={Component} sx={merge(sxStyles, sxProp as SxProp)} {...props} ref={forwardedRef}>

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

[rezrah]

Could this be happening because those props should be transient? https://styled-components.com/docs/api#transient-props

We'd need to upgrade styled-components to 5.1 from 4.4 (😬) to verify this, but this issue has been happening for a while in this library.