feat(VerticalNavigation): move chevrons to the right

lumada-design · Jun 6, 2023 · 6842bcc · 6842bcc
1 parent 64ef7a2
commit 6842bcc
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 95 deletions.
diff --git a/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx b/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvTypography } from "@core/components";
 import { outlineStyles } from "@core/utils";
+import { transientOptions } from "@core/utils/transientOptions";
 import treeViewItemClasses from "./treeViewItemClasses";
 
 const selected = () => ({
@@ -21,6 +22,18 @@ export const StyledGroup = styled("ul")({
   padding: 0,
 });
 
+export const StyledLabel = styled(
+  "div",
+  transientOptions
+)(({ $expandable }: { $expandable: boolean }) => ({
+  display: "flex",
+  flexGrow: 1,
+  maxWidth: "100%",
+  ...($expandable && {
+    maxWidth: "calc(100% - 32px)",
+  }),
+}));
+
 export const StyledNode = styled("li")({
   listStyle: "none",
   minHeight: "32px",

diff --git a/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.tsx b/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.tsx
@@ -14,7 +14,12 @@ import { setId } from "@core/utils";
 import treeViewItemClasses, {
   HvVerticalNavigationTreeViewItemClasses,
 } from "./treeViewItemClasses";
-import { StyledContent, StyledGroup, StyledNode } from "./TreeViewItem.styles";
+import {
+  StyledContent,
+  StyledGroup,
+  StyledNode,
+  StyledLabel,
+} from "./TreeViewItem.styles";
 import { DescendantProvider, useDescendant } from "./descendants";
 import {
   TreeViewControlContext,
@@ -431,8 +436,7 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
           onMouseDown={handleMouseDown}
           style={{
             paddingLeft:
-              (expandable || useIcons || !isOpen ? 0 : 10) +
-              level * (collapsible ? 32 : 10),
+              (useIcons || !isOpen ? 0 : 10) + level * (collapsible ? 16 : 10),
           }}
           role={href ? undefined : "button"}
           {...(treeviewMode
@@ -455,8 +459,6 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
                 "aria-label": payload?.label,
               })}
         >
-          {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}
-
           <IconWrapper
             icon={useIcons && icon}
             label={payload?.label}
@@ -466,7 +468,10 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
             disableTooltip={disableTooltip}
           />
 
-          {isOpen && label}
+          {isOpen && (
+            <StyledLabel $expandable={!!expandable}>{label}</StyledLabel>
+          )}
+          {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}
         </StyledContent>
       ),
       [

diff --git a/...ages/core/src/components/VerticalNavigation/TreeView/__snapshots__/TreeView.test.tsx.snap b/...ages/core/src/components/VerticalNavigation/TreeView/__snapshots__/TreeView.test.tsx.snap
@@ -20,10 +20,14 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
         <div
           class="css-n1g5h0-StyledIconsContainer emephz1"
         />
-        System
+        <div
+          class="css-1674i57-StyledLabel er1eqbm2"
+        >
+          System
+        </div>
       </div>
       <ul
-        class="HvVerticalNavigationTreeViewItem-group css-zinev9-StyledGroup er1eqbm2"
+        class="HvVerticalNavigationTreeViewItem-group css-zinev9-StyledGroup er1eqbm3"
         id="hvtreeview2-1-group"
       >
         <li
@@ -40,10 +44,14 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
             <div
               class="css-n1g5h0-StyledIconsContainer emephz1"
             />
-            SCPodF
+            <div
+              class="css-1674i57-StyledLabel er1eqbm2"
+            >
+              SCPodF
+            </div>
           </div>
           <ul
-            class="HvVerticalNavigationTreeViewItem-group css-zinev9-StyledGroup er1eqbm2"
+            class="HvVerticalNavigationTreeViewItem-group css-zinev9-StyledGroup er1eqbm3"
             id="hvtreeview2-2-group"
           >
             <li
@@ -60,7 +68,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
                 <div
                   class="css-n1g5h0-StyledIconsContainer emephz1"
                 />
-                Compute
+                <div
+                  class="css-1674i57-StyledLabel er1eqbm2"
+                >
+                  Compute
+                </div>
               </div>
             </li>
             <li
@@ -77,7 +89,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
                 <div
                   class="css-n1g5h0-StyledIconsContainer emephz1"
                 />
-                Storage
+                <div
+                  class="css-1674i57-StyledLabel er1eqbm2"
+                >
+                  Storage
+                </div>
               </div>
             </li>
             <li
@@ -94,7 +110,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
                 <div
                   class="css-n1g5h0-StyledIconsContainer emephz1"
                 />
-                Ethernet
+                <div
+                  class="css-1674i57-StyledLabel er1eqbm2"
+                >
+                  Ethernet
+                </div>
               </div>
             </li>
             <li
@@ -111,7 +131,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
                 <div
                   class="css-n1g5h0-StyledIconsContainer emephz1"
                 />
-                Fiber Channel
+                <div
+                  class="css-1674i57-StyledLabel er1eqbm2"
+                >
+                  Fiber Channel
+                </div>
               </div>
             </li>
           </ul>
@@ -133,10 +157,14 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
         <div
           class="css-n1g5h0-StyledIconsContainer emephz1"
         />
-        Administration
+        <div
+          class="css-1674i57-StyledLabel er1eqbm2"
+        >
+          Administration
+        </div>
       </div>
       <ul
-        class="HvVerticalNavigationTreeViewItem-group css-zinev9-StyledGroup er1eqbm2"
+        class="HvVerticalNavigationTreeViewItem-group css-zinev9-StyledGroup er1eqbm3"
         id="hvtreeview2-7-group"
       >
         <li
@@ -153,7 +181,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
             <div
               class="css-n1g5h0-StyledIconsContainer emephz1"
             />
-            Rest API
+            <div
+              class="css-1674i57-StyledLabel er1eqbm2"
+            >
+              Rest API
+            </div>
           </div>
         </li>
         <li
@@ -170,7 +202,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
             <div
               class="css-n1g5h0-StyledIconsContainer emephz1"
             />
-            License
+            <div
+              class="css-1674i57-StyledLabel er1eqbm2"
+            >
+              License
+            </div>
           </div>
         </li>
         <li
@@ -187,7 +223,11 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
             <div
               class="css-n1g5h0-StyledIconsContainer emephz1"
             />
-            Log Bundle
+            <div
+              class="css-1674i57-StyledLabel er1eqbm2"
+            >
+              Log Bundle
+            </div>
           </div>
         </li>
       </ul>