Font Awesome 5 icons for open and closed eye

[pixelzoom]

There is some question about which FA5 icons to use for the closed (and open?) eye. I changed common-code EyeToggleButton.js to use one icon, @zepumph decided to use something else in ratio-and-proportions/TickMarkViewRadioButtonGroup.js. Shouldn't we be consistent here?...

Assigning to designers. @zepumph @chrisklus @jonathanolson FYI.

-- 7/16/21 Slack discussion on dev-public channel:

Chris Klusendorf 1:38 PM

does anyone know what font awesome icon the eye slash image in this mockup is? or could point me in the direction of a usage in a sim? or perhaps the one I did find (eyeSlashSolidShape, pictured below) is a newer version of it? (edited)

Amy Rouinfar 4 days ago Pretty sure the one in the mockup is FA4 and the one below is FA5.

Chris Malley 4 days ago Yes, that is correct. FA5 is eyeSlashRegularShape.js

Chris Malley 4 days ago I recently changed EyeToggleButton.js and some sim-specific occurrences to use eyeRegularShape.js and eyeSlashRegularShape.js. So let’s try to be consistent and use those for “eye open” and “eye close” respectively.

Michael Kauzmann 1 day ago @chrisklus this is also used in eyeSlashRegularShape in TickMarkViewRadioButtonGroup.js. While converting I also experimented with eyeSlashSolidShape but didn't like it as much.

[pixelzoom]

Most usages are of eyeRegularShape.js and eyeSlashRegularShape.js for open and closed respectively You can try these in function-builder, geometric optics, number-play, ration-and-proportions, RPAL, scenery-phet, and vector-addition. For example, here's EyeToggleButton in scenery-phet's demo:

@jonathanolson chose to do something different -- he's using eyeSolidShape.js and eyeSlashSolidShape.js in area-model and ratio-and-proportions. For example in proportion-playground:

It's also unclear why proportion-playground is creating its own toggle button here, instead of using scenery-phet/EyeToggleButton.

[pixelzoom]

Here are the number of occurrences of the 2 different options:

4 eyeRegularShape.js 8 eyeSlashRegularShape.js

2 eyeSolidShape.js 4 eyeSlashSolidShape.js

[pixelzoom]

In https://github.com/phetsims/sherpa/issues/86, I discovered that @samreid is using eyeSolidShape.js in cck-black-box-study:

[samreid]

At today's design meeting, we agreed that we like the "regular" eye slightly better, but the "solid" slash eye looks much better, so we are leaning toward the "solid" . @kathy-phet also has a slight preference for FA 4.

We all kind of liked the FA4 scissors. @kathy-phet agrees the FA4 scissors are better. We agreed to use the FA4 scissors. @chrisklus will open a new issue for scissors.

Enough people have a slight preference for the solid FA5 eye, (the regular slash is too difficult to decipher) so we will go with the solid FA5 eye and slash.

We also want to go with FA5 trash alt regular--looks like it is already in use in ESP/master.

We agreed that if FA4 has a superior icon that is not in FA5 (in an alt/solid/regular), then it is OK to use the FA4 version.

[samreid]

@chrisklus can you please take next steps for this issue or assign others accordingly?

[chrisklus]

I converted all usages of eyeSolidShape to eyeRegularShape and eyeSlashSolidShape to eyeSlashRegularShape in the commits above. I also test ran the affected sims. Notifying responsible devs @samreid and @jonathanolson.

I also opened two more issues, https://github.com/phetsims/sherpa/issues/87 and https://github.com/phetsims/sherpa/issues/88, for using FA4 scissors and FA5 trash alt regular.

@samreid would you mind reviewing those commits and closing if we're all set with this issue?

[kathy-phet]

@chrisklus - I think we actually settled on the Solid eye as the preferred overall .... so I think you wanted to do the reverse?

Enough people have a slight preference for the solid FA5 eye, (the regular slash is too difficult to decipher) so we will go with the solid FA5 eye and slash.

[chrisklus]

Oh, whoops! Got it backwards, thanks. I reverted the initial commits and converted the rest to eyeSolidShape/eyeSlashSolidShape. Ready for review.

[samreid]

I spot checked several commits, and tested RPAL, and it seemed good. I also searched for the FA5 regular eye and didn't see any occurrences. I considered whether we want a lint rule to encourage us to use the ones we agreed upon, but it seems like a hassle and we would need to opt out of the lint rule in legitimate cases like the shape using the string, and the iconList. Closing.