fix(path): Simplify and fix active tab focus styling across all stage…

… states
salesforce-ux · Jul 20, 2017 · 3f9fbd4 · 3f9fbd4
1 parent 64d1882
commit 3f9fbd4
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 2 deletions.
diff --git a/ui/components/path/base/_index.scss b/ui/components/path/base/_index.scss
@@ -131,6 +131,73 @@
   align-items: flex-start;
   margin-right: $spacing-small;
 
+  /**
+  * @summary Creates the incomplete stage of the path
+  *
+  * @selector .slds-is-incomplete
+  * @restrict .slds-path__item
+  * @modifier
+  */
+  .slds-is-incomplete {
+    background-color: $color-background-path-incomplete;
+
+    &:hover {
+      background-color: $color-background-path-incomplete-hover;
+    }
+
+    .slds-path__link {
+      color: $color-text-default;
+    }
+  }
+
+  /**
+  * @summary Creates the active stage of the sales path
+  *
+  * @selector .slds-is-active
+  * @restrict .slds-path__item
+  * @notes This class must be placed on the item programatically when the guidance section is activated
+  * @modifier
+  */
+  .slds-is-active {
+    background-color: $color-background-inverse;
+
+    .slds-path__link {
+      color: $color-text-inverse;
+    }
+
+    &:hover {
+      background-color: $color-background-alt-inverse;
+
+      + .slds-path__item:before {
+        background-color: $color-background-alt-inverse;
+      }
+    }
+
+    + .slds-path__item:before {
+      background-color: $color-background-inverse;
+    }
+  }
+
+  /**
+   * @summary Creates success stage of the path
+   *
+   * @selector .slds-is-won
+   * @restrict .slds-path__item
+   * @modifier
+   */
+  .slds-is-active,
+  .slds-is-active.slds-is-won {
+
+    .slds-path__title {
+      transform: rotateX(0deg);
+    }
+
+    .slds-path__stage {
+      transform: rotateX(-180deg);
+    }
+  }
+
+
   /**
    * @summary Creates the completed stage of the path
    *

diff --git a/ui/components/path/base/example.jsx b/ui/components/path/base/example.jsx
@@ -113,7 +113,9 @@ let ListItem = props => {
   }
 
   return (
-    <li className={classNames('slds-path__item', props.className)} role="presentation">
+    <li className={classNames('slds-path__item', props.className, {
+      'slds-is-active': props.tabIndex
+    })} role="presentation">
       <a
         aria-controls={props.ariaControls}
         aria-expanded={ariaExpanded}
@@ -202,6 +204,54 @@ let CoachExample2 = props =>
 /// ///////////////////////////////////////////
 
 let Default = props =>
+  <Coach>
+    <Path>
+      <div className="slds-grid slds-path__scroller-container">
+        <ListMain listRole="listbox">
+          <ListItem className="slds-is-current" id={path1Id} role="option" tabIndex="0">
+            <span className="slds-path__stage">
+              <SvgIcon className="slds-icon slds-icon_x-small" sprite="utility" symbol="check" />
+              <span className="slds-assistive-text">Stage Complete</span>
+            </span>
+            <span className="slds-path__title">Contacted</span>
+          </ListItem>
+          <ListItem className="slds-is-incomplete" id={path2Id} role="option">
+            <span className="slds-path__stage">
+              <SvgIcon className="slds-icon slds-icon_x-small" sprite="utility" symbol="check" />
+              <span className="slds-assistive-text">Stage Complete</span>
+            </span>
+            <span className="slds-path__title">Open</span>
+          </ListItem>
+          <ListItem className="slds-is-incomplete" id={path3Id} role="option">
+            <span className="slds-path__stage">
+              <SvgIcon className="slds-icon slds-icon_x-small" sprite="utility" symbol="check" />
+              <span className="slds-assistive-text">Current Stage:</span>
+            </span>
+            <span className="slds-path__title">Unqualified</span>
+          </ListItem>
+          <ListItem className="slds-is-incomplete" id={path4Id} role="option">
+            <span className="slds-path__stage">
+              <SvgIcon className="slds-icon slds-icon_x-small" sprite="utility" symbol="check" />
+            </span>
+            <span className="slds-path__title">Nurturing</span>
+          </ListItem>
+          <ListItem className="slds-is-incomplete" id={path5Id} role="option">
+            <span className="slds-path__stage">
+              <SvgIcon className="slds-icon slds-icon_x-small" sprite="utility" symbol="check" />
+            </span>
+            <span className="slds-path__title">Closed</span>
+          </ListItem>
+        </ListMain>
+      </div>
+      <div className="slds-grid slds-path__action">
+        <span className="slds-path__stage-name">Stage: Unqualified</span>
+        <Action><SvgIcon className="slds-button__icon slds-button__icon_left" sprite="utility" symbol="check" />
+          Mark Status as Complete</Action>
+      </div>
+    </Path>
+  </Coach>;
+
+let PathNoCoachStageSelected = props =>
   <Coach>
     <Path>
       <div className="slds-grid slds-path__scroller-container">
@@ -913,6 +963,11 @@ export default (
 );
 
 export let states = [
+  {
+    id: 'later-stage',
+    label: 'With Different Stage Selected - without coaching',
+    element: <PathNoCoachStageSelected />
+  },
   {
     id: 'with-coaching',
     label: 'With Coaching Available',
@@ -925,7 +980,7 @@ export let states = [
   },
   {
     id: 'different-coaching',
-    label: 'With Different Stage Selected',
+    label: 'With Different Stage Selected - with coaching',
     element: <PathStageSelected />
   },
   {