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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb +58 -0
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +68 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +3 -2
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +2 -2
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +13 -8
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md +1 -0
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +23 -35
  11. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +5 -0
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +7 -7
  13. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +7 -1
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +11 -9
  15. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +7 -0
  16. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb +24 -0
  17. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +40 -0
  18. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -0
  19. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb +11 -0
  20. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +36 -0
  21. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md +5 -0
  22. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +8 -0
  23. data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
  24. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb +32 -33
  25. data/dist/app/components/playbook/pb_docs/kit_example.rb +94 -0
  26. data/dist/menu.yml +5 -1
  27. data/dist/playbook-doc.js +9 -9
  28. metadata +16 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 774b28287de8936546bbb84d72acae2861e4ad94cc3e1b1d9ba6e05c69293e77
4
- data.tar.gz: 18d0c520b311bf65ee4579e5030ba081c9de2a27071d2f2f42bdbfa4fd97dcf9
3
+ metadata.gz: f561299e831e96ce1418236e2bebc1a33e5655c53226bc50c877ab38d4a698d9
4
+ data.tar.gz: 35ef55ef238504ef32ecb0ccd9d4108e3428272716437aecf1abcd081b059354
5
5
  SHA512:
6
- metadata.gz: 48b3800c5ec794c25f86de8f98cc8a9eda7f3b267139ea96725449b0fc29f7bd9ddeb8098f52f936f7dd70b1e7716778d736b04d92f3479a125e07cab2f28b76
7
- data.tar.gz: f4220d2208e01ffda784a3ea012538baabcc5828d5330c1137470d5c02796dad2c00e2472f2fc3ef42fcdb32f9abfb0e13920eb7d871e86a4daf1f18b68b4dd0
6
+ metadata.gz: d4a4e79a56df618ad59184c57aef9fd59bce593a98f06cffc3017d17c6d25e176bdfac1f63bdc373a0391f01e92aa3d71ea2ca3584761ed004f4486e6b0ac48a
7
+ data.tar.gz: 6c3e50107b18352613cd01680687574fa752cd55320300a2106a4370117e42aa4447214b5f65739edc51359ea48b5f716bf473d13baaff4f3b8f5c2d910f011f
@@ -0,0 +1,58 @@
1
+ <% bar_graph_options = {
2
+ customOptions: {
3
+ chart: {
4
+ type: 'bar'
5
+ },
6
+ title: {
7
+ text: 'Historic World Population by Region',
8
+ align: 'left'
9
+ },
10
+ subtitle: {
11
+ text: 'Source: <a ' +
12
+ 'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
13
+ 'target="_blank">Wikipedia.org</a>',
14
+ align: 'left'
15
+ },
16
+ xAxis: {
17
+ categories: ['Africa', 'America', 'Asia', 'Europe'],
18
+ lineWidth: 0
19
+ },
20
+ yAxis: {
21
+ min: 0,
22
+ title: {
23
+ text: 'Population (millions)',
24
+ align: 'high'
25
+ },
26
+ labels: {
27
+ overflow: 'justify'
28
+ },
29
+ },
30
+ tooltip: {
31
+ valueSuffix: ' millions'
32
+ },
33
+ plotOptions: {
34
+ bar: {
35
+ dataLabels: {
36
+ enabled: true
37
+ },
38
+ groupPadding: 0.1
39
+ }
40
+ },
41
+ series: [{
42
+ name: 'Year 1990',
43
+ data: [631, 727, 3202, 721]
44
+ }, {
45
+ name: 'Year 2000',
46
+ data: [814, 841, 3714, 726]
47
+ }, {
48
+ name: 'Year 2018',
49
+ data: [1276, 1007, 4561, 746]
50
+ }]
51
+ }
52
+ } %>
53
+
54
+ <%= pb_rails("bar_graph", props: {
55
+ id: "bar-horizontal",
56
+ y_axis_min: 0,
57
+ custom_options: bar_graph_options,
58
+ }) %>
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+
6
+ const barGraphOptions = {
7
+ chart: {
8
+ type: 'bar'
9
+ },
10
+ title: {
11
+ text: 'Historic World Population by Region',
12
+ align: 'left'
13
+ },
14
+ subtitle: {
15
+ text: 'Source: <a ' +
16
+ 'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
17
+ 'target="_blank">Wikipedia.org</a>',
18
+ align: 'left'
19
+ },
20
+ xAxis: {
21
+ categories: ['Africa', 'America', 'Asia', 'Europe'],
22
+ lineWidth: 0
23
+ },
24
+ yAxis: {
25
+ min: 0,
26
+ title: {
27
+ text: 'Population (millions)',
28
+ align: 'high'
29
+ },
30
+ labels: {
31
+ overflow: 'justify'
32
+ },
33
+ },
34
+ tooltip: {
35
+ valueSuffix: ' millions'
36
+ },
37
+ plotOptions: {
38
+ bar: {
39
+ dataLabels: {
40
+ enabled: true
41
+ },
42
+ groupPadding: 0.1
43
+ }
44
+ },
45
+ series: [{
46
+ name: 'Year 1990',
47
+ data: [631, 727, 3202, 721]
48
+ }, {
49
+ name: 'Year 2000',
50
+ data: [814, 841, 3714, 726]
51
+ }, {
52
+ name: 'Year 2018',
53
+ data: [1276, 1007, 4561, 746]
54
+ }]
55
+ }
56
+
57
+ const BarGraphHorizontal = (props) => (
58
+ <div>
59
+ <BarGraph
60
+ customOptions={barGraphOptions}
61
+ id="bar-horizontal"
62
+ yAxisMin={0}
63
+ {...props}
64
+ />
65
+ </div>
66
+ )
67
+
68
+ export default BarGraphHorizontal
@@ -12,6 +12,7 @@ examples:
12
12
  - bar_graph_stacked: Stacked
13
13
  - bar_graph_negative_numbers: Negative Numbers
14
14
  - bar_graph_secondary_y_axis: Secondary Y-Axis
15
+ - bar_graph_horizontal: Custom Options From Highcharts
15
16
 
16
17
 
17
18
  react:
@@ -26,3 +27,4 @@ examples:
26
27
  - bar_graph_stacked: Stacked
27
28
  - bar_graph_negative_numbers: Negative Numbers
28
29
  - bar_graph_secondary_y_axis: Secondary Y-Axis
30
+ - bar_graph_horizontal: Custom Options From Highcharts
@@ -9,3 +9,4 @@ export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
9
  export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
10
  export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
11
  export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
12
+ export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
@@ -27,18 +27,19 @@ const DraggableDefault = (props) => {
27
27
  return (
28
28
  <>
29
29
  <DraggableProvider initialItems={data}
30
- onChange={(items) => setInitialState(items)}
30
+ onReorder={(items) => setInitialState(items)}
31
31
  >
32
32
  <Draggable.Container {...props}>
33
33
  <SelectableList variant="checkbox">
34
34
  {initialState.map(({ id, text }) => (
35
- <Draggable.Item id={id}
35
+ <Draggable.Item dragId={id}
36
36
  key={id}
37
37
  >
38
38
  <SelectableList.Item
39
39
  label={text}
40
40
  name={id}
41
41
  value={id}
42
+ {...props}
42
43
  />
43
44
  </Draggable.Item>
44
45
  ))}
@@ -1,4 +1,4 @@
1
- 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.
1
+ 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.
2
2
 
3
3
  The `Draggable.Container` specifies the container within which items can be dropped.
4
- The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
4
+ The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
@@ -18,7 +18,7 @@ const containers = ["To Do", "In Progress", "Done"];
18
18
  // Initial items to be dragged
19
19
  const data = [
20
20
  {
21
- id: "1",
21
+ id: "11",
22
22
  container: "To Do",
23
23
  title: "Task 1",
24
24
  description: "Bug fixes",
@@ -26,7 +26,7 @@ const data = [
26
26
  assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
27
27
  },
28
28
  {
29
- id: "2",
29
+ id: "12",
30
30
  container: "To Do",
31
31
  title: "Task 2",
32
32
  description: "Documentation",
@@ -34,7 +34,7 @@ const data = [
34
34
  assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
35
35
  },
36
36
  {
37
- id: "3",
37
+ id: "13",
38
38
  container: "In Progress",
39
39
  title: "Task 3",
40
40
  description: "Add a variant",
@@ -42,7 +42,7 @@ const data = [
42
42
  assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
43
43
  },
44
44
  {
45
- id: "4",
45
+ id: "14",
46
46
  container: "To Do",
47
47
  title: "Task 4",
48
48
  description: "Add jest tests",
@@ -50,7 +50,7 @@ const data = [
50
50
  assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
51
51
  },
52
52
  {
53
- id: "5",
53
+ id: "15",
54
54
  container: "Done",
55
55
  title: "Task 5",
56
56
  description: "Alpha testing",
@@ -58,7 +58,7 @@ const data = [
58
58
  assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
59
59
  },
60
60
  {
61
- id: "6",
61
+ id: "16",
62
62
  container: "In Progress",
63
63
  title: "Task 6",
64
64
  description: "Release",
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
83
83
 
84
84
  return (
85
85
  <DraggableProvider initialItems={data}
86
- onChange={(items) => setInitialState(items)}
86
+ onReorder={(items) => setInitialState(items)}
87
87
  >
88
88
  <Flex
89
89
  justifyContent="center"
@@ -92,6 +92,7 @@ const DraggableMultipleContainer = (props) => {
92
92
  {containers?.map((container) => (
93
93
  <Draggable.Container
94
94
  container={container}
95
+ htmlOptions={{style:{ width: "200px", height: "70vh"}}}
95
96
  key={container}
96
97
  padding="sm"
97
98
  >
@@ -112,12 +113,13 @@ const DraggableMultipleContainer = (props) => {
112
113
  }) => (
113
114
  <Draggable.Item
114
115
  container={container}
115
- id={id}
116
+ dragId={id}
116
117
  key={id}
117
118
  >
118
119
  <Card
119
120
  marginBottom="sm"
120
121
  padding="sm"
122
+ {...props}
121
123
  >
122
124
  <Flex justify="between">
123
125
  <FlexItem>
@@ -130,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
130
132
  <Title paddingLeft="xs"
131
133
  size={4}
132
134
  text={title}
135
+ {...props}
133
136
  />
134
137
  </Flex>
135
138
  </FlexItem>
@@ -138,10 +141,12 @@ const DraggableMultipleContainer = (props) => {
138
141
  rounded
139
142
  text={badgeProperties(container).text}
140
143
  variant={badgeProperties(container).color}
144
+ {...props}
141
145
  />
142
146
  </Flex>
143
147
  <Body paddingTop="xs"
144
148
  text={description}
149
+ {...props}
145
150
  />
146
151
  </Card>
147
152
  </Draggable.Item>
@@ -0,0 +1 @@
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.
@@ -13,15 +13,15 @@ import {
13
13
  // Initial items to be dragged
14
14
  const data = [
15
15
  {
16
- id: "1",
16
+ id: "21",
17
17
  text: "Joe Black",
18
18
  },
19
19
  {
20
- id: "2",
20
+ id: "22",
21
21
  text: "Nancy White",
22
22
  },
23
23
  {
24
- id: "3",
24
+ id: "23",
25
25
  text: "Bill Green",
26
26
  },
27
27
  ];
@@ -32,58 +32,44 @@ const DraggableWithCards = (props) => {
32
32
  return (
33
33
  <DraggableProvider
34
34
  initialItems={data}
35
- onChange={(items) => setInitialState(items)}
35
+ onReorder={(items) => setInitialState(items)}
36
36
  >
37
37
  <Draggable.Container {...props}>
38
38
  {initialState.map(({ id, text }) => (
39
- <Draggable.Item id={id}
40
- key={id}
41
- >
42
- <Card
43
- highlight={{ position: "side", color: "primary" }}
39
+ <Card dragId={id}
40
+ draggableItem
41
+ highlight={{ color: "primary", position: "side" }}
42
+ key={id}
44
43
  marginBottom="xs"
44
+ padding="xs"
45
+ {...props}
45
46
  >
46
47
  <Flex alignItems="stretch"
47
48
  flexDirection="column"
48
- >
49
+ >
49
50
  <Flex gap="xs">
50
51
  <Title size={4}
51
- text={text}
52
- />
52
+ text={text}
53
+ {...props}
54
+ />
53
55
  <Badge
54
56
  text="35-12345"
55
57
  variant="primary"
56
- />
58
+ {...props}
59
+ />
57
60
  </Flex>
58
-
59
- <Flex
60
- gap="sm"
61
- spacing="between"
62
- >
63
- <Caption
64
- size="xs"
65
- text="8:00A"
66
- />
67
- <Flex gap="xxs">
68
61
  <Caption
69
62
  size="xs"
70
- text="Township Name"
71
- />
72
- <Caption size="xs"
73
- text="•"
63
+ text="8:00A • Township Name • 90210"
64
+ {...props}
74
65
  />
75
- <Caption size="xs"
76
- text="90210"
77
- />
78
- </Flex>
79
- </Flex>
80
-
81
66
  <Flex gap="xxs"
82
67
  spacing="between"
83
68
  >
84
69
  <Flex gap="xxs">
85
70
  <Caption color="error"
86
71
  size="xs"
72
+ {...props}
87
73
  >
88
74
  <Icon icon="house-circle-exclamation" />
89
75
  </Caption>
@@ -96,20 +82,22 @@ const DraggableWithCards = (props) => {
96
82
  <Badge rounded
97
83
  text="Schedule QA"
98
84
  variant="warning"
85
+ {...props}
99
86
  />
100
87
  <Badge rounded
101
88
  text="Flex"
102
- variant="primary"
89
+ variant="primary"
90
+ {...props}
103
91
  />
104
92
  <Badge rounded
105
93
  text="R99"
106
94
  variant="primary"
95
+ {...props}
107
96
  />
108
97
  </Flex>
109
98
  </Flex>
110
99
  </Flex>
111
100
  </Card>
112
- </Draggable.Item>
113
101
  ))}
114
102
  </Draggable.Container>
115
103
  </DraggableProvider>
@@ -0,0 +1,5 @@
1
+ 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.
2
+
3
+ In addition to the above, `dragId` is a REQUIRED prop to be passed to the Card kit when implementing dragging.
4
+
5
+ The dev must manage state as shown.
@@ -4,19 +4,19 @@ import { DraggableProvider, List, ListItem } from "../../";
4
4
  // Initial items to be dragged
5
5
  const data = [
6
6
  {
7
- id: "1",
7
+ id: "31",
8
8
  text: "Philadelphia",
9
9
  },
10
10
  {
11
- id: "2",
11
+ id: "32",
12
12
  text: "New Jersey",
13
13
  },
14
14
  {
15
- id: "3",
15
+ id: "33",
16
16
  text: "Maryland",
17
17
  },
18
18
  {
19
- id: "4",
19
+ id: "34",
20
20
  text: "Connecticut",
21
21
  },
22
22
  ];
@@ -28,13 +28,13 @@ const DraggableWithList = (props) => {
28
28
  return (
29
29
  <>
30
30
  <DraggableProvider initialItems={data}
31
- onChange={(items) => setInitialState(items)}
31
+ onReorder={(items) => setInitialState(items)}
32
32
  >
33
- <List draggable
33
+ <List enableDrag
34
34
  {...props}
35
35
  >
36
36
  {initialState.map(({ id, text }) => (
37
- <ListItem id={id}
37
+ <ListItem dragId={id}
38
38
  key={id}
39
39
  >
40
40
  {text}
@@ -1 +1,7 @@
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.
1
+ 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.
2
+
3
+ In addition to the above, `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
4
+
5
+ The dev must manage state as shown.
6
+
7
+ The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.
@@ -4,19 +4,19 @@ import { SelectableList, DraggableProvider } from "../../";
4
4
  // Initial items to be dragged
5
5
  const data = [
6
6
  {
7
- id: "1",
7
+ id: "41",
8
8
  text: "Task 1",
9
9
  },
10
10
  {
11
- id: "2",
11
+ id: "42",
12
12
  text: "Task 2",
13
13
  },
14
14
  {
15
- id: "3",
15
+ id: "43",
16
16
  text: "Task 3",
17
17
  },
18
18
  {
19
- id: "4",
19
+ id: "44",
20
20
  text: "Task 4",
21
21
  },
22
22
  ];
@@ -27,18 +27,20 @@ const DraggableWithSelectableList = (props) => {
27
27
  return (
28
28
  <>
29
29
  <DraggableProvider initialItems={data}
30
- onChange={(items) => setInitialState(items)}
30
+ onReorder={(items) => setInitialState(items)}
31
31
  >
32
- <SelectableList draggable
33
- variant="checkbox"
32
+ <SelectableList enableDrag
33
+ variant="radio"
34
34
  {...props}
35
35
  >
36
36
  {initialState.map(({ id, text }) => (
37
- <SelectableList.Item id={id}
37
+ <SelectableList.Item
38
+ dragId={id}
38
39
  key={id}
39
40
  label={text}
40
- name={id}
41
+ name="radio-test"
41
42
  value={id}
43
+ {...props}
42
44
  />
43
45
  ))}
44
46
  </SelectableList>
@@ -0,0 +1,7 @@
1
+ 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.
2
+
3
+ In addition to the above, `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
4
+
5
+ The dev must manage state as shown.
6
+
7
+ The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("overlay") do %>
2
+ <%= pb_rails("table", props: { size: "sm" }) do %>
3
+ <thead>
4
+ <tr>
5
+ <th>Column 1</th>
6
+ <th>Column 2</th>
7
+ <th>Column 3</th>
8
+ <th>Column 4</th>
9
+ <th>Column 5</th>
10
+ </tr>
11
+ </thead>
12
+ <tbody>
13
+ <% 7.times do %>
14
+ <tr>
15
+ <td>Value 1</td>
16
+ <td>Value 2</td>
17
+ <td>Value 3</td>
18
+ <td>Value 4</td>
19
+ <td>Value 5</td>
20
+ </tr>
21
+ <% end %>
22
+ </tbody>
23
+ <% end %>
24
+ <% end %>
@@ -0,0 +1,40 @@
1
+ import React from 'react'
2
+ import {
3
+ Overlay,
4
+ Table,
5
+ } from '../..'
6
+
7
+ const TableExample = () => {
8
+ return (
9
+ <Table size="sm">
10
+ <thead>
11
+ <tr>
12
+ <th>{'Column 1'}</th>
13
+ <th>{'Column 2'}</th>
14
+ <th>{'Column 3'}</th>
15
+ <th>{'Column 4'}</th>
16
+ <th>{'Column 5'}</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ {Array.from({ length: 7 }, (_, index) => (
21
+ <tr key={index}>
22
+ {Array.from({ length: 5 }, (_, columnIndex) => (
23
+ <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
24
+ ))}
25
+ </tr>
26
+ ))}
27
+ </tbody>
28
+ </Table>
29
+ )
30
+ }
31
+
32
+ const OverlayDefault = () => (
33
+ <>
34
+ <Overlay>
35
+ <TableExample />
36
+ </Overlay>
37
+ </>
38
+ )
39
+
40
+ export default OverlayDefault
@@ -0,0 +1,7 @@
1
+ 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.
2
+
3
+ The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
4
+
5
+ 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.
6
+
7
+ 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).
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
2
+ <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
3
+ <% 15.times do %>
4
+ <%= pb_rails("flex/flex_item") do %>
5
+ <%= pb_rails("card") do %>
6
+ Card content
7
+ <% end %>
8
+ <% end %>
9
+ <% end %>
10
+ <% end %>
11
+ <% end %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+ import {
3
+ Overlay,
4
+ Card,
5
+ Flex,
6
+ FlexItem,
7
+ } from '../..'
8
+
9
+ const InlineCardsExample = () => {
10
+ return (
11
+ <Flex
12
+ columnGap="lg"
13
+ orientation="row"
14
+ overflowX="auto"
15
+ >
16
+ {Array.from({ length: 15 }, (_, index) => (
17
+ <FlexItem key={index}>
18
+ <Card>{"Card Content"}</Card>
19
+ </FlexItem>
20
+ ))}
21
+ </Flex>
22
+ )
23
+ }
24
+
25
+ const OverlayMultiDirectional = () => (
26
+ <>
27
+ <Overlay
28
+ color="card_light"
29
+ layout={{"x": "xl"}}
30
+ >
31
+ <InlineCardsExample />
32
+ </Overlay>
33
+ </>
34
+ )
35
+
36
+ export default OverlayMultiDirectional
@@ -0,0 +1,5 @@
1
+ Optionally, you can pass multi-directional options (`x` or `y`) to the `position` key, which creates multiple overlays.
2
+
3
+ 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.
4
+
5
+ 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.