Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
86 stars 9 forks source link

Type error with "variants" attribute on <a> tag in App Bridge v4 #312

Closed TheSecurityDev closed 6 months ago

TheSecurityDev commented 6 months ago

Describe the bug

In App Bridge v4, to put a TitleBar button with a link, or to add a breadcrumb, you have to add an <a> tag as a child of the ui-title-bar element. However, if you need to make it a breadcrumb or a primary action you have to specify the variant attribute on the element. This works, but I'm getting an error with the types that "variant" isn't a valid attribute:

Type '{ children: string; variant: string; href: string; onClick: () => void; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
  Property 'variant' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.ts(2322)

To Reproduce

Use the latest @shopify/app-bridge-react library, or have the types installed:

<ui-title-bar>
  <a href="/home" variant="breadcrumb">
    Home
  </a>
</ui-title-bar>;

image

Packages and versions

List the relevant packages you’re using, and their versions. For example:

Shopify App Bridge CDN version.

Platform

Additional context

NodeJS 19 with NextJS 14 and Typescript 5.4.2.

henrytao-me commented 6 months ago

This is fixed in @shopify/app-bridge-react@4.1.2 and @shopify/app-bridge-types@0.0.10