playbook_ui_docs 14.17.0.pre.rc.1 → 14.18.0.pre.rc.1

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

@@ -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

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

@@ -0,0 +1,5 @@
+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_overlay/docs/example.yml

@@ -1,6 +1,9 @@
 examples:
   react:
   - overlay_default: Default
+  - overlay_gradient_opacity: Gradient & Opacity
+  - overlay_color: Color
+  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

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

@@ -1,4 +1,7 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
+export { default as OverlayColor } from './_overlay_color.jsx'
+export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md

@@ -0,0 +1 @@
+To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

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

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

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

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

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

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

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

@@ -37,6 +37,8 @@ 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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -18,18 +18,18 @@ const USERS = [
     territory: "PHL",
   },
   {
-    name: "Jason Cypret",
-    title: "Vice President of User Experience",
+    name: "Carlos Lima",
+    title: "Nitro Developer",
     territory: "PHL",
   },
   {
     name: "Stephen Marshall",
-    title: "Senior User Experience Engineer",
+    title: "Senior Nitro Developer",
     territory: "PHL",
   },
   {
     name: "Jasper Furniss",
-    title: "Senior User Experience Engineer",
+    title: "Lead User Experience Engineer",
     territory: "PHL",
   },
 ];