segmentio/ui-box

Remove the emoji box as a class name preffix

ivosabev opened this issue · 15 comments

ivosabev commented

It seems dangerous practice especially on older browsers. It seems to me that the benefit doesn't offset the risk.

http://adrianroselli.com/2017/10/avoid-emoji-as-class-names.html

Rowno commented

That article doesn't mention anything about browser compatibility, only editor compatibility. But since the classes are automatically generated, editor compatibility shouldn't be an issue.

Also this article from 2010 says that unicode class names work in IE6: https://css-tricks.com/unicode-class-names/

ivosabev commented

I understand support is very good, but it just seems quite unnecessary.

jeroenransijn commented

@Rowno and me disagreed about this before. I don't think the emoji is necessary and might scare people away from using it. It creates high visual noise in the inspector and snapshots test. Just my 2c.

  • 👍11
stephenmathieson commented

Hi 👋 Segment folks :)

Just want to give my $0.02. I found the emoji class obnoxious awhile back, but didn't personally care enough to discuss it, as I thought it really didn't matter. However, as the linked article explains very well, it does create pretty annoying accessibility problems. This totally changes my viewpoint here, as it does matter. Since there isn't a real benefit (other than being "cute") here, and there are clear drawbacks, I'd like to understand the reasoning for leaving this as-is.

  • 👍1
mshwery commented

Not sure if this would technically be considered a breaking change (for those who use it in selectors, for instance), but perhaps you could init ui-box with a custom setting for those who wish to change it?

  • 👍1
jasonbarry commented

May I suggest Upper Right Shadowed White Square (❒) be used instead? It's less jarring IMO since it matches the colors of your devtools.

screen shot 2019-01-26 at 11 59 02 am

agonist commented

Hello guys, I'm adding my 2 cents here: segmentio/evergreen#566
I still don't know if it's coming from the emoji or not but there is clearly something wrong going on my side. I would appreciate any help 🙏

tabvn commented

we can add class name like ui-box before, rather than using emoji class name. Thank you and look forward to hear back soon.

tabvn commented

i got solution to fix it

npm uninstall --save evergreen-ui
  • 👍3
  • 👎6
mshwery commented

This is available in v3.x

andrewjrhill commented

For those who stumble on this thread trying to remove the box:

import { setClassNamePrefix } from 'ui-box'

const App: React.FC = () => {
    setClassNamePrefix('')

    return (
        <>
            /* Your app code here... */
        </>
    )
}

Looks like evergreen hasn't updated to the latest version of ui-box yet.

mshwery commented

Also if you are on latest there is no 📦 ! :)

andrewjrhill commented

Also if you are on latest there is no 📦 ! :)

Hm. Must be an issue with Evergreen then. I did a fresh install (first time using Evergreen last night) and the 📦 are still in the DOM by default.

mshwery commented

Evergreen is manually using the box emoji still because that could be a breaking change for some users.

It is getting removed in v5 (you can try out the prerelease via evergreen-ui@next)

andrewjrhill commented

@mshwery - Thanks 👍 appreciate you taking the time to respond.

  • 👍2