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
momentum-design · Sep 11, 2019 · 35b4d0b · 35b4d0b
1 parent 4663d8e
commit 35b4d0b
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 [