style: Adjusted Navigation paddings to make Collapsable and Non Colla…

…psable lists the same (#952)
mittwald · Nov 6, 2024 · d0a6218 · d0a6218
1 parent 690c94c
commit d0a6218
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/...mponents/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss b/...mponents/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss
@@ -1,10 +1,14 @@
 .navigationGroup {
+  &:not(.collapsable) ul {
+    padding: var(--accordion--content-padding);
+  }
   &:not(:last-child) {
     margin-bottom: var(--menu--group-to-group-spacing);
   }
 
   .label {
     display: block;
     margin-block: var(--menu--label-to-group-spacing);
+    padding-inline-start: var(--accordion--header-padding-x);
   }
 }
diff --git a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx
@@ -16,7 +16,11 @@ export interface NavigationGroupProps
 export const NavigationGroup: FC<NavigationGroupProps> = (props) => {
   const { children, className, collapsable, ...rest } = props;
 
-  const rootClassName = clsx(styles.navigationGroup, className);
+  const rootClassName = clsx(
+    styles.navigationGroup,
+    collapsable && styles.collapsable,
+    className,
+  );
 
   const generatedId = useId();
 

diff --git a/packages/components/src/components/Navigation/stories/Default.stories.tsx b/packages/components/src/components/Navigation/stories/Default.stories.tsx
@@ -119,3 +119,30 @@ export const WithCollapsableGroups: Story = {
     </Navigation>
   ),
 };
+export const MixedGroups: Story = {
+  render: (props) => (
+    <Navigation aria-label="Main navigation" {...props}>
+      <NavigationGroup collapsable>
+        <Label>General</Label>
+        <Link href="#">Dashboard</Link>
+        <Link href="#" aria-current="page">
+          Performance
+        </Link>
+      </NavigationGroup>
+
+      <NavigationGroup>
+        <Label>General</Label>
+        <Link href="#">Apps</Link>
+        <Link href="#">Databases</Link>
+        <Link href="#">Domains</Link>
+      </NavigationGroup>
+
+      <NavigationGroup collapsable>
+        <Label>Components</Label>
+        <Link href="#">Testsite</Link>
+        <Link href="#">Testsite</Link>
+        <Link href="#">Testsite</Link>
+      </NavigationGroup>
+    </Navigation>
+  ),
+};
diff --git a/packages/design-tokens/src/actions/menu-item.yml b/packages/design-tokens/src/actions/menu-item.yml
@@ -4,7 +4,7 @@ menu:
   group-to-group-spacing:
     value: "{size-px.m}"
   label-to-group-spacing:
-    value: "{size-px.s}"
+    value: "{size-px.xs}"
   separator-to-item-spacing:
     value: "{size-px.s}"