playbook_ui_docs 13.29.0.pre.alpha.removeduplicatekitexampleclass3063 → 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 774b28287de8936546bbb84d72acae2861e4ad94cc3e1b1d9ba6e05c69293e77
-  data.tar.gz: 18d0c520b311bf65ee4579e5030ba081c9de2a27071d2f2f42bdbfa4fd97dcf9
+  metadata.gz: '05813b97210befb8bf5db329609990ff637f48a7defa0b0cb9a8f61ceaf68cd5'
+  data.tar.gz: 25da023059632ffbb44140ba1e24799de56d0c3dc198513c3f25cdfa98e0fd1f
 SHA512:
-  metadata.gz: 48b3800c5ec794c25f86de8f98cc8a9eda7f3b267139ea96725449b0fc29f7bd9ddeb8098f52f936f7dd70b1e7716778d736b04d92f3479a125e07cab2f28b76
-  data.tar.gz: f4220d2208e01ffda784a3ea012538baabcc5828d5330c1137470d5c02796dad2c00e2472f2fc3ef42fcdb32f9abfb0e13920eb7d871e86a4daf1f18b68b4dd0
+  metadata.gz: 8517a60878e5668d21cae27692409fb51350aa132a02263d96e47f2a0c141463a4dfac9962c1dcaee88f4592ab23400dc8ec97aafde94bfc4a792debfd2d1b40
+  data.tar.gz: 2e9fec1a843f16c91034368c8c0f2cb3b242b32d10f27d7043cb476f5b11c869405cd19d7362b66cf5225ceb8458337b7be0f4bcd6368267944483edb062f6b5

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb

@@ -0,0 +1,58 @@
+<% bar_graph_options = {
+    customOptions: {
+        chart: {
+            type: 'bar'
+        },
+        title: {
+            text: 'Historic World Population by Region',
+            align: 'left'
+        },
+        subtitle: {
+            text: 'Source: <a ' +
+                'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
+                'target="_blank">Wikipedia.org</a>',
+            align: 'left'
+        },
+        xAxis: {
+            categories: ['Africa', 'America', 'Asia', 'Europe'],
+            lineWidth: 0
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Population (millions)',
+                align: 'high'
+            },
+            labels: {
+                overflow: 'justify'
+            },
+        },
+        tooltip: {
+            valueSuffix: ' millions'
+        },
+        plotOptions: {
+            bar: {
+                dataLabels: {
+                    enabled: true
+                },
+                groupPadding: 0.1
+            }
+        },
+        series: [{
+            name: 'Year 1990',
+            data: [631, 727, 3202, 721]
+        }, {
+            name: 'Year 2000',
+            data: [814, 841, 3714, 726]
+        }, {
+            name: 'Year 2018',
+            data: [1276, 1007, 4561, 746]
+        }]
+    }
+} %>
+
+<%= pb_rails("bar_graph", props: {
+    id: "bar-horizontal",
+    y_axis_min: 0,
+    custom_options: bar_graph_options,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+
+const barGraphOptions = {
+    chart: {
+        type: 'bar'
+    },
+    title: {
+        text: 'Historic World Population by Region',
+        align: 'left'
+    },
+    subtitle: {
+        text: 'Source: <a ' +
+            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
+            'target="_blank">Wikipedia.org</a>',
+        align: 'left'
+    },
+    xAxis: {
+        categories: ['Africa', 'America', 'Asia', 'Europe'],
+        lineWidth: 0
+    },
+    yAxis: {
+        min: 0,
+        title: {
+            text: 'Population (millions)',
+            align: 'high'
+        },
+        labels: {
+            overflow: 'justify'
+        },
+    },
+    tooltip: {
+        valueSuffix: ' millions'
+    },
+    plotOptions: {
+        bar: {
+            dataLabels: {
+                enabled: true
+            },
+            groupPadding: 0.1
+        }
+    },
+    series: [{
+        name: 'Year 1990',
+        data: [631, 727, 3202, 721]
+    }, {
+        name: 'Year 2000',
+        data: [814, 841, 3714, 726]
+    }, {
+        name: 'Year 2018',
+        data: [1276, 1007, 4561, 746]
+    }]
+}
+
+const BarGraphHorizontal = (props) => (
+  <div>
+    <BarGraph
+        customOptions={barGraphOptions}
+        id="bar-horizontal"
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphHorizontal

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

@@ -12,6 +12,7 @@ examples:
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis
+  - bar_graph_horizontal: Custom Options From Highcharts
 
 
   react:
@@ -26,3 +27,4 @@ examples:
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis
+  - bar_graph_horizontal: Custom Options From Highcharts

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

@@ -9,3 +9,4 @@ export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
 export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
+export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -27,7 +27,7 @@ const DraggableDefault = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">

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

@@ -1,4 +1,4 @@
-To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onChange` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
+To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
 
 The `Draggable.Container` specifies the container within which items can be dropped.
 The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -18,7 +18,7 @@ const containers = ["To Do", "In Progress", "Done"];
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "11",
     container: "To Do",
     title: "Task 1",
     description: "Bug fixes",
@@ -26,7 +26,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
   },
   {
-    id: "2",
+    id: "12",
     container: "To Do",
     title: "Task 2",
     description: "Documentation",
@@ -34,7 +34,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
   },
   {
-    id: "3",
+    id: "13",
     container: "In Progress",
     title: "Task 3",
     description: "Add a variant",
@@ -42,7 +42,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
   },
   {
-    id: "4",
+    id: "14",
     container: "To Do",
     title: "Task 4",
     description: "Add jest tests",
@@ -50,7 +50,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
   },
   {
-    id: "5",
+    id: "15",
     container: "Done",
     title: "Task 5",
     description: "Alpha testing",
@@ -58,7 +58,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
   },
   {
-    id: "6",
+    id: "16",
     container: "In Progress",
     title: "Task 6",
     description: "Release",
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
 
   return (
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
       <Flex
           justifyContent="center"
@@ -92,6 +92,7 @@ const DraggableMultipleContainer = (props) => {
           {containers?.map((container) => (
             <Draggable.Container 
                 container={container}
+                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
                 key={container} 
                 padding="sm"
             >

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

@@ -0,0 +1 @@
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -13,15 +13,15 @@ import {
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "21",
     text: "Joe Black",
   },
   {
-    id: "2",
+    id: "22",
     text: "Nancy White",
   },
   {
-    id: "3",
+    id: "23",
     text: "Bill Green",
   },
 ];
@@ -32,52 +32,34 @@ const DraggableWithCards = (props) => {
   return (
     <DraggableProvider
         initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
-            <Draggable.Item id={id} 
-                key={id}
-			>
               <Card
-                  highlight={{ position: "side", color: "primary" }}
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  id={id}
+                  key={id}
                   marginBottom="xs"
+                  padding="xs"
               >
                 <Flex alignItems="stretch" 
                     flexDirection="column"
-				>
+                >
                   <Flex gap="xs">
                     <Title size={4} 
                         text={text} 
-					/>
+                    />
                     <Badge 
                         text="35-12345" 
                         variant="primary" 
-					/>
+                    />
                   </Flex>
-
-                  <Flex 
-                      gap="sm" 
-                      spacing="between"
-                  >
-                    <Caption 
-                        size="xs" 
-                        text="8:00A" 
-					/>
-                    <Flex gap="xxs">
                       <Caption 
                           size="xs" 
-                          text="Township Name" 
-                      />
-                      <Caption size="xs" 
-                          text="•" 
+                          text="8:00A • Township Name • 90210" 
                       />
-                      <Caption size="xs" 
-                          text="90210" 
-                      />
-                    </Flex>
-                  </Flex>
-
                   <Flex gap="xxs" 
                       spacing="between"
                   >
@@ -109,7 +91,6 @@ const DraggableWithCards = (props) => {
                   </Flex>
                 </Flex>
               </Card>
-            </Draggable.Item>
           ))}
         </Draggable.Container>
     </DraggableProvider>

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

@@ -0,0 +1,3 @@
+For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit. 
+
+The dev must manage state as shown and pass in id to the Card for dragging to work.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx

@@ -4,19 +4,19 @@ import { DraggableProvider, List, ListItem } from "../../";
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "31",
     text: "Philadelphia",
   },
   {
-    id: "2",
+    id: "32",
     text: "New Jersey",
   },
   {
-    id: "3",
+    id: "33",
     text: "Maryland",
   },
   {
-    id: "4",
+    id: "34",
     text: "Connecticut",
   },
 ];
@@ -28,7 +28,7 @@ const DraggableWithList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <List draggable
             {...props}

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

@@ -1 +1 @@
-For a simplified version of the Draggable API fro the List kit, use the DraggableProvider to wrap the List use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx

@@ -4,19 +4,19 @@ import { SelectableList, DraggableProvider } from "../../";
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "41",
     text: "Task 1",
   },
   {
-    id: "2",
+    id: "42",
     text: "Task 2",
   },
   {
-    id: "3",
+    id: "43",
     text: "Task 3",
   },
   {
-    id: "4",
+    id: "44",
     text: "Task 4",
   },
 ];
@@ -27,7 +27,7 @@ const DraggableWithSelectableList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
           <SelectableList draggable 
               variant="checkbox"

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+    Overlay,
+    Table,
+} from '../..'
+
+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 OverlayDefault = () => (
+    <>
+        <Overlay>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayDefault

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

@@ -0,0 +1,7 @@
+Overlays require 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 a `position` and a `size` as a key:value pair object.
+
+The `position` key accepts `top`, `bottom`, `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 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. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from '../..'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayMultiDirectional = () => (
+    <>
+        <Overlay
+            color="card_light"
+            layout={{"x": "xl"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayMultiDirectional

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

@@ -0,0 +1,5 @@
+Optionally, you can pass multi-directional options (`x` or `y`) to the `position` key, which creates multiple overlays. 
+
+Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` value you set. 
+
+NOTE: Multi-directional overlays share the available container space, so passing `full` or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.

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

@@ -0,0 +1,4 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional

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

@@ -0,0 +1,2 @@
+export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

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

@@ -1,34 +1,33 @@
-<%= pb_rails("table") do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th align="center">Rating</th>
-      <th align="right">Money</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">3</td>
-      <td align="right">$57.32</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">2</td>
-      <td align="right">$5,657.08</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">4</td>
-      <td align="right">$358.77</td>
-    </tr>
-  </tbody>
+<%= pb_rails("table") do %>  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") 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: "Rating", text_align: "center" }) %>
+          <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
+       <% 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: "3", text_align: "center" }) %>
+          <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
+      <% 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: "2", text_align: "center" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
+    <% 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: "4", text_align: "center" }) %>
+          <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
+      <% end %>
+  <% end %>
 <% end %>