RubyGems - playbook_ui_docs - Versions diffs - 14.18.0.pre.rc.0 → 14.18.0.pre.rc.1 - Mend

playbook_ui_docs 14.18.0.pre.rc.0 → 14.18.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

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

@@ -1,11 +1,102 @@
 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>
@@ -18,80 +109,141 @@ const LayoutBracket = () => {
         </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.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
+            />
           </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.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
+            />
           </Layout.Game>
           <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Lions</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
+            <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}
+            />
           </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.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}
+            />
           </Layout.Game>
           <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
+            <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}
+            />
           </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.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
+            />
           </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.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
+            />
           </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.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
+            />
           </Layout.Game>
         </Layout.Round>
         <Layout.RoundLabel>
@@ -100,44 +252,73 @@ const LayoutBracket = () => {
         </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.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
+            />
           </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.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}
+            />
           </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.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
+            />
           </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.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
+            />
           </Layout.Game>
         </Layout.Round>
         <Layout.RoundLabel>
@@ -146,24 +327,39 @@ const LayoutBracket = () => {
         </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.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
+            />
           </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.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
+            />
           </Layout.Game>
         </Layout.Round>
         <Layout.RoundLabel>
@@ -172,14 +368,22 @@ const LayoutBracket = () => {
         </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.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
+            />
           </Layout.Game>
         </Layout.Round>
       </Layout>

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

@@ -1,4 +1,4 @@
-Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
+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.
 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_overlay/docs/_overlay_color.jsx ADDED Viewed

@@ -0,0 +1,63 @@
+import React from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+const OverlayColor = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            color="black"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="black"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
+NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md CHANGED Viewed

@@ -1,7 +1 @@
-Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
-The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
-The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx ADDED Viewed

@@ -0,0 +1,39 @@
+import React from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+const OverlayGradientOpacity = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_2"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_8"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx ADDED Viewed

@@ -0,0 +1,40 @@
+import React from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Table from '../../pb_table/_table'
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <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>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+const OverlayLayout = () => (
+    <>
+        <Overlay layout={{ y: "xl" }}>
+            <TableExample />
+        </Overlay>
+    </>
+)
+export default OverlayLayout