Skip to content
Permalink
Browse files

chore(global-navigation): Move slds-has-sub-tabs to nav item rather t…

…han on top level component
  • Loading branch information...
brandonferrua committed Oct 16, 2017
1 parent 82a4339 commit d99332beedb8dc2979ffce0264607a6a309301cb

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -22,13 +22,14 @@ const { matchesMarkupAndStyle } = createHelpers(__dirname);
it('renders a global-navigation with sub-tabs', () =>
matchesMarkupAndStyle(
<div className="demo-only" style={{ height: '8rem' }}>
<ContextTabBar className="slds-has-sub-tabs">
<ContextTabBar>
<ContextTab
title="Home"
symbol="home"
tabPanelId="context-tab-panel-1"
id="context-tab-id-1"
itemActive
hasSubtabs
/>
<ContextTab
title="Tab Item 1"
@@ -400,6 +400,29 @@ $color-background-context-bar-brand-light: rgba($color-background-context-bar-br
}
}

/**
* @summary Modifier that notifies a parent component that it has sub tabs inside of it
* @selector .slds-has-sub-tabs
* @restrict .slds-context-bar__item_tab
*/
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active,
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover {
animation: none;
background-color: transparent;

&:after {
content: '';
display: block;
position: absolute;
bottom: -3px;
height: 3px;
width: 100%;
background-color: $color-background-context-bar;
border: 0;
mix-blend-mode: unset;
}
}

/**
* Unsaved indicator - This can probably be used in other locations as well
*
@@ -64,7 +64,8 @@ export let ContextTab = props => (
'slds-is-active': props.itemActive,
'slds-is-unsaved': props.itemUnsaved,
'slds-is-pinned': props.pinned,
'slds-has-notification': props.itemUnread
'slds-has-notification': props.itemUnread,
'slds-has-sub-tabs': props.hasSubtabs
}
)}
role="presentation"
@@ -1187,13 +1188,14 @@ export let states = [
label: 'Sub Tabs - Open',
element: (
<div className="demo-only" style={{ height: '8rem' }}>
<ContextTabBar className="slds-has-sub-tabs">
<ContextTabBar>
<ContextTab
title="Home"
symbol="home"
tabPanelId={tabPanelId01}
id={tabId01}
itemActive
hasSubtabs
/>
<ContextTab
title="Tab Item 1"
@@ -58,29 +58,3 @@
text-decoration: underline;
}
}

/**
* @summary Modifier that notifies a parent component that it has sub tabs inside of it
* @selector .slds-has-sub-tabs
* @restrict .slds-context-bar
*/
.slds-has-sub-tabs {

.slds-context-bar__item_tab.slds-is-active,
.slds-context-bar__item_tab.slds-is-active:hover {
animation: none;
background-color: transparent;

&:after {
content: '';
display: block;
position: absolute;
bottom: -3px;
height: 3px;
width: 100%;
background-color: $color-background-context-bar;
border: 0;
mix-blend-mode: unset;
}
}
}

0 comments on commit d99332b

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