Property square for variant marble not working

[Manubi]

Hey, as stated in the title, the marble variant is with square not working.

v.1.5.8

      <Avatar
        size={40}
        name="sdfasdf"
        variant="marble"
        square={true}
        colors={[
          brandColor.teal500,
          brandColor.cyan600,
          brandColor.blueGray500,
        ]}
      />

Thanks for your work!

[josepmartins]

Hey @Manubi, I've just tried it out (v 1.5.8) and it seems to work fine. Can you reproduce the error in a sandbox?

https://codesandbox.io/s/jovial-framework-pse8e?file=/src/App.js

[rjgrazioli]

@josepmartins I was able to reproduce this. No idea why it works in your sandbox though and not in our applications. I'll dig around a bit more

[rjgrazioli]

Ok, I figured this out.

In my case, it's because I was using an instance of the <Avatar> elsewhere without the square flag and it's earlier in the html stack.

Since element IDs need to be unique per page, I'm guessing the mask reference is only using the first instance of the mask__beam, or in @Manubi 's case, mask__blur second instance.

Perhaps one solution would be to generate unique IDs per instance, but for now, I'm just going to make everything a square and mask it myself.

[josepmartins]

Hey @rjgrazioli thanks for the heads up and finding the issue 😍 .

If I get this right, you're trying to use both square and circle options on the same app. Avatars are "unique" to it's name, so even if we add a unique filter ID (and that will be based on the name) you'll get the same issue with two avatars sharing the same name.

My recommendation for this case, as you mentioned, would be to use the square option for all the Avatars and apply a CSS border-radius for those you need to change to circle ones.

[rjgrazioli]

I think that's a perfectly reasonable way to implement this. And I much prefer the implementation remain simple.

Love this library btw. If you ever need help supporting it in the future. Let me know!

[MarioGranda]

Hi there,

I am getting a similar issue. I can't get circle shaped avatars for marble variant.

v 1.7.0

 <Avatar
    size={32}
    name="hada"
    variant="marble"
    colors={[
      "#D9FF88",
      "#D5F5AA",
      "#99BA51",
      "#C7F26A",
      "#555555",
    ]}
/>

Even if I add the property square={false} it doesn't work.

I am using macOS v12.3.1. My coworkers that use windows don't have this issue. They see the circle shaped avatar for marble variant.

Thank you in advance.

[rjgrazioli]

@MarioGranda are you instantiating <Avatar> elsewhere in the application? If so, you'll need to use square or circle in both instances. You can't use both in the same application. You'd need to mask it with a container surrounding it.

I'm not sure why it would be working on Windows, though.

[MarioGranda]

Hi @rjgrazioli, thanks for your response. I am instantiating <Avatar> in multiple files. I want all of them to have circle shape and I am adding the square={false} property, although is default value is false.