fix(VerticalNavigation): collapse/expand icon

lumada-design · Aug 1, 2023 · e299c4a · e299c4a
1 parent 13a927d
commit e299c4a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx b/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx
@@ -28,13 +28,17 @@ export const StyledGroup = styled("ul")({
 export const StyledLabel = styled(
   "div",
   transientOptions
-)(({ $expandable }: { $expandable: boolean }) => ({
+)(({ $expandable, $hasIcon }: { $expandable: boolean; $hasIcon: boolean }) => ({
   display: "flex",
   flexGrow: 1,
   maxWidth: "100%",
-  ...($expandable && {
+  ...(($hasIcon || $expandable) && {
     maxWidth: "calc(100% - 32px)",
   }),
+  ...($expandable &&
+    $hasIcon && {
+      maxWidth: "calc(100% - 64px)",
+    }),
 }));
 
 export const StyledNode = styled("li")({

diff --git a/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.tsx b/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.tsx
@@ -475,8 +475,11 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
           />
 
           {isOpen && (
-            <StyledLabel $expandable={!!expandable}>{label}</StyledLabel>
+            <StyledLabel $hasIcon={useIcons} $expandable={!!expandable}>
+              {label}
+            </StyledLabel>
           )}
+
           {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}
         </StyledContent>
       ),