Skip to content

Commit 074771a

Browse files
author
Jade Pennig
committed
fix(global-nav-updates): add animation and make ui changes to Global Navigation component
1 parent e6d50b2 commit 074771a

File tree

3 files changed

+51
-36
lines changed

3 files changed

+51
-36
lines changed

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

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
22
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
33

4+
$color-background-context-bar-brand-light: rgba(desaturate($color-background-context-bar-brand-accent, 30%), 0.05);
5+
46
/**
57
* @summary Navigation bar wrapper
68
*
@@ -13,7 +15,6 @@
1315
display: flex;
1416
height: $height-context-bar;
1517
background-color: $color-background-context-bar;
16-
border-top: $border-width-thin solid $color-border;
1718
border-bottom: 3px solid $color-background-context-bar-brand-accent;
1819
color: $color-text-default;
1920
position: relative;
@@ -87,9 +88,7 @@
8788
&.slds-is-active {
8889
outline: 0;
8990
border-radius: 0;
90-
background-color: $color-background-context-bar-item-hover;
91-
border-bottom: 3px solid $color-background-context-bar-brand-accent;
92-
margin-bottom: (3px * -1);
91+
background-color: $color-background-context-bar-brand-light;
9392
text-decoration: none;
9493
cursor: pointer;
9594
}
@@ -112,9 +111,17 @@
112111
}
113112

114113
&.slds-is-active {
115-
border-left: $border-width-thin solid $color-border;
116-
border-right: $border-width-thin solid $color-border;
117-
border-bottom-color: $color-background-context-bar-item-hover;
114+
animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both;
115+
116+
@keyframes bkAnim {
117+
50% {
118+
background-color: #edf1f4;
119+
}
120+
121+
100% {
122+
background-color: #F7F9FB;
123+
}
124+
}
118125

119126
&:before,
120127
&:after {
@@ -126,6 +133,26 @@
126133
top: 0;
127134
left: -1px;
128135
right: -1px;
136+
animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both;
137+
}
138+
139+
@keyframes navBounceIn {
140+
0% {
141+
transform: translate3d(0, 20px, 0);
142+
opacity: 0;
143+
}
144+
145+
20% {
146+
opacity: 0;
147+
}
148+
149+
90% {
150+
transform: translate3d(0, 1px, 0);
151+
}
152+
153+
100% {
154+
transform: translate3d(0, 0, 0);
155+
}
129156
}
130157

131158
&:after {
@@ -138,15 +165,10 @@
138165
}
139166

140167
&:hover {
141-
border-bottom-color: $color-background-context-bar-item-hover;
168+
border-bottom-color: $color-background-context-bar-brand-light;
142169
}
143170
}
144171

145-
// Remove border on active due to primary section always having a right border
146-
&:first-child.slds-is-active {
147-
border-left: 0;
148-
}
149-
150172
/**
151173
* Toggled focused class applied via JavaScript
152174
*
@@ -168,7 +190,6 @@
168190
*
169191
* @selector .slds-context-bar__item_divider-left
170192
* @restrict .slds-context-bar div, .slds-context-bar li
171-
* @modifier
172193
*/
173194
&_divider-left,
174195
&--divider-left {
@@ -180,7 +201,6 @@
180201
*
181202
* @selector .slds-context-bar__item_divider-right
182203
* @restrict .slds-context-bar div, .slds-context-bar li
183-
* @modifier
184204
*/
185205
&_divider-right,
186206
&--divider-right {
@@ -289,6 +309,19 @@
289309
margin-left: auto;
290310
}
291311

312+
313+
/**
314+
* @summary Tab modifier when using a tabset
315+
*
316+
* @name navigation-tab-bar
317+
* @selector .slds-context-bar_tabs
318+
* @restrict .slds-context-bar
319+
* @variant
320+
*/
321+
&_tabs {
322+
border-top: $border-width-thin solid $color-border;
323+
}
324+
292325
/**
293326
*
294327
* #### Accessibility
@@ -298,14 +331,10 @@
298331
* set the value of `aria-controls` on the Split View Toggle button, to the `ID` of the
299332
* wrapper element that contains the Split View List.
300333
*
301-
* @summary Tab modifier when using a tabset
302-
*
303-
* @name navigation-tab-bar
304334
* @selector .slds-context-bar__item_tab
305335
* @restrict .slds-context-bar__item
306336
* @notes Only use on tabset version
307337
* @required
308-
* @variant
309338
*
310339
*/
311340
&__item_tab,
@@ -320,13 +349,10 @@
320349
// Handle active states
321350
&.slds-is-active,
322351
&:nth-child(n).slds-is-active {
323-
border-left: 0;
324-
border-bottom-color: $color-background-context-tab-bar-item;
325352
background-color: $color-background-context-tab-bar-item;
326353

327354
&:hover {
328355
background-color: $color-background-context-tab-bar-item;
329-
border-bottom-color: transparent;
330356
}
331357
}
332358

@@ -438,7 +464,6 @@
438464
border-right: $border-width-thin solid $color-border;
439465
}
440466

441-
442467
// Themes - Pre-defined themes
443468
// Using mixin to determine text color and interactive states
444469
//
@@ -456,9 +481,5 @@
456481
&:before {
457482
background: #f59331;
458483
}
459-
460-
&:hover {
461-
border-bottom-color: $color-background-context-bar-item-hover;
462-
}
463484
}
464485
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export let ContextBar = props =>
3939
<div className={classNames('slds-context-bar', props.className)}>
4040

4141
{/* Primary Section */}
42-
<div className="slds-context-bar__primary slds-context-bar__item_divider-right">
42+
<div className="slds-context-bar__primary">
4343

4444
{/* App Switcher */}
4545
<div className="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
@@ -81,8 +81,8 @@ export let ContextBar = props =>
8181
{ !props.children
8282
? _.times(3, i =>
8383
<li className="slds-context-bar__item" key={i}>
84-
<a href="javascript:void(0);" className="slds-context-bar__label-action" title={'Menu Item ' + i}>
85-
<span className="slds-truncate" title="Menu Item">{ props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item ' + i }</span>
84+
<a href="javascript:void(0);" className="slds-context-bar__label-action" title="Menu Item">
85+
<span className="slds-truncate" title="Menu Item">{ props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item'}</span>
8686
</a>
8787
</li>
8888
) : props.children }

ui/components/global-navigation/tokens/background-color.yml

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@ props:
1515
COLOR_BACKGROUND_CONTEXT_BAR_BRAND_ACCENT:
1616
value: '{!CERULEAN}'
1717
comment: Brand color in context bar for default theme
18-
COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER:
19-
value: '{!PALETTE_GRAY_2}'
20-
comment: Hovered context bar item background color.
21-
COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE:
22-
value: '{!PALETTE_GRAY_2}'
23-
comment: Active context bar item background color.
2418
COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM:
2519
value: '{!WHITE}'
2620
comment: Context TAB bar item background color.

0 commit comments

Comments
 (0)