fix: fix tree parent padding

inventage · Apr 8, 2024 · b912112 · b912112
1 parent df127cc
commit b912112
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/.changeset/weak-frogs-fail.md b/.changeset/weak-frogs-fail.md
@@ -0,0 +1,5 @@
+---
+'@inventage-web-components/portal-navigation': patch
+---
+
+Fix tree parent element padding, properly using the `--portal-navigation-tree-parent-padding-x` and `--portal-navigation-tree-parent-padding-y` values with their respective fallbacks to menu item padding values `--portal-navigation-menu-item-padding-x` and `--portal-navigation-menu-item-padding-y`.
diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts
@@ -130,7 +130,7 @@ type NavigationCssClasses = typeof NavigationCssClasses;
  *
  * @cssprop {length} [--portal-navigation-dropdown-item-padding-x=0.5rem] Dropdown item horizontal padding
  * @cssprop {length} [--portal-navigation-dropdown-item-padding-y=1rem] Dropdown item vertical padding
- * @cssprop {length} [--portal-navigation-tree-parent-padding-x=var(--portal-navigation-horizontal-base)] Horizontal padding of parent items in the tree (mobile breakpoint)
+ * @cssprop {length} [--portal-navigation-tree-parent-padding-x=var(--portal-navigation-menu-item-padding-x)] Horizontal padding of parent items in the tree (mobile breakpoint)
  * @cssprop {length} [--portal-navigation-tree-parent-padding-y=var(--portal-navigation-menu-item-padding-y)] Vertical padding of parent items in the tree (mobile breakpoint)
  * @cssprop {length} [--portal-navigation-tree-items-margin-y=var(--portal-navigation-vertical-base)] Vertical margin of parent items in the tree (mobile breakpoint)
  * @cssprop {length} [--portal-navigation-tree-items-link-padding-x=var(--portal-navigation-horizontal-base)] Horizontal padding of links in parent items in the tree (mobile breakpoint)

diff --git a/packages/portal-navigation/src/styles.css b/packages/portal-navigation/src/styles.css
@@ -109,7 +109,7 @@
   display: flex;
   align-items: center;
   color: var(--portal-navigation-color-link, var(--portal-navigation-color-primary));
-  padding: var(--portal-navigation-menu-item-padding-y, 0.5rem) var(--portal-navigation-menu-item-padding-x, 0);
+  padding: var(--portal-navigation-menu-item-padding-y, 0.5rem) var(--portal-navigation-menu-item-padding-x, 0.5rem);
   white-space: var(--portal-navigation-menu-item-white-space, nowrap);
 
   cursor: pointer; /* because we can have a element without an href attribute */
@@ -234,7 +234,8 @@
  * Tree menu (mobile breakpoint)
  */
 .tree-parent {
-  padding: var(--portal-navigation-vertical-base, 0.5rem) 0;
+  padding: var(--portal-navigation-tree-parent-padding-y, var(--portal-navigation-menu-item-padding-y, 0.5rem))
+    var(--portal-navigation-tree-parent-padding-x, var(--portal-navigation-menu-item-padding-x, 0.5rem));
   border-top: var(--portal-navigation-tree-parent-border-top, none);
   border-bottom: var(--portal-navigation-tree-parent-border-bottom, solid 1px var(--portal-navigation-color-border, rgba(44, 62, 80, 0.1)));
   width: 100%;
@@ -261,11 +262,6 @@
   height: 1.5rem;
 }
 
-.tree-container > .link {
-  padding: var(--portal-navigation-tree-parent-padding-y, var(--portal-navigation-menu-item-padding-y, 0.5rem))
-    var(--portal-navigation-tree-parent-padding-x, var(--portal-navigation-horizontal-base, 1rem));
-}
-
 .tree-items {
   margin-top: var(--portal-navigation-tree-items-margin-y, var(--portal-navigation-vertical-base, 0.5rem));
   margin-bottom: var(--portal-navigation-tree-items-margin-y, var(--portal-navigation-vertical-base, 0.5rem));