playbook_ui_docs 14.23.0.pre.alpha.PLAY1985renderpaginationonlywithpages9148 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9266

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ec99d50d99ee07c155d71870139ee4f3f920805d666f537bef1a54a009feb982
-  data.tar.gz: 7741dc111b88a6a94c62dc715c435f67b636b6eb84e9138e91ab3320d2086ad0
+  metadata.gz: 6b52a7f4a36461a6cfdac90a244a506cf27464b18649768d475af09ca1056676
+  data.tar.gz: 4d20bf74b0dde132cacf8e8d5308d67cac0ae78e52cd6e099d25a6a5e01107bf
 SHA512:
-  metadata.gz: 6633bd15654966fc892bdc4dfd880037002ca7a1e48516adddd010501dd2aabf2a9c99e7e42f32ad0b39698653ef548e05d787ee7eedf84091fed74717bb1ec5
-  data.tar.gz: 6b6414830e3da8a2c95f823a79e559ac00fc0769b03fe8fe7c6873d29fe0a5332bd75030fc2d8ff3c62f57cb10fed60f08c2c8c2883f584c34bad252d7946db6
+  metadata.gz: ffd077cfa04b4df6715bcd5014e3d9df8d21b76d0ba02bc85edcb1986930f5e5d27015671eaed287302d392e3bb16b551014f3dc79a3038746ebcffab11f661d
+  data.tar.gz: 88d2f0cd48fb1c5276ac5c53c8b85ebc678ed35bbf7aaebc3d7eaffe69e84872ba857c0d14fed562595f9a957fbdfadfb1fa62dcb75d6c7add4d4edb94892815

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_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'