Refactor CSS to eliminate vertical misalignment of login nav

app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js

@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
  * Does that setting the current selected tab in the localStorage
  */
 export default class SigninTabsMemoizer {
-  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();

app/assets/stylesheets/pages/login.scss

@@ -154,26 +154,10 @@
       a {
         width: 100%;
         font-size: 18px;
-        margin-right: 0;
-
-        &:hover {
-          border: 1px solid transparent;
-        }
       }
 
-      &.active {
+      &.active > a {
-        border-bottom: 1px solid $border-color;
+        cursor: default;
-
-        a {
-          border: 0;
-          border-bottom: 2px solid $link-underline-blue;
-          margin-right: 0;
-          color: $black;
-
-          &:hover {
-            border-bottom: 2px solid $link-underline-blue;
-          }
-        }
       }
     }
   }

app/views/devise/shared/_tab_single.html.haml

@@ -1,3 +1,3 @@
-%ul.nav-links.nav-tabs.new-session-tabs.single-tab
+%ul.nav-links.new-session-tabs.single-tab
   %li.active
     %a= tab_title

app/views/devise/shared/_tabs_ldap.html.haml

@@ -1,4 +1,4 @@
-%ul.new-session-tabs.nav-links.nav-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
+%ul.nav-links.new-session-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
   - if crowd_enabled?
     %li.active
       = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'

app/views/devise/shared/_tabs_normal.html.haml

@@ -1,4 +1,4 @@
-%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist' }
+%ul.nav-links.new-session-tabs{ role: 'tablist' }
   %li.active{ role: 'presentation' }
     %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
   - if allow_signup?

changelogs/unreleased/41748-vertical-misalignment-login-box.yml

@@ -0,0 +1,5 @@
+---
+title: Refactor CSS to eliminate vertical misalignment of login nav
+merge_request: 16275
+author: Takuya Noguchi
+type: fixed

spec/features/users/login_spec.rb

@@ -392,7 +392,7 @@ feature 'Login' do
     end
 
     def ensure_one_active_tab
-      expect(page).to have_selector('.nav-tabs > li.active', count: 1)
+      expect(page).to have_selector('ul.new-session-tabs > li.active', count: 1)
     end
 
     def ensure_one_active_pane

spec/javascripts/fixtures/linked_tabs.html.haml

@@ -1,4 +1,4 @@
-%ul.nav.nav-tabs.linked-tabs
+%ul.nav-links.new-session-tabs.linked-tabs
   %li
     %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
       Tab 1

spec/javascripts/fixtures/signin_tabs.html.haml

@@ -1,5 +1,5 @@
-%ul.nav-tabs
+%ul.nav-links.new-session-tabs
+  %li.active
+    %a{ href: '#ldap' } LDAP
   %li
-    %a.active{ id: 'standard', href: '#standard'} Standard
+    %a{ href: '#login-pane'} Standard
-  %li
-    %a{ id: 'ldap', href: '#ldap'} Ldap

spec/javascripts/signin_tabs_memoizer_spec.js

@@ -4,7 +4,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
 (() => {
   describe('SigninTabsMemoizer', () => {
     const fixtureTemplate = 'static/signin_tabs.html.raw';
-    const tabSelector = 'ul.nav-tabs';
+    const tabSelector = 'ul.new-session-tabs';
     const currentTabKey = 'current_signin_tab';
     let memo;
 
@@ -27,7 +27,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
     it('does nothing if no tab was previously selected', () => {
       createMemoizer();
 
-      expect(document.querySelector('li a.active').getAttribute('id')).toEqual('standard');
+      expect(document.querySelector(`${tabSelector} > li.active a`).getAttribute('href')).toEqual('#ldap');
     });
 
     it('shows last selected tab on boot', () => {
@@ -48,9 +48,9 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
     it('saves last selected tab on change', () => {
       createMemoizer();
 
-      document.getElementById('standard').click();
+      document.querySelector('a[href="#login-pane"]').click();
 
-      expect(memo.readData()).toEqual('#standard');
+      expect(memo.readData()).toEqual('#login-pane');
     });
 
     it('overrides last selected tab with hash tag when given', () => {