playbook_ui_docs 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7372 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb

@@ -1,117 +0,0 @@
-<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
-    <%= pb_rails("button", props: { id: "button-open-example-turbo-frames", margin_right: "md", text: "Open Dialog via Custom Event" }) %>
-    <%= pb_rails("button", props: { id: "open-dialog-button", data: { open_dialog: "dialog-confirm-turbo-frames" }, margin_right: "md", text: "Custom Event Linked to Confirm Button" }) %>
-    <%= pb_rails("button", props: { id: "button-open-multi-dialog", text: "Mutliple Events Example" }) %>
-<% end %>
-
-<!-- Example 1: Basic dialog with custom event opening -->
-<%= pb_rails("dialog", props: { 
-  id: "dialog-open-turbo-frames", 
-  title: "Click Event Simulation", 
-  text: "Demonstrating Opening the Dialog with a Custom Event.",
-  custom_event_type: "dialogOpen",
-  cancel_button: "Cancel Button",
-  confirm_button: "Okay", 
-  confirm_button_id: "confirm-button-turbo-frames"
-}) %>
-
-<script>
-    document.getElementById("button-open-example-turbo-frames").addEventListener("click", () => {
-        console.log("📣 Dispatching 'dialogOpen' custom event")
-
-        window.dispatchEvent(new CustomEvent("dialogOpen", { 
-            bubbles: true,
-            detail: { 
-                dialogId: "dialog-open-turbo-frames",
-                action: "open"
-            }
-        }))
-
-        console.log("✅ Custom event dispatched - dialog should open")
-    })
-</script>
-
-<!-- Example 2: Dialog with custom event linking confirm button to closing the dialog-->
-<%= pb_rails("dialog", props: { 
-  id: "dialog-confirm-turbo-frames", 
-  title: "Custom Event Button Action", 
-  text: "Clicking this dialog's confirm button triggers closing the dialog as well.",
-  custom_event_type: "turboResponse",
-  cancel_button: "Cancel",
-  cancel_button_id: "cancel-button-id-turbo-frames",
-  confirm_button: "Confirm Button", 
-  confirm_button_id: "confirm-button-id-turbo-frames"
-}) %>
-
-<script>
-  window.addEventListener("turboResponse", (event) => {
-    const { dialogId, action, cancelButtonId } = event.detail || {}
-    console.log("📦 turboResponse event triggered:", { dialogId, action, cancelButtonId })
-
-    if (action === "close" && cancelButtonId) {
-        const dialog = document.getElementById(dialogId)
-        if (dialog?.close) {
-          console.log("🚪 Closing dialog programmatically")
-          dialog.close()
-        }
-    }
-  })
-
-  document.getElementById("confirm-button-id-turbo-frames").addEventListener("click", function () {
-    console.log("✅ Confirm button clicked! Triggering cancel via turboResponse")
-
-    window.dispatchEvent(new CustomEvent("turboResponse", {
-      detail: {
-        dialogId: "dialog-confirm-turbo-frames",
-        action: "close", 
-        cancelButtonId: "cancel-button-id-turbo-frames"
-      }
-    }))
-  })
-</script>
-
-<!-- Example 3: Dialog with multiple custom event types -->
-<%= pb_rails("dialog", props: { 
-  id: "multi-event-dialog", 
-  title: "Multiple Event Types", 
-  text: "This dialog responds to multiple custom event types - see console logs.",
-  custom_event_type: "dialogOpenMutli,turboResponseMulti",
-  cancel_button: "Cancel",
-  cancel_button_id: "multi-event-cancel",
-  confirm_button: "Confirm", 
-  confirm_button_id: "multi-event-confirm"
-}) %>
-
-<script>
-  document.getElementById("button-open-multi-dialog").addEventListener("click", () => {
-    console.log("📣 Dispatching 'dialogOpenMutli' custom event")
-    window.dispatchEvent(new CustomEvent("dialogOpenMutli", { 
-      detail: { 
-        dialogId: "multi-event-dialog",
-        action: "open"
-      }
-    }))
-  })
-
-  document.getElementById("multi-event-confirm")?.addEventListener("click", function() {
-    console.log("✅ Confirm clicked — dispatching 'turboResponseMulti' to simulate dialog close")
-
-    window.dispatchEvent(new CustomEvent("turboResponseMulti", {
-      detail: {
-        dialogId: "multi-event-dialog",
-        action: "close",
-        cancelButtonId: "multi-event-cancel"
-      }
-    }))
-  })
-
-  window.addEventListener("turboResponseMulti", (event) => {
-    const { dialogId, action, cancelButtonId } = event.detail || {}
-  
-    if (action === "close" && dialogId) {
-      const dialog = document.getElementById(dialogId)
-      dialog.close?.()
-      console.log("🚪 Closing dialog programmatically")
-    }
-  })
-</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md

@@ -1,9 +0,0 @@
-The `custom_event_type` prop allows you to specify custom events that will trigger the dialog's initialization or control its behavior. This is especially useful when working with Turbo Frame updates where standard DOM events might not suffice.
-
-The examples demonstrate two use cases:
-1) Opening a dialog via custom event dispatch: The first example shows how to configure a dialog to listen for a specific custom event (dialogOpen). When this event is dispatched, the dialog will automatically open, making it easy to trigger the dialog from JavaScript or after Turbo Frame operations.
-2) Controlling dialog button actions with custom events: The second example demonstrates how to set up a dialog that can have its confirm button triggered through external events (turboResponse). This pattern is useful when you need to programmatically confirm a dialog after some background operation completes.
-3) Multiple custom events: The third example combines the first two to show how `custom_event_type` prop can support multiple event types separated by a comma.
-
-For Turbo integration, you can use standard Turbo events like turbo:frame-load or turbo:submit-end as your `custom_event_type` to ensure the dialog responds properly after Turbo navigation or form submissions. The dialog component will listen for these events automatically.
-The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb

@@ -1,42 +0,0 @@
-<% initial_items = [
-  {
-    id: "100",
-    url: "https://unsplash.it/500/400/?image=638",
-  },
-  {
-    id: "200",
-    url: "https://unsplash.it/500/400/?image=639",
-  },
-  {
-    id: "300",
-    url: "https://unsplash.it/500/400/?image=640",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex") do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<script>
-  const itemIds = ["item_100", "item_200", "item_300"];
-
-  itemIds.forEach((id) => {
-    const element = document.getElementById(id);
-    if (element) {
-      element.addEventListener("dragstart", (event) => {
-        console.log(`${id} drag start!`);
-      });
-      element.addEventListener("dragend", (event) => {
-        console.log(`${id} drag end!`);
-      });
-    }
-  });
-</script>

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

@@ -1 +0,0 @@
-You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 45 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugePbStyles = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

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_fullscreen_background.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-
-const OverlayFullscreenBackground = () => {
-  const [openBackground, setOpenBackground] = useState(false)
-
-  const handleClickBackground = () => {
-    setOpenBackground(true)
-  }
-
-  const handleCloseBackground = () => {
-    setOpenBackground(false)
-  }
-
-  return (
-    <>
-      <div>
-        <Button
-            onClick={handleClickBackground}
-            text="Background Dark"
-            variant="secondary"
-        />
-
-        {openBackground && (
-          <Overlay
-              color="bg_dark"
-              fullScreen
-              gradient={false}
-              opacity="opacity_4"
-          >
-            <FixedConfirmationToast
-                closeable
-                horizontal='center'
-                onClose={handleCloseBackground}
-                open={openBackground}
-                status="tip"
-                text='Fullscreen Overlay with color set to Background Dark.'
-                vertical='top'
-            />
-          </Overlay>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default OverlayFullscreenBackground

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

@@ -1 +0,0 @@
-The `fullScreen` prop also allows you to use `color` along with it.

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

@@ -1,81 +0,0 @@
-import React, { useState } from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-
-const OverlayFullscreenOpacity = () => {
-  const [openOpacity40, setOpenOpacity40] = useState(false)
-  const [openOpacity80, setOpenOpacity80] = useState(false)
-
-  const handleClickOpacity40 = () => {
-    setOpenOpacity40(true)
-  }
-  const handleCloseOpacity40 = () => {
-    setOpenOpacity40(false)
-  }
-
-  const handleClickOpacity80 = () => {
-    setOpenOpacity80(true)
-  }
-  const handleCloseOpacity80 = () => {
-    setOpenOpacity80(false)
-  }
-
-  return (
-    <>
-      <div>
-        <Button
-            onClick={handleClickOpacity40}
-            text="40% Opacity"
-            variant="secondary"
-        />
-        {' '}
-        <Button
-            onClick={handleClickOpacity80}
-            text="80% Opacity"
-            variant="secondary"
-        />
-
-        {openOpacity40 && (
-            <Overlay
-                fullScreen
-                gradient={false}
-                opacity="opacity_4"
-            >
-              <FixedConfirmationToast
-                  closeable
-                  horizontal='center'
-                  onClose={handleCloseOpacity40}
-                  open={openOpacity40}
-                  status="tip"
-                  text='Fullscreen Overlay at 40% Opacity.'
-                  vertical='top'
-              />
-            </Overlay>
-        )}
-
-        {openOpacity80 && (
-            <Overlay
-                fullScreen
-                gradient={false}
-                opacity="opacity_8"
-            >
-              <FixedConfirmationToast
-                  closeable
-                  display="block"
-                  horizontal='center'
-                  onClose={handleCloseOpacity80}
-                  open={openOpacity80}
-                  status="tip"
-                  text='Fullscreen Overlay at 80% Opacity.'
-                  vertical='top'
-              />
-            </Overlay>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default OverlayFullscreenOpacity

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

@@ -1 +0,0 @@
-To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it.

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).

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

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
-    <thead>
-        <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-            <th>Column 4</th>
-            <th>Column 5</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-    </tbody>
-<% end %>

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

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

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

@@ -1,36 +0,0 @@
-<%= pb_rails("card", props: { background: "light" })  do %>
-    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
-        <%= pb_rails("table/table_head") do %>
-            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
-                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
-            <% end %>
-        <% end %>
-        <%= pb_rails("table/table_body") do %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

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