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

…ifications
salesforce-ux · Sep 19, 2017 · 5916f2f · 5916f2f
1 parent aaaf487
commit 5916f2f
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git a/ui/components/tabs/base/_index.scss b/ui/components/tabs/base/_index.scss
@@ -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);
+    }
+
   }
 }
 

diff --git a/ui/components/tabs/sub-tabs/example.jsx b/ui/components/tabs/sub-tabs/example.jsx
@@ -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>
+    )
   }
 ];