playbook_ui 12.35.0.pre.alpha.iconpocwebfonts1023 → 12.36.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f37e0af8c1e76bc928e58612e41499b306f81bbde1935ff1175750d099e17d9c
-  data.tar.gz: 8e71ee2f5da0e0c3656d4da4577a5d1252941192902587d416afc3610b37c225
+  metadata.gz: c0a98a2809eb8f345dd7c46ebb952d03d2e5fdc357804e70e344546ab013b8a0
+  data.tar.gz: e72f1812fd7f819375cc1788d6eabb2a280bd392a3fb46e2af4b1d8ce022fbd7
 SHA512:
-  metadata.gz: 3198daf878227a793bbee0e9c41e1a3451e5d9e9cdc25c9f5cd78d81aaa0135b314d54c020fcbfbb6ff6296331e31c12e1618ec4b432d36e505c7823aef6e1b2
-  data.tar.gz: afb451764ee139fd5b42152d275d689fc26cc0d158f49ef123cd8f42c99f1cccabbf63271cc8b9b0f1a117fb3a25088f5b83ccd95e53d4dc374534920f2d91cb
+  metadata.gz: ce9e6790efcab2fce2080635bdd3331f7a9ae8af497756d5a2c6111a57ac859ce4a73d567f0c51123dcc271ee46f1b2ebc2e02e1af28bed233f860c93850a973
+  data.tar.gz: d6d7bcb5b2684b64a05806680f5c9129082888394d2036ef53866121a68622d3a0a01803287b08881836186983fe9f5e4641225333a36bcfbb69fad597829683

data/app/pb_kits/playbook/_playbook.scss

@@ -114,5 +114,3 @@
 @import './utilities/hover';
 
 @import 'pb_multi_level_select/multi_level_select';
-
-

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -21,13 +21,17 @@ const dialogHelper = () => {
 
   // Close dialog box on outside click
   dialogs.forEach((dialogElement) => {
-    dialogElement.addEventListener("click", (event) => {
+    dialogElement.addEventListener("mousedown", (event) => {
       const dialogParentDataset = dialogElement.parentElement.dataset
       if (dialogParentDataset.overlayClick === "overlay_close") return
 
-      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
+      const dialogModal = event.target.getBoundingClientRect()
+      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+                                        event.clientX > dialogModal.right ||
+                                        event.clientY < dialogModal.top ||
+                                        event.clientY > dialogModal.bottom
 
-      if (clickedOutsideDialogBox) {
+      if (clickedOutsideDialogModal) {
         dialogElement.close()
         event.stopPropagation()
       }

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

@@ -9,7 +9,6 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
-  - icon_font: Bring Your Own Icon Font
 
   react:
   - icon_default: Icon Default

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

@@ -2,28 +2,14 @@
   <%= object.render_svg(object.custom_icon) %>
 <% elsif object.valid_emoji(object.icon) %>
   <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
-<% elsif object.font_family.present? %>
-  <%= content_tag(:i, nil,
-      id: object.id,
-      data: object.data,
-      class: object.icon_font_classname,
-      style: 
-      "font-family: #{object.font_family.to_s};font-size: #{object.size.to_s.match?(/x/) ? object.size.to_s.gsub(/x/, '').to_i : object.size.to_s}em;"
-  ) %>
-  <%= content_tag(:span, nil,
-      aria: { label: "#{object.icon} icon" }.merge(object.aria),
-      hidden: true
-  ) %>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,
       data: object.data,
-      class: object.classname,
+      class: object.classname
   ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true
   ) %>
 <% end %>
-
-

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -15,8 +15,6 @@ module Playbook
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
       prop :icon
-      prop :font_family, type: Playbook::Props::String,
-                         default: nil
       prop :custom_icon, type: Playbook::Props::String,
                          default: nil
       prop :inverse, type: Playbook::Props::Boolean,
@@ -39,8 +37,6 @@ module Playbook
                         default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
-      prop :prefix, type: Playbook::Props::String,
-                    default: "fa"
 
       def valid_emoji(icon)
         emoji_regex = /\p{Emoji}/
@@ -66,24 +62,6 @@ module Playbook
         )
       end
 
-      def icon_font_classname
-        generate_classname(
-          "pb_icon_kit",
-          icon_class,
-          border_class,
-          fixed_width_class,
-          flip_class,
-          inverse_class,
-          list_item_class,
-          pull_class,
-          pulse_class,
-          rotation_class,
-          size_class,
-          spin_class,
-          separator: " "
-        )
-      end
-
       def custom_icon_classname
         generate_classname(
           "pb_icon_kit",
@@ -123,7 +101,7 @@ module Playbook
       end
 
       def icon_class
-        icon ? "#{prefix}-#{icon}" : nil
+        icon ? "fa-#{icon}" : nil
       end
 
       def inverse_class
@@ -158,7 +136,7 @@ module Playbook
       end
 
       def size_class
-        size ? "#{prefix}-#{size}" : nil
+        size ? "fa-#{size}" : nil
       end
 
       def font_style_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