Skip to content

Commit d99332b

Browse files
committed
chore(global-navigation): Move slds-has-sub-tabs to nav item rather than on top level component
1 parent 82a4339 commit d99332b

File tree

7 files changed

+30
-30
lines changed

7 files changed

+30
-30
lines changed

ui/components/global-navigation/__tests__/__snapshots__/renders_a_global_navigation_with_sub_tabs.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

ui/components/global-navigation/__tests__/index.spec.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@ const { matchesMarkupAndStyle } = createHelpers(__dirname);
2222
it('renders a global-navigation with sub-tabs', () =>
2323
matchesMarkupAndStyle(
2424
<div className="demo-only" style={{ height: '8rem' }}>
25-
<ContextTabBar className="slds-has-sub-tabs">
25+
<ContextTabBar>
2626
<ContextTab
2727
title="Home"
2828
symbol="home"
2929
tabPanelId="context-tab-panel-1"
3030
id="context-tab-id-1"
3131
itemActive
32+
hasSubtabs
3233
/>
3334
<ContextTab
3435
title="Tab Item 1"

ui/components/global-navigation/navigation-bar/_index.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,29 @@ $color-background-context-bar-brand-light: rgba($color-background-context-bar-br
400400
}
401401
}
402402

403+
/**
404+
* @summary Modifier that notifies a parent component that it has sub tabs inside of it
405+
* @selector .slds-has-sub-tabs
406+
* @restrict .slds-context-bar__item_tab
407+
*/
408+
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active,
409+
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover {
410+
animation: none;
411+
background-color: transparent;
412+
413+
&:after {
414+
content: '';
415+
display: block;
416+
position: absolute;
417+
bottom: -3px;
418+
height: 3px;
419+
width: 100%;
420+
background-color: $color-background-context-bar;
421+
border: 0;
422+
mix-blend-mode: unset;
423+
}
424+
}
425+
403426
/**
404427
* Unsaved indicator - This can probably be used in other locations as well
405428
*

ui/components/global-navigation/navigation-bar/index.markup.md

Whitespace-only changes.

ui/components/global-navigation/navigation-tab-bar/example.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ export let ContextTab = props => (
6464
'slds-is-active': props.itemActive,
6565
'slds-is-unsaved': props.itemUnsaved,
6666
'slds-is-pinned': props.pinned,
67-
'slds-has-notification': props.itemUnread
67+
'slds-has-notification': props.itemUnread,
68+
'slds-has-sub-tabs': props.hasSubtabs
6869
}
6970
)}
7071
role="presentation"
@@ -1187,13 +1188,14 @@ export let states = [
11871188
label: 'Sub Tabs - Open',
11881189
element: (
11891190
<div className="demo-only" style={{ height: '8rem' }}>
1190-
<ContextTabBar className="slds-has-sub-tabs">
1191+
<ContextTabBar>
11911192
<ContextTab
11921193
title="Home"
11931194
symbol="home"
11941195
tabPanelId={tabPanelId01}
11951196
id={tabId01}
11961197
itemActive
1198+
hasSubtabs
11971199
/>
11981200
<ContextTab
11991201
title="Tab Item 1"

ui/components/global-navigation/navigation-tab-bar/index.markup.md

Whitespace-only changes.

ui/components/tabs/sub-tabs/_index.scss

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -58,29 +58,3 @@
5858
text-decoration: underline;
5959
}
6060
}
61-
62-
/**
63-
* @summary Modifier that notifies a parent component that it has sub tabs inside of it
64-
* @selector .slds-has-sub-tabs
65-
* @restrict .slds-context-bar
66-
*/
67-
.slds-has-sub-tabs {
68-
69-
.slds-context-bar__item_tab.slds-is-active,
70-
.slds-context-bar__item_tab.slds-is-active:hover {
71-
animation: none;
72-
background-color: transparent;
73-
74-
&:after {
75-
content: '';
76-
display: block;
77-
position: absolute;
78-
bottom: -3px;
79-
height: 3px;
80-
width: 100%;
81-
background-color: $color-background-context-bar;
82-
border: 0;
83-
mix-blend-mode: unset;
84-
}
85-
}
86-
}

0 commit comments

Comments
 (0)