playbook_ui 14.15.0.pre.alpha.play1949lodashremoval3of36746 → 14.15.0.pre.alpha.play1949lodashremoval3of36815

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 363360c157a79330efc2c8b4e60e45437e7fb282790e4a302da644da029d67f0
-  data.tar.gz: e798b4832175f45fac621bbe16ac3c84d88ce499d55b7af35062125b95d4eadf
+  metadata.gz: 00c74c07957b56cf1da4de814303ddc2a8ddd7632aac68fff9e7d4cdd3cbf203
+  data.tar.gz: f27e1e2692df72b86d23da070e3ca4e78c98ec266d451f2ef31267946da5c524
 SHA512:
-  metadata.gz: 07ffd2c95fed2422c3a4a4659a5bfdfcc51c63875d00ab3b8efa6ee29a240b92c9003c816bd0254c3350207528542e978ec6cc78b898c58a271def99c4806c8c
-  data.tar.gz: 5118481860bb78e617854ff8916c106ba455aff24bd8bf2dcdea257cde2a40bea09c797113c67a1073a87ddbbaa8dd2d074ec8a68fa946da121ba7295a2f3ea8
+  metadata.gz: 97b42f8f769cd29673a57688f2f0fff0ae8894242137f0966b267f33098b0b7b6d934f4ae59302d0c3bb502f05b21e52a95fbb49072ad0a763eb5a6b571ca21e
+  data.tar.gz: 00fa01e72545d9ce4edadee984709233526e7279fce642627d9e89dfff0de4b3488013685ed0744ece60475eee2250160a9b44eead8f65169227d7d7b21c9709

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
 import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
 import Draggable from '../../pb_draggable/_draggable'
 import { DraggableProvider } from '../../pb_draggable/context'
 

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_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/docs/_form_form_with.html.erb

@@ -22,6 +22,72 @@
 
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -47,6 +113,7 @@
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
+  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,72 @@
   ]
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
@@ -38,6 +104,7 @@
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
+  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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_icon_button/_icon_button.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -17,6 +17,7 @@ type IconButtonProps = {
   id?: string,
   link?: string,
   newWindow?: boolean,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   size?: IconSizes,
   target?: string,
   variant?: 'default' | 'link',
@@ -32,6 +33,7 @@ const IconButton = (props: IconButtonProps) => {
     id,
     link,
     newWindow = false,
+    onClick = noop,
     size = "2x",
     target,
     variant = "default",
@@ -53,6 +55,7 @@ const IconButton = (props: IconButtonProps) => {
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}
+          onClick={onClick}
           target={target}
       >
         <Icon

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import IconButton from '../../pb_icon_button/_icon_button'
+
+const IconButtonClick = (props) => (
+  <div>
+    <IconButton
+        {...props}
+        onClick={() => alert('Click!')}
+    />
+  </div>
+)
+
+export default IconButtonClick

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

@@ -7,3 +7,4 @@ examples:
   react:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
+  - icon_button_click: Click Handler

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

@@ -1,2 +1,3 @@
 export { default as IconButtonDefault } from './_icon_button_default.jsx'
 export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
+export { default as IconButtonClick } from './_icon_button_click.jsx'

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.scss

@@ -10,6 +10,16 @@
 .pb_multi_level_select {
   font-family: $font-family-base;
 
+&.error {
+  .wrapper {
+    .input_wrapper {
+      border-color: $error;
+    }
+  }
+  [class*=pb_body_kit_negative] {
+    margin-top: $space_xxs;
+  }
+}
   .wrapper {
     position: relative;
 
@@ -92,4 +102,17 @@
   .open {
     display: block;
   }
+
+  &.dark {
+    &.error {
+      .wrapper {
+        .input_wrapper {
+          border-color: $error_dark;
+        }
+      }
+      [class*=pb_body_kit_negative] {
+        color: $error_dark;
+      }
+    }
+  }
 }

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

@@ -7,9 +7,12 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
+import { cloneDeep } from "../utilities/object";
+
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import { cloneDeep } from "../utilities/object";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 
@@ -35,11 +38,14 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
+  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
+  label?: string
   name?: string
+  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
@@ -56,11 +62,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     className,
     data = {},
     disabled = false,
+    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
+    label,
+    required = false,
     returnAllSelected = false,
     treeData,
     onChange = () => null,
@@ -77,6 +86,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
+    error && "error",
     globalProps(props),
     className
   );
@@ -113,7 +123,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 +136,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 +153,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         ),
         parent_id,
         depth,
+        disabled: isDisabled,
       };
       if (newItem.children && newItem.children.length > 0) {
         const children =
@@ -147,7 +164,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           children,
           selectedIds,
           newItem.id,
-          depth + 1
+          depth + 1,
+          isDisabled
         );
       }
       return newItem;
@@ -244,8 +262,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);
@@ -430,6 +449,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         className={classes}
         id={id}
     >
+      {label &&
+        <Caption
+            marginBottom="xs"
+            text={label}
+        />
+      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -453,6 +478,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
+                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -467,6 +493,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -479,6 +506,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id} 
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -539,6 +567,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       } selected`
                     : "Start typing..."
                 }
+                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -571,6 +600,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
+      {error &&
+          <Body
+              dark={props.dark}
+              status="negative"
+              text={error}
+          />
+        }
     </div>
   );
 }) as MultiLevelSelectComponent;

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
 }) %>