Site: (#721) User icon to sticker-circle

[marcoscv-work]

No description provided.

[coveralls]

Pull Request Test Coverage Report for Build 505

• 0 of 0 (NaN%) changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.003%) to 81.978%

---

Totals
Change from base Build 486:	-0.003%
Covered Lines:	4588
Relevant Lines:	4852

---

💛 - Coveralls

[carloslancha]

@pat270 could you please take a look at this? Thx!

[pat270]

Hey Guys,

The classes rounded, rounded-circle, and rounded-0 are BS4 border radius utilities http://getbootstrap.com/docs/4.0/utilities/borders/#border-radius. I think it's better if we conform to their namespace (just in case someone wants to use BS4 border radius utilities on stickers).

For user-icon to sticker-circle I thought it was better to keep it as user-icon since Lexicon defined all circular stickers to be only used with people. That way we have a namespace to easily change the border radius of all people stickers or even the style across portal. We can add sticker-circle if you guys really need it, but I think we should have an extra namespace on user icons in portal.

[carloslancha]

Hey @pat270

From the point of view of the Sticker component is kinda weird to associate a circular shape with user-icon class. Just thinking in Sticker as an standalone component it should not worry about if is going to be used by an user or by a pizza, it only knows that two shapes exists, rounded and circular.

That's why we thought about calling it sticker-circle.

[jbalsas]

Should rename this as well

[jbalsas]

I think both arguments make sense. From a component perspective and consistency, it makes sense we call it sticker-circle. It makes it easier to reason with and makes the markup more obvious.

From an extensibility/configurability point of view, it is certainly interesting to have a way to target all user icons. We are already attaching the user-icon class to those, so we can definitely do the necessary modifications in portal using that selector.

@pat270, regarding the utilities comment. I was under the impression that we agreed not to use BS4 utilities? Do you mean that you'd rather have this markup? <span class="sticker rounded-circle">...</span> than <span class="sticker sticker-circle">...</span>?

[pat270]

sticker-circle is essentially a utility class without the !important flag. I suppose it doesn't really matter as long as there is some distinction between all the sticker-circles in portal. I'm good with this breaking change.

[jbalsas]

Hey @pat270, what do you mean by the distinction between sticker-circles in portal? We currently don't have any usages of that.

[pat270]

@jbalsas You're right about the breaking change. I realize it was sticker-circle in v1. This is fine with me.

[jbalsas]

Cool, thanks for clarifying and going through this with us! ☺️