Use transient prop to avoid passing fallback to underlying div

[ckolderup]

Since the recent upgrade to a newer version of styled-components we've been seeing the error (labeled a warning, but counted as an error in the developer tools) below on all page loads, due to the tooltip component's fallback prop.

Warning: Received `false` for a non-boolean attribute `fallback`.

Warning: Received `false` for a non-boolean attribute \`fallback\`.

If you want to write it to the DOM, pass a string instead: fallback="false" or fallback={value.toString()}.

If you used to conditionally omit it with fallback={condition && value}, pass fallback={condition ? value : undefined} instead.

The problem is that when we pass the fallback attribute to the styled.div, it's giving that attribute to the div itself, which isn't a valid attribute. I'm not entirely sure why the warning claims that it's not a bool, because the fallback prop in the outer component is a boolean, but regardless, using a "transient prop" for the styled div fixes the problem when I use this canary build in the community repo.

📦 Published PR as canary version: 0.22.4--canary.142.351ff43.0

✨ Test out this PR locally via:

npm install @glitchdotcom/shared-components@0.22.4--canary.142.351ff43.0
# or 
yarn add @glitchdotcom/shared-components@0.22.4--canary.142.351ff43.0

[keithk]

THANK YOU I COULD NOT GET RID OF THIS WARNING

[keithk]

🚀 PR was released in v0.22.4 🚀