playbook_ui 12.29.0.pre.alpha.play716popoverkitcloseonclickissue893 → 12.30.0.pre.alpha.PLAY906multilevelselectedidsprop902

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15f7ff554db86a7218c690ce296e7aeff840ebc5272b964807f8ea89da3841b8
-  data.tar.gz: fdb097512bdebc712087f5a852aa1edd4ff901ab6a32c2896a28acf013db087f
+  metadata.gz: a8d8c8cd4aa096608acbf4eed675c36c238baa86d159aaefbc0f757084a5a4a4
+  data.tar.gz: 287dd12a2a579011dd57ae22d51ee874b1d3823647e3d95701a201507afb02e7
 SHA512:
-  metadata.gz: 703a84e571f96f23c843b702bf30f9ddb9a4300dd2d3de88573f1530d16992d3531c9a4cc799c9723f93808f0c5dff4450668c74eef560d5f2d83eba55418eb7
-  data.tar.gz: c8cffa2d650853fb72982270243a7812eeb2d9c1b6627a5e2c2255c036e27ca9edfab64e2ebca2cd824ec264c23edcb14cb0c4d2e0ca2eee11923fe76d395f3c
+  metadata.gz: 18f3b68f512177e50e2146c9018e52535928c142d69f3e54b2c368d7655d1c638c5432d2e23ade2f4de5c41862a349dbf6b8325cd4d7cd9515ea0ea2b242a6fe
+  data.tar.gz: 2a44c4ecbf272b2ae90b49616048b8bbc6f7f641e0741dbdb26cfc92c5dce5b49724611c4b9aacb7f74017c89d1f891d2d54a148279322b80e54d455cb674738

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

@@ -93,10 +93,23 @@ const Icon = (props: IconProps) => {
     className
   )
 
+  const classesEmoji = classnames(
+    'pb_icon_kit',
+    globalProps(props),
+    'icon_circle_emoji',
+    className
+  )
+
   aria.label ? null : aria.label = `${icon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
 
+  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);
+  };
+
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
     if (customIcon)
@@ -111,6 +124,19 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
+    else if (isValidEmoji(icon))
+      return (
+        <>
+          <span
+              {...dataProps}
+              className={classesEmoji}
+              id={id}
+          >
+            {icon}
+          </span>
+        </>
+      )
+
     else
       return (
         <>
@@ -134,4 +160,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon

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

@@ -1,5 +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>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,

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

@@ -38,6 +38,11 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
+      def valid_emoji(icon)
+        emoji_regex = /\p{Emoji}/
+        emoji_regex.match?(icon)
+      end
+
       def classname
         generate_classname(
           "pb_icon_kit",

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -20,6 +20,11 @@ $pb_icon_circle_sizes: (
   object-fit: cover;
   overflow: hidden;
   position: relative;
+// font-family set to sans-serif ONLY for emojis.
+//Needed to fix misalignment issue caused by Proxima font
+  .icon_circle_emoji {
+    font-family: monospace;
+  }
 
   i,
   svg {

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -32,6 +32,7 @@ const IconCircle = (props: IconCircleProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
 
+
   return (
     <div
         {...ariaProps}
@@ -39,12 +40,13 @@ const IconCircle = (props: IconCircleProps) => {
         className={classes}
         id={id}
     >
-      <Icon
+        <Icon
           dark={dark}
           icon={icon}
-      />
+        />
+        
     </div>
   )
 }
 
-export default IconCircle
+export default IconCircle

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb

@@ -1,35 +1,41 @@
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   variant: "royal",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "archive",
+  icon: "rocket",
   variant: "orange",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "arrow-alt-right",
+  icon: "rocket",
   variant: "purple",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "cloud",
+  icon: "rocket",
   variant: "teal",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "award",
+  icon: "rocket",
   variant: "red",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "bolt",
+  icon: "rocket",
   variant: "yellow",
   size: "sm"
 }) %>
+<br />
 <%= pb_rails("icon_circle", props: {
-  icon: "calendar",
+  icon: "rocket",
   variant: "green",
   size: "sm"
 }) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("icon_circle", props: {
-  icon: "user"
+  icon: "rocket"
 }) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "😁",
+  size:"sm"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  icon: "&#128525;",
+  size:"md",
+  variant: "red"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  icon: '&#x1F389;',
+  size: "lg",
+  variant: "teal"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import IconCircle from '../_icon_circle'
+
+const IconCircleEmoji = (props) => {
+  return (
+    <div>
+      <IconCircle
+          icon="😁"
+          size="sm"
+          {...props}
+      />
+      <br/>
+      <IconCircle
+          icon="&#128525;"
+          size="md"
+          variant="red"
+          {...props}
+      />
+      <br/>
+      <IconCircle
+          icon="&#x1F389;"
+          size="lg"
+          variant="teal"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCircleEmoji

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_emoji.md

@@ -0,0 +1 @@
+The Icon Circle also allows you to pass in an HTML emoji in place of an icon if needed. To do so, pass any emoji or its hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string to the `icon` prop as shown in the code snippet below.

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -1,24 +1,24 @@
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "xs"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "sm"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "md"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "lg"
 }) %>
 <br />
 <%= pb_rails("icon_circle", props: {
-  icon: "comment",
+  icon: "rocket",
   size: "xl"
 }) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
+      <IconCircle
+          icon="rocket"
+          size="xs"
+          {...props}
+      />
+      <br />
       <IconCircle
           icon="rocket"
           size="sm"

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

@@ -4,8 +4,11 @@ examples:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_emoji: With Emoji
+
 
   react:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_emoji: With Emoji

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

@@ -1,3 +1,4 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.jsx'
 export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
+export { default as IconCircleEmoji } from './_icon_circle_emoji.jsx'

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbIconCircle
     class IconCircle < Playbook::KitBase
       prop :icon, required: true
+      prop :emoji, type: Playbook::Props::String,
+                   default: ""
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+
+import IconCircle from './_icon_circle'
+
+const testId = "icon-circle-kit"
+
+describe("IconCircle Kit", () => {
+    test("renders classname", () => {
+        render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="user"
+                size="md"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_circle_kit_md_default")
+    })
+
+    test("renders icon", () => {
+        render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="user"
+                size="md"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector('.pb_icon_kit')
+        expect(icon).toBeInTheDocument()
+    })
+
+    test("renders emoji", () => {
+        render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="&#128525;"
+                size="md"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveTextContent("😍")
+    })
+
+    test('displays color variants', () => {
+        [
+          "default",
+          "royal",
+          "blue",
+          "purple",
+          "teal",
+          "red",
+          "yellow",
+          "green"
+        ].forEach((colorVariant) => {
+          render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="rocket"
+                size="sm"
+                variant={colorVariant}
+            />
+          )
+          const kit = screen.getByTestId(testId)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_sm_${colorVariant}`)
+      
+          cleanup()
+        })
+      })
+
+      test('displays size as expected', () => {
+        [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ].forEach((sizeVariant) => {
+          render(
+            <IconCircle
+                data={{ testid: testId }}
+                icon="rocket"
+                size={sizeVariant}
+            />
+          )
+          const kit = screen.getByTestId(testId)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_${sizeVariant}_default`)
+      
+          cleanup()
+        })
+      })
+
+})

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -6,11 +6,11 @@ export const getAncestorsOfUnchecked = (
   if (item.parent_id) {
     const ancestor = filterFormattedDataById(data, item.parent_id);
     ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
   }
   return data;
 };
-  
+
 //function is going over formattedData and returning all objects that match the
 //id of the clicked item from the dropdown
 export const filterFormattedDataById = (
@@ -20,9 +20,9 @@ export const filterFormattedDataById = (
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
-      if (item.id.toLowerCase() === (term.toLowerCase())) {
+      if (item.id.toLowerCase() === term.toLowerCase()) {
         matched.push(item);
-        return
+        return;
       }
 
       if (item.children && item.children.length > 0) {
@@ -75,24 +75,29 @@ export const getCheckedItems = (
   });
   return checkedItems;
 };
-    
-export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
+
+export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
   const checkedDefault: { [key: string]: any }[] = [];
 
-  const traverseTree = (items:{ [key: string]: any }[]) => {
+  const traverseTree = (items: { [key: string]: any }[]) => {
     if (!Array.isArray(items)) {
       return;
     }
-    items.forEach((item:{ [key: string]: any }) => {
+    items.forEach((item: { [key: string]: any }) => {
       if (item.checked) {
         if (item.children && item.children.length > 0) {
-          const uncheckedChildren = item.children.filter((child:{ [key: string]: any }) => !child.checked);
+          const uncheckedChildren = item.children.filter(
+            (child: { [key: string]: any }) => !child.checked
+          );
           if (uncheckedChildren.length === 0) {
             checkedDefault.push(item);
             return;
           }
         } else {
-          const parent = items.find((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
+          const parent = items.find(
+            (parentItem: { [key: string]: any }) =>
+              parentItem.id === item.parentId
+          );
           if (!parent || !parent.checked) {
             checkedDefault.push(item);
           }
@@ -112,23 +117,47 @@ export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
 
 export const recursiveCheckParent = (
   item: { [key: string]: any },
-  data:any
+  data: any
 ) => {
   if (item.parent_id !== null) {
-  const parent = filterFormattedDataById(data, item.parent_id);
-  const allChildrenChecked = parent[0].children.every(
-    (child: { [key: string]: any }) => child.checked
-  );
-  if (allChildrenChecked) {
-    parent[0].checked = true;
-    const parentHasParent = parent[0].parent_id !== null;
-    if (parentHasParent) {
-      recursiveCheckParent(
-        parent[0],
-        data
-      );
+    const parent = filterFormattedDataById(data, item.parent_id);
+    const allChildrenChecked = parent[0].children.every(
+      (child: { [key: string]: any }) => child.checked
+    );
+    if (allChildrenChecked) {
+      parent[0].checked = true;
+      const parentHasParent = parent[0].parent_id !== null;
+      if (parentHasParent) {
+        recursiveCheckParent(parent[0], data);
+      }
+    }
+  }
+  return data;
+};
+
+export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+  let expandedItems: any[] = [];
+
+  const traverse = (items: string | any[], ancestors: any[] = []) => {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const itemAncestors = [...ancestors, item];
+
+      if (item.expanded) {
+        expandedItems.push(item.id);
+      }
+      if (Array.isArray(item.children)) {
+        const hasCheckedChildren = item.children.some(
+          (child: { [key: string]: string }) => child.checked
+        );
+        if (hasCheckedChildren) {
+          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+        }
+        traverse(item.children, itemAncestors);
+      }
     }
-}
-}
-return data;
-}
+  };
+
+  traverse(treeData);
+  return expandedItems;
+};

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -23,7 +23,7 @@
     .input_wrapper {
       background-color: $white;
       cursor: pointer;
-      padding: $space_xs + 4 $space_sm;
+      padding: $space_xs + 1 $space_sm;
       border: 1px solid #e4e8f0;
       border-radius: $border_rad_heavier;
       display: flex;
@@ -36,7 +36,6 @@
       input {
         border: none;
         font-family: $font_family_base;
-        padding: $space_xs;
         &:focus {
           outline: none;
         }