Merge pull request #668 from strapi/enhancement/subnav-v2-alignment

Subnav (v2): Improve styling of child links

Author: Gustav Hansen

packages/strapi-design-system/src/v2/SubNav/SubNav.stories.mdx

@@ -106,13 +106,13 @@ import {
                     </SubNavLink>
                   ))}
                 </SubNavSection>
-                <Box paddingLeft={7}>
+                <Box paddingLeft={7} paddingBottom={3}>
                   <TextButton startIcon={<Plus />}>Click on me</TextButton>
                 </Box>
                 <SubNavSection label="Single Type" collapsable badgeLabel={links.length.toString()}>
                   <SubNavLinkSection label="Default">
                     {links.map((link) => (
-                      <SubNavLink to={link.to} key={link.id}>
+                      <SubNavLink to={link.to} key={link.id} isSubSectionChild>
                         {link.label}
                       </SubNavLink>
                     ))}
@@ -135,7 +135,7 @@ import {
                   {links.map(
                     (link) =>
                       link.icon && (
-                        <SubNavLink to={link.to} active={link.active} icon={link.icon} key={link.id}>
+                        <SubNavLink to={link.to} active={link.active} icon={link.icon} key={link.id} isSubSectionChild>
                           {link.label}
                         </SubNavLink>
                       ),

packages/strapi-design-system/src/v2/SubNav/SubNavLink.js

@@ -51,13 +51,13 @@ const IconWrapper = styled.div`
   }
 `;
 
-export const SubNavLink = React.forwardRef(({ children, icon, withBullet, as, ...props }, ref) => {
+export const SubNavLink = React.forwardRef(({ children, icon, withBullet, as, isSubSectionChild, ...props }, ref) => {
   return (
     <SubNavLinkWrapper
       as={as}
       icon={icon}
       background="neutral100"
-      paddingLeft={7}
+      paddingLeft={isSubSectionChild ? 9 : 7}
       paddingBottom={2}
       paddingTop={2}
       ref={ref}
@@ -82,12 +82,14 @@ SubNavLink.displayName = 'SubNavLink';
 SubNavLink.defaultProps = {
   as: BaseLink,
   icon: null,
+  isSubSectionChild: false,
   withBullet: false,
 };
 SubNavLink.propTypes = {
   as: PropTypes.elementType,
   children: PropTypes.node,
   icon: PropTypes.element,
+  isSubSectionChild: PropTypes.bool,
   link: PropTypes.element,
   withBullet: PropTypes.bool,
 };

packages/strapi-design-system/src/v2/SubNav/SubNavLinkSection.js

@@ -8,7 +8,6 @@ import { Typography } from '../../Typography';
 import { useId } from '../../helpers/useId';
 
 const SubNavLinkSectionWrapper = styled(Box)`
-  max-height: ${32 / 16}rem;
   svg {
     height: ${4 / 16}rem;
     path {

packages/strapi-design-system/src/v2/SubNav/SubNavSection.js

@@ -2,24 +2,19 @@ import React, { Children, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '../../Box';
-import { Flex } from '../../Flex';
 import { Badge } from '../../Badge';
+import { Stack } from '../../Stack';
 import { SubNavSectionLabel } from './SubNavSectionLabel';
 import { useId } from '../../helpers/useId';
 
 const SubNavSectionWrapper = styled(Box)`
-  max-height: ${32 / 16}rem;
   svg {
     height: ${4 / 16}rem;
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
 `;
-const SubNavSectionBadge = styled(Badge)`
-  display: flex;
-  align-items: center;
-`;
 
 export const SubNavSection = ({ collapsable, label, badgeLabel, children, id }) => {
   const [isOpen, setOpenLinks] = useState(true);
@@ -30,9 +25,9 @@ export const SubNavSection = ({ collapsable, label, badgeLabel, children, id })
   };
 
   return (
-    <Box>
+    <Stack spacing={1}>
       <SubNavSectionWrapper paddingLeft={6} paddingTop={2} paddingBottom={2} paddingRight={4}>
-        <Flex justifyContent="space-between">
+        <Box position="relative" paddingRight={badgeLabel ? 6 : 0}>
           <SubNavSectionLabel
             onClick={handleClick}
             ariaExpanded={isOpen}
@@ -41,20 +36,27 @@ export const SubNavSection = ({ collapsable, label, badgeLabel, children, id })
             label={label}
           />
           {badgeLabel && (
-            <SubNavSectionBadge backgroundColor="neutral150" textColor="neutral600">
+            <Badge
+              backgroundColor="neutral150"
+              textColor="neutral600"
+              position="absolute"
+              right={0}
+              top="50%"
+              transform="translateY(-50%)"
+            >
               {badgeLabel}
-            </SubNavSectionBadge>
+            </Badge>
           )}
-        </Flex>
+        </Box>
       </SubNavSectionWrapper>
       {(!collapsable || isOpen) && (
-        <ul id={listId}>
+        <ol id={listId}>
           {Children.map(children, (child, index) => {
             return <li key={index}>{child}</li>;
           })}
-        </ul>
+        </ol>
       )}
-    </Box>
+    </Stack>
   );
 };
 

packages/strapi-design-system/src/v2/SubNav/SubNavSectionLabel.js

@@ -25,6 +25,7 @@ export const SubNavSectionLabel = ({ collapsable, label, onClick, ariaExpanded,
         onClick={onClick}
         aria-expanded={ariaExpanded}
         aria-controls={ariaControls}
+        textAlign="left"
       >
         <Box paddingRight={1}>
           <Typography variant="sigma" textColor="neutral600">

packages/strapi-design-system/src/v2/SubNav/SubNavSections.js

@@ -6,7 +6,7 @@ import { Box } from '../../Box';
 export const SubNavSections = ({ children, ...props }) => {
   return (
     <Box paddingTop={2} paddingBottom={4}>
-      <Stack as="ul" spacing={2} {...props}>
+      <Stack as="ol" spacing={2} {...props}>
         {Children.map(children, (child, index) => {
           return <li key={index}>{child}</li>;
         })}