feat(button): add the onClick attribute on link

[m-maillot]

On souhaite pouvoir suivre les clicks sur nos liens. Pour cela, on utilise le onClick sur l'attribut HTML pour alerter notre solution de tracking.

Je pense qu'ajouter la possibilité de définir le onClick sur un button de type lien est une bonne chose.

[ddecrulle]

onClick is already present inside the type HTMLAnchorProps

[m-maillot]

@ddecrulle j'ai une erreur typescript de mon coté :

Type '{ children: string; linkProps: { href: string; onClick: () => void; }; iconId: "fr-icon-arrow-right-fill"; iconPosition: "right"; onClick: () => void; priority: "tertiary"; }' is not assignable to type 'IntrinsicAttributes & (Common & (IconOnly | WithIcon | WithoutIcon) & ((AsAnchor & RefAttributes<HTMLAnchorElement>) | (AsButton & RefAttributes<...>)))'.
  Types of property 'onClick' are incompatible.
    Type '() => void' is not assignable to type 'undefined'.

Voici le code :

    <Button
      linkProps={{
        href: props.buttonLink,
        onClick: () => { console.log("Click !")},
      }}
      iconId="fr-icon-arrow-right-fill"
      iconPosition="right"
      onClick={props.onButtonClick}
      priority="tertiary"
    >
      Label button
    </Button>

Il me dit bien que onClick n'est pas présent dans mon cas.

[garronej]

Hello @m-maillot,

the props of the Link component is something that is suposed to be provided by you.
Can you help us understand your configuration?

[garronej]

What routing lib integration do you implement?

https://react-dsfr.codegouv.studio/routing

[m-maillot]

I use next.js app routing

[garronej]

can you link to your startDsfr.ts setup?

[m-maillot]

Yes, it's here : https://github.com/SocialGouv/code-du-travail-numerique/blob/dev/packages/code-du-travail-frontend/src/modules/config/StartDsfr.tsx#L15

[garronej]

So just to make sure, I tried in the Starter for Next App Router and I'm not getting any type error:

Can you maybe fork https://github.com/garronej/react-dsfr-next-appdir-demo, make the change that doesn't work and share it with us?

[m-maillot]

Ok, I see... it's my fault. In my sample, I use linkProps and onClick at the same time :

<Button
      linkProps={{
        href: props.buttonLink,
        onClick: () => { console.log("Click !")},
      }}
      iconId="fr-icon-arrow-right-fill"
      iconPosition="right"
      onClick={props.onButtonClick} // <---- HERE
      priority="tertiary"
    >

Delete the onClick attribute and it works well ! Sorry 🙇

[garronej]

Haha no worries.
I often wonder if we shouldn't make the type safety a little less strict because a lot of time it ends up confusing users because the type related errors messages are cryptic and there's no way to customize them...