playbook_ui 13.8.0 → 13.9.0.pre.alpha.PLAY962SingleSelect1261

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d2eca7c20f8832218f6db41d2723db43b2350e59a7aad8334da3931c3c0bbb1a
-  data.tar.gz: ebc310683144bfef85d081ceb97d118a34974f77e172999fdbb448abaf30291b
+  metadata.gz: bbbb7405fff8ba7bff61edf5ab1b7a454b62f10fbf0ce7373a053dd7e938fd41
+  data.tar.gz: 88cf1a1646d62f2633ff8b49905dfb7ffab11faea0466627d644016892be5b73
 SHA512:
-  metadata.gz: bf3e81b0e87cdb87c08ccff73734d1f1f29eb854d1472fcbef22a366529a6a8c94c4fd0951d4d21f053b1114e84bad839bc90a062c30a15caa3c70f98185da1b
-  data.tar.gz: 160a1bcfea2ba6353e6d0469fb9884deb3d28628063fad41bb7e1a2c5e92bac0d7ee45e4e78ab27e14b4b6e5bd584cba1ff3134e74b444064624b25533a5c73b
+  metadata.gz: 27dd8117514678def0ba2ae25d01e52dd731af744bfeaafc13ae53166604ec41403b513943ea2f9217e3c72c63d23b7b9b8c625dfe2180837ec86c01586be4c0
+  data.tar.gz: 84fd12d4ed1dd1e67a6bb3a8dc4e9f96fd2f67272048a6f7d0ed686fc1caac9851f254686391b2abae25237e5f6cdd4bf49520c46a424a253a766d1d98b402c5

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

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { isValidEmoji } from '../utilities/validEmojiChecker'
 
 import Icon from '../pb_icon/_icon'
 import Caption from "../pb_caption/_caption"
@@ -38,12 +39,6 @@ type ButtonPropTypes = {
   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,

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

@@ -1,5 +1,5 @@
 <%= 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: { count: 5, icon: "1️⃣", 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" }) %>
 

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

@@ -19,7 +19,7 @@ return (
     />
     <Button
         count={5}
-        icon="😍"
+        icon="1️⃣"
         marginLeft='lg'
         tabIndex={0}
         variant="reaction"

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

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { isValidEmoji } from '../utilities/validEmojiChecker'
 
 export type IconSizes = "lg"
 | "xs"
@@ -104,13 +105,6 @@ const Icon = (props: IconProps) => {
   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)

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -6,6 +6,7 @@
 
   .content_wrapper {
     width: 100%;
+    font-size: $font_base - 1;
 
     .pull-left {
       margin-left: $space-xs;

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

@@ -1,22 +1,9 @@
-//function to retrieve all ancestors of unchecked item and set checked to false
-export const getAncestorsOfUnchecked = (
-  data: { [key: string]: any }[],
-  item: { [key: string]: any }
-) => {
-  if (item.parent_id) {
-    const ancestor = filterFormattedDataById(data, item.parent_id);
-    ancestor[0].checked = false;
-    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
+// Function is going over formattedData and returning all objects that match the
+// ID of the clicked item from the dropdown
 export const filterFormattedDataById = (
   formattedData: { [key: string]: any }[],
   id: string
-) => {
+): { [key: string]: any }[] => {
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -38,7 +25,7 @@ export const filterFormattedDataById = (
 export const findByFilter = (
   formattedData: { [key: string]: any }[],
   searchTerm: string
-) => {
+): { [key: string]: any }[] => {
   const matchedItems: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -56,7 +43,20 @@ export const findByFilter = (
   return matchedItems;
 };
 
-//function to get all items with checked = true
+// Function to retrieve all ancestors of unchecked item and set checked to false
+export const getAncestorsOfUnchecked = (
+  data: { [key: string]: any }[],
+  item: { [key: string]: any }
+): { [key: string]: any }[] => {
+  if (item.parent_id) {
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
+  }
+  return data;
+};
+
+// Function to get all items with checked = true
 export const getCheckedItems = (
   data: { [key: string]: any }[]
 ): { [key: string]: any }[] => {
@@ -76,7 +76,9 @@ export const getCheckedItems = (
   return checkedItems;
 };
 
-export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
+export const getDefaultCheckedItems = (
+  treeData: { [key: string]: any }[]
+): { [key: string]: any }[] => {
   const checkedDefault: { [key: string]: any }[] = [];
 
   const traverseTree = (items: { [key: string]: any }[]) => {
@@ -118,7 +120,7 @@ export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
 export const recursiveCheckParent = (
   item: { [key: string]: any },
   data: any
-) => {
+): any => {
   if (item.parent_id !== null) {
     const parent = filterFormattedDataById(data, item.parent_id);
     const allChildrenChecked = parent[0].children.every(
@@ -135,8 +137,11 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
-  let expandedItems: any[] = [];
+export const getExpandedItems = (
+  treeData: { [key: string]: string }[],
+  selectedIds: string[]
+): any[] => {
+  const expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
     for (let i = 0; i < items.length; i++) {

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

@@ -30,10 +30,11 @@
       align-items: center;
       justify-content: space-between;
       .input_inner_container {
-        max-width: 90%;
+        width: 100%;
       }
 
       input {
+        width: 100%;
         border: none;
         font-family: $font_family_base;
         font-size: $font_base;