From cbd07e9eace9201818b3a8ad17df0df51e6a3c03 Mon Sep 17 00:00:00 2001
From: Ed Ngai <edmund.ngai@salesforce.com>
Date: Thu, 22 Feb 2018 10:16:49 -0800
Subject: [PATCH] fix(visual-picker): add focus styling (#3093)

---
 .../coverable-content/_index.scss             |  4 ++++
 .../coverable-content/example.jsx             | 20 ++++++++++++-------
 .../visual-picker/vertical/_index.scss        |  6 +++++-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/ui/components/visual-picker/coverable-content/_index.scss b/ui/components/visual-picker/coverable-content/_index.scss
index 2a48d42bfd..de61691fe5 100644
--- a/ui/components/visual-picker/coverable-content/_index.scss
+++ b/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
diff --git a/ui/components/visual-picker/coverable-content/example.jsx b/ui/components/visual-picker/coverable-content/example.jsx
index 66fee5eef7..f32facf833 100644
--- a/ui/components/visual-picker/coverable-content/example.jsx
+++ b/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,7 +145,7 @@ export default (
         icon
         sprite="utility"
         symbol="connected_apps"
-        label="Connected App"
+        label={<Option label="Connected App" />}
         size="medium"
       />
       <VisualPicker
@@ -147,7 +153,7 @@ export default (
         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,7 +204,7 @@ export let examples = [
             icon
             sprite="standard"
             symbol="account"
-            label="Account"
+            label={<Option label="Account" />}
             size="medium"
           />
           <VisualPicker
@@ -206,7 +212,7 @@ export let examples = [
             icon
             sprite="standard"
             symbol="lead"
-            label="Lead"
+            label={<Option label="Lead" />}
             size="medium"
           />
           <VisualPicker
@@ -214,7 +220,7 @@ export let examples = [
             icon
             sprite="standard"
             symbol="orders"
-            label="Orders"
+            label={<Option label="Orders" />}
             size="medium"
           />
         </FormElementControl>
diff --git a/ui/components/visual-picker/vertical/_index.scss b/ui/components/visual-picker/vertical/_index.scss
index 5ef75410a5..64adf45866 100644
--- a/ui/components/visual-picker/vertical/_index.scss
+++ b/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;
+  }
 }