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

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

@@ -15,6 +15,7 @@ import {
   getCheckedItems,
   getDefaultCheckedItems,
   recursiveCheckParent,
+  getExpandedItems,
 } from "./_helper_functions"
 
 type MultiLevelSelectProps = {
@@ -22,10 +23,12 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   id?: string
+  inputDisplay?: "pills" | "none"
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
+  selectedIds?: string[]
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -34,10 +37,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    inputDisplay = "pills",
     name,
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
+    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -50,26 +55,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const dropdownRef = useRef(null)
 
-
-  const getExpandedItems = (treeData: { [key: string]: string }[]) => {
-    let expandedItems: any[] = [];
-    
-    const traverse = (items: string | any[]) => {
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (item.expanded) {
-          expandedItems.push(item.id);
-        }
-        if (Array.isArray(item.children)) {
-          traverse(item.children);
-        }
-      }
-    }
-  
-    traverse(treeData);
-    return expandedItems;
-  }
-
   //state for whether dropdown is open or closed
   const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
@@ -87,8 +72,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData))
-  }, [treeData])
+    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
+  }, [treeData, selectedIds])
 
   useEffect(() => {
     if (returnAllSelected) {
@@ -174,11 +159,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
 
-
-
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
+    selectedIds: string[],
     parent_id: string = null,
     depth: number = 0,
   ) => {
@@ -188,6 +172,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
+        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
         parent_id,
         depth,
       }
@@ -198,6 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             : item.children
         newItem.children = addCheckedAndParentProperty(
           children,
+          selectedIds,
           newItem.id,
           depth + 1
         )
@@ -331,7 +317,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 ))
               : null}
 
-            {returnedArray.length !== 0 && returnAllSelected
+            {returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill
                     key={index}
@@ -342,7 +328,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 ))
               : null}
             {!returnAllSelected &&
-              defaultReturn.length !== 0 &&
+              defaultReturn.length !== 0 && inputDisplay === "pills" ?
               defaultReturn.map((item, index) => (
                 <FormPill
                   key={index}
@@ -350,9 +336,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                   size='small'
                   onClick={(event: any) => handlePillClose(event, item)}
                 />
-              ))}
-            {returnedArray.length !== 0 && returnAllSelected && <br />}
-            {defaultReturn.length !== 0 && !returnAllSelected && <br />}
+              ))
+              : null
+            }
+            {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
+            {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
             <input
               id='multiselect_input'
               onChange={(e) => {
@@ -365,11 +353,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
           {isClosed ? (
             <div key='chevron-down'>
-              <Icon icon='chevron-down' />
+              <Icon icon='chevron-down' size="xs"/>
             </div>
           ) : (
             <div key='chevron-up'>
-              <Icon icon='chevron-up' />
+              <Icon icon='chevron-up' size="xs"/>
             </div>
           )}
         </div>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md

@@ -1,3 +1,5 @@
 The `returnAllSelected` or `return_all_selected` prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node. 
 
-__NOTE__ :This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. `returnAllSelected` is set to false by default. 
+__NOTE__: This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. `returnAllSelected` is set to false by default. 
+
+__NOTE__: For larger trees that may return many pill selections, you can optionally set `input_display: "none"`(for Rails) or `inputDisplay = "none"`(for React) to hide all pills within the input.

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,6 +9,11 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :selected_ids, type: Playbook::Props::Array,
+                          default: []
+      prop :input_display, type: Playbook::Props::Enum,
+                           values: %w[pills none],
+                           default: "pills"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -17,9 +22,11 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
+          inputDisplay: input_display,
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          selectedIds: selected_ids,
         }
       end
     end

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -171,19 +171,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) {
+            if (!targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover) {
+            if (targetIsPopover || targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
-              shouldClosePopover(true);
-            }
+            shouldClosePopover(true);
             break;
         }
       },

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
-      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
-          this.hideTooltip()
-        }
+        this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement && !isTriggerElement) {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break

data/app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb

@@ -30,19 +30,5 @@
       <td>Value 4</td>
       <td>Value 5</td>
     </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_data_table.md

@@ -0,0 +1 @@
+Tighter spacing in first- and last-child cells of each row for data-heavy tables.

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -39,10 +39,22 @@
         thead tr th {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
+          &:first-child {
+            padding-left: $cell-pad-sm;
+          }
+          &:last-child {
+            padding-right: $cell-pad-sm;
+          }
         }
         tbody tr td {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
+          &:first-child {
+            padding-left: $cell-pad-sm;
+          }
+          &:last-child {
+            padding-right: $cell-pad-sm;
+          }
         }
       }
     }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -2,6 +2,7 @@ import { omit } from 'lodash'
 import { camelToSnakeCase } from './text'
 
 import {
+  BitValues,
   Binary,
   Display,
   DisplaySizes,
@@ -48,7 +49,7 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: 0 | 1
+  flexGrow?: Binary
 }
 
 type FlexShrink = {
@@ -316,15 +317,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
     if (typeof flexGrow == 'object') {
       return getResponsivePropClasses(flexGrow, 'flex_grow')
+    } else if (BitValues.includes(flexGrow)) {
+      return `flex_grow_${flexGrow}`
     } else {
-      return flexGrow ? `flex_grow_${flexGrow}` : ''
+      return ''
     }
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
     if (typeof flexShrink == 'object') {
       return getResponsivePropClasses(flexShrink, 'flex_shrink')
+    } else if (BitValues.includes(flexShrink)) {
+      return `flex_shrink_${flexShrink}`
     } else {
-      return flexShrink ? `flex_shrink_${flexShrink}` : ''
+      return ''
     }
   },
   justifyContentProps: ({ justifyContent }: JustifyContent) => {
@@ -392,4 +397,4 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
     'dark',
   ]
   return omit(props, notSafeProps)
-}
+}

data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js

@@ -12,7 +12,7 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     render(
       <Body
           data={{ testid: testId }}
-          flexGrow={`${x}`}
+          flexGrow={x}
           text="Hi"
       />
     )

data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js

@@ -12,7 +12,7 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     render(
       <Body
           data={{ testid: testId }}
-          flexShrink={`${x}`}
+          flexShrink={x}
           text="Hi"
       />
     )