playbook_ui 12.33.1 → 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1468abb19e4ac525eed445f416c38c07658000bf453c5a0b874be54c64ecdb3
-  data.tar.gz: b74c0cb81586fcb391013b1f6d46414a36dc98196fbec2d933359b978fee1483
+  metadata.gz: de8314a6b967b5e972e46892edd4fe1c7b9dfcb9ca199120cc898e92724b137a
+  data.tar.gz: 4f323f8d98c5219d26de002ed897bf31ab5dee71af172727559e3b1aca47b04c
 SHA512:
-  metadata.gz: 4e2bb9dad3c8d08921eea44a7e9a3d8ec5832bbcce47f81b75c65fc0bd7eda0218ce328b9820f4bd530a2fb28233816bfdf404762700cb48ab98aee2c16d4308
-  data.tar.gz: 2c4fb8680f9f5e13e9462bc1ec206edf07a773739c7c282b32d7ed1c279ac3ab0ed42d4da46829328010f4e33159823325188e99941e8d144807384be861f794
+  metadata.gz: 2fb6010127b3e609045f7b7b6ba41aa650ed266e00b8b0660a4b9e544568300b2a7a7722a6b43f9913bc2791ef7234522b303433a566fa52bf95345ecf13ef89
+  data.tar.gz: 4bf867ee4ee1ef8fa70d12a0fd5bd61efbdbab94d0a7b03f3060857eac345c75c4de7a02bb65ef200f5a5c1e801317d6e8208e55cba22f8fee32a553728860ae

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,5 +1,9 @@
 @import "./button_mixins";
 @import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/typography";
 
 $pb_button_sizes: (
   "sm":   0.75rem,
@@ -30,6 +34,34 @@ $pb_button_sizes: (
   &[class*=_link]  {
     @include pb_button_link;
   }
+  &[class*=_reaction] {
+    background-color: $card_light;
+    min-width: 40px;
+    border-radius: $border_radius_rounded;
+    border: 1px solid $border_light;
+    color: $text_lt_light;
+    padding: ($space_xxs - 2) $space_xs;
+    min-height: $space_md + 4;
+
+    .pb_icon_kit_emoji, .pb_icon_kit {
+      font-size: $font_base;
+    }
+    &:hover {
+      background-color: $bg_light;
+    }
+    &.active {
+      border-color:transparent;
+      box-shadow: 0px 0px 0 2px $primary_action;
+      &:hover {
+        background-color: rgba($primary, 0.03);
+      }
+    }
+  }
+
+  &.reaction_default {
+    padding: ($space_xxs + 1) ($space_sm - 4);
+    color: $text_lt_lighter;
+  }
 
   // Disabled =================
   &[class*=_disabled]  {

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -4,6 +4,8 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
+import Caption from "../pb_caption/_caption"
+import Flex from "../pb_flex/_flex"
 
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
@@ -11,11 +13,13 @@ type ButtonPropTypes = {
   aria?: { [key: string]: string },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string | string[],
+  count?: number,
   data?: { [key: string]: string },
   disabled?: boolean,
   fixedWidth?: boolean,
   form?: string,
   fullWidth?: boolean,
+  highlight?: boolean,
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -30,14 +34,22 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link',
+  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
+const isValidEmoji = (emoji: string) => {
+  // Using regular expression to check if the string is a valid emoji/emoji Unicode
+  const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+  return emojiRegex.test(emoji);
+};
+
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
     disabled = false,
     fullWidth = false,
+    highlight,
+    icon,
     loading = false,
     type = 'inline',
     variant = 'primary',
@@ -52,6 +64,8 @@ const buttonClassName = (props: ButtonPropTypes) => {
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
   className += `${size !== null ? ` size_${size}` : ''}`
+  className += `${variant === 'reaction' && !isValidEmoji(icon) ? ` reaction_default` : ''}`
+  className += `${variant === 'reaction' && highlight ? ` active` : ''}`
 
   return className
 }
@@ -61,6 +75,7 @@ const Button = (props: ButtonPropTypes) => {
     aria = {},
     children,
     className,
+    count,
     data = {},
     disabled,
     icon = null,
@@ -75,6 +90,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    variant,
     form = null
   } = props
 
@@ -131,41 +147,77 @@ const Button = (props: ButtonPropTypes) => {
     return null
   }
 
-  const displayButton = () => {    
-    if (link)
+  const displayButton = () => {
+    if (link) {
       return (
         <a
-            {...ariaProps}
-            {...dataProps}
-            className={css}
-            href={link}
-            id={id}
-            rel={target !== 'child' ? 'noreferrer' : null}
-            role="link"
-            tabIndex={tabIndex}
-            target={getTargetAttribute()}
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          href={link}
+          id={id}
+          rel={target !== "child" ? "noreferrer" : null}
+          role="link"
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
-      )
-    else
+      );
+    } else if (variant === "reaction") {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
+        >
+          {icon && isValidEmoji(icon) && (
+            <Flex align='center'>
+              <Icon icon={icon} />
+              {count && (
+                <Caption paddingLeft="xxs" size="xs">
+                  {count}
+                </Caption>
+              )}
+            </Flex>
+           )
+          }
+          {
+            !isValidEmoji(icon) && (
+              <Icon icon={icon ? icon : "face-smile-plus"} />
+            )
+          }
+
+        
+        </button>
+      );
+    } else {
+      return (
+        <button
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {ifLoading()}
         </button>
-      )
+      );
+    }
   }
 
   return (

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,21 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
+    <% if object.variant === "reaction" %>
+        <% if icon && object.valid_emoji(object.icon) %>
+            <%= pb_rails("flex", props:{ align: "center" }) do %>
+                <%= pb_rails("icon", props: { icon: "#{icon}"}) %>
+                <% if object.count %>
+                    <%= pb_rails("caption", props: { text: "#{count}", size: "xs", padding_left:"xxs" }) %>
+                <% end %>
+            <% end %>
+        <% elsif !object.valid_emoji(object.icon) %>
+            <% if object.icon %>
+                <%= pb_rails("icon", props: { icon: "#{icon}" }) %>
+            <% else %>
+                <%= pb_rails("icon", props: { icon: "face-smile-plus" }) %>
+            <% end %>
+        <% end %>
+    <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
@@ -12,5 +28,6 @@
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
         </span>
     <% end %>
+    <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -16,8 +16,11 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link],
+                     values: %w[primary secondary link reaction],
                      default: "primary"
+      prop :count, type: Playbook::Props::Number
+      prop :highlight, type: Playbook::Props::Boolean,
+                       default: false
       prop :target
       prop :text
       prop :type
@@ -63,9 +66,14 @@ module Playbook
         link ? "a" : "button"
       end
 
+      def valid_emoji(icon)
+        emoji_regex = /\p{Emoji}/
+        emoji_regex.match?(icon)
+      end
+
       def classname
         button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class
+        button_class + size_class + default_reaction_class + highlight_active
       end
 
     private
@@ -85,6 +93,14 @@ module Playbook
       def size_class
         size ? " size_#{size}" : ""
       end
+
+      def default_reaction_class
+        variant === "reaction" && !object.valid_emoji(object.icon) ? " reaction_default" : ""
+      end
+
+      def highlight_active
+        variant === "reaction" && object.highlight ? " active" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction", margin_left: "lg" }) %>
+<%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
+<%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>
+
+
+<script>
+    function renderButtonReaction() {
+
+        let highlightActive = false;
+
+        function toggleHighlight() {
+        let reactionCount = 153;
+        console.log("toggleHighlight", highlightActive)
+        highlightActive = !highlightActive;
+        const innerCountElement = document.querySelector(".count .pb_caption_kit_xs.pl_xxs")
+        const firstButton = document.getElementById("reaction-button-highlight")
+        firstButton.classList.add(highlightActive && "active")
+        firstButton.classList.remove(!highlightActive && "active")
+        innerCountElement.innerHTML = highlightActive ? reactionCount + 1 : reactionCount;
+        console.log("element", innerCountElement)
+        }
+        
+        const button1 = document.getElementById("reaction-button-highlight")
+        button1.addEventListener("click", toggleHighlight);
+
+    }
+    renderButtonReaction();
+</script>
+

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -0,0 +1,47 @@
+import React, {useState} from "react"
+import { Button } from "../../"
+
+const ButtonReaction = (props) => {
+
+const [highlightActive, setHighlightActive] =useState(false)
+const reactionCount = 153
+
+return (
+  <div>
+    <Button
+        count={highlightActive ? (reactionCount + 1) : reactionCount}
+        highlight = {highlightActive}
+        icon="&#127881;"
+        onClick={()=> setHighlightActive(!highlightActive)}
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        count={5}
+        icon="😍"
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        icon="user"
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+
+
+    </div>
+)
+}
+
+export default ButtonReaction

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.md

@@ -0,0 +1,3 @@
+The `reaction` variant accepts any HTML Emoji or it's hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
+
+Reaction buttons also accept two additional (optional) props: `count`, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and `highlight`, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
@@ -13,6 +14,7 @@ examples:
   
   react:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading

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

@@ -8,4 +8,5 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
-export { default as ButtonHover } from './_button_hover.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'
+export {default as ButtonReaction } from './_button_reaction.jsx'

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

@@ -6,3 +6,7 @@ svg.pb_custom_icon {
     fill: currentColor;
   }
 }
+
+.pb_icon_kit_emoji {
+  font-family: monospace;
+}

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_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