playbook_ui 12.31.0.pre.alpha.customiconsfa928 → 12.31.0.pre.alpha.multilevelnopillsdesigns941

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e5f294819c764e724a6794cac4310d57aaf738894c2ffcf4dbcd9d7ada25953
-  data.tar.gz: '084cfd995463e4d69d3f4071ca8a5c34fec10276d9181866a1681a6f78b45dcf'
+  metadata.gz: 6338c934943b1c56fef912cfbe032aa415b7288be0d44b23df01b858c4a12c0c
+  data.tar.gz: 55f1ac8191a65068030e682e8f7d50e337ce6c74c07ad160c5dd61b795d88bbb
 SHA512:
-  metadata.gz: fdaadc126dabfad4e105334e37a9056fb4df6c0981e91c22dd5fbc6d6cb1ed145d9217f580229b8c08e576e890722636db7199c8ceedac1956179e575d389f70
-  data.tar.gz: ca38cac25050fd1f429ec570adab8d2b00835025806e23cbd86cb0cc1e350e586132d49a91131e10f859cfa49fa630c036abba890942f3e717ece2253bc02ab3
+  metadata.gz: 309bd3c9d0885a98a6a280aa7182bcc7617d83cc7f788a435649c832d1188b972c22c4382530c0e30d02c680daa648ce9d0cfb65ee3b2b510ee42a5492440ded
+  data.tar.gz: 1f8e1b6f661fa9554fa85e9c75a2f5145745179361392a86eddbc8c11a1c8c165e82d8a9040b34daca088e0b73155e8b984c78d12d85a9df2fc3fb7beaf2a0bf

data/app/pb_kits/playbook/index.js

@@ -2,7 +2,6 @@
 import './_playbook.scss'
 import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
-import './custom-icons'
 
 // vvv React Component JSX Imports from the React Kits vvv
 export { default as Avatar } from './pb_avatar/_avatar'
@@ -130,4 +129,4 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'

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

@@ -34,7 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
-  fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
+  fontStyle?: 'far' | 'fas' | 'fab',
   spin?: boolean,
 } & GlobalProps
 
@@ -76,7 +76,6 @@ const Icon = (props: IconProps) => {
     [`fa-${size}`]: size,
     [`fa-pull-${pull}`]: pull,
     [`fa-rotate-${rotation}`]: rotation,
-
   }
 
   // Lets check and see if the icon prop is referring to a custom Power icon...
@@ -84,15 +83,11 @@ const Icon = (props: IconProps) => {
   // this ensures the JS will not do any further operations
   // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
   if (!customIcon) faClasses[`fa-${icon}`] = icon
-  
-  const whiteList = [
-    'greensky', 'powergon'
-  ]
-  
+
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : whiteList.includes(icon) ? `fak` : fontStyle,
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -115,7 +110,6 @@ const Icon = (props: IconProps) => {
     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_icon/icon.rb

@@ -33,7 +33,7 @@ module Playbook
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
       prop :font_style, type: Playbook::Props::Enum,
-                        values: %w[far fas fab fak],
+                        values: %w[far fas fab],
                         default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
@@ -140,13 +140,7 @@ module Playbook
       end
 
       def font_style_class
-        white_list = %w[powergon greensky]
-
-        if white_list.include?(icon)
-          "fak"
-        elsif font_style
-          font_style.to_s
-        end
+        font_style ? font_style.to_s : "far"
       end
 
       def spin_class

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

@@ -36,6 +36,7 @@
       input {
         border: none;
         font-family: $font_family_base;
+        font-size: $font_base;
         &:focus {
           outline: none;
         }

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

@@ -6,6 +6,7 @@ import Checkbox from "../pb_checkbox/_checkbox"
 import Icon from "../pb_icon/_icon"
 import FormPill from "../pb_form_pill/_form_pill"
 import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
+import Body from "../pb_body/_body"
 import { cloneDeep } from "lodash"
 
 import {
@@ -250,6 +251,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
+  const itemsSelectedLength = () => {
+    let items
+    if (returnAllSelected && returnedArray && returnedArray.length) {
+      items = returnedArray.length
+    } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
+      items = defaultReturn.length
+    }
+    return items
+  }
   //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
     return (
@@ -310,7 +320,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
       <div ref={dropdownRef} className='wrapper'>
         <div className='input_wrapper' onClick={handleInputWrapperClick}>
-          <div className='input_inner_container'>
+          <div className='input_inner_container' style={{display: `${inputDisplay === "none" && "flex"}`}}>
             {returnedArray.length !== 0 && returnAllSelected
               ? returnedArray.map((item) => (
                   <input type='hidden' name={`${name}[]`} value={item.id} />
@@ -339,6 +349,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
               ))
               : null
             }
+            {
+              inputDisplay === "none" && itemsSelectedLength() && (
+                <Body paddingRight="xs">{`${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`}</Body>
+              )
+            }
             {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
             {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
             <input
@@ -346,7 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
               onChange={(e) => {
                 setFilterItem(e.target.value)
               }}
-              placeholder='Start typing...'
+              placeholder={inputDisplay === "none" && itemsSelectedLength() ? "" : "Start typing..."}
               value={filterItem}
               onClick={() => setIsClosed(false)}
             />