So that the selected state is easier to identify, update style on radio button pattern

[JonellaCulmer]

@jenniferthibault commented on Thu Nov 30 2017

The current flat style of the radio buttons makes it challenging to distinguish which option is selected visually. This proposed change creates an outline around the filled/selected option to reinforce the difference. The change is only to the selected state circular fill

Completion criteria

• Create an outline around the filled/selected radio button
• Open a ticket to update pattern library

[type=radio]:checked+label::before {
       box-shadow: 0 0 0 2px #fff inset

[johnnyporkchops]

@jonella, do you think we should make a followup issue to make this a toggle? This AO filter is the only place on the site that we use radio buttons. Everywhere else we use toggles, which are actually just radio buttons under the hood (in the underlying code). The user is actually interacting with radio buttons that are hidden, and the labels create the button that registers clicks.

[JonellaCulmer]

@johnnyporkchops Excellent point. Maybe a future ticket to explore changing the filter and what that would mean. The toggle tends to mean more that something is one or off but essentially they do function the same way.

[johnnyporkchops]

@JonellaCulmer , I have aleady done a test and switching it to a toggle is fairly simple change. The AO React app was kind of built separately from all of the other datatables, so that may be why it has this one-off radio button filter.