playbook_ui_docs 14.6.0.pre.alpha.play1586datearea4218 → 14.6.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.6.0.pre.alpha.play1586datearea4218
+  version: 14.6.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-23 00:00:00.000000000 Z
+date: 2024-10-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -41,8 +41,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
@@ -665,8 +663,6 @@ files:
 - app/pb_kits/playbook/pb_drawer/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -674,15 +670,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
@@ -742,10 +733,6 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_placement.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
-- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
-- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
 - app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
@@ -815,8 +802,6 @@ files:
 - app/pb_kits/playbook/pb_form/docs/_description.md
 - app/pb_kits/playbook/pb_form/docs/_footer.md
 - app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
-- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb
-- app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md
 - app/pb_kits/playbook/pb_form/docs/example.yml
@@ -851,9 +836,6 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -1154,8 +1136,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
@@ -1169,10 +1149,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
@@ -1197,8 +1173,6 @@ files:
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
-- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
-- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
@@ -1798,9 +1772,6 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

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

@@ -1,72 +0,0 @@
-import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableCustomCell = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      customRenderer: (row, value) => (
-        <Pill text={value} 
-            variant="success"    
-        />
-      ), 
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>, 
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      customRenderer: (row, value) => (
-        <Flex alignItems="end" 
-            orientation="column"
-        >
-          <Detail bold 
-              color="default" 
-              text={value} 
-          />
-          <Caption size="xs">{row.original.graduatedStudents}</Caption>
-        </Flex>
-      ),
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
-          responsive="none"
-          tableData={MOCK_DATA}
-          {...props}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableCustomCell

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

@@ -1,5 +0,0 @@
-The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived. 
-
-See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
-
-See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.

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

@@ -1,45 +0,0 @@
-import React, { useRef } from 'react'
-import { Button, Dropdown } from 'playbook-ui'
-
-const options = [
-    {
-        label: "United States",
-        value: "United States",
-    },
-    {
-        label: "Canada",
-        value: "Canada",
-    },
-    {
-        label: "Pakistan",
-        value: "Pakistan",
-    }
-]
-
-const DropdownClearSelection = (props) => {
-    const dropdownRef = useRef(null)
-
-    const handleReset = () => {
-        if (dropdownRef.current) {
-            dropdownRef.current.clearSelected()
-        }
-    }
-
-    return (
-        <>
-            <Dropdown
-                defaultValue={options[2]}
-                options={options}
-                ref={dropdownRef}
-                {...props}
-            />
-            <Button
-                marginTop="md"
-                onClick={handleReset}
-                text="Reset"
-            />
-        </>
-    )
-}
-
-export default DropdownClearSelection

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

@@ -1 +0,0 @@
-To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

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

@@ -1,9 +0,0 @@
-<% 
-  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, separators: false}) %>

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

@@ -1,33 +0,0 @@
-import React from 'react'
-import { Dropdown } from 'playbook-ui'
-
-const DropdownSeparatorsHidden = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        options={options}
-        separators={false}
-        {...props}
-    />
-  </div>
-  )
-}
-
-export default DropdownSeparatorsHidden

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

@@ -1,10 +0,0 @@
-<% 
-  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, variant: "subtle", separators: false }) %>

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

@@ -1,34 +0,0 @@
-import React from 'react'
-import { Dropdown } from 'playbook-ui'
-
-const DropdownSubtleVariant = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];  
-
-
-  return (
-  <>
-     <Dropdown
-         options={options}
-         separators={false}
-         variant="subtle"
-         {...props}
-    />
-  </>
-  )
-}
-
-export default DropdownSubtleVariant

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

@@ -1 +0,0 @@
-For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb

@@ -1,41 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    id: "filter_popover_props",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-    popover_props: { width: "250px" },
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
-
-const FilterPopoverProps = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
-  ]
-
-  const popoverProps = {
-    width: "250px"
-  }
-
-  return (
-    <Filter
-        {...props}
-        double
-        filters={{
-          'Full Name': 'John Wick',
-          'City': 'San Francisco',
-        }}
-        popoverProps={popoverProps}
-        results={1}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-    >
-      {({ closePopover }) => (
-        <form>
-          <TextInput
-              label="Example Text Field"
-              placeholder="Enter Text"
-              {...props}
-          />
-          <Select
-              blankSelection="Select One..."
-              label="Example Collection Select"
-              name="Collection Select"
-              options={options}
-              {...props}
-          />
-          <Flex
-              spacing="between"
-              {...props}
-          >
-            <Button
-                onClick={closePopover}
-                text="Apply"
-                {...props}
-            />
-            <Button
-                text="Clear"
-                variant="secondary"
-                {...props}
-            />
-          </Flex>
-        </form>
-      )}
-    </Filter>
-  )
-}
-
-export default FilterPopoverProps

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md

@@ -1 +0,0 @@
-This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md

@@ -1 +0,0 @@
-This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).

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

@@ -1,39 +0,0 @@
-<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-
-  <%= form.actions do |action| %>
-    <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
-  <% end %>
-<% end %>
-
-<script>
-    const loadingForm = document.querySelector(".pb_form_loading")
-    if (loadingForm) {
-        loadingForm.addEventListener("submit", function(event) {
-            event.preventDefault();
-
-            const submitButton = event['submitter'];
-            const cancelButton = event['target'].querySelector('button[type="reset"]');
-
-            if (submitButton) {
-                let currentClass = submitButton.className;
-                let newClass = currentClass.replace("_disabled_loading", "_enabled");
-
-                let cancelClass = cancelButton ? cancelButton.className : "";
-                let newCancelClass = cancelClass.replace("_disabled", "_enabled");
-
-                setTimeout(function() {
-                    submitButton.disabled = false;
-                    submitButton.className = currentClass;
-
-                    if (cancelButton) {
-                        cancelButton.disabled = false;
-                        cancelButton.className = cancelClass;
-                    }
-                }, 5000);
-            }
-        });
-    }
-</script>
-

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md

@@ -1 +0,0 @@
-Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -1,19 +0,0 @@
-<%
-  names = [
-    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    html_options: { style: { maxWidth: "240px" }},
-    id: "typeahead-form-pill",
-    is_multi: true,
-    options: names,
-    label: "Names",
-    pills: true,
-    truncate: 1,
-}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
-
-const names = [
-  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-]
-
-const FormPillTruncatedText = (props) => {
-  return (
-    <>
-      <Typeahead
-          htmlOptions={{ style: { maxWidth: "240px" }}}
-          isMulti
-          label="Names"
-          options={names}
-          truncate={1}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default FormPillTruncatedText

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md

@@ -1 +0,0 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -1,93 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-reset-example",
-    name: "my_array",
-    tree_data: treeData,
-    return_all_selected: true
-}) %>
-
-<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
-
-
-<script>
-  window.addEventListener('DOMContentLoaded', () => {
-    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
-
-    exampleResetButton.addEventListener("click", () => {
-        clearMultiLevelSelectById('multi-level-select-reset-example');
-      });
-    function clearMultiLevelSelectById(id) {
-      const clearFunction = window[`clearMultiLevelSelect_${id}`];
-      if (clearFunction) {
-        clearFunction();
-      } else {
-        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
-      }
-    }
-  })
-</script>

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

@@ -1 +0,0 @@
-In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work.