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

[AlyonaSidarenka]

Package

@carbon/react

Browser

Chrome

Package version

1.54.0

React version

18.2.0

Description

When a Button component contains the tooltipPosition property, the property is being passed incorrectly to the button DOM element causing a warning in the console.

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

Reproduction/example

https://stackblitz.com/edit/github-ptctcq-gmqqna?file=src%2FApp.jsx%3AL8-L8&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

[2nikhiltom]

Hey @AlyonaSidarenka

I reviewed the stackblitz example you have shared.

Any specific reason why hasIconOnly prop is set to false in your example ? i.e hasIconOnly={false}
this is causing the reported issue

The tooltipAlignment prop: Specify the alignment of the tooltip to the icon-only button only.

Check this stackblitz_Example

[AlyonaSidarenka]

Thanks @2nikhiltom for the quick reply, I've updated the example to not use hasIconOnly prop, but still see the error in the console.
But according to the docs, tooltipAlignment and tooltipPosition should not be used in that case. So my "fix" must be to remove both props from that button.