playbook_ui 12.33.1 → 12.34.0.pre.alpha.fixdialogcloseevents1003

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1468abb19e4ac525eed445f416c38c07658000bf453c5a0b874be54c64ecdb3
-  data.tar.gz: b74c0cb81586fcb391013b1f6d46414a36dc98196fbec2d933359b978fee1483
+  metadata.gz: 73dae18aff8f323e035348eead47c0a135a2e639eff5ef2d915e0f43ede1e5ed
+  data.tar.gz: b5db0c63a610c78a17762f84420fef70c1362bf29246a475a1283b509a14f4d8
 SHA512:
-  metadata.gz: 4e2bb9dad3c8d08921eea44a7e9a3d8ec5832bbcce47f81b75c65fc0bd7eda0218ce328b9820f4bd530a2fb28233816bfdf404762700cb48ab98aee2c16d4308
-  data.tar.gz: 2c4fb8680f9f5e13e9462bc1ec206edf07a773739c7c282b32d7ed1c279ac3ab0ed42d4da46829328010f4e33159823325188e99941e8d144807384be861f794
+  metadata.gz: 3532bdf137816d68b2f4a09ceab812d18b976e86584caf5e9ed1e24de762efd4c058c61803db2eb87afb9b89afeb0a6b2c038aa9640f88855761fe941ab85ab8
+  data.tar.gz: dbb59a43fe72b66d70d82baaacc07296b61b50ef66dcea38b6cc1544f42040453c3d43c96b41cddedf849cefc9b8cf4b3dd0afc6b76e4ace1025f6ab7f61f5ee

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_dialog/dialogHelper.js

@@ -21,15 +21,18 @@ 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 = dialogModal.left > event.clientX ||
+                                        dialogModal.right < event.clientX ||
+                                        dialogModal.top > event.clientY ||
+                                        dialogModal.bottom < event.clientY
 
-      if (clickedOutsideDialogBox) {
+      if (clickedOutsideDialogModal) {
         dialogElement.close()
-        event.stopPropagation()
       }
     })
   })

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,