fix(ui-top-nav-bar): fix topnavbar item width changing

Closes: INSTUI-4085
instructure · Jun 25, 2024 · 88993e2 · 88993e2
1 parent a65f336
commit 88993e2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/index.tsx
@@ -493,7 +493,7 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
                 {this.renderAvatar()}
               </span>
             )}
-            {content}
+            <span css={styles?.contentText}>{content}</span>
             {this.submenuIcon}
           </div>
         )}

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts
@@ -269,6 +269,7 @@ type TopNavBarItemStyle = ComponentStyle<
   | 'topNavBarItem'
   | 'container'
   | 'content'
+  | 'contentText'
   | 'avatarContainer'
   | 'submenuTriggerContainer'
   | 'submenuIcon'

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/styles.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/styles.ts
@@ -108,14 +108,25 @@ const generateStyle = (
       color: inverseColor ? componentTheme.colorInverse : componentTheme.color,
 
       ...(isActive && {
-        fontWeight: componentTheme.activeItemFontWeight,
-        letterSpacing: -0.1818
+        fontWeight: componentTheme.activeItemFontWeight
       }),
 
       '*': {
         pointerEvents: 'none'
       }
     },
+    contentText: {
+      textAlign: 'center',
+      '&::before': {
+        display: 'block',
+        content: `"${props.children?.toString()}"`,
+        fontWeight: componentTheme.activeItemFontWeight,
+        height: '0px',
+        color: 'transparent',
+        overflow: 'hidden',
+        visibility: 'hidden'
+      }
+    },
     avatarContainer: {
       label: 'topNavBarItem__avatarContainer',
       display: 'flex',