playbook_ui_docs 14.23.0.pre.alpha.PLAY2205atborderbug9085 → 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335

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_pagination/docs/_pagination_default_rails.md

@@ -3,4 +3,6 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+
+Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -1 +1,3 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+
+Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.

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

@@ -19,6 +19,7 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
+                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>