playbook_ui_docs 14.17.0.pre.alpha.playcdntest7233 → 14.17.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.playcdntest7233
+  version: 14.17.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-16 00:00:00.000000000 Z
+date: 2025-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -58,8 +58,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
@@ -147,8 +145,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -708,35 +704,33 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
@@ -1153,8 +1147,6 @@ files:
 - app/pb_kits/playbook/pb_label_value/docs/example.yml
 - app/pb_kits/playbook/pb_label_value/docs/index.js
 - app/pb_kits/playbook/pb_layout/docs/_description.md
-- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx
-- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
@@ -1684,7 +1676,6 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx
-- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md
 - app/pb_kits/playbook/pb_section_separator/docs/example.yml
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
@@ -1952,13 +1943,9 @@ 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_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.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

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

@@ -1,90 +0,0 @@
-import React, { useState } from "react"
-import { AdvancedTable, Button, Flex } from "playbook-ui"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
-
-const AdvancedTableFullscreen = (props) => {
-  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
-  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
-
-  const columnDefinitions = [
-    {
-      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",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <Flex justify="end">
-          <Button
-              marginBottom="sm"
-              onClick={() => fullscreenToggleSmall?.()}
-              text="Fullscreen Small Table"
-              variant="secondary"
-          />
-      </Flex>
-      <AdvancedTable
-          allowFullScreen
-          columnDefinitions={columnDefinitions}
-          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
-          tableData={MOCK_DATA}
-          {...props}
-      >
-          <AdvancedTable.Header enableSorting />
-          <AdvancedTable.Body />
-      </AdvancedTable>
-      <Flex justify="end">
-          <Button
-              marginY="sm"
-              onClick={() => fullscreenToggleLarge?.()}
-              text="Fullscreen Large Table"
-              variant="secondary"
-          />
-      </Flex>
-      <AdvancedTable
-          allowFullScreen
-          columnDefinitions={columnDefinitions}
-          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
-          responsive="none"
-          tableData={PAGINATION_MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      >
-          <AdvancedTable.Header enableSorting />
-          <AdvancedTable.Body />
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableFullscreen

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

@@ -1,3 +0,0 @@
-Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
-
-Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import Background from "../../pb_background/_background"
-import Flex from "../../pb_flex/_flex"
-import FlexItem from "../../pb_flex/_flex_item"
-import Title from "../../pb_title/_title"
-
-const BackgroundOverlay = (props) => {
-  return (
-    <Background
-        alt="colorful background"
-        backgroundColor="category_21"
-        className="background lazyload"
-        imageOverlay="opacity_2"
-        imageUrl="https://unsplash.it/500/400/?image=633"
-        {...props}
-      >
-        <Flex
-            orientation="column"
-            vertical="center"
-            {...props}
-        >
-          <FlexItem>
-            <Title
-                dark
-                padding="lg"
-                size={1}
-                text="Background Kit Image"
-            />
-          </FlexItem>
-        </Flex>
-      </Background>
-  )
-}
-
-export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -1 +0,0 @@
-An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -1,110 +0,0 @@
-import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import Draggable from '../_draggable'
-import { DraggableProvider } from '../context'
-import Image from '../../pb_image/_image'
-
-
-
-const dataLineVertical = [
-  {
-    id: "211",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "212",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "213",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-
-const dataLineHorizontal = [
-  {
-    id: "2111",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "2122",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "2133",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-
-const DraggableDropZones = (props) => {
-  const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
-  const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
-
-  return (
-    <>
-      <Caption marginBottom="xs" 
-          marginTop="xl"
-          text="Vertical"
-      />
-      <DraggableProvider
-          dropZone={{ type: "line", color: "purple" }}
-          initialItems={dataLineVertical}
-          onReorder={(items) => setInitialLineVerticalState(items)}
-      >
-        <Draggable.Container {...props}>
-          <Flex flexDirection="column"
-              height="367px"
-          >
-              {initialLineVerticalState.map(({ id, url }) => (
-                <Draggable.Item dragId={id}
-                    key={id}
-                    marginBottom="sm"
-                >
-                  <Image alt={id}
-                      size="md"
-                      url={url}
-                  />
-                </Draggable.Item>
-              ))}
-          </Flex>
-        </Draggable.Container>
-      </DraggableProvider>
-      <Caption marginBottom="xs" 
-          marginTop="xl"
-          text="Horizontal"
-      />
-      <Flex>
-        <DraggableProvider
-            dropZone={{ type: "line", direction: "horizontal" }}
-            initialItems={dataLineHorizontal}
-            onReorder={(items) => setInitialLineHorizontalState(items)}
-        >
-          <Draggable.Container
-              htmlOptions={{style:{ width: "285px"}}}
-              {...props}
-          >
-            <Flex alignItems="stretch"
-                flexDirection="row"
-                height="110px"
-            > 
-              {initialLineHorizontalState.map(({ id, url }) => (
-                <Draggable.Item dragId={id}
-                    key={id}
-                    marginRight="sm"
-                >
-                  <Image alt={id}
-                      size="md"
-                      url={url}
-                  />
-                </Draggable.Item>
-              ))}
-            </Flex>
-          </Draggable.Container>
-        </DraggableProvider>
-      </Flex>
-    </>
-  );
-};
-
-export default DraggableDropZones;

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

@@ -1,5 +0,0 @@
-When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
-
-The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
-
-Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -1,190 +0,0 @@
-import React from 'react'
-
-import Layout from '../../pb_layout/_layout'
-import Flex from '../../pb_flex/_flex'
-import Body from '../../pb_body/_body'
-import Caption from '../../pb_caption/_caption'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-
-const LayoutBracket = () => {
-  return (
-    <div>
-      <Layout
-          layout="bracket"
-      >
-        <Layout.RoundLabel>
-          <Caption>Wild Card</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Packers</Body>
-              <Body>10</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>22</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Vikings</Body>
-              <Body>9</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Rams</strong></Body>
-              <Body>27</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Lions</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Commanders</strong></Body>
-              <Body>23</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>Buccaneers</Body>
-              <Body>20</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Chargers</Body>
-              <Body>12</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Texans</strong></Body>
-              <Body>32</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Broncos</Body>
-              <Body>7</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Bills</strong></Body>
-              <Body>31</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Steelers</Body>
-              <Body>14</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Ravens</strong></Body>
-              <Body>28</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Divisional</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Rams</Body>
-              <Body>22</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>28</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Commanders</strong></Body>
-              <Body>45</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>Lions</Body>
-              <Body>31</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Texans</Body>
-              <Body>14</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-              <Body>23</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Ravens</Body>
-              <Body>25</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Bills</strong></Body>
-              <Body>27</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Conference</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Commanders</Body>
-              <Body>23</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>55</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Bills</Body>
-              <Body>29</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-              <Body>32</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Super Bowl</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Chiefs</Body>
-              <Body>22</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>40</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutBracket

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

@@ -1,5 +0,0 @@
-Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
-
-On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
-
-Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

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

@@ -1 +0,0 @@
-To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

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

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) 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>
-    </tbody>
-<% end %>

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

@@ -1 +0,0 @@
-Customize your header by removing the header borders with the `header_style: "borderless"` prop.

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

@@ -1,36 +0,0 @@
-<%= pb_rails("card", props: { background: "light" })  do %>
-    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
-        <%= pb_rails("table/table_head") do %>
-            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) 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"}) %>       
-            <% end %>
-        <% end %>
-        <%= pb_rails("table/table_body") do %>
-            <%= 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"}) %>
-            <% 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"}) %>
-            <% 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"}) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1 +0,0 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).