playbook_ui_docs 14.18.0.pre.alpha.play2034zonesandcolors7407 → 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '079828368ddeaf360fde9d539c1ec196279af6fe4c9087032bb386d6155bbcac'
-  data.tar.gz: 8573cdff051f7161b2f88a13e14def0cfe98e8465a0bf16107c03bee62e0081c
+  metadata.gz: ede7649015235add773e0fd6eb4d65255bcc35eb45cc92326f593f4cae3015ce
+  data.tar.gz: ceb3532080cc835ca7b5a199bbb8b812e0cab9a15dfac06fd698db01b0713d2e
 SHA512:
-  metadata.gz: 1fc23270977a2c886999c6ade1339f41bb900eef36480e5b6ae6ddc1f6ebcfaca6b38632fa5764eb5c2c05dec593d5d704dd6b843ae63aedc2c16b89d0bfbeaf
-  data.tar.gz: 81627b52875b9d50e6cc86628abfda7e6b3a09af43196ead289619706fa1481f4426e494b5f0dd80a1bc34501e7f52bd9efdee79b7328f5e77364b618e323a85
+  metadata.gz: 18570c170d79ae504ff4bd34a4164dc1fabea2feff5595adba0576d08c2374519148c46e3765c514f0aa056480c5032784109fb9dcd39544c5cc8b2844e93031
+  data.tar.gz: 030a0685c6e867c54a949a3a48012129b58e86d35cc6bb431d0f6920dc8776e2f164a5b65a25a92c3c82ef80171fdba32d8f2de7308e5fed219e864c0e17b0b4

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

@@ -1,9 +1,3 @@
-**BETA VERSION**
-This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
-<br />
-<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__: 
 
 ### table_data

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

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnBorderColors = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnGroupBorderColor="text_lt_default"
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnBorderColors

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

@@ -0,0 +1,3 @@
+The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
+
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb

@@ -0,0 +1,58 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

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

@@ -0,0 +1,3 @@
+The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
+
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

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

@@ -1 +1,5 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
+
+The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
+
+__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx}

@@ -2,7 +2,7 @@ import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
-const AdvancedTableSelectableRowsNoSubrows = (props) => {
+const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrows = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrows
+export default AdvancedTableSelectableRowsNoSubrowsReact

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

@@ -2,5 +2,6 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
-The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 
+The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
+
+__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -12,9 +12,9 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  # - advanced_table_selectable_rows: Selectable Rows
-  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
-
+  - 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)
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -39,10 +39,11 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_border_color: Column Group Border Color
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_fullscreen: Fullscreen

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

@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
@@ -26,4 +26,5 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
-export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("date_picker", props: { 
-  error: "Invalid date. Please pick a valid date.",
+<%= pb_rails("date_picker", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
   picker_id: "date-picker-error"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md

@@ -1,3 +1,7 @@
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selection_type` must be set to `quickpick`
+
 This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
 
 Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
+Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md

@@ -1 +1,5 @@
-Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selectionType` must be set to `quickpick`
+
+Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import DatePicker from "../_date_picker";
+
+const DatePickerRangePattern = (props) => {
+  return (
+    <>
+      <DatePicker
+          controlsEndId="end-date-picker"
+          controlsStartId="start-date-picker"
+          mode="range"
+          pickerId="quickpick-for-range"
+          placeholder="Select a Range"
+          selectionType="quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          pickerId="start-date-picker"
+          placeholder="Select a Start Date"
+          syncStartWith="quickpick-for-range"
+          {...props}
+      />
+
+      <DatePicker
+          pickerId="end-date-picker"
+          placeholder="Select a End Date"
+          syncEndWith="quickpick-for-range"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DatePickerRangePattern;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+
+**For the Quickpick DatePicker**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "quick-pick-date-range",
+  placeholder: "Select a Date Range",
+  selection_type: "quickpick",
+  controls_end_id: "quick-pick-date-range-end",
+  controls_start_id: "quick-pick-date-range-start",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+
+**For the Quickpick DatePicker**:
+`controls_start_id`: ID of the DatePicker that should receive the start date.
+
+`controls_end_id`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`sync_start_with`: ID of the quickpick this start date is synced to.
+`sync_end_with`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

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

@@ -15,6 +15,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -47,6 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

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

@@ -1,4 +1,4 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,4 +6,7 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
+<%= pb_rails("dropdown", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    alignment: "left",
+  }) %>
+
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+  }) %>
+
+    <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    alignment: "right",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    orientation:"horizontal",
+    alignment: "left",
+    size: "lg",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    link_button: "Alt Action",
+    size: "sm",
+  }) %>
+
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    link_button: "Alt Action",
+    size: "lg",
+  }) %>
+<% end %>

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

@@ -1,5 +1,9 @@
 examples:
-
+  rails:
+  - empty_state_default: Default
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment
 
   react:
   - empty_state_default: Default

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

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_within_trubo_frames",
+    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: { append_to: "parent"  },
+  }) 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_within_turbo_frames.md

@@ -0,0 +1 @@
+By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const baseOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+
+const LineGraphPbStyles = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default LineGraphPbStyles

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

@@ -0,0 +1 @@
+You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

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

@@ -11,6 +11,7 @@ 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,3 +4,4 @@ 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_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    country_search: true, 
+    id: "country-search",
+}) %>
+
+<%= pb_rails("phone_number_input", props: {
+    country_search: true, 
+    id: "country-search-limited",
+    only_countries: ["br", "us", "ph", "gb"],
+}) %>