playbook_ui_docs 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0ff3cac151b97c5df5aecd11557494dff56530efa9ac0718261a38437f7e0ce
-  data.tar.gz: 72f7618c689bc1a09ca11f5937718a467fe15f601c99d39c6dc695cdfcee34f8
+  metadata.gz: ff2d019b5abd6484c31d09bc6ca745b354d5121f9e7462be866214da1c3231dd
+  data.tar.gz: 2c29674f75161acb7770a03ac2dc2bfcdda0fa5803cec3a30230717f71518d90
 SHA512:
-  metadata.gz: 281eea8423dc598ea01efd0df9898e7edc43f1417a0b0b4985b01cff827dcca338f77e91953926dc59a198d15993ae5d708087ef62a3c9168c06fdcdaeee5ce0
-  data.tar.gz: 31fbfbcd736c7dafa953fa8fcf36d61d2a705a203bcb9ff9b9fc3aa93ff9c284d02621a04e0c33b952c48d63562165b6de2a5ad23cd415124af63ee0d4f78ccf
+  metadata.gz: d20ca232588c4ae79da0cab06e132a3458fdbdd2c8e772705da120464217af4b42e1419f2c546c6dd2a819fd8082bc7c8a7a9b47aeecc5f66a6dc0d52a8fe980
+  data.tar.gz: 9e074e2fbd029f9e86bff6cd7e0c9916663c8f911914df3222689f79b72a2dde002a7d0b39573c7ef72df3db13a08f240bcb2e0c75cbebbd5258e064b45af94f

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -1,8 +1,4 @@
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has three required props__:
-
-### id
-
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### table_data
 
@@ -17,6 +13,6 @@ Column definitions are the single most important part of building a table as the
 - `accessor`: this is the key from your data for the value you want rendered in that column
 - `label`: this is what will be rendered as the column header label
 
-There is also one optional item that is only required if the table has nested data:
+There is also one optional item that is only required if the table has nested data: 
 
 - `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx

@@ -49,7 +49,6 @@ const AdvancedTableColumnVisibilityWithState = (props) => {
   const columnVisibilityControl = {
     value: columnVisibility,
     onChange: setColumnVisibility,
-    onColumnVisibilityChange: (currentState) => console.log(currentState),
   }
   return (
     <div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md

@@ -1,3 +1 @@
-The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
-
-The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed. 
+The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -3,7 +3,7 @@
 <br />
 <br />
 
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### tableData
 

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

@@ -15,8 +15,6 @@ examples:
   - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
-  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
 
   react:
   - advanced_table_default: Default (Required Props)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) %>

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

@@ -6,7 +6,6 @@ import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
 import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
-import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -51,20 +50,10 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
-          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
-            <Body 
-                marginX="xs"
-                text={selectedOption.label} 
-            />
-            <Badge 
-                text={selectedOption.status} 
-                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
-            />
-          </Flex>
         )
       }
     </>

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

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -38,11 +38,7 @@
 
 <%
   custom_display = capture do
-    pb_rails("flex", props: { align: "center" }) do
-      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
-      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
-      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
-    end
+    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
   end
 %>
 
@@ -66,31 +62,4 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
-
-
-<script>
-  document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
-    if (!display) return;
-
-    const nameEl = display.querySelector("#dropdown-avatar-name");
-    if (nameEl) nameEl.textContent = option.label;
-
-    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
-    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
-    if (avatarEl) {
-      avatarEl.dataset.name = option.label;
-      avatarEl.setAttribute("data-initials", initials);
-    }
-    const badgeEl   = display.querySelector("#dropdown-avatar-status");
-    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
-    if (badgeEl) {
-      badgeEl.querySelector("span").textContent = option.status;
-      badgeEl.className = 'pb_badge_kit_' + variant;
-    }
-  });
-</script>
+<% end %>

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

@@ -1,6 +1,4 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
-
-Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
 

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

@@ -1,45 +1,35 @@
 examples:
   rails:
-  - dropdown_default_rails: Default
+  - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
-  - dropdown_multi_select_rails: Multi Select
-  - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
-  - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
-  - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
-  - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
-  - dropdown_multi_select: Multi Select
-  - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
-  - dropdown_multi_select_display: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
-  - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
-  - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden

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

@@ -15,8 +15,3 @@ export { default as DropdownClearSelection } from './_dropdown_clear_selection.j
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
 export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'
-export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
-export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
-export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
-export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -99,7 +99,6 @@
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
-  <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -98,7 +98,6 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>

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

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],

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

@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],

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

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "business Affairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],

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

@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],

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

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],