[Bug]: Title attribute for Tag component contains all children

[clouria]

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

v1.62.1

React version

^17.0.0

Description

According to the docs, https://react.carbondesignsystem.com/?path=/docs/components-tag--overview, the Tag component can have a children prop of type node. When given any type other than string as a child, the Tag component acts incorrectly. It adds all of the children to the Title attribute


This was added in this PR 96524a7#diff-bf61738276a5e024a5901f050aa6781f38a21104524c5fcfdf84c9bd8248e8ef

I believe the code is expecting the children to only be a string and in that case this works properly. A fix for this would be to allow a custom title to be passed down as a prop for these scenarios where the title can not be inferred from the child.

Reproduction/example

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

Steps to reproduce

1. Hover over the Tag and wait for a couple seconds for the Title text to show

Suggested Severity

Severity 3 = User can complete task, and/or has a 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

[emyarod]

the issue seems to be resolved via

carbon/packages/react/src/components/Tag/Tag.tsx

Lines 243 to 251 in 7f9d9b7

	<Text
	title={
	children !== null &&
	children !== undefined &&
	typeof children === 'string'
	? children
	: typeText
	}
	className={labelClasses}>

so it is recommended that you upgrade your project's version of Carbon to capture this bugfix!