playbook_ui 14.15.0.pre.alpha.play1949lodashremoval3of36758 → 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c1e04d125fc583873d510ededd4f53884d47b8debf146b933fc7e91e380ed99
-  data.tar.gz: 202ab46a86392fe0fbfc5a0ec8089c33dc562f48579d1b18db855b769f5e0eaf
+  metadata.gz: c8462d011ee01fbc2e1dcbcc3da414e4c97080fd50b0fca45cbdaa02e39015a4
+  data.tar.gz: 1ca28020da66e69a5262d5817ab9a827f82586f861ffeb2657d939fe1e0335a7
 SHA512:
-  metadata.gz: c587c24ab590f8471ad5d1bb7fe6874e126a7a3da4f224efac7fe5ea7b3c1867c39e1c59dcba64a172fbcbc2c2ac39f2a72f7ad50329ee982d22e55bcb6962c5
-  data.tar.gz: 18d4482b5bcc8c53fd4deb953af572295dec9b6f41e45dc1a4ae2e2a34f5d4d8ed84a82b3a754a62b6b52b00657682cdf328e9a32cc7a0a8dcb363a8528a7f73
+  metadata.gz: 6cdcb36480d01c4657d5dcc7614a39b8d4f068c5122242d2eea84e189216cc146fb14ba5c17d0a9716211284fb542c15c6a4a9902274236f2623a0a9cc46b1b0
+  data.tar.gz: 6f2d7d27c882350ea27cf7c31dac83c82b029b32e54511f0783b85d3279be6314eb19253a9e3680d81cf5f0b7112c25f78b593dfa9c686a284148616dbfc0db2

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb

@@ -0,0 +1,3 @@
+
+<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

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

@@ -6,6 +6,7 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 
   
   

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, omitBy, map } from '../../utilities/object'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -45,12 +46,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                     dark={dark}
                     size={4}
                     tag="h4"
-                    text={`${name}`}
+                    text={name}
                 /> :
                 <div>
                   <Caption
                       dark={dark}
-                      text={`${name}`}
+                      text={name}
                   />
                   <Title
                       dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, partial, map } from  '../../utilities/object'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'
@@ -26,7 +27,7 @@ const directionIcon = (dir: Direction) => (
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
-    const next = nextValue(value, String(name))
+    const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -7,7 +7,7 @@ $pb_pill_height: 25px;
 
 
 $confirmation_toast_colors: (
-  neutral:        $neutral,
+  neutral:        $text_lt_light,
   success:        $success,
   error:          $error,
   tip:          transparent,
@@ -87,7 +87,7 @@ $confirmation_toast_colors: (
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical; 
+        -webkit-box-orient: vertical;
         white-space: normal;
         text-align: left;
       }

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

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

@@ -1,10 +1,17 @@
 @import "../tokens/colors";
 
+$additional_colors: (
+  "light": $text_lt_light,
+  "lighter": $text_lt_lighter,
+  "link": $primary
+);
+
 // All the merges below create $icon_colors, a map of all color tokens in colors.scss
 $merge_kits1: map-merge($status_colors, $category_colors);
 $merge_kits2: map-merge($merge_kits1, $product_colors);
 $merge_kits3: map-merge($merge_kits2, $text_colors);
-$icon_colors: map-merge($merge_kits3, $data_colors);
+$merge_kits4: map-merge($merge_kits3, $data_colors);
+$icon_colors: map-merge($merge_kits4, $additional_colors);
 
 .pb_custom_icon, .pb_icon_kit {
   @each $color_name, $color_value in $icon_colors {

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -1,5 +1,11 @@
-<%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
+<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
     <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
-<% end %>
+<% end %>
+
+<%= pb_rails("flex", props: {}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -1,32 +1,57 @@
 import React from "react"
 import Icon from "../_icon"
+import Flex from "../../pb_flex/_flex"
 
 const IconDefault = (props) => {
   return (
-    <div style={{ display: "flex", flexDirection: "column"}}>
-      <Icon
-          color="primary"
-          fixedWidth
-          icon="user"
-          paddingBottom="sm"
-          size="2x"
-          {...props}
-      />
-      <Icon
-          color="data_4"
-          fixedWidth
-          icon="recycle"
-          paddingBottom="sm"
-          size="2x"
-          {...props}
-      />
-      <Icon
-          color="product_5_background"
-          fixedWidth
-          icon="product-roofing"
-          size="2x"
-          {...props}
-      />
+    <div>
+      <Flex marginBottom="sm">
+        <Icon
+            color="primary"
+            fixedWidth
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="data_4"
+            fixedWidth
+            icon="recycle"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="product_5_background"
+            fixedWidth
+            icon="product-roofing"
+            size="2x"
+            {...props}
+        />
+      </Flex>
+
+      <Flex>
+        <Icon
+            color="light"
+            fixedWidth
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="lighter"
+            fixedWidth
+            icon="recycle"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="link"
+            fixedWidth
+            icon="product-roofing"
+            size="2x"
+            {...props}
+        />
+      </Flex>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from "../../utilities/object" 
+import { debounce } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

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

@@ -88,7 +88,11 @@ export const getDefaultCheckedItems = (
     items.forEach((item: { [key: string]: any }) => {
       if (item.checked) {
         if (item.children && item.children.length > 0) {
-          const uncheckedChildren = item.children.filter(
+           // Filter out disabled children (only consider selectable items)
+           const selectableChildren = item.children.filter(
+            (child: { [key: string]: any }) => !child.disabled
+          );
+          const uncheckedChildren = selectableChildren.filter(
             (child: { [key: string]: any }) => !child.checked
           );
           if (uncheckedChildren.length === 0) {

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

@@ -9,7 +9,7 @@ import {
 } from "../utilities/props";
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import { cloneDeep } from "../utilities/object";
+import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 
@@ -113,7 +113,9 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
       return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      item.checked = check;
+      if (!item.disabled) {
+        item.checked = check;
+      }
       item.children = modifyRecursive(item.children, check);
       return item;
     });
@@ -124,12 +126,16 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     treeData: { [key: string]: any }[],
     selectedIds: string[],
     parent_id: string | null = null,
-    depth = 0
+    depth = 0,
+    parentDisabled = false
   ) => {
     if (!Array.isArray(treeData)) {
       return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
+      // An item is disabled if it is explicitly set as disabled or if its parent is disabled
+      const isDisabled = item.disabled || (parentDisabled && !returnAllSelected);
+
       const newItem = {
         ...item,
         checked: Boolean(
@@ -137,6 +143,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         ),
         parent_id,
         depth,
+        disabled: isDisabled,
       };
       if (newItem.children && newItem.children.length > 0) {
         const children =
@@ -147,7 +154,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           children,
           selectedIds,
           newItem.id,
-          depth + 1
+          depth + 1,
+          isDisabled
         );
       }
       return newItem;
@@ -244,8 +252,9 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     return tree.map((item: any) => {
       if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        item.checked = check;
-
+        if (!item.disabled) {
+          item.checked = check;
+        }
         if (variant === "single") {
           // Single select: no children should be checked
           item.children = modifyRecursive(item.children, !check);

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb

@@ -66,7 +66,7 @@
 
 <%= pb_rails("multi_level_select", props: {
     disabled: true,
-    id: "multi-level-select-default-rails",
+    id: "multi-level-select-disabled-rails",
     name: "my_array",
     tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb

@@ -0,0 +1,76 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-disabled-options-rails",
+    name: "disabled_options",
+    return_all_selected: true,
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectDisabledOptions = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-disabled-options'
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          returnAllSelected
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDisabledOptions;

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

@@ -0,0 +1 @@
+individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb

@@ -0,0 +1,75 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-disabled-options-default-rails",
+    name: "disabled_options_default",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+            disabled: true,
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+                disabled: true,
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+            disabled: true,
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectDisabledOptionsDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-disabled-options-default'
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDisabledOptionsDefault;

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

@@ -0,0 +1,3 @@
+To disable individual items in the treeData, include `disabled:true` within the object on the treeData that you want disabled. See the code snippet below for an example of how to do this.
+
+If a parent is selected, the parent will be returned in the selected items list, even if it has disabled children.