playbook_ui 14.23.0.pre.alpha.PLAY1985renderpaginationonlywithpages9148 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9266

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5916a3032b32d8b41936c775fb41e871ebf43ba155a6d234f0bb1058cae9613c
-  data.tar.gz: 7b8a5f1b60bb0f78172b99184496b42f1a5479899e426adcf8ec463849d15fc0
+  metadata.gz: 24185aeb80072ed0704e6fd8ffb69e32d553bd6aced990a88e3edd9ec741a50b
+  data.tar.gz: fce741053d5a583537ab48660e21ed71fede85bb459684bb6bae899a215b4392
 SHA512:
-  metadata.gz: 046f073e9767bd44c5314eeae88a20d75418932540ba2f6dec23abea41fbd71f1b90c2c37010440f18db52fceda43947eea004f545cf04f19364920c7707cb79
-  data.tar.gz: f985deed8f16d963197d009608817d827bfbcd7ba6602fc4b464c6acb954616ba92eb03934ecb507f3af0dca88bcf7d225a1fc41051a9294c85a9cd6254a9567
+  metadata.gz: 8bcf259b88de37b9bd607f8d4a7aeadfd71f207c25298930efe27a42b4bf150f01cc878532f67f641b02527f02492de7bf708775277a818e47b613d446621021
+  data.tar.gz: b0dd36620d98525706ce754fdeb9b6b46e38ee5a3bc4ff796f8cc82d5fe3b78dc8fd0183045e597f1fe35f6b405a2216f68548ce8a7a8cecfd982af5ed4c2c7b

data/app/pb_kits/playbook/_playbook.scss

@@ -107,7 +107,6 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -8,6 +8,7 @@
 @import "../pb_textarea/textarea_mixin";
 
 @import "./scss_partials/dropdown_animation";
+@import "dropdown_mixin";
 
 [class*="pb_dropdown"] {
   .dropdown_wrapper {
@@ -98,9 +99,23 @@
           [class^="pb_title_kit"], a {
             color: $white !important;
           }
+          border-bottom: 1px solid $border_light;
           &:hover {
-            background-color: $product_1_background !important;
+            background-color: $product_1_background;
+          }
+ 
+          // activeStyle font color map
+          @each $name, $color in $font-colors {
+            &.font-#{$name} {
+              @include apply-font-color($color);
+            }
           }
+          // activeStyle background color map (no difference between selected and selected+hover custom colors)
+          @each $name, $bg in $background-colors {
+            &.bg-#{$name} {
+              background-color: $bg;
+            }
+          }     
         }
       }
 
@@ -267,6 +282,7 @@
         }
         &[class*="selected"] {
           background-color: $primary;
+          border-bottom: rgba($white, 0.15);
         }
       }
     }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -39,6 +39,10 @@ type DropdownProps = {
     options: GenericObject;
     separators?: boolean;
     variant?: "default" | "subtle";
+    activeStyle?: {
+      backgroundColor?: string;
+      fontColor?: string;
+    };
 };
 
 interface DropdownComponent
@@ -69,6 +73,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         options,
         separators = true,
         variant = "default",
+        activeStyle,
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -251,6 +256,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         >
             <DropdownContext.Provider
                 value={{
+                    activeStyle,
                     autocomplete,
                     dropdownContainerRef,
                     filteredOptions,

data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss

@@ -0,0 +1,36 @@
+@import "../tokens/colors";
+
+// activeStyle fontColor sass map to go through text colors + set of custom colors
+$custom-font-colors: (
+  primary: $primary
+);
+
+$merged-font-colors: map-merge($text_colors, $custom-font-colors);
+
+$font-colors: ();
+
+@each $key, $val in $merged-font-colors {
+  $font-colors: map-merge($font-colors, ($key: $val));
+}
+
+@mixin apply-font-color($color) {
+  color: $color;
+
+  [class^="pb_body"],
+  [class^="pb_title_kit"],
+  a {
+    color: $color !important;
+  }
+}
+
+// activeStyle backgroundColor map (set of custom colors)
+$custom-background-colors: (
+  "bg_light": $bg_light,
+  "white": $white,
+);
+
+$background-colors: ();
+
+@each $key, $val in $custom-background-colors {
+  $background-colors: map-merge($background-colors, ($key: $val));
+}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownCustomActiveStyleOptions = (props) => {
+
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "bg_light",
+          fontColor: "primary",
+        }}
+        label="Background Color: bg_light; Font Color: primary"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "white",
+          fontColor: "primary",
+        }}
+        label="Background Color: white; Font Color: primary"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    />
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "bg_light",
+          fontColor: "text_lt_default",
+        }}
+        autocomplete
+        label="Background Color: bg_light; Font Color: text_lt_default"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    />
+    <Dropdown
+        activeStyle={{
+          fontColor: "text_lt_lighter",
+        }}
+        label="Font Color: text_lt_lighter"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownCustomActiveStyleOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -0,0 +1,4 @@
+The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
+
+`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx

@@ -18,6 +18,7 @@ const DropdownCustomRadioOptions = (props) => {
   return (
   <div>
       <Dropdown
+          activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
           label="Select Item"
           onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
           options={options}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md

@@ -1 +1 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.

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

@@ -16,7 +16,7 @@ examples:
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,8 +39,9 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_active_style_options: Custom Active Style Options
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  - dropdown_with_custom_radio_options: Custom Radio Options
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -21,4 +21,5 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -369,4 +369,28 @@ test("defaultValue works with multiSelect", () => {
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })
+
+test("applies activeStyle backgroundColor and fontColor when selected", () => {
+    render(
+      <Dropdown
+          activeStyle={{
+            backgroundColor: "bg_light",
+            fontColor: "primary",
+          }}
+          data={{ testid: testId }}
+          options={options}
+      />
+    )
+  
+    const kit = screen.getByTestId(testId)
+    const option = kit.querySelectorAll(".pb_dropdown_option_list")[1]
+  
+    fireEvent.click(option)
+  
+    const selected = kit.querySelector(".pb_dropdown_option_selected")
+
+    expect(selected).toBeInTheDocument()
+    expect(selected).toHaveClass("bg-bg_light")
+    expect(selected).toHaveClass("font-primary")
   })

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -41,6 +41,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = props;
 
   const {
+    activeStyle,
     filteredOptions,
     filterItem,
     focusedOptionIndex,
@@ -59,7 +60,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
    ? selected.some((item) => item.label === option?.label)
    : (selected as GenericObject)?.label === option?.label;
 
-  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
@@ -70,6 +70,14 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   const selectedClass = isSelected ? "selected" : "list";
 
+
+  const bgTokenClass = activeStyle?.backgroundColor
+      ? `bg-${activeStyle.backgroundColor}`
+      : "";
+  const fontTokenClass = activeStyle?.fontColor
+    ? `font-${activeStyle.fontColor}`
+    : "";
+
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -79,6 +87,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
+    bgTokenClass, 
+    fontTokenClass,
     globalProps(props),
     className
   );

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

@@ -143,7 +143,8 @@ export const recursiveCheckParent = (
 
 export const getExpandedItems = (
   treeData: { [key: string]: string }[],
-  selectedIds: string[]
+  selectedIds: string[],
+  showCheckedChildren = true
 ): any[] => {
   const expandedItems: any[] = [];
 
@@ -152,19 +153,27 @@ export const getExpandedItems = (
       const item = items[i];
       const itemAncestors = [...ancestors, item];
 
+      // Always honor explicit expanded: true
       if (item.expanded) {
         expandedItems.push(item.id);
       }
-      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
-        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+
+      // Only expand based on selected items if showCheckedChildren is true
+      if (showCheckedChildren) {
+        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+          expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
+        }
+        if (Array.isArray(item.children)) {
+          const hasCheckedChildren = item.children.some(
+            (child: { [key: string]: string }) => child.checked
+          );
+          if (hasCheckedChildren) {
+            expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
+          }
+        }
       }
+
       if (Array.isArray(item.children)) {
-        const hasCheckedChildren = item.children.some(
-          (child: { [key: string]: string }) => child.checked
-        );
-        if (hasCheckedChildren) {
-          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
-        }
         traverse(item.children, itemAncestors);
       }
     }

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

@@ -47,6 +47,7 @@ type MultiLevelSelectProps = {
   name?: string
   required?: boolean
   returnAllSelected?: boolean
+  showCheckedChildren?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
@@ -71,6 +72,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     label,
     required = false,
     returnAllSelected = false,
+    showCheckedChildren = true,
     treeData,
     onChange = () => null,
     onSelect = () => null,
@@ -104,7 +106,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // State for default return
   const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds, showCheckedChildren);
   // Initialize state with expanded items
   const [expanded, setExpanded] = useState(initialExpandedItems);
 

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

@@ -0,0 +1,75 @@
+<% treeData = [{
+  label: "Power Home Remodeling",
+  value: "powerHomeRemodeling",
+  id: "100",
+  expanded: true,
+  children: [
+    {
+      label: "People",
+      value: "people",
+      id: "101",
+      children: [
+        {
+          label: "Talent Acquisition",
+          value: "talentAcquisition",
+          id: "102",
+        },
+        {
+          label: "Business Affairs",
+          value: "businessAffairs",
+          id: "103",
+          children: [
+            {
+              label: "Initiatives",
+              value: "initiatives",
+              id: "104",
+            },
+            {
+              label: "Learning & Development",
+              value: "learningAndDevelopment",
+              id: "105",
+            },
+          ],
+        },
+        {
+          label: "People Experience",
+          value: "peopleExperience",
+          id: "106",
+        },
+      ],
+    },
+    {
+      label: "Contact Center",
+      value: "contactCenter",
+      id: "107",
+      children: [
+        {
+          label: "Appointment Management",
+          value: "appointmentManagement",
+          id: "108",
+        },
+        {
+          label: "Customer Service",
+          value: "customerService",
+          id: "109",
+        },
+        {
+          label: "Energy",
+          value: "energy",
+          id: "110",
+        },
+      ],
+    },
+  ],
+}] %>
+
+<% # Pre-selected node IDs to demonstrate the functionality %>
+<% preSelectedIds = ["102", "104", "109"] %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-show-checked-children-rails",
+  name: "my_array",
+  tree_data: treeData,
+  selected_ids: preSelectedIds,
+  show_checked_children: false
+}) %>

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

@@ -0,0 +1,94 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Pre-selected node IDs to demonstrate the functionality
+const preSelectedIds = ["talent1", "initiative1", "customer1"];
+
+const MultiLevelSelectShowCheckedChildren = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-checked-children'
+          onSelect={(selectedNodes) =>
+            console.log(
+              "Selected Items",
+              selectedNodes
+            )
+          }
+          selectedIds={preSelectedIds}
+          showCheckedChildren={false}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectShowCheckedChildren;

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

@@ -0,0 +1,3 @@
+If you wish to control the auto-expansion of nodes with selected descendants in your multi-level select, you can utilize `showCheckedChildren/show_checked_children`. This prop (set to 'true' by default) controls whether items will be expanded on first render. When set to true, a node with selected descendants will automatically render as expanded so the selected nodes are visible. If you do NOT wish for this to be the case, you can set this prop to false.
+
+The prop will still honor any `expanded` attribute set up within your tree data.

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

@@ -13,4 +13,4 @@ export { default as MultiLevelSelectDisabledOptions } from './_multi_level_selec
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
 export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

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

@@ -32,6 +32,8 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
+      prop :show_checked_children, type: Playbook::Props::Boolean,
+                                   default: true
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -54,6 +56,7 @@ module Playbook
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,
+          showCheckedChildren: show_checked_children,
         }
       end
     end

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,7 +24,9 @@ module Playbook
       prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
-        classname + inline_class + compact_class + show_arrow_class
+        ([classname] + [inline_class, compact_class, show_arrow_class])
+          .reject(&:empty?)
+          .join(" ")
       end
 
       def all_attributes
@@ -44,7 +46,7 @@ module Playbook
       end
 
       def inline_class
-        inline ? " inline " : " "
+        inline ? "inline" : ""
       end
 
       def compact_class