playbook_ui 12.33.0.pre.alpha.PLAY905reactionbuttons982 → 12.33.0.pre.alpha.revert2650closedialogonoutsideclick977

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fd71976adcfbabb8b7a108f0326372d2c70f9d24aa30513d910d0d75b0650af
-  data.tar.gz: 21bb963c6fde24088756eda0f4956ecf7f5b6b282672f550e75119c2c800ca9f
+  metadata.gz: d8917e68b216bfff0e401e966630a13207a1a47fe8b37c1440c39913b0051411
+  data.tar.gz: ed70e1f405f8df66f5653b199edbd0f5f454740d08ad6f76e6326a7a45307c06
 SHA512:
-  metadata.gz: 765a5788bf0369821d38ab5177f5f9e8e741aabdb481ae35cd8a050b1386298e64cd361fe2f05b2cec6099c67ed50994fb0fb588e899294fbc02188b867937b4
-  data.tar.gz: 37d75b39bbe133a7ff892dac5c7e520e6021cb8fd215df87b4ed05fca74535ef05507f49258aa7a3d16a6c617629b53a00bca2ad89beeb823ff9d361bab94af1
+  metadata.gz: 3893e3784acf3a18098ae34ae4c2974422f27b214cc440da543be340ba8cdb87a189dfc380bd2106e389284fbf6b179c8224f87ce9c023fc3957e7662a9d6fac
+  data.tar.gz: 643a46fb715b5c0f990c641991670ed74c0eee64bf0a191e2a7a20a1021307ea9caa6151f91f94657642ebc1c8a8968802cc741492d368d2d6c21fc30dcffe43

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

@@ -1,9 +1,5 @@
 @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,
@@ -34,35 +30,6 @@ $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 {
-      font-size: $font_base;
-    }
-    &:hover {
-      background-color: $bg_light;
-    }
-    &.active {
-      border-color: $primary_action;
-    }
-  }
-
-  &.reaction_default {
-    padding: ($space_xxs + 1) ($space_sm - 4);
-    color: $text_lt_lighter;
-  }
-
-  .reaction_button_icon_wrapper {
-    display: flex;
-    align-items: center;
-  }
 
   // Disabled =================
   &[class*=_disabled]  {

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

@@ -4,7 +4,6 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
-import Caption from "../pb_caption/_caption"
 
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
@@ -12,13 +11,11 @@ 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,
@@ -33,7 +30,7 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
+  variant?: 'primary' | 'secondary' | 'link',
   wrapperClass?: string,
 } & GlobalProps
 
@@ -41,8 +38,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
   const {
     disabled = false,
     fullWidth = false,
-    highlight,
-    icon,
     loading = false,
     type = 'inline',
     variant = 'primary',
@@ -57,8 +52,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
   className += `${size !== null ? ` size_${size}` : ''}`
-  className += `${variant === 'reaction' && !icon ? ` reaction_default` : ''}`
-  className += `${variant === 'reaction' && highlight ? ` active` : ''}`
 
   return className
 }
@@ -68,7 +61,6 @@ const Button = (props: ButtonPropTypes) => {
     aria = {},
     children,
     className,
-    count,
     data = {},
     disabled,
     icon = null,
@@ -83,7 +75,6 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
-    variant,
     form = null
   } = props
 
@@ -140,71 +131,41 @@ 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 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}
-        >
-          {icon ? (
-            <div className='reaction_button_icon_wrapper'>
-              <Icon icon={icon} />
-              {count && (
-                <Caption paddingLeft="xxs" size="xs">
-                  {count}
-                </Caption>
-              )}
-            </div>
-          ) : (
-            <Icon icon="face-smile-plus" />
-          )}
-        </button>
-      );
-    } else {
+      )
+    else
       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}
         >
           {ifLoading()}
         </button>
-      );
-    }
+      )
   }
 
   return (

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

@@ -1,17 +1,5 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
-    <% if object.variant === "reaction" %>
-        <% if object.icon %>
-            <div class="reaction_button_icon_wrapper">
-                <%= pb_rails("icon", props: { icon: "#{icon}"}) %>
-                <% if object.count %>
-                    <%= pb_rails("caption", props: { text: "#{count}", size: "xs", padding_left:"xxs" }) %>
-                <% end %>
-            </div>
-        <% else %>
-            <%= pb_rails("icon", props: { icon: "face-smile-plus" }) %>
-        <% end %>
-    <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
@@ -24,6 +12,5 @@
             <%= 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,11 +16,8 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link reaction],
+                     values: %w[primary secondary link],
                      default: "primary"
-      prop :count, type: Playbook::Props::Number
-      prop :highlight, type: Playbook::Props::Boolean,
-                       default: false
       prop :target
       prop :text
       prop :type
@@ -68,7 +65,7 @@ module Playbook
 
       def classname
         button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class + default_reaction_class + highlight_active
+        button_class + size_class
       end
 
     private
@@ -88,14 +85,6 @@ module Playbook
       def size_class
         size ? " size_#{size}" : ""
       end
-
-      def default_reaction_class
-        variant === "reaction" && !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/example.yml

@@ -1,7 +1,6 @@
 examples:
   rails:
   - button_default: Button Variants
-  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
@@ -14,7 +13,6 @@ 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,5 +8,4 @@ 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 ButtonReaction } from './_button_reaction.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'

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

@@ -1,7 +1,6 @@
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-  const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
@@ -9,6 +8,21 @@ const dialogHelper = () => {
       var targetDialog = document.getElementById(openTriggerData)
       if (targetDialog.open) return;
       targetDialog.showModal();
+
+      //the following allows you to close dialog by clicking on overlay
+      targetDialog.addEventListener('click',((event) => {
+        var dialogContainerData = targetDialog.parentElement.dataset
+         if (dialogContainerData.overlayClick === "overlay_close") return;
+          let rect = event.target.getBoundingClientRect();
+                if (rect.left > event.clientX ||
+              rect.right < event.clientX ||
+              rect.top > event.clientY ||
+              rect.bottom < event.clientY
+          ) {
+              targetDialog.close();
+          }
+        })
+      );
     });
   });
 
@@ -18,21 +32,6 @@ const dialogHelper = () => {
       document.getElementById(closeTriggerData).close();
     });
   });
-
-  // Close dialog box on outside click
-  dialogs.forEach((dialogElement) => {
-    dialogElement.addEventListener("click", (event) => {
-      const dialogParentDataset = dialogElement.parentElement.dataset
-      if (dialogParentDataset.overlayClick === "overlay_close") return
-
-      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
-
-      if (clickedOutsideDialogBox) {
-        dialogElement.close()
-        event.stopPropagation()
-      }
-    })
-  })
 };
 
 export default dialogHelper;

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

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

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

@@ -97,7 +97,7 @@ const Icon = (props: IconProps) => {
   const classesEmoji = classnames(
     'pb_icon_kit',
     globalProps(props),
-    'pb_icon_kit_emoji',
+    '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 pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
+  <span class="pb_icon_kit icon_circle_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,