Update styles for language toggle (#781)

* [rdar://122676572] fix: Update styles for language toggle

* [rdar://122676572] Apply underline styles to nav-menu-link

* [rdar://122676572] Adjust border under the nav to the bottom

* Update calculateSelectWidth

* Fix color for language toggle border

[rdar://122676572]

Author: marinaaisa

src/components/DocumentationTopic/DocumentationNav.vue

@@ -150,8 +150,9 @@ $sidenav-icon-padding-size: 5px;
       margin-left: 0;
       min-width: 0;
 
-      .nav-menu-link, .current-language, span {
+      .nav-menu-link {
         font-weight: $font-weight-semibold;
+        @include underline-text;
       }
 
       &:first-child:not(:only-child) {
@@ -168,7 +169,7 @@ $sidenav-icon-padding-size: 5px;
 
       @include nav-in-breakpoint() {
         &:not(:first-child) {
-          border-top: 1px solid dark-color(fill-gray-tertiary);
+          border-top: 1px solid var(--color-fill-gray-tertiary);
         }
       }
     }

src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue

@@ -190,7 +190,7 @@ export default {
     async calculateSelectWidth() {
       // await next tick, so we are sure the element is rendered.
       await this.$nextTick();
-      this.adjustedWidth = this.$refs['language-sizer'].clientWidth + 6;
+      this.adjustedWidth = this.$refs['language-sizer'].clientWidth + 8;
     },
   },
   computed: {
@@ -229,6 +229,7 @@ $dropdown-icon-padding: 11px;
 $nav-menu-toggle-label-margin: 6px;
 
 .nav-menu-setting-label {
+  display: inline-block;
   margin-right: $nav-menu-label-margin;
   white-space: nowrap;
 }
@@ -315,7 +316,7 @@ $nav-menu-toggle-label-margin: 6px;
     display: inline-block;
 
     &:not(:first-child) {
-      border-left: 1px solid dark-color(fill-gray-tertiary);
+      border-left: 1px solid var(--color-grid);
       margin-left: $nav-menu-toggle-label-margin;
       padding-left: $nav-menu-toggle-label-margin;
     }

src/components/NavBase.vue

@@ -495,7 +495,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
       content: "";
       display: block;
       position: absolute;
-      top: 100%;
+      bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: $content-max-width;

src/styles/core/_nav.scss

@@ -62,7 +62,7 @@ $nav-z-index: 9997;
 $nav-chevron-angle: 40deg;
 $nav-chevron-thickness: 1.5;
 $nav-chevron-transition: 0.3s linear transform;
-$nav-menu-label-margin: rem(6px);
+$nav-menu-label-margin: rem(5px);
 
 // Apply styles to animate the nav chevron downwards
 @mixin nav-chevron-animation {

tests/unit/components/DocumentationTopic/DocumentationNav/LanguageToggle.spec.js

@@ -100,13 +100,13 @@ describe('LanguageToggle', () => {
     const sizer = wrapper.find({ ref: 'language-sizer' }).element;
     const toggle = wrapper.find('#language-toggle');
     // clientWidth is now 0
-    expect(toggle.attributes()).toHaveProperty('style', 'width: 6px;');
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 8px;');
     Object.defineProperty(sizer, 'clientWidth', {
       get: () => 20,
     });
     toggle.setValue(Language.objectiveC.key.api);
     await wrapper.vm.$nextTick();
-    expect(toggle.attributes()).toHaveProperty('style', 'width: 26px;');
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 28px;');
   });
 
   it('applies the faux select width on the language toggle, on screen resize', async () => {
@@ -116,12 +116,12 @@ describe('LanguageToggle', () => {
       get: () => 20,
     });
     // clientWidth was 0
-    expect(toggle.attributes()).toHaveProperty('style', 'width: 6px;');
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 8px;');
     const resizeEvent = createEvent('resize');
     window.dispatchEvent(resizeEvent);
     await wrapper.vm.$nextTick();
     await flushPromises();
-    expect(toggle.attributes()).toHaveProperty('style', 'width: 26px;');
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 28px;');
   });
 
   it('applies the faux select width on the language toggle, on orientationchange', async () => {
@@ -131,11 +131,11 @@ describe('LanguageToggle', () => {
       get: () => 20,
     });
     // clientWidth was 0
-    expect(toggle.attributes()).toHaveProperty('style', 'width: 6px;');
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 8px;');
     const orientationchangeEvent = createEvent('orientationchange');
     window.dispatchEvent(orientationchangeEvent);
     await flushPromises();
-    expect(toggle.attributes()).toHaveProperty('style', 'width: 26px;');
+    expect(toggle.attributes()).toHaveProperty('style', 'width: 28px;');
   });
 
   it('does not render the chevron if it has no languages', () => {