Switch enhancement: visual differentiation for on/off states

[jgiardino]

Currently, the visual styling of the on/off states of the switch could make it difficult for some users to differentiate the two states.

Some ideas of how to address this issue:

1. include some additional indicator that means “on” (similar to Carbon, Salesforce, Ant)
2. use more of an opposite background color for "off"
3. display a tooltip on hover

[mceledonia]

Visual proposal for new switches:

Spec:

On
10px checkmark icon, white, 8px spacer from the left

Off
Background color to #BBBBBB

Disabled
Background color to #8B8D8F
Switch nob color to #D1D1D1

FYI @kybaker

[jgiardino]

Thanks for turning this around so fast!

For the disabled version in the on state, should we also include the checkmark in that one, too?

[mcarrano]

Including the checkmark in both active and disabled states definitely makes sense. @mceledonia can you make that update and we can move this along?

[jameslau]

Hey folks,

I've been tasked to make initial changes for the switch states. @mceledonia, there are several weights (see below) for the check mark from Font Awesome that can be applied to our switch component. Unfortunately, the first one is the only free version. The other weights require a Font Awesome Pro account. @mcoker, do you know if our Font Awesome account/version is standard or pro edition?

Checkmark examples:
https://fontawesome.com/icons/check?style=solid
https://fontawesome.com/icons/check?style=regular
https://fontawesome.com/icons/check?style=light

[jameslau]

Thanks @mcoker for verifying the Font Awesome version that we have. @mceledonia, can we only use the first icon. I have it semi working now. I will need to adjust the size and color to match the comps you provided.