playbook_ui 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998 → 12.35.0.pre.alpha.iconpocwebfonts1023

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -29,22 +29,20 @@
         flex: 1;
         font-weight: $regular;
       }
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
-          }
-        }
-      }
     }
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
       letter-spacing: normal;
     }
+      &:hover {
+        background-color: rgba($primary, 0.03);
+        [class*=_icon] {
+          color: $primary;
+        }
+        [class*=_text] {
+          color: $primary;
+        }
+      }
   }
 }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+import Nav from "../_nav";
+import NavItem from "../_item";
+
+const CollapsibleNav = (props) => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          active 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default CollapsibleNav;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+import Nav from "../_nav";
+import NavItem from "../_item";
+
+const CollapsibleNavCustomIcons = (props) => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          collapsible 
+          iconLeft="city" 
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          active 
+          collapsible 
+          iconLeft="theater-masks"
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default CollapsibleNavCustomIcons;

data/app/pb_kits/playbook/pb_nav/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
+  # - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -24,6 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
+  # - collapsible_nav: Subtle With Collapsible
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

data/app/pb_kits/playbook/pb_nav/docs/index.js

@@ -13,3 +13,5 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
+export { default as CollapsibleNav } from './_collapsible_nav.jsx'
+export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,19 +3,41 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <%= content_tag(object.tag,
-    object.link ? object.link_options : object.options) do %>
-    <% if object.image_url %>
-      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+  <% if object.collapsible %>
+    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
+        <%= content_tag(object.tag,
+        object.link ? object.link_options : object.options) do %>
+          <% if object.image_url %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+          <% end %>
+          <% if object.icon_left %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+          <% end %>
+          <span class="pb_nav_list_item_text">
+            <%= object.text %>
+          </span>
+        <% end %>    
+       <% end %>
+      <%= pb_rails("collapsible/collapsible_content") do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
-    <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
-    <% end %>
-    <span class="pb_nav_list_item_text">
-      <%= object.text %><%= content.presence %>
-    </span>
-    <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+  <% else %>
+    <%= content_tag(object.tag,
+      object.link ? object.link_options : object.options) do %>
+      <% if object.image_url %>
+        <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+      <% end %>
+      <% if object.icon_left %>
+        <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <% end %>
+      <span class="pb_nav_list_item_text">
+        <%= object.text %><%= content.presence %>
+      </span>
+      <% if object.icon_right %>
+        <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,6 +4,7 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
       prop :icon_left
@@ -33,6 +34,10 @@ module Playbook
         )
       end
 
+      def collapsible_icons
+        icon_right.present? ? icon_right : %w[plus minus]
+      end
+
     private
 
       def active_class

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -17,7 +17,6 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import _uniqueId from 'lodash/uniqueId';
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -73,7 +72,6 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
-    targetId,
   } = props;
 
   const popoverSpacing =
@@ -125,7 +123,6 @@ const Popover = (props: PbPopoverProps) => {
                     popoverSpacing,
                     overflowHandling
                   )}
-                  id={targetId}
                   style={widthHeightStyles()}
               >
                 {children}
@@ -139,7 +136,6 @@ const Popover = (props: PbPopoverProps) => {
 };
 
 const PbReactPopover = (props: PbPopoverProps) => {
-  const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
     children,
@@ -167,27 +163,25 @@ const PbReactPopover = (props: PbPopoverProps) => {
       "click",
       ({ target }) => {
         const targetIsPopover =
-          (target as HTMLElement).closest("#" + targetId) !==
+          (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
           null;
         const targetIsReference =
-          (target as HTMLElement).closest("#reference-" + targetId) !==
+          (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
           null;
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) {
+            if (!targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover) {
+            if (targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            shouldClosePopover(true);
             break;
         }
       },
@@ -206,7 +200,6 @@ const PbReactPopover = (props: PbPopoverProps) => {
         offset={offset}
         placement={placement}
         referenceElement={referenceElement}
-        targetId={targetId}
         zIndex={zIndex}
         {...props}
     >
@@ -221,7 +214,6 @@ const PbReactPopover = (props: PbPopoverProps) => {
           <PopperReference>
             {({ ref }) => (
               <span
-                  id={"reference-" + targetId}
                   className="pb_popover_reference_wrapper"
                   ref={ref}>
                 <reference.type {...reference.props} />

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -24,7 +24,6 @@ const PopoverClose = (props) => {
 
   const handleOutsideTogglePopover = () => {
     setOutsideShowPopover(!showOutsidePopover)
-    setAnyShowPopover(false)
   }
 
   const handleAnyShouldClosePopover = (shouldClosePopover) => {
@@ -33,7 +32,6 @@ const PopoverClose = (props) => {
 
   const handleAnyTogglePopover = () => {
     setAnyShowPopover(!showAnyPopover)
-    setOutsideShowPopover(false)
   }
 
   const insidePopoverTrigger = (

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
-      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
-          this.hideTooltip()
-        }
+        this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement && !isTriggerElement) {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break