From 35b4d0b3926d336e62a504223627aba3b7751eaf Mon Sep 17 00:00:00 2001
From: mathSusan <sbmck@yahoo.com>
Date: Tue, 10 Sep 2019 12:49:16 -0500
Subject: [PATCH] fix(core):  layout bug in top bar for brand section and right
 section

close #330 - with a better solution, row wasn't going to work all the time
---
 .../lib/topbar/examples/examples.module.ts    |  3 ++
 angular/src/lib/topbar/examples/index.ts      |  1 +
 .../lib/topbar/examples/nomiddle.component.ts | 39 +++++++++++++++++++
 .../components/top-bar/examples/blue.html     |  2 +-
 .../components/top-bar/examples/default.html  |  2 +-
 .../components/top-bar/examples/light.html    |  2 +-
 core/scss/components/top-bar/top-bar.scss     |  3 +-
 react/src/lib/Topbar/index.js                 |  2 +-
 .../tests/__snapshots__/index.spec.js.snap    |  8 ++--
 9 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 angular/src/lib/topbar/examples/nomiddle.component.ts

diff --git a/angular/src/lib/topbar/examples/examples.module.ts b/angular/src/lib/topbar/examples/examples.module.ts
index a3d7032282..e0d6d89bbe 100644
--- a/angular/src/lib/topbar/examples/examples.module.ts
+++ b/angular/src/lib/topbar/examples/examples.module.ts
@@ -12,6 +12,7 @@ import {
   ExampleTopbarBlueComponent,
   ExampleTopbarDarkComponent,
   ExampleTopbarLightComponent,
+  ExampleTopbarNomiddleComponent
 } from './index';
 
 @NgModule({
@@ -27,11 +28,13 @@ import {
     ExampleTopbarBlueComponent,
     ExampleTopbarDarkComponent,
     ExampleTopbarLightComponent,
+    ExampleTopbarNomiddleComponent
   ],
   exports: [
     ExampleTopbarBlueComponent,
     ExampleTopbarDarkComponent,
     ExampleTopbarLightComponent,
+    ExampleTopbarNomiddleComponent
   ],
 })
 export class TopbarExamplesModule {}
diff --git a/angular/src/lib/topbar/examples/index.ts b/angular/src/lib/topbar/examples/index.ts
index 12adbd3b24..60f4cc7c3a 100644
--- a/angular/src/lib/topbar/examples/index.ts
+++ b/angular/src/lib/topbar/examples/index.ts
@@ -1,3 +1,4 @@
 export * from './blue.component';
 export * from './dark.component';
 export * from './light.component';
+export * from './nomiddle.component';
diff --git a/angular/src/lib/topbar/examples/nomiddle.component.ts b/angular/src/lib/topbar/examples/nomiddle.component.ts
new file mode 100644
index 0000000000..478a347414
--- /dev/null
+++ b/angular/src/lib/topbar/examples/nomiddle.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'example-topbar-nomiddle',
+  template: `
+    <header md-top-bar color="light" [fixed]="true">
+      <ng-container
+        *ngTemplateOutlet="brand"
+        ngProjectAs="brand"
+      ></ng-container>
+      <md-top-bar-right>
+        <div class="md-top-bar__user"></div>
+        <div class="md-top-bar__logged-out">
+          <a href="javascript:void(0)">Log In</a>
+          <button md-button color="blue" aria-label="myAriaLabel">
+            Button
+          </button>
+        </div>
+      </md-top-bar-right>
+      <md-top-bar-mobile [shouldCloseOnClick]="false">
+        <ng-container
+          *ngTemplateOutlet="brand"
+          ngProjectAs="brand"
+        ></ng-container>
+      </md-top-bar-mobile>
+    </header>
+
+    <ng-template #brand>
+      <a
+        href="javascript:void(0)"
+        md-top-bar-brand
+        title="Momentum UI"
+        icon="icon-cisco-logo"
+      ></a>
+    </ng-template>
+
+  `,
+})
+export class ExampleTopbarNomiddleComponent {}
diff --git a/core/scss/components/top-bar/examples/blue.html b/core/scss/components/top-bar/examples/blue.html
index b42fbb0014..addb2e55b8 100644
--- a/core/scss/components/top-bar/examples/blue.html
+++ b/core/scss/components/top-bar/examples/blue.html
@@ -1,5 +1,5 @@
 <header class="md-top-bar md-top-bar--blue" role="navigation">
-  <div class="md-top-bar__container row">
+  <div class="md-top-bar__container">
     <div class="md-top-bar__brand">
       <a class="md-brand" href="/">
         <div class="md-brand__logo">
diff --git a/core/scss/components/top-bar/examples/default.html b/core/scss/components/top-bar/examples/default.html
index 65c5974be9..21a1335aa4 100644
--- a/core/scss/components/top-bar/examples/default.html
+++ b/core/scss/components/top-bar/examples/default.html
@@ -1,5 +1,5 @@
 <header class="md-top-bar md-top-bar--dark" role="navigation">
-  <div class="md-top-bar__container row">
+  <div class="md-top-bar__container">
     <div class="md-top-bar__brand">
       <a class="md-brand" href="/">
         <div class="md-brand__logo">
diff --git a/core/scss/components/top-bar/examples/light.html b/core/scss/components/top-bar/examples/light.html
index 68fc4a2abe..1993adacde 100644
--- a/core/scss/components/top-bar/examples/light.html
+++ b/core/scss/components/top-bar/examples/light.html
@@ -1,5 +1,5 @@
 <header class="md-top-bar md-top-bar--light" role="navigation">
-  <div class="md-top-bar__container row">
+  <div class="md-top-bar__container">
     <div class="md-top-bar__brand">
       <a class="md-brand" href="/">
         <div class="md-brand__logo">
diff --git a/core/scss/components/top-bar/top-bar.scss b/core/scss/components/top-bar/top-bar.scss
index 29d4a99183..6db5bc5a5b 100644
--- a/core/scss/components/top-bar/top-bar.scss
+++ b/core/scss/components/top-bar/top-bar.scss
@@ -66,6 +66,8 @@
         flex: 0 1 auto;
         align-items: center;
         justify-content: flex-end;
+        order: 1;
+        margin-right: rem-calc(16);
 
         .#{$top-bar-class}__user {
           display: flex;
@@ -202,7 +204,6 @@
       @media #{$large-up} {
         flex: 0 1 auto;
         margin-right: 0;
-        margin-left: rem-calc(-16);
       }
 
       @media #{$large-only} {
diff --git a/react/src/lib/Topbar/index.js b/react/src/lib/Topbar/index.js
index 951167cc1a..f59214b017 100644
--- a/react/src/lib/Topbar/index.js
+++ b/react/src/lib/Topbar/index.js
@@ -97,7 +97,7 @@ class Topbar extends React.Component {
         ref={ref => {
           this.parentContainer = ref;
         }}>
-        <div className={`${mdTopBarClass}__container row`}>
+        <div className={`${mdTopBarClass}__container`}>
           {brandNode}
           {injectChildren}
         </div>
diff --git a/react/src/lib/Topbar/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Topbar/tests/__snapshots__/index.spec.js.snap
index ae92396a72..4aed6b8032 100644
--- a/react/src/lib/Topbar/tests/__snapshots__/index.spec.js.snap
+++ b/react/src/lib/Topbar/tests/__snapshots__/index.spec.js.snap
@@ -28,7 +28,7 @@ ShallowWrapper {
     "nodeType": "host",
     "props": Object {
       "children": <div
-        className="md-top-bar__container row"
+        className="md-top-bar__container"
       >
         <div
           className="md-top-bar__brand"
@@ -85,7 +85,7 @@ ShallowWrapper {
           </div>,
           null,
         ],
-        "className": "md-top-bar__container row",
+        "className": "md-top-bar__container",
       },
       "ref": null,
       "rendered": Array [
@@ -192,7 +192,7 @@ ShallowWrapper {
       "nodeType": "host",
       "props": Object {
         "children": <div
-          className="md-top-bar__container row"
+          className="md-top-bar__container"
         >
           <div
             className="md-top-bar__brand"
@@ -249,7 +249,7 @@ ShallowWrapper {
             </div>,
             null,
           ],
-          "className": "md-top-bar__container row",
+          "className": "md-top-bar__container",
         },
         "ref": null,
         "rendered": Array [