Sidenav styles review

lib/src/common/variables.ts

@@ -721,11 +721,11 @@ export const componentTokens = {
     groupTitleFontWeight: CORE_TOKENS.type_semibold,
     groupTitleFontColor: CORE_TOKENS.color_black,
     groupTitleHoverBackgroundColor: CORE_TOKENS.color_grey_200,
-    groupTitleActiveBackgroundColor: CORE_TOKENS.color_grey_300,
+    groupTitleActiveBackgroundColor: CORE_TOKENS.color_grey_800,
     groupTitleSelectedFontColor: CORE_TOKENS.color_white,
     groupTitleSelectedBackgroundColor: CORE_TOKENS.color_grey_800,
     groupTitleSelectedHoverFontColor: CORE_TOKENS.color_white,
-    groupTitleSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_600,
+    groupTitleSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900,
     groupTitleFontTextTransform: CORE_TOKENS.type_uppercase,
     groupTitleFontLetterSpacing: CORE_TOKENS.type_spacing_wide_02,
     linkFontFamily: CORE_TOKENS.type_sans,
@@ -737,7 +737,7 @@ export const componentTokens = {
     linkSelectedFontColor: CORE_TOKENS.color_white,
     linkSelectedBackgroundColor: CORE_TOKENS.color_grey_800,
     linkSelectedHoverFontColor: CORE_TOKENS.color_white,
-    linkSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_600,
+    linkSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900,
     linkFontTextTransform: "none",
     linkFontLetterSpacing: CORE_TOKENS.type_spacing_wide_01,
     linkTextDecoration: CORE_TOKENS.type_no_line,

lib/src/sidenav/Sidenav.tsx

@@ -23,14 +23,7 @@ const DxcSidenav = ({ title, children }: SidenavPropsType): JSX.Element => {
         <BackgroundColorProvider color={colorsTheme.sidenav.backgroundColor}>
           {title}
           <DxcFlex direction="column" gap="1rem">
-            {React.Children.map(children, (child, index) => {
-              return (
-                <>
-                  {child}
-                  {index !== React.Children.count(children) - 1 && <Divider />}
-                </>
-              );
-            })}
+            {children}
           </DxcFlex>
         </BackgroundColorProvider>
       </SidenavContainer>
@@ -45,9 +38,12 @@ const Title = ({ children }: SidenavTitlePropsType): JSX.Element => (
 );
 
 const Section = ({ children }: SidenavSectionPropsType): JSX.Element => (
-  <DxcBleed horizontal="1rem">
-    <DxcFlex direction="column">{children}</DxcFlex>
-  </DxcBleed>
+  <>
+    <DxcBleed horizontal="1rem">
+      <DxcFlex direction="column">{children}</DxcFlex>
+    </DxcBleed>
+    <Divider />
+  </>
 );
 
 const GroupContext = React.createContext<React.Dispatch<React.SetStateAction<boolean>> | null>(null);
@@ -124,13 +120,12 @@ const SidenavContainer = styled.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background-color: ${(props) => props.theme.backgroundColor};
   width: 280px;
   @media (max-width: ${responsiveSizes.medium}rem) {
     width: 100vw;
   }
-  height: 100%;
   padding: 2rem 1rem;
+  background-color: ${(props) => props.theme.backgroundColor};
 
   overflow-y: auto;
   overflow-x: hidden;
@@ -156,18 +151,21 @@ const SidenavTitle = styled.div`
   font-weight: ${(props) => props.theme.titleFontWeight};
   font-size: ${(props) => props.theme.titleFontSize};
   color: ${(props) => props.theme.titleFontColor};
-  text-transform: ${(props) => props.theme.titleFontTextTransform};
   letter-spacing: ${(props) => props.theme.titleFontLetterSpacing};
+  text-transform: ${(props) => props.theme.titleFontTextTransform};
 `;
 
 const Divider = styled.div`
   width: 100%;
   height: 1px;
   background-color: #999999;
+
+  &:last-child {
+    display: none;
+  }
 `;
 
 const SidenavGroup = styled.div`
-  width: 100%;
   a {
     padding: 0.5rem 1.2rem 0.5rem 2.25rem;
   }
@@ -221,8 +219,8 @@ const SidenavGroupTitleButton = styled.button<{ selectedGroup: boolean }>`
         : `color: ${props.theme.groupTitleFontColor}; background-color: ${props.theme.groupTitleHoverBackgroundColor};`}
   }
   &:active {
-    background-color: ${(props) => props.theme.groupTitleActiveBackgroundColor};
-    color: ${(props) => props.theme.groupTitleFontColor};
+    color: #fff;
+    background-color: ${(props) => (props.selectedGroup ? "#333" : props.theme.groupTitleActiveBackgroundColor)};
   }
 
   img,
@@ -239,13 +237,13 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>`
   gap: 0.5rem;
   padding: 0.5rem 1.2rem;
   box-shadow: 0 0 0 2px transparent;
-  letter-spacing: ${(props) => props.theme.linkFontLetterSpacing};
-  text-transform: ${(props) => props.theme.linkFontTextTransform};
-  text-decoration: ${(props) => props.theme.linkTextDecoration};
   font-family: ${(props) => props.theme.linkFontFamily};
   font-style: ${(props) => props.theme.linkFontStyle};
   font-weight: ${(props) => props.theme.linkFontWeight};
   font-size: ${(props) => props.theme.linkFontSize};
+  letter-spacing: ${(props) => props.theme.linkFontLetterSpacing};
+  text-transform: ${(props) => props.theme.linkFontTextTransform};
+  text-decoration: ${(props) => props.theme.linkTextDecoration};
   cursor: pointer;
 
   ${(props) =>
@@ -264,8 +262,8 @@ const SidenavLink = styled.a<{ selected: SidenavLinkPropsType["selected"] }>`
         : `color: ${props.theme.linkFontColor}; background-color: ${props.theme.linkHoverBackgroundColor};`}
   }
   &:active {
-    color: #ffffff;
-    background-color: #4d4d4d;
+    color: #fff;
+    background-color: ${(props) => (props.selected ? "#333" : "#4d4d4d")};
     outline: 2px solid #0095ff;
     outline-offset: -2px;
   }

website/screens/components/sidenav/code/SidenavCodePage.tsx

@@ -32,10 +32,7 @@ const sections = [
         <tr>
           <td>children: node</td>
           <td></td>
-          <td>
-            The area inside the sidenav. The content will be placed inside a
-            stack with a divider between each element.
-          </td>
+          <td>The area inside the sidenav.</td>
         </tr>
       </DxcTable>
     ),
@@ -78,6 +75,7 @@ const sections = [
         Sections must be defined as direct children of the{" "}
         <Code>DxcSidenav</Code> and serve to group links, groups and/or custom
         content into different and distinguishable parts of the component.
+        Consecutive sections are separated by a divider.
       </DxcParagraph>
     ),
     subSections: [
@@ -94,8 +92,8 @@ const sections = [
               <td>children: node</td>
               <td></td>
               <td>
-                The area inside the sidenav section. This area can be used to
-                render sidenav groups, links and custom content.
+                The area inside the sidenav section. Child items will be stacked
+                inside a flex container.
               </td>
             </tr>
           </DxcTable>

website/screens/components/sidenav/specs/SidenavSpecsPage.tsx

@@ -102,9 +102,9 @@ const sections = [
                 </td>
                 <td>Group title background:active</td>
                 <td>
-                  <Code>color-grey-300</Code>
+                  <Code>color-grey-800</Code>
                 </td>
-                <td>#cccccc</td>
+                <td>#4d4d4d</td>
               </tr>
               <tr>
                 <td>
@@ -142,9 +142,9 @@ const sections = [
                 </td>
                 <td>Group title background:selected hover</td>
                 <td>
-                  <Code>color-grey-600</Code>
+                  <Code>color-grey-900</Code>
                 </td>
-                <td>#808080</td>
+                <td>#333333</td>
               </tr>
               <tr>
                 <td>
@@ -202,9 +202,9 @@ const sections = [
                 </td>
                 <td>Link background:selected hover</td>
                 <td>
-                  <Code>color-grey-600</Code>
+                  <Code>color-grey-900</Code>
                 </td>
-                <td>#808080</td>
+                <td>#333333</td>
               </tr>
               <tr>
                 <td>

website/screens/principles/themes/examples/defaultAdvancedTheme.ts

@@ -719,11 +719,11 @@ export default {
     groupTitleFontWeight: "600",
     groupTitleFontColor: "#000000",
     groupTitleHoverBackgroundColor: "#e6e6e6",
-    groupTitleActiveBackgroundColor: "#cccccc",
+    groupTitleActiveBackgroundColor: "#4d4d4d",
     groupTitleSelectedFontColor: "#ffffff",
     groupTitleSelectedBackgroundColor: "#4d4d4d",
     groupTitleSelectedHoverFontColor: "#ffffff",
-    groupTitleSelectedHoverBackgroundColor: "#808080",
+    groupTitleSelectedHoverBackgroundColor: "#333333",
     groupTitleFontTextTransform: "uppercase",
     groupTitleFontLetterSpacing: "0.05em",
     linkFontFamily: "Open Sans, sans-serif",
@@ -735,7 +735,7 @@ export default {
     linkSelectedFontColor: "#ffffff",
     linkSelectedBackgroundColor: "#4d4d4d",
     linkSelectedHoverFontColor: "#ffffff",
-    linkSelectedHoverBackgroundColor: "#808080",
+    linkSelectedHoverBackgroundColor: "#333333",
     linkFontTextTransform: "none",
     linkFontLetterSpacing: "0.025em",
     linkTextDecoration: "none",

website/screens/theme-generator/components/previews/Sidenav.tsx

@@ -31,7 +31,7 @@ const Sidenav = () => (
             collapsable
             icon={icon}
           >
-            <DxcApplicationLayout.SideNav.Link>
+            <DxcApplicationLayout.SideNav.Link selected>
               Lorem ipsum
             </DxcApplicationLayout.SideNav.Link>
             <DxcApplicationLayout.SideNav.Link>

website/screens/theme-generator/themes/advanced-theme.json

@@ -719,11 +719,11 @@
     "groupTitleFontWeight": "600",
     "groupTitleFontColor": "#000000",
     "groupTitleHoverBackgroundColor": "#e6e6e6",
-    "groupTitleActiveBackgroundColor": "#cccccc",
+    "groupTitleActiveBackgroundColor": "#4d4d4d",
     "groupTitleSelectedFontColor": "#ffffff",
     "groupTitleSelectedBackgroundColor": "#4d4d4d",
     "groupTitleSelectedHoverFontColor": "#ffffff",
-    "groupTitleSelectedHoverBackgroundColor": "#808080",
+    "groupTitleSelectedHoverBackgroundColor": "#333333",
     "groupTitleFontTextTransform": "uppercase",
     "groupTitleFontLetterSpacing": "0.05em",
     "linkFontFamily": "Open Sans, sans-serif",
@@ -735,7 +735,7 @@
     "linkSelectedFontColor": "#ffffff",
     "linkSelectedBackgroundColor": "#4d4d4d",
     "linkSelectedHoverFontColor": "#ffffff",
-    "linkSelectedHoverBackgroundColor": "#808080",
+    "linkSelectedHoverBackgroundColor": "#333333",
     "linkFontTextTransform": "none",
     "linkFontLetterSpacing": "0.025em",
     "linkTextDecoration": "none",