playbook_ui_docs 13.29.0.pre.alpha.testingcollapsibleissue3052 → 13.30.0.pre.alpha.PBNTR353draggablev53136

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3989a7998287dbfdeb6f70a5350de16e07f58a24a708d7960d90509bde13d460
-  data.tar.gz: 26d31983c514bea9c5c4556ea867235c422ed3c62f12d084a993f8eaff6f3a7e
+  metadata.gz: f561299e831e96ce1418236e2bebc1a33e5655c53226bc50c877ab38d4a698d9
+  data.tar.gz: 35ef55ef238504ef32ecb0ccd9d4108e3428272716437aecf1abcd081b059354
 SHA512:
-  metadata.gz: 3d3bddef7c00879f999a9daf00eb7f60122c7cb41ba786457c2c3221a316ce8114990b03f31d9f92554a85d48f44b07eb6434fdc95bf45dae536f69966c1cf8d
-  data.tar.gz: 1eef88d2153999d0601102f50ec09771a16b395f4f10a552643a410fabfd7070cb24ce1bd02a9525d37dad36371613f978dfdc1075bb31a58173a9f6338eb9dc
+  metadata.gz: d4a4e79a56df618ad59184c57aef9fd59bce593a98f06cffc3017d17c6d25e176bdfac1f63bdc373a0391f01e92aa3d71ea2ca3584761ed004f4486e6b0ac48a
+  data.tar.gz: 6c3e50107b18352613cd01680687574fa752cd55320300a2106a4370117e42aa4447214b5f65739edc51359ea48b5f716bf473d13baaff4f3b8f5c2d910f011f

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,18 +27,19 @@ const DraggableDefault = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
+              <Draggable.Item dragId={id} 
                   key={id}
               >
                 <SelectableList.Item
                     label={text} 
                     name={id} 
                     value={id} 
+                    {...props}
                 />
               </Draggable.Item>
             ))}

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.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.

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"
             >
@@ -112,12 +113,13 @@ const DraggableMultipleContainer = (props) => {
                       }) => (
                         <Draggable.Item 
                             container={container}
-                            id={id} 
+                            dragId={id} 
                             key={id}
                         >
                           <Card
                               marginBottom="sm"
                               padding="sm"
+                              {...props}
                           >
                             <Flex justify="between">
                               <FlexItem>
@@ -130,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
                                   <Title paddingLeft="xs" 
                                       size={4}
                                       text={title}
+                                      {...props}
                                   />
                                 </Flex>
                               </FlexItem>
@@ -138,10 +141,12 @@ const DraggableMultipleContainer = (props) => {
                                   rounded
                                   text={badgeProperties(container).text}
                                   variant={badgeProperties(container).color}
+                                  {...props}
                               />
                             </Flex>
                             <Body paddingTop="xs"
                                 text={description} 
+                                {...props}
                             />
                           </Card>
                         </Draggable.Item>

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,58 +32,44 @@ 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" }}
+              <Card dragId={id}
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  key={id}
                   marginBottom="xs"
+                  padding="xs"
+                  {...props}
               >
                 <Flex alignItems="stretch" 
                     flexDirection="column"
-				>
+                >
                   <Flex gap="xs">
                     <Title size={4} 
-                        text={text} 
-					/>
+                        text={text}
+                        {...props} 
+                    />
                     <Badge 
                         text="35-12345" 
                         variant="primary" 
-					/>
+                        {...props}
+                    />
                   </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" 
+                          {...props}
                       />
-                      <Caption size="xs" 
-                          text="90210" 
-                      />
-                    </Flex>
-                  </Flex>
-
                   <Flex gap="xxs" 
                       spacing="between"
                   >
                     <Flex gap="xxs">
                       <Caption color="error" 
                           size="xs"
+                          {...props}
                       >
                         <Icon icon="house-circle-exclamation" />
                       </Caption>
@@ -96,20 +82,22 @@ const DraggableWithCards = (props) => {
                       <Badge rounded 
                           text="Schedule QA" 
                           variant="warning" 
+                          {...props}
                        />
                       <Badge rounded 
                           text="Flex" 
-                          variant="primary" 
+                          variant="primary"
+                          {...props} 
                       />
                       <Badge rounded 
                           text="R99" 
                           variant="primary" 
+                          {...props}
                       />
                     </Flex>
                   </Flex>
                 </Flex>
               </Card>
-            </Draggable.Item>
           ))}
         </Draggable.Container>
     </DraggableProvider>

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

@@ -0,0 +1,5 @@
+For a simplified version of the Draggable API for the Card kit, You can use the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
+
+In addition to the above, `dragId` is a REQUIRED prop to be passed to the Card kit when implementing dragging.
+
+The dev must manage state as shown.

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,13 +28,13 @@ const DraggableWithList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
-        <List draggable
+        <List enableDrag
             {...props}
         >
             {initialState.map(({ id, text }) => (
-                <ListItem id={id}
+                <ListItem dragId={id}
                     key={id}
                 >
                     {text}

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

@@ -1 +1,7 @@
-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 `enableDrag` prop. 
+
+In addition to the above, `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.

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,18 +27,20 @@ const DraggableWithSelectableList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
-          <SelectableList draggable 
-              variant="checkbox"
+          <SelectableList enableDrag
+              variant="radio"
               {...props}
               >
             {initialState.map(({ id, text }) => (
-                <SelectableList.Item id={id}
+                <SelectableList.Item 
+                    dragId={id}
                     key={id}
                     label={text} 
-                    name={id} 
+                    name="radio-test" 
                     value={id}
+                    {...props}
                 />
             ))}
           </SelectableList>

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

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop. 
+
+In addition to the above, `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("overlay") do %>
+    <%= pb_rails("table", props: { size: "sm" }) 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>
+            <% 7.times do %>
+                <tr>
+                    <td>Value 1</td>
+                    <td>Value 2</td>
+                    <td>Value 3</td>
+                    <td>Value 4</td>
+                    <td>Value 5</td>
+                </tr>
+            <% end %>   
+        </tbody>
+    <% end %>
+<% end %>

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

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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.