From 7716b317c3e872e949628205ea03667df05893ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan?= <broccolinisoup@github.com>
Date: Thu, 27 Jul 2023 11:02:27 +1000
Subject: [PATCH] Take the listing html structure back to its original
 structure (#3559)

---
 src/UnderlineNav2/UnderlineNav.tsx     | 13 +----
 src/UnderlineNav2/UnderlineNavItem.tsx | 72 +++++++++++++-------------
 2 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 97819919e43..38aad66a99f 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -310,18 +310,7 @@ export const UnderlineNav = forwardRef(
           ref={navRef}
         >
           <NavigationList sx={ulStyles} ref={listRef} role="list">
-            {listItems.map(listItem => {
-              return (
-                <Box
-                  key={listItem.props.children}
-                  as="li"
-                  sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}
-                >
-                  {listItem}
-                </Box>
-              )
-            })}
-
+            {listItems}
             {menuItems.length > 0 && (
               <MoreMenuListItem ref={moreMenuRef}>
                 {!onlyMenuVisible && <Box sx={getDividerStyle(theme)}></Box>}
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
index 836b24ebb59..3ee52796667 100644
--- a/src/UnderlineNav2/UnderlineNavItem.tsx
+++ b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -114,43 +114,45 @@ export const UnderlineNavItem = forwardRef(
     )
 
     return (
-      <Link
-        ref={ref}
-        as={Component}
-        href={href}
-        aria-current={ariaCurrent}
-        onKeyDown={keyDownHandler}
-        onClick={clickHandler}
-        sx={merge<BetterSystemStyleObject>(getLinkStyles(theme, ariaCurrent), sxProp as SxProp)}
-        {...props}
-      >
-        {iconsVisible && Icon && (
-          <Box as="span" data-component="icon" sx={iconWrapStyles}>
-            <Icon />
-          </Box>
-        )}
-        {children && (
-          <Box
-            as="span"
-            data-component="text"
-            data-content={children}
-            sx={Boolean(ariaCurrent) && ariaCurrent !== 'false' ? {fontWeight: 600} : {}}
-          >
-            {children}
-          </Box>
-        )}
-        {loadingCounters ? (
-          <Box as="span" data-component="counter" sx={counterStyles}>
-            <LoadingCounter />
-          </Box>
-        ) : (
-          counter !== undefined && (
+      <Box as="li" sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+        <Link
+          ref={ref}
+          as={Component}
+          href={href}
+          aria-current={ariaCurrent}
+          onKeyDown={keyDownHandler}
+          onClick={clickHandler}
+          sx={merge<BetterSystemStyleObject>(getLinkStyles(theme, ariaCurrent), sxProp as SxProp)}
+          {...props}
+        >
+          {iconsVisible && Icon && (
+            <Box as="span" data-component="icon" sx={iconWrapStyles}>
+              <Icon />
+            </Box>
+          )}
+          {children && (
+            <Box
+              as="span"
+              data-component="text"
+              data-content={children}
+              sx={Boolean(ariaCurrent) && ariaCurrent !== 'false' ? {fontWeight: 600} : {}}
+            >
+              {children}
+            </Box>
+          )}
+          {loadingCounters ? (
             <Box as="span" data-component="counter" sx={counterStyles}>
-              <CounterLabel>{counter}</CounterLabel>
+              <LoadingCounter />
             </Box>
-          )
-        )}
-      </Link>
+          ) : (
+            counter !== undefined && (
+              <Box as="span" data-component="counter" sx={counterStyles}>
+                <CounterLabel>{counter}</CounterLabel>
+              </Box>
+            )
+          )}
+        </Link>
+      </Box>
     )
   },
 ) as PolymorphicForwardRefComponent<'a', UnderlineNavItemProps>