playbook_ui_docs 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730 → 15.3.0.pre.alpha.PLAY2596datestackedcurrentyear12147

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

@@ -0,0 +1,38 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DropdownQuickpickWithDatePickers = (props) => {
+  return (
+    <>
+      <Dropdown
+          controlsEndId="end-date-picker"
+          controlsStartId="start-date-picker"
+          id="dropdown-quickpick"
+          label="Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+          {...props}
+      /> 
+
+      <DatePicker
+          label="Start Date"
+          pickerId="start-date-picker"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          label="End Date"
+          pickerId="end-date-picker"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-quickpick"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DropdownQuickpickWithDatePickers;

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

@@ -0,0 +1,14 @@
+You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
+
+**For the Dropdown**:
+`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_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +1,4 @@
 The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
 
 `backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white

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

@@ -49,4 +49,9 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_quickpick: Quick Pick Variant
+  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+
 

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

@@ -22,4 +22,8 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
 export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
+export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
+export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

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

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,13 +22,27 @@
 }) %>
 
 <script>
+// Hide toasts immediately
+const hideAutoToasts = () => {
+  const toastAuto = document.getElementById('toast-auto-close');
+  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
+  if (toastAuto) toastAuto.style.display = 'none';
+  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
+}
+hideAutoToasts();
+
+// Handle various page load/restore events
+window.addEventListener('pageshow', hideAutoToasts)
+document.addEventListener('turbolinks:load', hideAutoToasts)
+document.addEventListener('turbo:load', hideAutoToasts)
+
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-  
+
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,7 +24,6 @@
   horizontal: "center"
 }) %>
 
-
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -35,6 +34,15 @@
     })
   }
 
+  // Hide toasts immediately
+  hideMultiToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hideMultiToasts)
+  document.addEventListener('DOMContentLoaded', hideMultiToasts)
+  document.addEventListener('turbolinks:load', hideMultiToasts)
+  document.addEventListener('turbo:load', hideMultiToasts)
+
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -46,10 +54,3 @@
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-long, #toast-short {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,27 +69,28 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hideToasts = () => {
+  const hidePositionToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
+  // Hide toasts immediately
+  hidePositionToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hidePositionToasts)
+  document.addEventListener('DOMContentLoaded', hidePositionToasts)
+  document.addEventListener('turbolinks:load', hidePositionToasts)
+  document.addEventListener('turbo:load', hidePositionToasts)
+
   buttons.forEach((button) => {
     button.onclick = () => {
-      hideToasts()
+      hidePositionToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
-
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
-    display: none;
-  }
-</style>

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

@@ -1,3 +1,3 @@
-For Form 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.
+For Form 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/global_props/truncate) for more information on the truncate global prop.
 
 __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

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

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -1 +1 @@
-Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -1 +1 @@
-Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -3,48 +3,41 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"blue"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"royal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"purple"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"teal"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupitar",
+                                          text: "Jupiter",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"red"
+                                          variant:"yellow"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                           text: "Saturn",
                                           unit: "AU",
                                           value: 9.539,
-                                          variant:"yellow"
- }) %>
- <br>
- <%= pb_rails("icon_stat_value", props: { icon: "globe",
-                                          text: "Uranus",
-                                          unit: "AU",
-                                          value: 19.18,
                                           variant:"green"
  }) %>
  <br>
@@ -53,4 +46,4 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"orange"
- }) %>
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -9,7 +9,7 @@ const IconStatValueColor = (props) => {
           text="Mercury"
           unit="AU"
           value={0.39}
-          variant="blue"
+          variant="royal"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="royal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="purple"
+          variant="teal"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="teal"
+          variant="red"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupitar"
+          text="Jupiter"
           unit="AU"
           value={5.203}
-          variant="red"
+          variant="yellow"
           {...props}
       />
       <br />
@@ -54,15 +54,6 @@ const IconStatValueColor = (props) => {
           text="Saturn"
           unit="AU"
           value={9.539}
-          variant="yellow"
-          {...props}
-      />
-      <br />
-      <IconStatValue
-          icon="globe"
-          text="Uranus"
-          unit="AU"
-          value={19.18}
           variant="green"
           {...props}
       />

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -1 +1 @@
-Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/global_props/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md

@@ -1 +1 @@
-NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/visual_guidelines/max_width) to override this default, as necessary.
+NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/global_props/max_width) to override this default, as necessary.

data/app/pb_kits/playbook/pb_section_separator/docs/_description.md

@@ -1,3 +1,3 @@
 Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
 
-To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.
+To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/global_props/width) for more information on the global width prop.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -1 +1 @@
-The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md

@@ -1 +1 @@
-The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
+The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -1,3 +1,3 @@
 Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
 
-`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/global_props/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md

@@ -1,3 +1,3 @@
-Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">token colors</a>.
+Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">token colors</a>.
 
 Note: Only use category colors for categories. Do not mix it with product or status colors.

data/app/pb_kits/playbook/pb_table/docs/_table_sm.md

@@ -1,3 +1,3 @@
 Use table size `"sm"` when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
 
-Table can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Table can leverage the max-width property. Learn more on our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">Max Width Global Props page.</a>

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb

@@ -0,0 +1,63 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
+            <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+            <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>
+
+<script>
+    const downArrow = document.getElementById("chevron-icon-down");
+    const upArrow = document.getElementById("chevron-icon-up");
+
+    upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
+
+    function toggleArrows() {
+        if (downArrow) {
+            downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
+        }
+        if (upArrow) {
+            upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
+        }
+    }
+</script>

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import Table from '../_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
+
+const TableWithDynamicCollapsible = (props) => {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggleArrows = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const Content = () => {
+    return (
+      <Card
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+          <Table.Header>{''}</Table.Header>
+        </Table.Row>
+
+      </Table.Head>
+      <Table.Body>
+
+        <Table.Row collapsible
+            collapsibleContent={<Content />}
+            {...props}
+        >
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
+          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
+          <Table.Cell
+              htmlOptions={{ onClick: handleToggleArrows }}
+              textAlign="right"
+          >
+            {
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon={isOpen ? 'chevron-up' : 'chevron-down'}
+              />}
+          </Table.Cell>
+
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+          <Table.Cell>{''}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithDynamicCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md

@@ -0,0 +1,4 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
+Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
+
+Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md

@@ -0,0 +1,3 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
+
+Follow this example to make the icons dynamic following the state of the collapsible.

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

@@ -31,6 +31,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
@@ -71,6 +72,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows

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

@@ -29,6 +29,7 @@ export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.
 export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
 export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
+export { default as TableWithDynamicCollapsible } from './_table_with_dynamic_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'