feat: improve responsiveness of navbar (#2934)

* feat: export media queries * feat: improve responsiveness of space switcher * refactor: give proper class name * chore: remove unneeded style * feat: improve switcher responsiveness * feat: adjust switcher label designs * fix: switcher label overflows * fix: adjust spacing left * fix: do not show decorator on non space contexts * fix: implement type safety fallback (#2933) * feat: enable different mobile navigation breakpoint * chore: update readme broken link * chore: release 5.0.0-alpha.41
contentful · Nov 26, 2024 · bfb427a · bfb427a
1 parent 4f7caab
commit bfb427a
Show file tree

Hide file tree

Showing 11 changed files with 304 additions and 215 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/forms/src/Textarea/README.mdx b/packages/components/forms/src/Textarea/README.mdx
@@ -67,6 +67,6 @@ When `Textarea` is used outside of form (without `FormControl`) and has no `<lab
 
 ## Props (API reference)
 
-This component also accepts [relevant HTML attributes](https://www.w3.org/wiki/HTML/Elements/textarea) as props. These include `rows`, `autoFocus` and `autoComplete`.
+This component also accepts [relevant HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) as props. These include `rows`, `autoFocus` and `autoComplete`.
 
 <PropsTable of="Textarea" />
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-navbar",
-  "version": "5.0.0-alpha.39",
+  "version": "5.0.0-alpha.41",
   "description": "Forma 36: Navbar component",
   "scripts": {
     "build": "tsup"

diff --git a/packages/components/navbar/src/Navbar.styles.ts b/packages/components/navbar/src/Navbar.styles.ts
@@ -32,23 +32,45 @@ export const getNavbarStyles = ({
     },
   }),
 
-  mainNavigation: css({
-    display: 'none',
-    [mqs.small]: {
-      display: 'flex',
-    },
-  }),
+  mainNavigation: (mobileNavigationBp: 'small' | 'medium') =>
+    css(
+      {
+        display: 'none',
+      },
+      mobileNavigationBp === 'small'
+        ? {
+            [mqs.small]: {
+              display: 'flex',
+            },
+          }
+        : {
+            [mqs.medium]: {
+              display: 'flex',
+            },
+          },
+    ),
 
-  mobileNavigationButton: css({
-    display: 'flex',
-    minHeight: 'initial', // unset default 40px height
-    height: '36px',
-    padding: '0 12px',
-    borderRadius: '10px',
-    [mqs.small]: {
-      display: 'none',
-    },
-  }),
+  mobileNavigationButton: (mobileNavigationBp: 'small' | 'medium') =>
+    css(
+      {
+        display: 'flex',
+        minHeight: 'initial', // unset default 40px height
+        height: '36px',
+        padding: '0 12px',
+        borderRadius: '10px',
+      },
+      mobileNavigationBp === 'small'
+        ? {
+            [mqs.small]: {
+              display: 'none',
+            },
+          }
+        : {
+            [mqs.medium]: {
+              display: 'none',
+            },
+          },
+    ),
   mobileNavigationIcon: css({
     heigt: '20px',
     width: '20px',
@@ -62,7 +84,12 @@ export const getNavbarStyles = ({
       },
     },
   }),
-
+  promoNavigationWrapper: css({
+    display: 'none',
+    [mqs.large]: {
+      display: 'flex',
+    },
+  }),
   account: css({
     display: 'none',
     [mqs.xsmall]: {

diff --git a/packages/components/navbar/src/Navbar.tsx b/packages/components/navbar/src/Navbar.tsx
@@ -32,6 +32,9 @@ type NavbarOwnProps = CommonProps & {
   /** Navigation displayed on mobile versions */
   mobileNavigation?: React.ReactNode;
 
+  /** breakpoint to determine when to show the mobile navigation */
+  mobileNavigationBp?: 'small' | 'medium';
+
   /**
    * Defines the max-width of the content inside the navbar.
    * @default '100%'
@@ -59,6 +62,7 @@ function _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {
     secondaryNavigation,
     account,
     mobileNavigation,
+    mobileNavigationBp = 'small',
     className,
     contentMaxWidth = '100%',
     testId = 'cf-ui-navbar',
@@ -87,7 +91,7 @@ function _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {
             <NavbarMenu
               trigger={
                 <Button
-                  className={styles.mobileNavigationButton}
+                  className={styles.mobileNavigationButton(mobileNavigationBp)}
                   startIcon={<ListIcon size="medium" />}
                 >
                   Menu
@@ -99,7 +103,7 @@ function _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {
           )}
           {mainNavigation && (
             <Flex
-              className={styles.mainNavigation}
+              className={styles.mainNavigation(mobileNavigationBp)}
               aria-label="Main Navigation"
               gap="spacingXs"
             >
@@ -108,7 +112,14 @@ function _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {
           )}
         </Flex>
         <Flex alignItems="center" gap="spacingXs">
-          <Flex alignItems="center">{promotions}</Flex>
+          <Flex
+            alignItems="center"
+            className={styles.promoNavigationWrapper}
+            aria-label="Promotions"
+            gap="spacingXs"
+          >
+            {promotions}
+          </Flex>
           <Flex alignItems="center">{switcher}</Flex>
           <Flex alignItems="center" gap="spacingXs">
             {secondaryNavigation && (

diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts
@@ -11,83 +11,102 @@ export const getNavbarSwitcherStyles = ({
 }: {
   isMaster: boolean;
 }) => ({
-  text: css({
-    color: 'currentcolor',
-    fontWeight: 'inherit',
-  }),
-
   navbarSwitcher: ({ showSpaceEnv }: { showSpaceEnv: boolean }) =>
     css(
       {
         color: tokens.gray600,
         flexShrink: 1,
         fontWeight: tokens.fontWeightMedium,
-        maxWidth: '100%',
+
+        maxWidth: '50vw',
         minHeight: 'unset',
         padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,
         '&:hover': {
           backgroundColor: hexToRGBA(tokens.gray900, 0.05),
         },
+        [mqs.xsmall]: {
+          maxWidth: '45vw',
+        },
+        [mqs.medium]: {
+          maxWidth: '35vw',
+        },
+        [mqs.large]: {
+          maxWidth: '25vw',
+        },
+        [mqs.xlarge]: {
+          maxWidth: '600px',
+        },
       },
       showSpaceEnv && getEnvVariantColor(isMaster),
       getGlowOnFocusStyles(),
       increaseHitArea(),
     ),
+  switcherWrapper: ({ showSpaceEnv }: { showSpaceEnv: boolean }) =>
+    css({
+      // Set min-width only when there are three span children
+      gap: tokens.spacingXs,
+      alignItems: 'center',
+      minWidth: 0,
+      '&:has(> span:last-child:nth-child(3))': {
+        minWidth: '12ch',
+      },
+      '&:before': css({
+        content: '""',
+        position: 'absolute',
+        display: 'block',
+        width: `calc(8px - ${BORDER_WIDTH}px)`,
+        height: showSpaceEnv ? '26px' : 'unset',
+        borderTopLeftRadius: `calc(${tokens.borderRadiusMedium} - ${BORDER_WIDTH}px)`,
+        borderBottomLeftRadius: `calc(${tokens.borderRadiusMedium} - ${BORDER_WIDTH}px)`,
+        background: isMaster
+          ? tokens.green300
+          : `linear-gradient(
+          -45deg, 
+          ${tokens.orange300} 28.57%, 
+          transparent 28.57%, 
+          transparent 50%, 
+          ${tokens.orange300} 50%, 
+          ${tokens.orange300} 78.57%, 
+          transparent 78.57%, 
+          transparent 100%
+        )`,
+        backgroundSize: isMaster ? 'inherit' : '9px 9px',
+        backgroundPosition: 'bottom',
+      }),
+    }),
 
-  innerRectangle: css({
-    width: `calc(8px - ${BORDER_WIDTH}px)`,
-    borderTopLeftRadius: `calc(${tokens.borderRadiusMedium} - ${BORDER_WIDTH}px)`,
-    borderBottomLeftRadius: `calc(${tokens.borderRadiusMedium} - ${BORDER_WIDTH}px)`,
-    background: isMaster
-      ? tokens.green300
-      : `linear-gradient(
-        -45deg, 
-        ${tokens.orange300} 28.57%, 
-        transparent 28.57%, 
-        transparent 50%, 
-        ${tokens.orange300} 50%, 
-        ${tokens.orange300} 78.57%, 
-        transparent 78.57%, 
-        transparent 100%
-      )`,
-    backgroundSize: isMaster ? 'inherit' : '9px 9px',
-    backgroundPosition: 'bottom',
+  switcherLabelWrapper: css({
+    height: '26px',
+    paddingLeft: `calc(${tokens.spacingXs} * 2)`,
+    alignItems: 'center',
+    gap: tokens.spacing2Xs,
+    maxWidth: '100%',
   }),
 
-  innerSpaceEnv: css({
-    height: '26px',
+  switcherLabel: css({
+    color: 'currentcolor',
+    fontWeight: 'inherit',
+    lineHeight: 'unset',
+    display: 'inline-block',
+    flexShrink: 1,
+    minWidth: '0',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   }),
 
-  switcherSpaceName: css({
-    // Set min-width only when there are three span children
-    '&:has(> span:last-child:nth-child(3))': {
-      minWidth: '12ch',
-    },
-    maxWidth: '15vw',
-    [mqs.xsmall]: {
-      maxWidth: '50vw',
-    },
-    [mqs.small]: {
-      maxWidth: '10vw',
-    },
-    [mqs.medium]: {
-      maxWidth: '50vw',
-    },
+  switcherCaret: css({
+    flexShrink: 0,
+    minWidth: 0,
   }),
 
   switcherEnvIcon: css({
+    minWidth: '0',
     [mqs.small]: {
       width: '16px',
       height: '16px',
     },
   }),
-
-  switcherSpaceNameTruncation: css({
-    flexShrink: 1,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  }),
 });
 
 const getEnvVariantColor = (isMaster: boolean) => ({