playbook_ui 14.16.0.pre.alpha.PLAY1929bracketlayout6957 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.16.0"
-  VERSION = "14.16.0.pre.alpha.PLAY1929bracketlayout6957"
+  VERSION = "14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.16.0.pre.alpha.PLAY1929bracketlayout6957
+  version: 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-28 00:00:00.000000000 Z
+date: 2025-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -326,18 +326,14 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_react.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
@@ -1795,8 +1791,6 @@ files:
 - app/pb_kits/playbook/pb_layout/body.html.erb
 - app/pb_kits/playbook/pb_layout/body.rb
 - 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
@@ -1830,8 +1824,6 @@ files:
 - app/pb_kits/playbook/pb_layout/layout.test.js
 - app/pb_kits/playbook/pb_layout/sidebar.html.erb
 - app/pb_kits/playbook/pb_layout/sidebar.rb
-- app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx
-- app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx
 - app/pb_kits/playbook/pb_legend/_legend.scss
 - app/pb_kits/playbook/pb_legend/_legend.tsx
 - app/pb_kits/playbook/pb_legend/docs/_description.md
@@ -2864,10 +2856,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_header_style_borderless.jsx
-- 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.jsx
-- 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
 - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
@@ -3464,11 +3452,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-Djo6qCne.js
-- dist/chunks/_weekday_stacked-C9nJ2j2C.js
+- dist/chunks/_typeahead-BEyzuDQy.js
+- dist/chunks/_weekday_stacked-BWYgED9z.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BGzBzFZX.js
-- dist/chunks/pb_form_validation-BvNy9Bd6.js
+- dist/chunks/lib-BgzBJfYr.js
+- dist/chunks/pb_form_validation-CJD-PyIw.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,39 +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",
-    }
-  ] 
-
-  subrow_headers = ["Quarter", "Month", "Day"]
-%>
-
-<%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
-<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.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: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

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

@@ -1 +0,0 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

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

@@ -1,6 +0,0 @@
-`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
-
-When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
-
-__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
-The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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_layout/subcomponents/_game.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
-
-import Card from '../../pb_card/_card'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-
-type LayoutGameProps = {
-  children: React.ReactNode[] | React.ReactNode,
-  className?: string,
-  numberOfRounds: number,
-  numberOfGames: number,
-  isOdd: boolean,
-} & GlobalProps
-
-// Game component (modeled after Item)
-const Game = (props: LayoutGameProps) => {
-  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  
-  const numberOfChildren = Array.isArray(children) ? children.length : 0
-  
-  const isMultiple = Array.isArray(children)
-  
-  let ratio = 0
-  let exponent
-  if (numberOfGames > 1) {
-    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
-    ratio = 2 ** exponent
-  }
-  
-  if (numberOfChildren === 2) {
-    const [firstChild, secondChild] = React.Children.toArray(children)
-  
-    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) { 
-    return (
-      <div
-          className={classnames('layout_game', globalProps(props), className)}
-          style={dynamicInlineProps}
-      >
-        <Card
-            marginY="xs"
-            padding="none"
-            shadow="deep"
-        >
-          <Card.Body padding="xs">{firstChild}</Card.Body>
-          <SectionSeparator />
-          <Card.Body padding="xs">{secondChild}</Card.Body>
-        </Card>
-        {isOdd && numberOfGames > 1  &&
-          <div
-              className="half_box"
-              style={{ height: `calc(${ratio} * 100% + 4px)` }}
-          />
-        }
-      </div>
-      )
-    }
-  }
-  
-  return (
-    <div
-        className={classnames('layout_game', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
-    {((!isMultiple && children) || numberOfChildren >= 1 )? (
-      children
-    ) : (
-      <Card
-          marginY="xs"
-          padding="none"
-          shadow="deep"
-      >
-        <Card.Body padding="xs">To be determined...</Card.Body>
-        <SectionSeparator />
-        <Card.Body padding="xs">To be determined...</Card.Body>
-      </Card>
-    )}
-      {isOdd && numberOfGames > 1  &&
-        <div
-            className="half_box"
-            style={{ height: `calc(${ratio} * 100% + 4px)` }}
-        />
-      }
-    </div>
-  )
-}
-
-export default Game

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
-
-type LayoutRoundLabelProps = {
-  children: React.ReactNode[] | React.ReactNode,
-  className?: string,
-} & GlobalProps
-
-export const RoundLabel = (props: LayoutRoundLabelProps) => {
-  const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  return (
-    <div
-        className={classnames('layout_round_label', className)}
-        style={dynamicInlineProps}
-    >
-      {children}
-    </div>
-  )
-}
-
-type LayoutRoundProps = {
-  children: React.ReactNode[] | React.ReactNode,
-  className?: string,
-  numberOfRounds: number,
-} & GlobalProps
-
-export const Round = (props: LayoutRoundProps) => {
-  const { children, className, numberOfRounds } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  const numberOfChildren = Array.isArray(children) ? children.length : 0
-
-  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
-  ) : children
-
-  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
-    <div
-        className="right_connector"
-        key={`right_connector_${index}`}
-    />
-  ))
-
-  return (
-    <>
-      <div
-          className={classnames('layout_round', globalProps(props), className)}
-          style={dynamicInlineProps}
-      >
-        {childrenWithProps}
-      </div>
-      <div className="connector_container">{rightConnectors}</div>
-    </>
-  )
-}

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

@@ -1,50 +0,0 @@
-import React from 'react'
-
-import Table from '../../pb_table/_table'
-
-const TableWithHeaderStyleBorderless = (props) => {
-  return (
-    <>
-        <Table
-            headerStyle="borderless"
-            size="sm"
-            {...props}
-        >
-          <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>
-        </Table>
-    </>
-  )
-}
-
-export default TableWithHeaderStyleBorderless

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

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

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

@@ -1,59 +0,0 @@
-import React from 'react'
-
-import Background from '../../pb_background/_background'
-import Card from '../../pb_card/_card'
-import Table from '../../pb_table/_table'
-
-const TableWithHeaderStyleFloating = (props) => {
-  return (
-    <>
-        <Card background="light" 
-            {...props}
-        >
-            <Table
-                headerStyle="floating"
-                size="sm"
-                {...props}
-            >
-              <Table.Head>
-                  <Background backgroundColor="light" 
-                      tag="tr"
-                      {...props}
-                  >
-                      <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>
-                  </Background>
-              </Table.Head>
-              <Table.Body>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-        </Card>
-    </>
-  )
-}
-
-export default TableWithHeaderStyleFloating

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

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