playbook_ui_docs 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219 → 14.13.0.pre.alpha.PBNTR5596029

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219
+  version: 14.13.0.pre.alpha.PBNTR5596029
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-20 00:00:00.000000000 Z
+date: 2025-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -46,7 +46,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
@@ -92,9 +91,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
@@ -127,6 +124,17 @@ files:
 - app/pb_kits/playbook/pb_avatar/docs/_footer.md
 - app/pb_kits/playbook/pb_avatar/docs/example.yml
 - app/pb_kits/playbook/pb_avatar/docs/index.js
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx
+- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
+- app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
+- app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
 - app/pb_kits/playbook/pb_background/docs/_background_category.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_category.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_category.md
@@ -189,8 +197,6 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -348,8 +354,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -1030,7 +1034,6 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/example.yml
 - app/pb_kits/playbook/pb_icon/docs/index.js
 - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb
-- app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb
 - app/pb_kits/playbook/pb_icon_button/docs/example.yml
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
@@ -1374,8 +1377,6 @@ files:
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
 - app/pb_kits/playbook/pb_overlay/docs/example.yml
 - app/pb_kits/playbook/pb_overlay/docs/index.js
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
@@ -1487,11 +1488,6 @@ files:
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
-- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md
-- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb
-- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx
-- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md
-- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx
 - app/pb_kits/playbook/pb_progress_pills/docs/example.yml
@@ -1848,17 +1844,12 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -1871,9 +1862,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb

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

@@ -1,75 +0,0 @@
-import React from "react"
-import { AdvancedTable, Pill } from "playbook-ui"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableColumnHeadersCustomCell = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          accessor: "newEnrollments",
-          label: "New Enrollments",
-          customRenderer: (row, value) => (
-            <Pill text={value} 
-                variant="success" 
-            />
-          ),
-        },
-        {
-          accessor: "scheduledMeetings",
-          label: "Scheduled Meetings",
-          customRenderer: (row, value) => (
-            <Pill text={value} 
-                variant="info" 
-            />
-          ),
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          accessor: "attendanceRate",
-          label: "Attendance Rate",
-        },
-        {
-          accessor: "completedClasses",
-          label: "Completed Classes",
-          customRenderer: (row, value) => (
-            <Pill text={value} 
-                variant="error" 
-            />
-          ),
-        },
-        {
-          accessor: "classCompletionRate",
-          label: "Class Completion Rate",
-        },
-        {
-          accessor: "graduatedStudents",
-          label: "Graduated Students",
-        },
-      ],
-    },
-  ];
-  
-
-  return (
-    <>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default AdvancedTableColumnHeadersCustomCell

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

@@ -1,33 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

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

@@ -1,3 +0,0 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
-
-A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table#table-props) doc example above.

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

@@ -1,64 +0,0 @@
-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

@@ -1 +0,0 @@
-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_checkbox/docs/_checkbox_react_hook.jsx

@@ -1,69 +0,0 @@
-import React, { useState } from "react"
-import { useForm } from "react-hook-form"
-import { Button, Checkbox, Flex, Body } from "playbook-ui"
-
-const CheckboxReactHook = () => {
-  const { register, handleSubmit } = useForm({
-    defaultValues: {
-      Small: false,
-      Medium: false,
-      Large: false,
-    },
-  })
-
-  const [submittedData, setSubmittedData] = useState({
-    Small: false,
-    Medium: false,
-    Large: false,
-  })
-
-  const onSubmit = (data) => {
-    setSubmittedData(data)
-  }
-
-  return (
-    <Flex orientation="row">
-      <Flex align="start"
-          orientation="column"
-          paddingRight="lg"
-      >
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Checkbox padding="xs"
-              text="Small"
-              {...register("Small")}
-          />
-          <br />
-          <Checkbox padding="xs"
-              text="Medium"
-              {...register("Medium")}
-          />
-          <br />
-          <Checkbox padding="xs"
-              text="Large"
-              {...register("Large")}
-          />
-          <br />
-          <Button htmlType="submit"
-              marginTop="sm"
-              text="submit"
-          />
-        </form>
-      </Flex>
-      <Flex align="start"
-          orientation="column"
-      >
-        <Body padding="xs"
-            text={`Small: ${submittedData.Small ? "true" : "false"}`}
-        />
-        <Body padding="xs"
-            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
-        />
-        <Body padding="xs"
-            text={`Large: ${submittedData.Large ? "true" : "false"}`}
-        />
-      </Flex>
-    </Flex>
-  )
-}
-
-export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md

@@ -1 +0,0 @@
-You can pass react hook props to the checkbox kit.

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

@@ -1,27 +0,0 @@
-<%= 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_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -1,37 +0,0 @@
-import React, { forwardRef } from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
-
-const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
-    return (
-        <Flex
-            columnGap="lg"
-            orientation="row"
-            ref={ref} 
-        >
-            {Array.from({ length: 15 }, (_, index) => (
-                <FlexItem key={index}>
-                    <Card>{"Card Content"}</Card>
-                </FlexItem>
-            ))}
-        </Flex>
-    )
-})
-
-const OverlayVerticalDynamicMultiDirectional = () => (
-    <>
-        <Overlay
-            color="card_light"
-            dynamic
-            layout={{"x": "xl"}}
-        >
-            <InlineCardsExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayVerticalDynamicMultiDirectional

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

@@ -1 +0,0 @@
-Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.

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

@@ -1 +0,0 @@
-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_progress_pills/docs/_progress_pills_full_width.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

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

@@ -1,18 +0,0 @@
-import React from 'react'
-import ProgressPills from '../_progress_pills'
-
-const ProgressPillsFullWidth = (props) => {
-    return (
-        <>
-            <ProgressPills
-                active={2}
-                aria={{ label: '2 out of 5 steps complete' }}
-                fullWidthPill
-                steps={5}
-                {...props}
-            />
-        </>
-    )
-}
-
-export default ProgressPillsFullWidth

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

@@ -1 +0,0 @@
-Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -1 +0,0 @@
-Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -1,47 +0,0 @@
-<%= 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

@@ -1,88 +0,0 @@
-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

@@ -1 +0,0 @@
-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.