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

…han on top level component

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

@@ -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"

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

@@ -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
 *

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

@@ -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"

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

@@ -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;
    }
  }
}