playbook_ui 12.38.0.pre.alpha.PLAY966collapsiblenav41082 → 12.38.0.pre.alpha.PLAY966collapsiblenav41086

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd49453e636c1c2cbda861998358c381d07b3e0bef65afaad3098f548c75fcf7
-  data.tar.gz: 74319ac79c54556a3a118d0046c1d1706bcf5b6abcfb1384aeadb23f787e18d0
+  metadata.gz: 5eae0f530402898fcbefd959203904bbf32732eb48281f3c02be9b0ee45bc29c
+  data.tar.gz: fafdafb80adce91cc980b713d8e4be65ca9660b3c4e8634b3f77db98407a02a9
 SHA512:
-  metadata.gz: 55d5f1cc4a72670c0926eda8b1082bea2f514829442a3922fd17b480835774e95a3c92745f40917db804d7a1ac70d1f3fb7dd18a7c67d37a5cca55d9d75b729b
-  data.tar.gz: b4da6c4cd1ed0edfb025669219664e02a48d875339781c7f929691062529595557b4ef6ced9b0e290c9e64dc26dbdd12c4c4752067bd6099e8d9b04e833b1772
+  metadata.gz: 2c73ddd4680ede853733bf7efecebe98c3300e0033cde494c29c052ac06f0bae5e8c829a7872bd6f7ce60c6016117a7eea8d6cff895985ef7790da0679a5bb4d
+  data.tar.gz: fd9ad011a7d1ba1cf90c716a2aaaf3d317bb8de166947908a9c1b5c0281afcb142b5cdb2c62b3ad768496d975e1b59b8bfbb8ba00043d66e9e210a0026d788ac

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -7,6 +7,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
 import Collapsible from '../pb_collapsible/_collapsible'
+import { NavChildProps } from './_nav'
 
 type NavItemProps = {
   active?: boolean,
@@ -66,6 +67,7 @@ const NavItem = (props: NavItemProps) => {
     collapsed, 
     // orientation,
     // variant,
+    itemPadding,
     padding,
     paddingX,
     paddingY,
@@ -98,17 +100,28 @@ const NavItem = (props: NavItemProps) => {
                   globalProps(filteredProps), 
                   className)
 
-  const tagClasses = classnames(collapsible ? 'pb_nav_list_item_link_collapsible' : "pb_nav_list_item_link",
-                      globalProps({
-                        padding,
-                        paddingBottom,
-                        paddingLeft,
-                        paddingRight,
-                        paddingTop,
-                        paddingX,
-                        paddingY,
-                      }))
+const paddingProps = {
+  padding,
+  paddingBottom,
+  paddingTop,
+  paddingRight,
+  paddingLeft,
+  paddingX,
+  paddingY,
+};
+
+const finalItemPadding = {
+  ...(itemPadding || {}),
+  ...Object.entries(paddingProps).reduce((acc:any, [prop, value]) => {
+    if (value) {
+        acc[prop] = value;
+    }
+    return acc;
+  }, {}),
+};
 
+  const tagClasses = classnames(collapsible ? 'pb_nav_list_item_link_collapsible' : "pb_nav_list_item_link",
+                      globalProps({...finalItemPadding}))
 
   const handleIconClick = (e:any) => {
     if (onIconLeftClick) {
@@ -117,6 +130,18 @@ const NavItem = (props: NavItemProps) => {
     }
   }
 
+// Map over the children and clone them with itemPadding prop so nested navItems all get itemPadding
+const childrenWithProps = React.Children.map(children, (child) => {
+  if (React.isValidElement(child)) {
+    const childProps: NavChildProps = {
+      itemPadding: itemPadding
+    };
+    return React.cloneElement(child, childProps);
+  }
+  return child;
+});
+
+
   return (
     <li
       {...ariaProps}
@@ -171,7 +196,7 @@ const NavItem = (props: NavItemProps) => {
         </Tag>
         </Collapsible.Main>
         <Collapsible.Content>
-        {children}
+        {childrenWithProps}
         </Collapsible.Content>
         </Collapsible>
         ) : (

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -20,11 +20,13 @@ type NavProps = {
   link?: string,
   title?: string,
   variant?: "normal" | "subtle",
+  itemPadding?: {padding?: string, paddingBottom?: string, paddingTop?: string, paddingRight?: string, paddingLeft?: string, paddingX?: string, paddingY?: string}
 } & GlobalProps
 
-type NavChildProps = {
-  orientation: "vertical" | "horizontal";
-  variant: "normal" | "subtle";
+export type NavChildProps = {
+  orientation?: "vertical" | "horizontal";
+  variant?: "normal" | "subtle";
+  itemPadding?: {padding?: string, paddingBottom?: string, paddingTop?: string, paddingRight?: string, paddingLeft?: string, paddingX?: string, paddingY?: string}
 };
 
 const Nav = (props: NavProps) => {
@@ -42,6 +44,7 @@ const Nav = (props: NavProps) => {
     orientation = 'vertical',
     title = '',
     variant = 'normal',
+    itemPadding,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -61,6 +64,7 @@ const childrenWithProps = React.Children.map(children, (child) => {
     const childProps: NavChildProps = {
       orientation: orientation,
       variant: variant,
+      itemPadding: itemPadding
     };
     return React.cloneElement(child, childProps);
   }