Merge df426f9 into 13a6f0d

hashicorp · Oct 6, 2022 · e3393f2 · e3393f2
2 parents 13a6f0d + df426f9
commit e3393f2
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/popular-news-cough.md b/.changeset/popular-news-cough.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/react-subnav": patch
+---
+
+Ensure subnav link items are centered when there is no overflow
diff --git a/packages/subnav/docs.mdx b/packages/subnav/docs.mdx
@@ -18,6 +18,16 @@ Displays a navigation bar, with links and a call-to-action. Links can be organiz
 />`}
 </LiveComponent>
 
+## Without CTA:
+<Subnav
+  titleLink={{ text: 'Title', url: '#' }}
+  menuItems={[
+    { text: 'Link One', url: '#'},
+    { text: 'Link Two', url: '#'},
+    { text: 'Link Three', url: '#'}
+  ]}
+/>
+
 <UsageDetails packageJson={packageJson} />
 
 ### Props

diff --git a/packages/subnav/index.js b/packages/subnav/index.js
@@ -70,6 +70,7 @@ function SubnavInner({
       <div
         className={classNames(s.subnavInner, themeClass, {
           [s.notConstrained]: !constrainWidth,
+          [s.hasOverflow]: hasOverflow,
         })}
         data-overflow-target
       >

diff --git a/packages/subnav/partials/CtaLinks/style.module.css b/packages/subnav/partials/CtaLinks/style.module.css
@@ -1,7 +1,7 @@
 .root {
   align-items: center;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   white-space: nowrap;
 
   & > * + * {

diff --git a/packages/subnav/style.module.css b/packages/subnav/style.module.css
@@ -36,10 +36,15 @@
 }
 
 .subnavInner {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
   height: 62px;
 
+  &.hasOverflow {
+    display: flex;
+  }
+
   &.notConstrained {
     padding: 0 24px;