feat(navbar): various navbar spacing tweaks

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-navbar",
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.30",
   "description": "Forma 36: Navbar component",
   "scripts": {
     "build": "tsup"

packages/components/navbar/src/Navbar.styles.ts

@@ -40,7 +40,9 @@ export const getNavbarStyles = ({
 
   mobileNavigationButton: css({
     display: 'flex',
+    minHeight: 'initial', // unset default 40px height
     height: '36px',
+    padding: '0 12px',
     borderRadius: '10px',
     [mqs.small]: {
       display: 'none',

packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts

@@ -3,10 +3,12 @@ import tokens from '@contentful/f36-tokens';
 import { hexToRGBA } from '@contentful/f36-utils';
 import { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';
 
+const borderWidth = '1px';
+
 export const getNavbarItemActiveStyles = () =>
   css({
     backgroundColor: tokens.blue100,
-    border: `1px solid ${tokens.blue400}`,
+    border: `${borderWidth} solid ${tokens.blue400}`,
     color: tokens.blue600,
     '&:hover': {
       backgroundColor: tokens.blue100,
@@ -16,19 +18,19 @@ export const getNavbarItemActiveStyles = () =>
 const commonItemStyles = {
   display: 'flex',
   justifyContent: 'center',
-  padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,
+  padding: `calc(${tokens.spacing2Xs} - ${borderWidth}) calc(${tokens.spacingXs} - ${borderWidth})`,
   alignItems: 'center',
   background: 'none',
   gap: tokens.spacing2Xs,
 };
 
-export const getNavbarItemStyles = ({ title }) => ({
+export const getNavbarItemStyles = ({ hasTitle }: { hasTitle: boolean }) => ({
   navbarItem: css(
     commonItemStyles,
     {
       appearance: 'none',
       background: 'none',
-      border: '1px solid transparent',
+      border: `${borderWidth} solid transparent`,
       margin: 0,
       outline: 'none',
       fontSize: tokens.fontSizeM,
@@ -45,6 +47,10 @@ export const getNavbarItemStyles = ({ title }) => ({
       transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,
       borderRadius: tokens.borderRadiusMedium,
 
+      padding: hasTitle
+        ? undefined
+        : `calc(${tokens.spacing2Xs} - ${borderWidth})`, // square button for icon-only items
+
       '&:hover': {
         backgroundColor: hexToRGBA(tokens.gray900, 0.05),
       },
@@ -78,10 +84,12 @@ export const getNavbarItemStyles = ({ title }) => ({
   icon: css({
     height: '20px',
     width: '20px',
-    display: !title ? 'block' : 'none',
+    boxSizing: 'content-box',
+    display: hasTitle ? 'none' : 'block',
     [mqs.small]: {
       height: '16px',
       width: '16px',
+      padding: hasTitle ? '2px 0' : '2px', // square for icon-only items
     },
     [mqs.large]: {
       display: 'block',

packages/components/navbar/src/NavbarItem/NavbarItem.tsx

@@ -56,19 +56,18 @@ function _NavbarItem(
     onClose,
     ...otherProps
   } = props;
-  const styles = getNavbarItemStyles({ title });
+  const styles = getNavbarItemStyles({ hasTitle: !!title });
   const isMenuTrigger = isNavbarItemHasMenu(props);
+  const showCaret = title && isMenuTrigger;
   const item = (
     <Comp
       {...otherProps}
       ref={ref}
       data-test-id={testId}
-      className={cx(
-        styles.navbarItem,
-        isMenuTrigger && styles.navbarItemMenuTrigger,
-        isActive && styles.isActive,
-        className,
-      )}
+      className={cx(styles.navbarItem, className, {
+        [styles.navbarItemMenuTrigger]: showCaret,
+        [styles.isActive]: isActive,
+      })}
       aria-label={title ? '' : label}
     >
       {icon && (
@@ -79,7 +78,7 @@ function _NavbarItem(
         />
       )}
       {title && <span>{title}</span>}
-      {title && isMenuTrigger && <CaretIcon size="tiny" isActive={isActive} />}
+      {showCaret && <CaretIcon size="tiny" isActive={isActive} />}
     </Comp>
   );
 

packages/components/navbar/src/NavbarItem/NavbarItemSkeleton.tsx

@@ -14,14 +14,14 @@ export const NavbarItemSkeleton = ({
     <SkeletonContainer
       className={styles.itemSkeleton}
       svgWidth={estimatedWidth}
-      svgHeight={32}
+      svgHeight={28}
       backgroundColor={tokens.gray300}
       foregroundColor={tokens.gray200}
     >
       <SkeletonText
-        lineHeight={6}
+        lineHeight={18}
         numberOfLines={1}
-        offsetTop={10}
+        offsetTop={2}
         radiusX={tokens.borderRadiusSmall}
         radiusY={tokens.borderRadiusSmall}
       />

packages/components/navbar/src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  SkeletonContainer,
-  SkeletonDisplayText,
-} from '@contentful/f36-skeleton';
+import { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';
 import tokens from '@contentful/f36-tokens';
 
 export const NavbarSwitcherSkeleton = ({
@@ -12,15 +9,15 @@ export const NavbarSwitcherSkeleton = ({
 }) => (
   <SkeletonContainer
     svgWidth={estimatedWidth}
-    svgHeight={24}
+    svgHeight={18}
     backgroundColor={tokens.gray300}
     foregroundColor={tokens.gray200}
   >
-    <SkeletonDisplayText
-      lineHeight={24}
+    <SkeletonText
+      lineHeight={18}
       numberOfLines={1}
-      radiusX={12}
-      radiusY={12}
+      radiusX={tokens.borderRadiusSmall}
+      radiusY={tokens.borderRadiusSmall}
     />
   </SkeletonContainer>
 );

packages/components/navbar/stories/Navbar.stories.tsx

@@ -547,11 +547,7 @@ export const LoadingSkeleton: Story<{}> = () => {
       <Navbar
         mobileNavigation={<MobileMenu />}
         account={<Navbar.AccountSkeleton ariaLabel="Loading account" />}
-        switcher={
-          <Navbar.Switcher>
-            <Navbar.SwitcherSkeleton estimatedWidth={148} />
-          </Navbar.Switcher>
-        }
+        switcher={<Navbar.SwitcherSkeleton estimatedWidth={148} />}
         mainNavigation={
           <>
             <Navbar.ItemSkeleton estimatedWidth={100} />