playbook_ui_docs 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.PLAY1856doc6166

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef838258f5fe69164855ae31d9ab5390d6dc72272d8cb4ccda371e2336aad5eb
-  data.tar.gz: e4f140b71b0d066caf6b53ed8321234cd641bace6e45ed2196a8a064ccf74773
+  metadata.gz: f7361c9ea673698c2ce31a4e464535c33e58a8dfe31c7a15bdd221d3d38f4cc0
+  data.tar.gz: bc62469fd1379805278add44d8230f57d7eceed8c495b66f3db59b9991a6884c
 SHA512:
-  metadata.gz: df834a5042aa5d1d36b16c6601a44d45d81aa874270dd4d2020a31ed716716aad4674e0eff511a4eb5e8e888bcbbe2d4aac88a1a46b5fe852279ace0ac283e6b
-  data.tar.gz: fcb87173fac7628e39828e5413290a11bccaab881241eaee95904f6fc0f5f64f3d20c308d8c8fe015bb8165e4da44d1af306484ae1002b491d8f66f7bb65ca66
+  metadata.gz: bd7b9818d269ca2f9b1fce78aa06b981243f697e995f76d94df32b454ae715fc037a66261c67e5d647f44606c1a36a07b82fe2a4448eab3279d9f560f94344aa
+  data.tar.gz: 6c15fbefb75f885f6de3ae5d4010348154a06ff6d0076e48f2228436c372ddc6bf4681d3f6615b61b19d10e663e95bb0fc6bb89ebbf30d5e43e7dfbaf687eefd

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
+import "../BarGraphStyles.scss";
+// Your path might look more like this
+//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
+
+const columnChartData = [
+  {
+    name: "Installation",
+    data: [1475, 200, 3000, 654, 656],
+  },
+  {
+    name: "Manufacturing",
+    data: [4434, 524, 2320, 440, 500],
+  },
+  {
+    name: "Sales & Distribution",
+    data: [3387, 743, 1344, 434, 440],
+  },
+  {
+    name: "Project Development",
+    data: [3227, 878, 999, 780, 1000],
+  },
+  {
+    name: "Other",
+    data: [1111, 677, 3245, 500, 200],
+  },
+];
+
+const columnOptions = {
+  chart: {
+    type: "column",
+  },
+  series: columnChartData,
+  title: {
+    text: "Solar Employment Growth by Sector, 2010-2016",
+  },
+  subtitle: {
+    text: "Source: thesolarfoundation.com",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: false },
+  credits: { enabled: false },
+};
+
+const BarGraphPbStyles = () => (
+  <div>
+    <HighchartsReact highcharts={Highcharts}
+        options={columnOptions}
+    />
+  </div>
+)
+
+export default BarGraphPbStyles

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.  

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

@@ -17,6 +17,7 @@ examples:
 
   react:
   - bar_graph_default: Default
+  - bar_graph_pb_styles: Playbook Styles
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable

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

@@ -10,3 +10,4 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
 export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
+export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -43,9 +43,9 @@
       <% end %>
     <% end %>
 
-    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
+    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
       <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
+        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
           <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
           <%= pb_rails("table/table_cell") do %>
             <%= pb_rails("flex", props:{align:"center"}) do %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -1 +1,4 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+
+- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
+- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here. 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx

@@ -72,6 +72,7 @@ const DraggableWithTableReact = (props) => {
                     <Body 
                         paddingLeft="xxs" 
                         text={assignee_name} 
+                        {...props}
                     />
                   </Flex>
                 </Table.Cell>

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

@@ -4,8 +4,8 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_with_table_react: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
 
   rails:
   - draggable_default_rails: Default

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,42 +1,77 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
+const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+  const navItems = ["Overview", "Albums", "Similar Artists"]
 
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 992px)")
+    const updateScreen = (e) => setIsSmallScreen(e.matches)
+    updateScreen(mediaQuery)
+    mediaQuery.addEventListener('change', updateScreen)
+    return () => mediaQuery.removeEventListener('change', updateScreen)
+  }, [])
 
   return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
+    <div>
+      <Button id='sidebar'
+          padding='xs'
+      >
+        <Icon icon='bars'
+            size='2x'
+        />
+      </Button>
+      <Drawer
+          behavior={"push"}
+          breakpoint='md'
+          overlay={isSmallScreen ? true : false}
+          placement='left'
+          size='md'
+          triggerId='sidebar'
+      >
+        <Nav
+            link='#'
+            orientation='vertical'
+            padding={isSmallScreen ? "none" : "sm"}
+            variant='bold'
         >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
+          {navItems.map((text, index) => {
+            return (
+              <NavItem
+                  collapsible
+                  collapsibleTrail
+                  fontWeight='bolder'
+                  iconLeft='city'
+                  iconRight={["plus", "minus"]}
+                  key={index}
+                  link='#'
+                  text={text}
+              >
+                <NavItem fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='City'
+                />
+                <NavItem
+                    fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='People'
+                />
+                <NavItem
+                    fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='Business'
+                />
+              </NavItem>
+            )
+          })}
+        </Nav>
+      </Drawer>
+    </div>
+  )
+}
 
-export default DrawerBreakpoints;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav 
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

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

@@ -10,4 +10,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -1,3 +1,2 @@
 <%= pb_rails("icon_button") %>
-</br>
-<%= pb_rails("icon_button", props: {variant: "link"}) %>
+<%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: { align: "center"}) do %>
+  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
+  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
+<% end %>

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

@@ -2,6 +2,4 @@ examples:
   
   rails:
   - icon_button_default: Default
-  
-  
-  
+  - icon_button_sizes: Sizes

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
+            <ProgressPills
+                active={9}
+                aria={{ label: '9 out of 18 steps complete' }}
+                marginTop="md"
+                steps={18}
+                {...props}
+            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md

@@ -0,0 +1 @@
+Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

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

@@ -0,0 +1,47 @@
+<%= 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: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) 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_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+  
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) 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_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+  
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) 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_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Table, Icon } from 'playbook-ui'
+
+const TableWithClickableRows = (props) => {
+
+
+  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
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
+                  {...props}
+              >
+                <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 textAlign="right">
+                    <Icon 
+                        color="primary_action"
+                        fixedWidth
+                        icon="chevron-right" 
+                        size="xs"
+                        {...props}
+                    />
+                </Table.Cell>
+              </Table.Row>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
+                  {...props}
+              >
+                  <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 textAlign="right">
+                      <Icon 
+                          color="primary_action"
+                          fixedWidth
+                          icon="chevron-right" 
+                          size="xs"
+                          {...props}
+                      />                
+                  </Table.Cell>
+              </Table.Row>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
+                  {...props}
+              >
+                  <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 textAlign="right">
+                      <Icon 
+                          color="primary_action"
+                          fixedWidth
+                          icon="chevron-right" 
+                          size="xs"
+                          {...props}
+                      />
+                  </Table.Cell>
+              </Table.Row>
+          </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithClickableRows

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

@@ -0,0 +1 @@
+Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

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

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-return (
+  return (
       <Table
           size="sm"
           {...props}

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

@@ -0,0 +1,51 @@
+<% 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, toggle_cell_id: "cell-1", id: "5" }) 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_align: "right", id: "cell-1", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) 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_align: "right", id: "cell-2", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) 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_align: "right", id: "cell-3", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+  <% end %>
+<% end %>
+  

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

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also 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.