playbook_ui_docs 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27244 → 14.17.0.pre.alpha.PLAY20267223

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4755e7688ed6d715ceef4f5413393c7cc3f8b99223979f6d41be59a34dc80436
-  data.tar.gz: 785faad33b04324c95e4284a4596c9aa72ad32aee30b927584d63e276a3fbcbd
+  metadata.gz: 64b4be8c2e4c9114486d9ff358008e3c106e7cc6003f1bd3fa28397467771dbc
+  data.tar.gz: 7f156246e737078a61e6a2da41cbede51efed88e9b5726e7b3772a078e6fd253
 SHA512:
-  metadata.gz: 5245ac0dadd1e49e32c69bf232809d0c6e871e080df498065ccba8daebc26122932a5e68242835aebaa0465cd0b05a4e698fb0c5587336b2341ce67811e70e8a
-  data.tar.gz: f206a8505ffedb3ceddefde37f17b815dda881718aa209de9cb3291ad21d48c6625694e6d867805fa6354ac8f5928f3af131a737157dd63851c6dba085d01738
+  metadata.gz: 3d62e9465b0bec13c52d3ae27bbb4e88512146b5857f839c07711b3b23b7d11b5239d48d3fb5af48937b08d249d1bd9bd2856f89c9a53017d54071df34fd0053
+  data.tar.gz: 4b64a03780c80f024867b7ef3be42ef1df32db0f7602c8ee94c44d9dc8356a9f85aa059f7ead6d27376c62ed579b5ba060f555fac1844f0a0c4643a8b06c7d38

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

@@ -0,0 +1,58 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyColumns = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      id: "newEnrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      id: "scheduledMeetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      id: "attendanceRate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+      id: "completedClasses",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      id: "classCompletionRate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+      id: "graduatedStudents",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          stickyLeftColumn={["year", "newEnrollments"]}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyColumns

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

@@ -0,0 +1,6 @@
+To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
+
+To achieve this:
+- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string. 
+- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
+- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.

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

@@ -25,6 +25,7 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
+  - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables

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

@@ -22,4 +22,5 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'

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

@@ -19,4 +19,3 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
-  - background_overlay: Overlay

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

@@ -6,4 +6,3 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
-export { default as BackgroundOverlay } from './_background_overlay.jsx'

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

@@ -1,102 +1,11 @@
 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 teamData = {
-  eagles: {
-    avatar:"https://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
-    name:"Eagles",
-    rank:"#1 NFC East",
-    territory:"PHI",
-  },
-  packers: {
-    avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Packers",
-    rank:"#3 NFC North",
-    territory:"GB",
-  },
-  vikings: {
-    avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
-    name:"Vikings",
-    rank:"#2 NFC North",
-    territory:"MIN",
-  },
-  rams: {
-    avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Rams",
-    rank:"#1 NFC West",
-    territory:"LAR",
-  },
-  lions: {
-    avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Lions",
-    rank:"#1 NFC North",
-    territory:"DET",
-  },
-  commanders: {
-    avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Commanders",
-    rank:"#2 NFC East",
-    territory:"WAS",
-  },
-  buccaneers: {
-    avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Buccaneers",
-    rank:"#1 NFC South",
-    territory:"TB",
-  },
-  chiefs: {
-    avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
-    name:"Chiefs",
-    rank:"#1 AFC West",
-    territory:"KC",
-  },
-  chargers: {
-    avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Chargers",
-    rank:"#2 AFC West",
-    territory:"LAC",
-  },
-  texans: {
-    avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Texans",
-    rank:"#1 AFC South",
-    territory:"HOU",
-  },
-  broncos: {
-    avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Broncos",
-    rank:"#3 AFC West",
-    territory:"DEN",
-  },
-  bills: {
-    avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    name:"Bills",
-    rank:"#1 AFC East",
-    territory:"BUF",
-  },
-  steelers: {
-    avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
-    name:"Steelers",
-    rank:"#2 AFC North",
-    territory:"PIT",
-  },
-  ravens: {
-    avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
-    name:"Ravens",
-    rank:"#1 AFC North",
-    territory:"BAL",
-  },
-  bye: {
-    avatar:"",
-    name:"BYE",
-    rank:"",
-    territory:"",
-  },
-}
-
 const LayoutBracket = () => {
   return (
     <div>
@@ -109,141 +18,80 @@ const LayoutBracket = () => {
         </Layout.RoundLabel>
         <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
           <Layout.Game>
-            <Layout.Participant
-                avatar={teamData.packers.avatar}
-                name={teamData.packers.name}
-                points="10"
-                rank={teamData.packers.rank}
-                territory={teamData.packers.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.eagles.avatar}
-                name={teamData.eagles.name}
-                points="22"
-                rank={teamData.eagles.rank}
-                self
-                territory={teamData.eagles.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.vikings.avatar}
-                name={teamData.vikings.name}
-                points="9"
-                rank={teamData.vikings.rank}
-                territory={teamData.vikings.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.rams.avatar}
-                name={teamData.rams.name}
-                points="27"
-                rank={teamData.rams.rank}
-                territory={teamData.rams.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.lions.avatar}
-                name={teamData.lions.name}
-                points=""
-                rank={teamData.lions.rank}
-                territory={teamData.lions.territory}
-                winner
-            />
-            <Layout.Participant
-                avatar={teamData.bye.avatar}
-                name={teamData.bye.name}
-                points=""
-                rank={teamData.bye.rank}
-                territory={teamData.bye.territory}
-            />
+            <Flex justify="between">
+              <Body><strong>Lions</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
           </Layout.Game>
           <Layout.Game>
-            <Layout.Participant
-                avatar={teamData.commanders.avatar}
-                name={teamData.commanders.name}
-                points="23"
-                rank={teamData.commanders.rank}
-                territory={teamData.commanders.territory}
-                winner
-            />
-            <Layout.Participant
-                avatar={teamData.buccaneers.avatar}
-                name={teamData.buccaneers.name}
-                points="20"
-                rank={teamData.buccaneers.rank}
-                territory={teamData.buccaneers.territory}
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.chiefs.avatar}
-                name={teamData.chiefs.name}
-                points=""
-                rank={teamData.chiefs.rank}
-                territory={teamData.chiefs.territory}
-                winner
-            />
-            <Layout.Participant
-                avatar={teamData.bye.avatar}
-                name={teamData.bye.name}
-                points=""
-                rank={teamData.bye.rank}
-                territory={teamData.bye.territory}
-            />
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
           </Layout.Game>
           <Layout.Game>
-            <Layout.Participant
-                avatar={teamData.chargers.avatar}
-                name={teamData.chargers.name}
-                points="12"
-                rank={teamData.chargers.rank}
-                territory={teamData.chargers.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.texans.avatar}
-                name={teamData.texans.name}
-                points="32"
-                rank={teamData.texans.rank}
-                territory={teamData.texans.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.broncos.avatar}
-                name={teamData.broncos.name}
-                points="7"
-                rank={teamData.broncos.rank}
-                territory={teamData.broncos.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.bills.avatar}
-                name={teamData.bills.name}
-                points="31"
-                rank={teamData.bills.rank}
-                territory={teamData.bills.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.steelers.avatar}
-                name={teamData.steelers.name}
-                points="14"
-                rank={teamData.steelers.rank}
-                territory={teamData.steelers.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.ravens.avatar}
-                name={teamData.ravens.name}
-                points="28"
-                rank={teamData.ravens.rank}
-                territory={teamData.ravens.territory}
-                winner
-            />
+            <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>
@@ -252,73 +100,44 @@ const LayoutBracket = () => {
         </Layout.RoundLabel>
         <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
           <Layout.Game>
-            <Layout.Participant
-                avatar={teamData.rams.avatar}
-                name={teamData.rams.name}
-                points="22"
-                rank={teamData.rams.rank}
-                territory={teamData.rams.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.eagles.avatar}
-                name={teamData.eagles.name}
-                points="28"
-                rank={teamData.eagles.rank}
-                self
-                territory={teamData.eagles.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.commanders.avatar}
-                name={teamData.commanders.name}
-                points="45"
-                rank={teamData.commanders.rank}
-                territory={teamData.commanders.territory}
-                winner
-            />
-            <Layout.Participant
-                avatar={teamData.lions.avatar}
-                name={teamData.lions.name}
-                points="31"
-                rank={teamData.lions.rank}
-                territory={teamData.lions.territory}
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.texans.avatar}
-                name={teamData.texans.name}
-                points="14"
-                rank={teamData.texans.rank}
-                territory={teamData.texans.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.chiefs.avatar}
-                name={teamData.chiefs.name}
-                points="23"
-                rank={teamData.chiefs.rank}
-                territory={teamData.chiefs.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.ravens.avatar}
-                name={teamData.ravens.name}
-                points="25"
-                rank={teamData.ravens.rank}
-                territory={teamData.ravens.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.bills.avatar}
-                name={teamData.bills.name}
-                points="27"
-                rank={teamData.bills.rank}
-                territory={teamData.bills.territory}
-                winner
-            />
+            <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>
@@ -327,39 +146,24 @@ const LayoutBracket = () => {
         </Layout.RoundLabel>
         <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
           <Layout.Game>
-            <Layout.Participant
-                avatar={teamData.commanders.avatar}
-                name={teamData.commanders.name}
-                points="23"
-                rank={teamData.commanders.rank}
-                territory={teamData.commanders.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.eagles.avatar}
-                name={teamData.eagles.name}
-                points="55"
-                rank={teamData.eagles.rank}
-                self
-                territory={teamData.eagles.territory}
-                winner
-            />
+            <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>
-            <Layout.Participant
-                avatar={teamData.bills.avatar}
-                name={teamData.bills.name}
-                points="29"
-                rank={teamData.bills.rank}
-                territory={teamData.bills.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.chiefs.avatar}
-                name={teamData.chiefs.name}
-                points="32"
-                rank={teamData.chiefs.rank}
-                territory={teamData.chiefs.territory}
-                winner
-            />
+            <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>
@@ -368,22 +172,14 @@ const LayoutBracket = () => {
         </Layout.RoundLabel>
         <Layout.Round>
           <Layout.Game>
-            <Layout.Participant
-                avatar={teamData.chiefs.avatar}
-                name={teamData.chiefs.name}
-                points="22"
-                rank={teamData.chiefs.rank}
-                territory={teamData.chiefs.territory}
-            />
-            <Layout.Participant
-                avatar={teamData.eagles.avatar}
-                name={teamData.eagles.name}
-                points="40"
-                rank={teamData.eagles.rank}
-                self
-                territory={teamData.eagles.territory}
-                winner
-            />
+            <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>

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

@@ -1,4 +1,4 @@
-Use `<Layout.RoundLabel>`, `<Layout.Round>`, `<Layout.Game>`, and/or `<Layout.Participant>` to make a bracket layout. Feel free to use custom components in place of the template components based on your needs. 
+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.
 

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

@@ -1 +1 @@
-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 `background` or `backgroundColor` for the element in which it is nested).
+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).

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

@@ -37,8 +37,6 @@ examples:
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
-    - table_with_header_style_borderless: Header Style Borderless
-    - table_with_header_style_floating: Header Style Floating
 
   react:
     - table_sm: Small