playbook_ui_docs 14.23.0 → 14.24.0.pre.alpha.PLAY2329atstickypinnedborderbug9340

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md

@@ -1,17 +1,14 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)
 
-- 
-
-- `layout` determines the position of the legend items
+`layout` determines the position of the legend items
 `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
 
-- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
-
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
 
-- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

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

@@ -11,7 +11,6 @@ examples:
 
   react:
   - line_graph_default: Default
-  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,4 +4,3 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
-export { default as LineGraphPbStyles } from './_line_graph_pb_styles.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'

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_phone_number_input/docs/_phone_number_input_strict_mode.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+}) %>
+
+<%= pb_rails("body", props: { text: "With format_as_you_type" }) %>
+
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+    format_as_you_type: true,
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputStrictMode = (props) => {
+
+    return (
+        <>
+            <PhoneNumberInput
+                id="strict"
+                strictMode
+                {...props}
+            />
+            <Body>With formatAsYouType</Body>
+            <PhoneNumberInput
+                formatAsYouType
+                id="strict"
+                strictMode
+                {...props}
+            />
+        </>
+    );
+};
+
+export default PhoneNumberInputStrictMode;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md

@@ -0,0 +1,3 @@
+Ignore any irrelevant characters and cap the length at the maximum valid number length.
+
+This can be combined with `format_as_you_type` / `formatAsYouType`. 

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

@@ -10,6 +10,7 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
+  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
 
   rails:
@@ -20,5 +21,6 @@ examples:
   - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
+  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search

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

@@ -7,4 +7,5 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
+export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

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