Skip to content
Permalink
Browse files

fix(subtabs): adjust position of unsaved indicator when used with not…

…ifications
  • Loading branch information...
engai committed Sep 19, 2017
1 parent aaaf487 commit 5916f2f7cbbc80af734a6ffee986d8fc71e5018c
Showing with 69 additions and 1 deletion.
  1. +27 −0 ui/components/tabs/base/_index.scss
  2. +42 −1 ui/components/tabs/sub-tabs/example.jsx
@@ -194,6 +194,33 @@
background-color: $color-brand-dark;
}
}

.slds-indicator_unread {
display: inline-block;
height: 6px;
width: 6px;
position: relative;
top: auto;
left: auto;
}
}

/**
* @summary Creates styles for a Tab Item when its in an unsaved or dirty state
* @selector .slds-is-unsaved
* @restrict .slds-tabs_default__item
*/
&.slds-is-unsaved {

.slds-indicator_unread {
margin-left: -0.35rem; //random but matches spec
}

.slds-indicator_unsaved {
position: relative;
top: ($spacing-xx-small * -1);
}

}
}

@@ -18,7 +18,8 @@ let Subtab = props => (
{
'slds-has-notification': props.hasNotification,
'slds-has-focus': props.hasFocus,
'slds-active': props.active
'slds-active': props.active,
'slds-is-unsaved': props.itemUnsaved
},
props.className
)}
@@ -352,5 +353,45 @@ export let states = [
</div>
</div>
)
},
{
id: 'subtabs-notification-dirty',
label: 'Unsaved With Notification',
element: (
<div className="slds-tabs_default slds-sub-tabs">
<ul className="slds-tabs_default__nav" role="tablist">
<Subtab
title="00071938"
active
tabItemId="subtab-tabitem-01"
tabPanelId="subtab-tabpanel-01"
/>
<Subtab
title="Chat - Customer"
hasNotification
itemUnsaved
tabItemId="subtab-tabitem-02"
tabPanelId="subtab-tabpanel-02"
symbol="live_chat"
/>
</ul>
<div
className="slds-tabs_default__content slds-show"
id="subtab-tabpanel-01"
role="tabpanel"
aria-labelledby="subtab-tabitem-01"
>
Item One Content
</div>
<div
className="slds-tabs_default__content slds-hide"
id="subtab-tabpanel-02"
role="tabpanel"
aria-labelledby="subtab-tabitem-02"
>
Item Two Content
</div>
</div>
)
}
];

0 comments on commit 5916f2f

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