playbook_ui_docs 16.8.0.pre.alpha.play301316889 → 16.8.0.pre.alpha.tablewidths16466

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: beb8948f3d8d3bcdf6401316ed5299f8da54ffce4def9bb38029fcbc4e545915
-  data.tar.gz: f52e018a5ba4d8487eaa1c3745053ee53728c62fc11455ba7cbf596f9315cfd1
+  metadata.gz: a4a5e81cd31c0d38280588522f04530ebed412ae7dd97e3f133f33a711f18f22
+  data.tar.gz: 31ec29d1d89ae6eeb9727f19f901dac411a54286849e3368e7bfce86b8d45da7
 SHA512:
-  metadata.gz: 336e7d606122defc67be24600e12099f9e94a843c6a2039298a79799ba59fbc936213d567ebc5592590b0cf504ec0a796b6c4baf95cc7bd4048b075ffa759671
-  data.tar.gz: 74cf8b00d9432dc5b77dc514d71ece881dd123ddb0e2ca14ee6010aa690465788aee4562b306cec4171237be831cdd08f3f53c93420e973d6674748979a6dfd9
+  metadata.gz: e67d827e70c76cf3bd597542561c57766ec95035b996538ad5a255b41923439b7efe6f9cec3544f08996680bbc958164a3d7d0b21ae12ea1fb8fd88813cb4cb1
+  data.tar.gz: 1080f84fb743aae5f061243fc9dd3f0e0534d9aae408b6cade6a0ca045ffecca5446eaf8aa50793cdc31b2365c028da41088b2e376c78658868986894995bc65

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

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -48,11 +40,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={tableData}
+          tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />

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

@@ -1,7 +1,3 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
-This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -2,6 +2,7 @@
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -29,19 +30,4 @@
     }
 ] %>
 
-<% table_data = 15.times.map do |index|
-  {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
-
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,7 +1,3 @@
 The `table_props` prop can also be used to render a sticky header for the Advanced Table.
 
-This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

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

@@ -2,6 +2,7 @@
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -29,19 +30,4 @@
     }
 ] %>
 
-<% table_data = 15.times.map do |index|
-  {
-    year: (2020 + index).to_s,
-    id: (2020 + index).to_s,
-    newEnrollments: (20 + index).to_s,
-    scheduledMeetings: (10 + index).to_s,
-    attendanceRate: "#{50 + index}%",
-    completedClasses: (3 + index).to_s,
-    classCompletionRate: "#{30 + index}%",
-    graduatedStudents: (19 + index).to_s,
-  }
-end %>
-
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
-</div>
+<%= pb_rails("advanced_table", props: { id: "table_props_sticky_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.jsx

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -48,10 +40,11 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={tableData}
+          maxHeight="xs"
+          tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />

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

@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: 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.
 
-Scroll inside the table preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,9 +1,7 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
-**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
+**NOTE**: This behavior requires a `maxHeight` 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.
 
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
-Expand the table above to see responsive behavior in action.
+Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
-  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -53,7 +52,6 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
-  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell

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

@@ -27,7 +27,6 @@ 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 AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'

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

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={"fixed-" + pickerInstance}
+                        key={`fixed-${pickerInstance}`}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={"datePickerFixed-" + pickerInstance}
+                        pickerId={`datePickerFixed-${pickerInstance}`}
                         staticPosition={false}
                     />
                 </Dialog.Body>

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

@@ -5,5 +5,3 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -6,5 +6,4 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

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

@@ -3,5 +3,3 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 
 Use `DraggableProvider` and manage state as shown.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.

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

@@ -1,5 +1,3 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -28,11 +28,7 @@
   <%= 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: { label: true } %>
-    <%= pb_rails("date_picker", props: {
-      label: "Start date",
-      name: "start_date",
-      picker_id: "filter-default",
-    }) %>
+
     <%= form.actions do |action| %>
       <%= action.submit props: {
         text: "Apply",

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

@@ -32,7 +32,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { 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.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
+
+const IconFaKit = (props) => {
+  return (
+    <div>
+      <Icon
+          {...props}
+          fixedWidth
+          fontStyle="fak"
+          icon="powergon"
+          size="5x"
+      />
+    </div>
+  )
+}
+
+export default IconFaKit

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

@@ -0,0 +1,7 @@
+Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box. 
+
+All you need to do is 3 things:
+1) Import your custom-icon.js file as outlined in the FontAwesome docs.
+2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon. 
+3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
+

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

@@ -8,6 +8,7 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   react:
@@ -19,6 +20,7 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   swift:

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

@@ -6,4 +6,5 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
+export { default as IconFaKit} from './_icon_fa_kit.jsx'
 export { default as IconColor } from './_icon_color.jsx'

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx

@@ -30,4 +30,4 @@ const PbCircleChartDefault = (props) => (
   </div>
 );
 
-export default PbCircleChartDefault;
+export default PbCircleChartDefault;

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

@@ -11,7 +11,6 @@ examples:
   - pb_circle_chart_with_title: With Title
   - pb_circle_chart_inner_sizes: Inner Circle Size Options
   - pb_circle_chart_custom_tooltip: Tooltip Customization
-  - pb_circle_chart_centered_data: Centered Data
 
   
   react:
@@ -26,6 +25,5 @@ examples:
   - pb_circle_chart_with_title: With Title
   - pb_circle_chart_inner_sizes: Inner Circle Size Options
   - pb_circle_chart_custom_tooltip: Tooltip Customization
-  - pb_circle_chart_centered_data: Centered Data
   
   

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

@@ -8,5 +8,4 @@ export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_
 export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
 export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
 export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
-export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
-export { default as PbCircleChartCenteredData } from './_pb_circle_chart_centered_data.jsx'
+export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -19,16 +19,18 @@ const PopoverWithButton = (props) => {
         onClick={handleTogglePopover}
         variant="secondary"
     >
-      <Flex 
-          align="center"
-          gap="xxs" 
-      >
+      <Flex align="center">
         {"Filter By"}
-        <Icon
-            fixedWidth
-            flip={showPopover ? "vertical" : "none"}
-            icon="angle-down"
-        />
+        <Flex
+            className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon
+              fixedWidth
+              icon="angle-down"
+              margin-left="xxs"
+          />
+        </Flex>
       </Flex>
     </Button>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.json

@@ -1,10 +1,7 @@
 {
   "template": "<RichTextEditor{{props}} />",
   "propTargets": {},
-  "defaults": {
-    "requiredIndicator": false,
-    "simple": false
-  },
+  "defaults": {},
   "groups": [
     {
       "name": "Props",

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

@@ -1,85 +1,83 @@
-<div style="max-height: 320px; overflow-y: auto;">
-  <%= pb_rails("table", props: { sticky: true }) do %>
-    <thead>
-      <tr>
-        <th>Column 1</th>
-        <th>Column 2</th>
-        <th>Column 3</th>
-        <th>Column 4</th>
-        <th>Column 5</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-      <tr>
-        <td>Value 1</td>
-        <td>Value 2</td>
-        <td>Value 3</td>
-        <td>Value 4</td>
-        <td>Value 5</td>
-      </tr>
-    </tbody>
-  <% end %>
-</div>
+<%= pb_rails("table", props: { sticky: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>