Add support for onClick function on <UserIcon /> component

[moumine9]

We are migrating some components to itwin flavour. Look at this example below :

For example in this case, we have an extra <UserIcon /> at the end with a plus sign. In a custom component we created the plus sign which is supposed to get the user outside of this page. With the itwin version, we were able to reproduce this behaviour by tweaking the image prop like this :

        <UserIcon
          key={"UserIconAdd"}
          className={classNames(styles.user, styles.add)}
          image={<SvgAdd onClick={onAddMember} />}
        />,

The dark bullet you see in the screenshot is supposed to do the same thing than the "+XX" bullet but because no icon is provided it's impossible.

I think it's best to add support for onClick() within those <UserIcon /> so that we have something like this.

        <UserIcon
          key={"UserIconAdd"}
          className={classNames(styles.user, styles.add)}
          image={<SvgAdd />}
          onClick={onAddMember}
        />,

[mayank99]

Hi @moumine9, have you seen our <UserIconGroup> component? https://itwin.github.io/iTwinUI-react/?path=/story/core-usericongroup--with-tooltip

[moumine9]

I haven't used it but It doesnt have onClick function

[mayank99]

It is generally not recommended to make <div> elements clickable, but you can pass anything to countIconProps so you should be able to add onClick={() => {}}, role='button' and tabIndex={0}.

If you need an additional icon instead of reusing the count icon, then I would suggest wrapping it in a button. You can use our borderless button or you could just have a simple <button> with some custom css to remove border and background.