Skip to content
Permalink
Browse files

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

… states
  • Loading branch information...
SiTaggart committed Jul 14, 2017
1 parent 64d1882 commit 3f9fbd42e148dd73e6724e2aced77ab0e63c88e6
Showing with 124 additions and 2 deletions.
  1. +67 −0 ui/components/path/base/_index.scss
  2. +57 −2 ui/components/path/base/example.jsx
@@ -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
*
@@ -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 />
},
{

0 comments on commit 3f9fbd4

Please sign in to comment.
You can’t perform that action at this time.