[IndexTable] allow ReactNode as heading title

[sylvhama]

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/7120

The goal is to be able to pass anything to title without breaking existing implementations.

WHAT is this pull request doing?

Update typing and keys in order to be able to do something like: https://codesandbox.io/s/tooltips-examples-75cc9c?file=/App.js without triggering JS warnings or TS errors.

• title string no id: nothing changes for this, the title will be used as a key and a warning will be triggered if they use twice the same key. The id is optional but it can still be passed (btw regarding title, string is a valid ReactNode).
• title JSX with id: the id will be used as a key. If you omit passing the id then a TS error will trigger.
• no title no id: TS will complain plus React will trigger the key warnings.Some people might not use TS so having a fallback empty string might help to raise awareness since it will trigger a React warning.

Screenshots of TS errors

jsx title but no id

id present but no title

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

You could re-create https://codesandbox.io/s/tooltips-examples-75cc9c?file=/App.js in your playground.

🎩 checklist

• [x] Tested on mobile
• [x] Tested on multiple browsers
• [x] Tested for accessibility
• [ ] Updated the component's README.md with documentation changes
• [ ] Tophatted documentation changes in the style guide

[sylvhama]

/shrimpit

[carolopolo]

🦐 @sylvhama this repo is not shipit integrated 😄

[ginabak]

hi hi @carolopolo! Could we ship this post rebase? We'd love to push this alongggg 👀 ♥️