Skip to content

Commit 5b6e950

Browse files
skduncanskduncan
authored
[PBNTR-802] Table kit: Add other collapsible/expandable row doc examples (#4163)
**What does this PR do?** A clear and concise description with your runway ticket url. As a Playbook dev, I want to add more doc examples around our collapsible/expandable rows, so that I confirm our users are setup for success when using this logic. #### Checklist: - [X] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [X] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
1 parent ec999fe commit 5b6e950

9 files changed

+204
-9
lines changed

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
88
<Card
99
borderNone
1010
borderRadius="none"
11-
color="light"
11+
color="light"
1212
paddingX="xl"
1313
paddingY="md"
1414
{...props}
1515
>
16-
<Body paddingBottom="sm"
16+
<Body paddingBottom="sm"
1717
text="Expanded Custom Layout"
1818
{...props}
1919
/>
2020
<Flex justify="between">
2121
<Image
22-
url="https://via.placeholder.com/150"
22+
size="sm"
23+
url="https://unsplash.it/500/400/?image=634"
2324
/>
2425
<Image
25-
url="https://via.placeholder.com/150"
26+
size="sm"
27+
url="https://unsplash.it/500/400/?image=634"
2628
/>
2729
<Image
28-
url="https://via.placeholder.com/150"
30+
size="sm"
31+
url="https://unsplash.it/500/400/?image=634"
2932
/>
3033
<Image
31-
url="https://via.placeholder.com/150"
34+
size="sm"
35+
url="https://unsplash.it/500/400/?image=634"
3236
/>
3337
</Flex>
3438
</Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
5256

5357
</Table.Head>
5458
<Table.Body>
55-
<Table.Row collapsible
59+
<Table.Row collapsible
5660
collapsibleContent={<Content/>}
5761
{...props}
5862
>
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
6165
<Table.Cell>{'Value 3'}</Table.Cell>
6266
<Table.Cell>{'Value 4'}</Table.Cell>
6367
<Table.Cell>{'Value 5'}</Table.Cell>
64-
<Table.Cell textAlign="right">{
68+
<Table.Cell textAlign="right">{
6569
<Icon
6670
color="primary"
6771
fixedWidth

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<% content = capture do %>
2+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3+
<%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
4+
<%= pb_rails("flex", props: { justify: "between" }) do %>
5+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
6+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
7+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
8+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
9+
<% end %>
10+
<% end %>
11+
<% end %>
12+
13+
<%= pb_rails("table", props: { size: "sm" }) do %>
14+
<%= pb_rails("table/table_head") do %>
15+
<%= pb_rails("table/table_row") do %>
16+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
17+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
18+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
19+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
20+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
21+
<%= pb_rails("table/table_header", props: { text: ""}) %>
22+
<% end %>
23+
<% end %>
24+
<%= pb_rails("table/table_body") do %>
25+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
26+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
30+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
31+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
32+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
33+
<% end %>
34+
<% end %>
35+
<%= pb_rails("table/table_row") 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: ""}) %>
42+
<% end %>
43+
<%= pb_rails("table/table_row") do %>
44+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
45+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
46+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
47+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
48+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
49+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
50+
<% end %>
51+
<% end %>
52+
<% end %>

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md‎

Whitespace-only changes.

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<% content = capture do %>
2+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
3+
<%= pb_rails("background", props: { tag: "tr" }) do %>
4+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
5+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
6+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
7+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
8+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
9+
<% end %>
10+
<% end %>
11+
<% end %>
12+
13+
<%= pb_rails("table", props: { size: "sm" }) do %>
14+
<%= pb_rails("table/table_head") do %>
15+
<%= pb_rails("table/table_row") do %>
16+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
17+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
18+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
19+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
20+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
21+
<%= pb_rails("table/table_header", props: { text: ""}) %>
22+
<% end %>
23+
<% end %>
24+
<%= pb_rails("table/table_body") do %>
25+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
26+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
30+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
31+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
32+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
33+
<% end %>
34+
<% end %>
35+
<%= pb_rails("table/table_row") 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: ""}) %>
42+
<% end %>
43+
<%= pb_rails("table/table_row") do %>
44+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
45+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
46+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
47+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
48+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
49+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
50+
<% end %>
51+
<% end %>
52+
<% end %>

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
The `collapsible_content` can display any content, including nested Table Rows.
2+
3+
Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<% content = capture do %>
2+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
3+
<%= pb_rails("table/table_head") do %>
4+
<%= pb_rails("background", props: { tag: "tr" }) do %>
5+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
6+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
7+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
8+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
9+
<% end %>
10+
<% end %>
11+
<%= pb_rails("table/table_body") do %>
12+
<%= pb_rails("table/table_row") do %>
13+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
14+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
15+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
16+
<%= pb_rails("table/table_cell") do %>
17+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
18+
<% end %>
19+
<% end %>
20+
<%= pb_rails("table/table_row") do %>
21+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
22+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
23+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
24+
<%= pb_rails("table/table_cell") do %>
25+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
26+
<% end %>
27+
<% end %>
28+
<%= pb_rails("table/table_row") do %>
29+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
30+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
31+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
32+
<%= pb_rails("table/table_cell") do %>
33+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
34+
<% end %>
35+
<% end %>
36+
<% end %>
37+
<% end %>
38+
<% end %>
39+
40+
41+
<%= pb_rails("table", props: { size: "sm" }) do %>
42+
<%= pb_rails("table/table_head") do %>
43+
<%= pb_rails("table/table_row") do %>
44+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
45+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
46+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
47+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
48+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
49+
<%= pb_rails("table/table_header", props: { text: ""}) %>
50+
<% end %>
51+
<% end %>
52+
<%= pb_rails("table/table_body") do %>
53+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
54+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
55+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
56+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
57+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
58+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
59+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
60+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
61+
<% end %>
62+
<% end %>
63+
<%= pb_rails("table/table_row") do %>
64+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
65+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
66+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
67+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
68+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
69+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
70+
<% end %>
71+
<%= pb_rails("table/table_row") do %>
72+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
73+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
74+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
75+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
76+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
77+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
78+
<% end %>
79+
<% end %>
80+
<% end %>

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
The `collapsible_content` can also be used to display nested Tables within each Row.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ examples:
3131
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
3232
- table_outer_padding: Outer Padding
3333
- table_with_collapsible: Table with Collapsible
34+
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
35+
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
36+
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
3437

3538
react:
3639
- table_sm: Small

‎playbook/app/pb_kits/playbook/pb_table/table_row.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class TableRow < Playbook::KitBase
1212
default: false
1313
prop :collapsible_content
1414
prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
15-
default: false
15+
default: true
1616

1717
def classname
1818
generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

0 commit comments

Comments
 (0)