[Bug]: tooltipAlignment is being passed to DOM element incorrectly for Button component

[a88zach]

Package

@carbon/react

Browser

Chrome

Package version

1.54.0

React version

18.2.0

Description

When a Button component contains the tooltipAlignment property, the property is being passed incorrectly to the button DOM element causing a warning in the console. The use case here is that I want to display an icon only on small resolutions, but the full button with icon on larger screens

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

Reproduction/example

https://stackblitz.com/edit/github-ptctcq?file=src%2FApp.jsx

Steps to reproduce

Load the Stackblitz and open the console to see the warning generated

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Thanks for reporting this. A workaround for now would be to not set tooltipAlignment when hasIconOnly=false, but I do think we can guard against this inside the component as well.