fix(visual-picker): add focus styling (#3093)

Author: engai

ui/components/visual-picker/coverable-content/_index.scss

@@ -57,6 +57,10 @@
       box-shadow: $elevation-shadow-4;
     }
 
+    &:focus ~ label .slds-visual-picker__body > *:first-child {
+      text-decoration: underline;
+    }
+
     /**
      * @summary Non-selected state
      * @selector .slds-is-not-selected

ui/components/visual-picker/coverable-content/example.jsx

@@ -17,6 +17,12 @@ import { UtilityIcon } from '../../icons/base/example';
 // Partial(s)
 /// ////////////////////////////////////////
 
+export const Option = props => (
+  <span className="slds-text-title" key={_.uniqueId()}>
+    {props.label}
+  </span>
+);
+
 export let VisualPicker = props => {
   const uniqueId = _.uniqueId('visual-picker-');
 
@@ -139,15 +145,15 @@ export default (
         icon
         sprite="utility"
         symbol="connected_apps"
-        label="Connected App"
+        label={<Option label="Connected App" />}
         size="medium"
       />
       <VisualPicker
         type="radio"
         icon
         sprite="utility"
         symbol="custom_apps"
-        label="Custom App"
+        label={<Option label="Custom App" />}
         size="medium"
       />
     </FormElementControl>
@@ -167,7 +173,7 @@ export let states = [
             icon
             sprite="utility"
             symbol="connected_apps"
-            label="Connected App"
+            label={<Option label="Connected App" />}
             size="medium"
           />
           <VisualPicker
@@ -176,7 +182,7 @@ export let states = [
             icon
             sprite="utility"
             symbol="custom_apps"
-            label="Custom App"
+            label={<Option label="Custom App" />}
             size="medium"
           />
         </FormElementControl>
@@ -198,23 +204,23 @@ export let examples = [
             icon
             sprite="standard"
             symbol="account"
-            label="Account"
+            label={<Option label="Account" />}
             size="medium"
           />
           <VisualPicker
             type="checkbox"
             icon
             sprite="standard"
             symbol="lead"
-            label="Lead"
+            label={<Option label="Lead" />}
             size="medium"
           />
           <VisualPicker
             type="checkbox"
             icon
             sprite="standard"
             symbol="orders"
-            label="Orders"
+            label={<Option label="Orders" />}
             size="medium"
           />
         </FormElementControl>

ui/components/visual-picker/vertical/_index.scss

@@ -22,11 +22,15 @@
 
   + .slds-visual-picker_vertical {
     margin-left: 0;
-    margin-top: $spacing-large;
+    margin-top: $spacing-medium;
   }
 
   .slds-visual-picker__figure,
   .slds-visual-picker__body {
     width: $size-large;
   }
+
+  input:focus ~ label .slds-visual-picker__text .slds-text-heading_medium {
+    text-decoration: underline;
+  }
 }