[Feature]: TagItem v8 support of data-* attributes

[kxmatejka]

Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

There isn't any prop that would allow identify TagItem component. It is problematic for e2e testing and tracking user interactions when you need to keep track of clicks on tag items, for example, within TagPicker component.

My proposition is to allow at least data-id attribute in ITagItemProps. Alternatively, any data-* as in HTML.

These data-* props would be propagated to IconButton.

Proposed interface would allow:

<TagItem data-id={`${props.item.id}-filter`}>{props.item.name}</TagItem>

In combination with TagPicker

<TagPicker
  onRenderItem={(props) => <TagItem {...props} data-id={`${props.item.id}-filter`}>{props.item.name}</TagItem>}
/>

Which would generate following HTML:

<div data-selection-index="1" ...>
  <span class="ms-TagItem-text text-283" ...>Identity</span>
  <button type="button" ... data-id="1001-filter">
    <span class="ms-Button-flexContainer flexContainer-142" ...>
      <i data-icon-name="Cancel" ...></i>
    </span>
  </button>
  <span id="id__1808-removeLabel" ...>Remove</span>
</div>

If this makes sense to you, I'm willing to send the PR.

Have you discussed this feature with our team

Yes, internally

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

Normal

[kxmatejka]

I have a related issue with TagItemSuggestion. it supports data-* attributes, but it is a clickable div. Unfortunately, App Insights does not track clicks on div elements. If we change TagItemSuggestion from div to button, it should not break anything, it will be semantically correct and it will improve interoperability between FluentUi-App Insights.