playbook_ui 12.33.1.pre.alpha.PLAY933navkitcollapsible994 → 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -95,9 +95,8 @@ const Icon = (props: IconProps) => {
   )
 
   const classesEmoji = classnames(
-    'pb_icon_kit',
+    'pb_icon_kit_emoji',
     globalProps(props),
-    'icon_circle_emoji',
     className
   )
 

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,7 @@
 <% if object.custom_icon %>
   <%= object.render_svg(object.custom_icon) %>
 <% elsif object.valid_emoji(object.icon) %>
-  <span class="pb_icon_kit icon_circle_emoji"><%= object.icon.html_safe %></span>
+  <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,

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

@@ -6,17 +6,15 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
-import Collapsible from '../pb_collapsible/_collapsible'
 
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
-  collapsible?: boolean,
   data?: object,
   iconLeft?: string,
-  iconRight?: string | string[],
+  iconRight?: string,
   id?: string,
   imageUrl?: string,
   link?: string,
@@ -31,7 +29,6 @@ const NavItem = (props: NavItemProps) => {
     aria = {},
     children,
     className,
-    collapsible,
     data = {},
     iconLeft,
     iconRight,
@@ -56,100 +53,54 @@ const NavItem = (props: NavItemProps) => {
       className={classes}
       id={id}
     >
-      {
-        collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs" padding="none">
-          <Collapsible.Main>
-          <Tag
-          className="pb_nav_list_item_link"
-          href={link}
-          onClick={onClick}
-          target={target}
-        >
-          {imageUrl &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-            >
-              <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-              />
-            </div>
-          }
-  
-          {iconLeft &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconLeft}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_left"
-                fixedWidth
-                icon={iconLeft}
-              />
-            </div>
-          }
-           <span className="pb_nav_list_item_text">
-            {text}
-          </span>
-        </Tag>
-        </Collapsible.Main>
-        <Collapsible.Content>
-        {children}
-        </Collapsible.Content>
-        </Collapsible>
-        ) : (
-        <Tag
-          className="pb_nav_list_item_link"
-          href={link}
-          onClick={onClick}
-          target={target}
-        >
-          {imageUrl &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-            >
-              <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-              />
-            </div>
-          }
-  
-          {iconLeft &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconLeft}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_left"
-                fixedWidth
-                icon={iconLeft}
-              />
-            </div>
-          }
-  
-          <span className="pb_nav_list_item_text">
-            {text || children}
-          </span>
-  
-          {iconRight &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconRight as string}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_right"
-                fixedWidth
-                icon={iconRight as string}
-              />
-            </div>
-          }
-        </Tag>
-        )
-      }
+      <Tag
+        className="pb_nav_list_item_link"
+        href={link}
+        onClick={onClick}
+        target={target}
+      >
+        {imageUrl &&
+          <div
+            className="pb_nav_list_item_icon_section"
+            key={imageUrl}
+          >
+            <Image
+              className="pb_nav_img_wrapper"
+              url={imageUrl}
+            />
+          </div>
+        }
+
+        {iconLeft &&
+          <div
+            className="pb_nav_list_item_icon_section"
+            key={iconLeft}
+          >
+            <Icon
+              className="pb_nav_list_item_icon_left"
+              fixedWidth
+              icon={iconLeft}
+            />
+          </div>
+        }
+
+        <span className="pb_nav_list_item_text">
+          {text || children}
+        </span>
+
+        {iconRight &&
+          <div
+            className="pb_nav_list_item_icon_section"
+            key={iconRight}
+          >
+            <Icon
+              className="pb_nav_list_item_icon_right"
+              fixedWidth
+              icon={iconRight}
+            />
+          </div>
+        }
+      </Tag>
     </li>
   )
 }

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

@@ -4,4 +4,3 @@
 @import "../tokens/colors";
 @import "./vertical_nav";
 @import "./horizontal_nav";
-@import "./collapsible_nav";

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

@@ -29,20 +29,22 @@
         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/example.yml

@@ -7,7 +7,6 @@ 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
@@ -25,8 +24,6 @@ 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,5 +13,3 @@ 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,41 +3,19 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <% 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 %>
+  <%= 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 %>
-  <% 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 %>
+    <% 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 %>

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

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

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

@@ -49,13 +49,16 @@ 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':
-        this.hideTooltip()
+        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
+          this.hideTooltip()
+        }
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (!isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break