playbook_ui_docs 14.17.0.pre.alpha.play2065passphrasewithselect7295 → 14.17.0.pre.alpha.playcdntest7233

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.play2065passphrasewithselect7295
+  version: 14.17.0.pre.alpha.playcdntest7233
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-21 00:00:00.000000000 Z
+date: 2025-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -93,14 +93,6 @@ files:
 - 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
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -459,8 +451,6 @@ files:
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md
 - app/pb_kits/playbook/pb_copy_button/docs/example.yml
 - app/pb_kits/playbook/pb_copy_button/docs/index.js
 - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
@@ -1443,19 +1433,13 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx
 - app/pb_kits/playbook/pb_online_status/docs/example.yml
 - app/pb_kits/playbook/pb_online_status/docs/index.js
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md

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

@@ -1,58 +0,0 @@
-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"]}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumns

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

@@ -1,6 +0,0 @@
-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/_advanced_table_sticky_columns_and_header.jsx

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumnsAndHeader = (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",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumnsAndHeader

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

@@ -1,8 +0,0 @@
-To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
-
-- Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
-
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
-
-Expand the table above to see this in action.

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

@@ -1,55 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyHeader = (props) => {
-  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>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyHeader

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

@@ -1,3 +0,0 @@
-The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -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: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,3 +0,0 @@
-The `table_props` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import usePBCopy from '../../pb_copy_button/usePBCopy'
-import Body from '../../pb_body/_body'
-import Textarea from '../../pb_textarea/_textarea'
-import Tooltip from '../../pb_tooltip/_tooltip'
-
-const CopyButtonHook = ({...props}) => {
-  // This is how you can use the copy button hook to copy text to the clipboard
-  // eslint-disable-next-line no-unused-vars
-  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
-  // I added a tooltip so it looks better in the ui
-  const [showTooltip, setShowTooltip] = useState(false)
-
-  const handleCopy = () => {
-    copyToClipboard()
-    setShowTooltip(true)
-    setTimeout(() => setShowTooltip(false), 1500)
-  }
-
-  useEffect(() => {
-    const el = document.getElementById('hookbody')
-    if (!el) return
-
-    el.addEventListener('click', handleCopy)
-    return () => {
-      el.removeEventListener('click', handleCopy)
-    }
-  }, [copyToClipboard])
-
-  return (
-    <div>
-      <Tooltip
-          delay={{ close: 1000 }}
-          forceOpenTooltip={showTooltip}
-          placement="top"
-          showTooltip={false}
-          text="Copied!"
-      >
-        <Body
-            cursor="pointer"
-            id="hookbody"
-            text="I'm a custom copy hook! Click this body to copy this text!"
-        />
-      </Tooltip>
-
-      <Textarea
-          {...props}
-          placeholder="Paste here"
-      />
-    </div>
-  )
-}
-
-export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -1,3 +0,0 @@
-We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
-
-`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx

@@ -1,63 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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_gradient_opacity.jsx

@@ -1,39 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -1,5 +0,0 @@
-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).