[shopify-app-remix] AppProvider breaks Polaris Button component external links

[joseph-carino]

Issue summary

Before opening this issue, I have:

• [X] Upgraded to the latest version of the relevant packages
  • @shopify/* package and version: @shopify/shopify-app-remix 3.0.0
  • Node version: 20.12.2
  • Operating system: OSX
• [ ] Set { logger: { level: LogSeverity.Debug } } in my configuration, when applicable
• [X] Found a reliable way to reproduce the problem that indicates it's a problem with the package
• [X] Looked for similar issues in this repository
• [X] Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

When an embedded app using the provided <AppProvider> component renders a Polaris <Button> component with the url and external properties set, the rendered button does not open in a new tab/window.

<AppProvider> overrides the LinkComponent, which is fine for links, but the Polaris Button component actually renders an UnstyledLink component when the url property is provided. The UnstyledLink normally sets the target on the rendered <a> when external is provided, but the intercepting RemixPolarisLink does not.

Expected behavior

For the following Polaris react component:

The rendered html should include target="_blank":

Actual behavior

For the same Polaris react component as above, the rendered html does not include target="_blank":

Steps to reproduce the problem

1. Create a new remix app using the shopify-app-remix-template template
2. Replace the <script> tag in app/routes/app.tsx with <AppProvider>, as instructed in the migration docs
3. Add a Polaris button component to the route, providing both the url and external properties

[matteodepalo]

Hi @joseph-carino thank you for reporting this issue, we'll take a look 👍 Is using the LinkComponent a valid workaround for you or do you need to use Button?