Update nav link & pill items height (#42146)

* Update nav link & pill items height

Currently, `link` and `nav-pills` items height sit at `36px` (because they don't have any borders), while `tab`, and `underline` sit at `38px`, which perfectly matches the height of  `input` and `button` components.

This PR adds an invisible border for the `link` and `nav-pills` items, so that all 4 `nav` variants share the exact same height, regardless of which is used, which makes it suitable to be used with other components, such as `input` or `buttons` for example, as described in this discussion: https://github.com/orgs/twbs/discussions/42145 without having discrepancy when it comes to elements height.

* Update scss/_nav.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>
* Shortened the code for borders & pill active states

Shortened the code for borders by using `border` attribute.

Also applied the correct background for pill shaped items.

* Removed border from nav links in DocsSidebar

Removed the invisible border so that the sidebar remains as condensed as it was before.

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 38182f93e9f68d262e4b7e77fbc545124f4dacaf..968450fede3aa350b6f221bc13cb75d198150aec 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -24,6 +24,7 @@ $nav-tokens: defaults(
     --nav-link-active-color: var(--fg-body),
     --nav-link-active-bg: var(--bg-2),
     --nav-link-disabled-color: var(--fg-4),
+    --nav-link-border-width: var(--border-width),
     --nav-link-transition-property: "color, background-color, border-color",
     --nav-link-transition-timing: .15s ease-in-out,
     --nav-link-transition: var(--nav-link-transition-property) var(--nav-link-transition-timing),
@@ -56,8 +57,8 @@ $nav-pills-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $nav-pills-tokens: defaults(
   (
-    --nav-pills-link-active-color: var(--component-active-color),
-    --nav-pills-link-active-bg: var(--component-active-bg),
+    --nav-pills-link-active-color: var(--primary-contrast),
+    --nav-pills-link-active-bg: var(--primary-bg),
   ),
   $nav-pills-tokens
 );
@@ -110,7 +111,7 @@ $nav-underline-tokens: defaults(
     text-decoration: none;
     white-space: nowrap;
     background: none;
-    border: 0;
+    border: var(--nav-link-border-width) solid transparent;
     @include border-radius(var(--border-radius));
     // @include font-size(var(--nav-link-font-size));
     @include transition(var(--nav-link-transition));
@@ -209,6 +210,7 @@ $nav-underline-tokens: defaults(
 
     .nav-link {
       padding-inline: 0;
+      border: 0;
       border-block-end: var(--nav-underline-border-width) solid transparent;
       @include border-radius(0);
 

diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro
index 3ce0be57a049a675c89eb9b42f1e804d1f24d654..c13943d516279f88b33535b98a074a6f74b59121 100644 (file)
--- a/site/src/components/DocsSidebar.astro
+++ b/site/src/components/DocsSidebar.astro
@@ -56,7 +56,7 @@ const sidebar = getData('sidebar')
                           <li>
                             <a
                               href={url}
-                              class:list={['nav-link bd-links-link', { active }]}
+                              class:list={['nav-link bd-links-link border-0', { active }]}
                               aria-current={active ? 'page' : undefined}
                             >
                               {page.title}
@@ -88,7 +88,7 @@ const sidebar = getData('sidebar')
                   <li>
                     <a
                       href={url}
-                      class:list={['nav-link bd-links-link', { active }]}
+                      class:list={['nav-link bd-links-link border-0', { active }]}
                       aria-current={active ? 'page' : undefined}
                     >
                       {item.title}