playbook_ui_docs 14.15.0.pre.alpha.PBNTR8996733 → 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76661

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

@@ -1,75 +0,0 @@
-<% 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

@@ -1,93 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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.

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

@@ -1,75 +0,0 @@
-<% 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",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                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",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-}] %>
-
-
-<%= pb_rails("multi_level_select", props: {
-    id: "mls-disabled-options-parent-rails",
-    name: "disabled_options_parent",
-    return_all_selected: true,
-    tree_data: treeData
-}) %>

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

@@ -1,93 +0,0 @@
-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",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                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",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectDisabledOptionsParent = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-disabled-options-parent'
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          returnAllSelected
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDisabledOptionsParent;

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

@@ -1,3 +0,0 @@
-For the `returnAllSelected`/`return_all_selected` variant, disabling the parent item will NOT automatically disable it's children since this version allows you to select a parent even if all children are unselected. 
-
-You can manually pass `disabled:true` to any and all children of a disabled parent if you want to do so. 

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

@@ -1,74 +0,0 @@
-<% 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",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                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",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-}] %>
-
-
-<%= pb_rails("multi_level_select", props: {
-    id: "mls-disabled-options-parent-default-rails",
-    name: "disabled_options_parent_default",
-    tree_data: treeData
-}) %>

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

@@ -1,92 +0,0 @@
-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",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                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",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectDisabledOptionsParentDefault = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-disabled-options-parent-default'
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDisabledOptionsParentDefault;

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

@@ -1,3 +0,0 @@
-For the `default` variant, disabling the parent item will automatically disable it's children as well. 
-
-If you want to be able to disable a parent WITHOUT disabling it's children, use the `returnAllSelected`/`return_all_selected` variant.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
-    I'm 150px high and 100px wide!
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
-    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
-    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
-    I have a min_width of 300px!
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
-    I have a min_height of 300px!
-  <% end %>
-<% end %>