playbook_ui_docs 14.13.0.pre.alpha.play1834depupdatesass6024 → 14.13.0.pre.alpha.play1852reacthookformsupportradio6153
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
- data/dist/playbook-doc.js +1 -1
- metadata +18 -3
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3393153e2793cb10818f94490610143ff831b218ceec5643e6e6667532f0f1e5
|
|
4
|
+
data.tar.gz: 4c5f2d93d79ba625e0e5cde9160a0e7f14badee4db49bc35e8a4a7947fcc5bac
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3d63ba0cdad65ac4ffa2bf8f6f55699c46aa7bec7063f3fe34f780246f89197c6d8acb0965b0aa3c6d09a9b07257d2b5628613d296ea1ae44e2c51e015b71caa
|
|
7
|
+
data.tar.gz: 4976ec01cb4495e95701abf93424e4f21e516d2e42ff6f8f6b52c960d71b8d8f745352ce00b8426a546594d63d3eb29fe87e4dab9482ce6db399ee75e25346de
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Highcharts from "highcharts";
|
|
3
|
+
import HighchartsReact from "highcharts-react-official";
|
|
4
|
+
|
|
5
|
+
import "../BarGraphStyles.scss";
|
|
6
|
+
// Your path might look more like this
|
|
7
|
+
//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
|
|
8
|
+
|
|
9
|
+
const columnChartData = [
|
|
10
|
+
{
|
|
11
|
+
name: "Installation",
|
|
12
|
+
data: [1475, 200, 3000, 654, 656],
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: "Manufacturing",
|
|
16
|
+
data: [4434, 524, 2320, 440, 500],
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: "Sales & Distribution",
|
|
20
|
+
data: [3387, 743, 1344, 434, 440],
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
name: "Project Development",
|
|
24
|
+
data: [3227, 878, 999, 780, 1000],
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: "Other",
|
|
28
|
+
data: [1111, 677, 3245, 500, 200],
|
|
29
|
+
},
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
const columnOptions = {
|
|
33
|
+
chart: {
|
|
34
|
+
type: "column",
|
|
35
|
+
},
|
|
36
|
+
series: columnChartData,
|
|
37
|
+
title: {
|
|
38
|
+
text: "Solar Employment Growth by Sector, 2010-2016",
|
|
39
|
+
},
|
|
40
|
+
subtitle: {
|
|
41
|
+
text: "Source: thesolarfoundation.com",
|
|
42
|
+
},
|
|
43
|
+
xAxis: {
|
|
44
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
|
45
|
+
},
|
|
46
|
+
yAxis: {
|
|
47
|
+
min: 0,
|
|
48
|
+
title: {
|
|
49
|
+
text: "Number of Employees",
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
legend: { enabled: false },
|
|
53
|
+
credits: { enabled: false },
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const BarGraphPbStyles = () => (
|
|
57
|
+
<div>
|
|
58
|
+
<HighchartsReact highcharts={Highcharts}
|
|
59
|
+
options={columnOptions}
|
|
60
|
+
/>
|
|
61
|
+
</div>
|
|
62
|
+
)
|
|
63
|
+
|
|
64
|
+
export default BarGraphPbStyles
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.
|
|
@@ -10,3 +10,4 @@ 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
12
|
export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
|
|
13
|
+
export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
<% end %>
|
|
44
44
|
<% end %>
|
|
45
45
|
|
|
46
|
-
<%= pb_rails("
|
|
46
|
+
<%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
|
|
47
47
|
<% initial_items.each do |item| %>
|
|
48
|
-
<%= pb_rails("
|
|
48
|
+
<%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
|
|
49
49
|
<%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
|
|
50
50
|
<%= pb_rails("table/table_cell") do %>
|
|
51
51
|
<%= pb_rails("flex", props:{align:"center"}) do %>
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this
|
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
|
2
|
+
|
|
3
|
+
- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
|
|
4
|
+
- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
// Initial items to be dragged
|
|
5
|
+
const data = [
|
|
6
|
+
{
|
|
7
|
+
id: "1",
|
|
8
|
+
task: "Task 1",
|
|
9
|
+
assignee_name: "Terry Miles",
|
|
10
|
+
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
id: "2",
|
|
14
|
+
task: "Task 2",
|
|
15
|
+
assignee_name: "Sophia Miles",
|
|
16
|
+
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
id: "3",
|
|
20
|
+
task: "Task 3",
|
|
21
|
+
assignee_name: "Alice Jones",
|
|
22
|
+
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: "4",
|
|
26
|
+
task: "Task 4",
|
|
27
|
+
assignee_name: "Mike James",
|
|
28
|
+
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
id: "5",
|
|
32
|
+
task: "Task 5",
|
|
33
|
+
assignee_name: "James Guy",
|
|
34
|
+
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
const DraggableWithTableReact = (props) => {
|
|
39
|
+
const [initialState, setInitialState] = useState(data);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<>
|
|
43
|
+
<DraggableProvider initialItems={data}
|
|
44
|
+
onReorder={(items) => setInitialState(items)}
|
|
45
|
+
>
|
|
46
|
+
<Table
|
|
47
|
+
responsive="none"
|
|
48
|
+
size="sm"
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
<Table.Head>
|
|
52
|
+
<Table.Row>
|
|
53
|
+
<Table.Header>{"id"}</Table.Header>
|
|
54
|
+
<Table.Header>{"name"}</Table.Header>
|
|
55
|
+
<Table.Header>{"task number"}</Table.Header>
|
|
56
|
+
</Table.Row>
|
|
57
|
+
</Table.Head>
|
|
58
|
+
<Table.Body draggableContainer>
|
|
59
|
+
{initialState.map(({ id, task, assignee_name, assignee_img }) => (
|
|
60
|
+
<Table.Row
|
|
61
|
+
dragId={id}
|
|
62
|
+
draggableItem
|
|
63
|
+
key={id}
|
|
64
|
+
>
|
|
65
|
+
<Table.Cell>{id}</Table.Cell>
|
|
66
|
+
<Table.Cell>
|
|
67
|
+
<Flex align="center">
|
|
68
|
+
<Avatar
|
|
69
|
+
imageUrl={assignee_img}
|
|
70
|
+
size="xs"
|
|
71
|
+
/>
|
|
72
|
+
<Body
|
|
73
|
+
paddingLeft="xxs"
|
|
74
|
+
text={assignee_name}
|
|
75
|
+
{...props}
|
|
76
|
+
/>
|
|
77
|
+
</Flex>
|
|
78
|
+
</Table.Cell>
|
|
79
|
+
<Table.Cell>{task}</Table.Cell>
|
|
80
|
+
</Table.Row>
|
|
81
|
+
))}
|
|
82
|
+
</Table.Body>
|
|
83
|
+
</Table>
|
|
84
|
+
</DraggableProvider>
|
|
85
|
+
</>
|
|
86
|
+
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export default DraggableWithTableReact;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
|
2
|
+
|
|
3
|
+
- Wrap the Table with the `DraggableProvider` and manage state as shown.
|
|
4
|
+
- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
|
|
5
|
+
- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
|
|
@@ -4,7 +4,9 @@ examples:
|
|
|
4
4
|
- draggable_with_list: Draggable with List Kit
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
|
+
- draggable_with_table_react: Draggable with Table
|
|
7
8
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
9
|
+
|
|
8
10
|
rails:
|
|
9
11
|
- draggable_default_rails: Default
|
|
10
12
|
- draggable_with_list_rails: Draggable with List Kit
|
|
@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
|
|
|
2
2
|
export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
|
|
3
3
|
export { default as DraggableWithList } from './_draggable_with_list.jsx'
|
|
4
4
|
export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
|
|
5
|
-
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
|
5
|
+
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
|
6
|
+
export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { align: "center"}) do %>
|
|
2
|
+
<%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
6
|
+
<%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
10
|
+
<%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
|
|
14
|
+
<%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
18
|
+
<%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
22
|
+
<%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
26
|
+
<%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
|
|
27
|
+
<% end %>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { useForm } from "react-hook-form"
|
|
3
|
+
import { Radio, Flex, Body } from "playbook-ui"
|
|
4
|
+
|
|
5
|
+
const RadioReactHook = () => {
|
|
6
|
+
const { register, watch } = useForm({
|
|
7
|
+
defaultValues: {
|
|
8
|
+
size: "Small",
|
|
9
|
+
},
|
|
10
|
+
})
|
|
11
|
+
|
|
12
|
+
const selectedSize = watch("size", "Small")
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Flex orientation="row">
|
|
16
|
+
<Flex
|
|
17
|
+
align="start"
|
|
18
|
+
orientation="column"
|
|
19
|
+
paddingRight="lg"
|
|
20
|
+
>
|
|
21
|
+
<Radio
|
|
22
|
+
alignment="left"
|
|
23
|
+
label="Small"
|
|
24
|
+
marginBottom='sm'
|
|
25
|
+
name="size"
|
|
26
|
+
value="Small"
|
|
27
|
+
{...register("size")}
|
|
28
|
+
/>
|
|
29
|
+
<br />
|
|
30
|
+
<Radio
|
|
31
|
+
alignment="left"
|
|
32
|
+
label="Medium"
|
|
33
|
+
marginBottom='sm'
|
|
34
|
+
name="size"
|
|
35
|
+
value="Medium"
|
|
36
|
+
{...register("size")}
|
|
37
|
+
/>
|
|
38
|
+
<br />
|
|
39
|
+
<Radio
|
|
40
|
+
alignment="left"
|
|
41
|
+
label="Large"
|
|
42
|
+
marginBottom='sm'
|
|
43
|
+
name="size"
|
|
44
|
+
value="Large"
|
|
45
|
+
{...register("size")}
|
|
46
|
+
/>
|
|
47
|
+
</Flex>
|
|
48
|
+
<Flex
|
|
49
|
+
align="start"
|
|
50
|
+
orientation="column"
|
|
51
|
+
>
|
|
52
|
+
<Body
|
|
53
|
+
text={`Selected Size: ${selectedSize}`}
|
|
54
|
+
/>
|
|
55
|
+
</Flex>
|
|
56
|
+
</Flex>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default RadioReactHook
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
You can pass react hook props to the radio kit.
|
|
@@ -16,6 +16,7 @@ examples:
|
|
|
16
16
|
- radio_alignment: Alignment
|
|
17
17
|
- radio_disabled: Disabled
|
|
18
18
|
- radio_custom_children: Custom Children
|
|
19
|
+
- radio_react_hook: React Hook Form
|
|
19
20
|
|
|
20
21
|
swift:
|
|
21
22
|
- radio_default_swift: Default
|
|
@@ -26,4 +27,4 @@ examples:
|
|
|
26
27
|
- radio_spacing_swift: Spacing
|
|
27
28
|
- radio_padding_swift: Padding
|
|
28
29
|
- radio_subtitle_swift: Subtitle
|
|
29
|
-
- radio_props_swift: ""
|
|
30
|
+
- radio_props_swift: ""
|
|
@@ -4,3 +4,4 @@ export { default as RadioError } from './_radio_error.jsx'
|
|
|
4
4
|
export { default as RadioAlignment } from './_radio_alignment.jsx'
|
|
5
5
|
export { default as RadioDisabled } from './_radio_disabled.jsx'
|
|
6
6
|
export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
|
|
7
|
+
export { default as RadioReactHook } from './_radio_react_hook.jsx'
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head") do %>
|
|
3
|
+
<%= pb_rails("table/table_row") do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "" }) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
|
13
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
18
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
19
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
20
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
31
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
|
|
35
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
42
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Icon } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithClickableRows = (props) => {
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<Table
|
|
9
|
+
size="sm"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<Table.Head>
|
|
13
|
+
<Table.Row>
|
|
14
|
+
<Table.Header>{"Column 1"}</Table.Header>
|
|
15
|
+
<Table.Header>{"Column 2"}</Table.Header>
|
|
16
|
+
<Table.Header>{"Column 3"}</Table.Header>
|
|
17
|
+
<Table.Header>{"Column 4"}</Table.Header>
|
|
18
|
+
<Table.Header>{"Column 5"}</Table.Header>
|
|
19
|
+
<Table.Header>{""}</Table.Header>
|
|
20
|
+
</Table.Row>
|
|
21
|
+
</Table.Head>
|
|
22
|
+
<Table.Body>
|
|
23
|
+
<Table.Row
|
|
24
|
+
cursor="pointer"
|
|
25
|
+
htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
|
|
26
|
+
{...props}
|
|
27
|
+
>
|
|
28
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
29
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
30
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
31
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
32
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
33
|
+
<Table.Cell textAlign="right">
|
|
34
|
+
<Icon
|
|
35
|
+
color="primary_action"
|
|
36
|
+
fixedWidth
|
|
37
|
+
icon="chevron-right"
|
|
38
|
+
size="xs"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</Table.Cell>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
<Table.Row
|
|
44
|
+
cursor="pointer"
|
|
45
|
+
htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
|
|
46
|
+
{...props}
|
|
47
|
+
>
|
|
48
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
49
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
50
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
51
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
52
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
53
|
+
<Table.Cell textAlign="right">
|
|
54
|
+
<Icon
|
|
55
|
+
color="primary_action"
|
|
56
|
+
fixedWidth
|
|
57
|
+
icon="chevron-right"
|
|
58
|
+
size="xs"
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
</Table.Cell>
|
|
62
|
+
</Table.Row>
|
|
63
|
+
<Table.Row
|
|
64
|
+
cursor="pointer"
|
|
65
|
+
htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
|
|
66
|
+
{...props}
|
|
67
|
+
>
|
|
68
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
69
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
70
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
71
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
72
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
73
|
+
<Table.Cell textAlign="right">
|
|
74
|
+
<Icon
|
|
75
|
+
color="primary_action"
|
|
76
|
+
fixedWidth
|
|
77
|
+
icon="chevron-right"
|
|
78
|
+
size="xs"
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</Table.Cell>
|
|
82
|
+
</Table.Row>
|
|
83
|
+
</Table.Body>
|
|
84
|
+
</Table>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default TableWithClickableRows
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
+
<%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
8
|
+
<%= pb_rails("table/table_head") do %>
|
|
9
|
+
<%= pb_rails("table/table_row") do %>
|
|
10
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
11
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
12
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
13
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
14
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
15
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("table/table_body") do %>
|
|
19
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
|
|
26
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
33
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
34
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
35
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
|
|
36
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
|
|
46
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% end %>
|
|
50
|
+
<% end %>
|
|
51
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
|
|
2
|
+
__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
|