playbook_ui 13.28.0.pre.alpha.PLAY13592980 → 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -3
  3. data/app/pb_kits/playbook/index.js +2 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  5. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +31 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +16 -0
  7. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +5 -2
  8. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +45 -0
  9. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +16 -0
  10. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +53 -0
  11. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +14 -8
  12. data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +24 -0
  13. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +7 -1
  14. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +9 -1
  15. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +10 -0
  16. data/app/pb_kits/playbook/pb_draggable/_draggable.tsx +53 -0
  17. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +92 -0
  18. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +53 -0
  19. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +159 -0
  20. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +121 -0
  21. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +9 -0
  22. data/app/pb_kits/playbook/pb_draggable/docs/index.js +3 -0
  23. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +65 -0
  24. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +54 -0
  25. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +57 -0
  26. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -2
  27. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +35 -0
  28. data/app/pb_kits/playbook/pb_icon/icon.rb +2 -3
  29. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -1
  30. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +52 -0
  31. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +16 -0
  32. data/app/pb_kits/playbook/pb_table/_table.tsx +5 -0
  33. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +33 -32
  34. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
  35. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb +33 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +2 -0
  37. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
  38. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
  39. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +34 -0
  40. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +2 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +51 -50
  42. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
  43. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +54 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +2 -0
  45. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +37 -38
  46. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +1 -0
  47. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +53 -0
  48. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +1 -0
  49. data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb} +7 -7
  50. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +76 -0
  51. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +1 -0
  52. data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
  53. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  54. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  55. data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss +21 -0
  56. data/app/pb_kits/playbook/pb_table/table.rb +14 -1
  57. data/app/pb_kits/playbook/pb_table/table.test.js +5 -1
  58. data/app/pb_kits/playbook/pb_table/table_header.html.erb +0 -2
  59. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +61 -0
  60. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  61. data/app/pb_kits/playbook/tokens/_vertical_align.scss +18 -0
  62. data/app/pb_kits/playbook/utilities/_vertical_align.scss +16 -0
  63. data/app/pb_kits/playbook/utilities/globalProps.ts +12 -1
  64. data/dist/menu.yml +5 -2
  65. data/dist/playbook-rails.js +6 -6
  66. data/lib/playbook/classnames.rb +1 -0
  67. data/lib/playbook/kit_base.rb +2 -0
  68. data/lib/playbook/version.rb +1 -1
  69. data/lib/playbook/vertical_align.rb +37 -0
  70. metadata +35 -6
  71. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +0 -34
  72. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +0 -63
  73. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +0 -52
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx CHANGED
@@ -7,39 +7,40 @@ const TableAlignmentColumn = (props) => {
7
7
  <Table
8
8
  {...props}
9
9
  >
10
- <thead>
11
- <tr>
12
- <th>{'Column 1'}</th>
13
- <th>{'Column 2'}</th>
14
- <th>{'Column 3'}</th>
15
- <th align="center">{'Rating'}</th>
16
- <th align="right">{'Money'}</th>
17
- </tr>
18
- </thead>
19
- <tbody>
20
- <tr>
21
- <td>{'Value 1'}</td>
22
- <td>{'Value 2'}</td>
23
- <td>{'Value 3'}</td>
24
- <td align="center">{'3'}</td>
25
- <td align="right">{'$57.32'}</td>
26
- </tr>
27
- <tr>
28
- <td>{'Value 1'}</td>
29
- <td>{'Value 2'}</td>
30
- <td>{'Value 3'}</td>
31
- <td align="center">{'2'}</td>
32
- <td align="right">{'$5,657.08'}</td>
33
- </tr>
34
- <tr>
35
- <td>{'Value 1'}</td>
36
- <td>{'Value 2'}</td>
37
- <td>{'Value 3'}</td>
38
- <td align="center">{'4'}</td>
39
- <td align="right">{'$358.77'}</td>
40
- </tr>
41
- </tbody>
10
+ <Table.Head>
11
+ <Table.Row>
12
+ <Table.Header>{'Column 1'}</Table.Header>
13
+ <Table.Header>{'Column 2'}</Table.Header>
14
+ <Table.Header>{'Column 3'}</Table.Header>
15
+ <Table.Header textAlign="center">{'Rating'}</Table.Header>
16
+ <Table.Header textAlign="right">{'Money'}</Table.Header>
17
+ </Table.Row>
18
+ </Table.Head>
19
+ <Table.Body>
20
+ <Table.Row>
21
+ <Table.Cell>{'Value 1'}</Table.Cell>
22
+ <Table.Cell>{'Value 2'}</Table.Cell>
23
+ <Table.Cell>{'Value 3'}</Table.Cell>
24
+ <Table.Cell textAlign="center">{'3'}</Table.Cell>
25
+ <Table.Cell textAlign="right">{'$57.32'}</Table.Cell>
26
+ </Table.Row>
27
+ <Table.Row>
28
+ <Table.Cell>{'Value 1'}</Table.Cell>
29
+ <Table.Cell>{'Value 2'}</Table.Cell>
30
+ <Table.Cell>{'Value 3'}</Table.Cell>
31
+ <Table.Cell textAlign="center">{'2'}</Table.Cell>
32
+ <Table.Cell textAlign="right">{'$5,657.08'}</Table.Cell>
33
+ </Table.Row>
34
+ <Table.Row>
35
+ <Table.Cell>{'Value 1'}</Table.Cell>
36
+ <Table.Cell>{'Value 2'}</Table.Cell>
37
+ <Table.Cell>{'Value 3'}</Table.Cell>
38
+ <Table.Cell textAlign="center">{'4'}</Table.Cell>
39
+ <Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
40
+ </Table.Row>
41
+ </Table.Body>
42
42
  </Table>
43
+
43
44
  )
44
45
  }
45
46
 
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md CHANGED
@@ -1,2 +1,2 @@
1
- You can individually align a piece of table data, but a more practical use would be applied to align a column.
1
+ Pass our `textAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
2
2
  In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb ADDED
@@ -0,0 +1,33 @@
1
+ <%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %>
2
+ <%= pb_rails("table/table_row") do %>
3
+ <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
4
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
6
+ <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center" }) %>
7
+ <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
8
+ <% end %>
9
+ <% end %>
10
+ <%= pb_rails("table/table_body") do %>
11
+ <%= pb_rails("table/table_row") do %>
12
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
17
+ <% end %>
18
+ <%= pb_rails("table/table_row") do %>
19
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
24
+ <% end %>
25
+ <%= pb_rails("table/table_row") 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: "4", text_align: "center" }) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
31
+ <% end %>
32
+ <% end %>
33
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md ADDED
@@ -0,0 +1,2 @@
1
+ Pass our `text_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
2
+ In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx CHANGED
@@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
7
7
  <Table
8
8
  {...props}
9
9
  >
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
- <tr>
21
- <td>{'Value 1'}</td>
22
- <td>{'Value 2'}</td>
23
- <td>{'Value 3'}</td>
24
- <td>{'Value 4'}</td>
25
- <td>{'Value 5'}</td>
26
- </tr>
27
- <tr align="center">
28
- <td>{'Value 1'}</td>
29
- <td>{'Value 2'}</td>
30
- <td>{'Value 3'}</td>
31
- <td>{'Value 4'}</td>
32
- <td>{'Value 5'}</td>
33
- </tr>
34
- <tr align="right">
35
- <td>{'Value 1'}</td>
36
- <td>{'Value 2'}</td>
37
- <td>{'Value 3'}</td>
38
- <td>{'Value 4'}</td>
39
- <td>{'Value 5'}</td>
40
- </tr>
41
- </tbody>
42
- </Table>
10
+ <Table.Head>
11
+ <Table.Row>
12
+ <Table.Header>{'Column 1'}</Table.Header>
13
+ <Table.Header>{'Column 2'}</Table.Header>
14
+ <Table.Header>{'Column 3'}</Table.Header>
15
+ <Table.Header>{'Column 4'}</Table.Header>
16
+ <Table.Header>{'Column 5'}</Table.Header>
17
+ </Table.Row>
18
+ </Table.Head>
19
+ <Table.Body>
20
+ <Table.Row>
21
+ <Table.Cell>{'Value 1'}</Table.Cell>
22
+ <Table.Cell>{'Value 2'}</Table.Cell>
23
+ <Table.Cell>{'Value 3'}</Table.Cell>
24
+ <Table.Cell>{'Value 4'}</Table.Cell>
25
+ <Table.Cell>{'Value 5'}</Table.Cell>
26
+ </Table.Row>
27
+ <Table.Row textAlign="center">
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.Row>
34
+ <Table.Row textAlign="right">
35
+ <Table.Cell>{'Value 1'}</Table.Cell>
36
+ <Table.Cell>{'Value 2'}</Table.Cell>
37
+ <Table.Cell>{'Value 3'}</Table.Cell>
38
+ <Table.Cell>{'Value 4'}</Table.Cell>
39
+ <Table.Cell>{'Value 5'}</Table.Cell>
40
+ </Table.Row>
41
+ </Table.Body>
42
+ </Table>
43
43
  )
44
44
  }
45
45
 
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md CHANGED
@@ -1,2 +1,2 @@
1
- This is to be used to shift the whole row.
1
+ Pass our `textAlign` global prop to any `table.row` subcomponent to change the text alignment of all cells within that row.
2
2
  The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb ADDED
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table") 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
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body") do %>
12
+ <%= pb_rails("table/table_row") do %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
17
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
18
+ <% end %>
19
+ <%= pb_rails("table/table_row", props: { text_align: "center" }) 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
+ <% end %>
26
+ <%= pb_rails("table/table_row", props: { text_align: "right" }) do %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
32
+ <% end %>
33
+ <% end %>
34
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md ADDED
@@ -0,0 +1,2 @@
1
+ Pass our `text_align` global prop to any `table/table_row` subcomponent to change the text alignment of all cells within that row.
2
+ The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx CHANGED
@@ -9,16 +9,16 @@ const TableAlignmentShiftData = (props) => {
9
9
  marginBottom="md"
10
10
  {...props}
11
11
  >
12
- <thead>
13
- <tr>
14
- <th>&nbsp;</th>
15
- <th>{'Price'}</th>
16
- </tr>
17
- </thead>
18
- <tbody>
19
- <tr>
20
- <td shift="down">{'Total'}</td>
21
- <td>
12
+ <Table.Head>
13
+ <Table.Row>
14
+ <Table.Header>&nbsp;</Table.Header>
15
+ <Table.Header>{'Price'}</Table.Header>
16
+ </Table.Row>
17
+ </Table.Head>
18
+ <Table.Body>
19
+ <Table.Row>
20
+ <Table.Cell verticalAlign="bottom">{'Total'}</Table.Cell>
21
+ <Table.Cell>
22
22
  {'$12'}
23
23
  <br />
24
24
  {'$46'}
@@ -28,50 +28,51 @@ const TableAlignmentShiftData = (props) => {
28
28
  {'-------'}
29
29
  <br />
30
30
  {'$83'}
31
- </td>
32
- </tr>
33
- </tbody>
31
+ </Table.Cell>
32
+ </Table.Row>
33
+ </Table.Body>
34
34
  </Table>
35
+
35
36
  <Table
36
37
  {...props}
37
38
  >
38
- <thead>
39
- <tr>
40
- <th>{'Espresso Drinks'}</th>
41
- <th>{'Ingredients'}</th>
42
- </tr>
43
- </thead>
44
- <tbody>
45
- <tr>
46
- <td shift="up">{'Cappuccino'}</td>
47
- <td>
48
- {'Espresso'}
49
- <br />
50
- {'Steamed Milk'}
51
- <br />
52
- {'Milk Foam'}
53
- </td>
54
- </tr>
55
- <tr>
56
- <td shift="up">{'Macchiato'}</td>
57
- <td>
58
- {'Espresso'}
59
- <br />
60
- {'Steamed Milk'}
61
- </td>
62
- </tr>
63
- <tr>
64
- <td shift="up">{'Mocha'}</td>
65
- <td>
66
- {'Espresso'}
67
- <br />
68
- {'Hot Chocolate'}
69
- <br />
70
- {'Steamed Milk'}
71
- </td>
72
- </tr>
73
- </tbody>
74
- </Table>
39
+ <Table.Head>
40
+ <Table.Row>
41
+ <Table.Header>{'Espresso Drinks'}</Table.Header>
42
+ <Table.Header>{'Ingredients'}</Table.Header>
43
+ </Table.Row>
44
+ </Table.Head>
45
+ <Table.Body>
46
+ <Table.Row>
47
+ <Table.Cell verticalAlign="top">{'Cappuccino'} </Table.Cell>
48
+ <Table.Cell>
49
+ {'Steamed Milk'}
50
+ <br />
51
+ {'Milk Foam'}
52
+ </Table.Cell>
53
+ </Table.Row>
54
+ <Table.Row>
55
+ <Table.Cell verticalAlign="top">
56
+ {'Macchiato'}
57
+ </Table.Cell>
58
+ <Table.Cell verticalAlign="top">
59
+ {'Espresso'}
60
+ <br />
61
+ {'Steamed Milk'}
62
+ </Table.Cell>
63
+ </Table.Row>
64
+ <Table.Row>
65
+ <Table.Cell>
66
+ {'Mocha'}
67
+ </Table.Cell>
68
+ <Table.Cell>
69
+ {'Hot Chocolate'}
70
+ <br />
71
+ {'Steamed Milk'}
72
+ </Table.Cell>
73
+ </Table.Row>
74
+ </Table.Body>
75
+ </Table>
75
76
  </div>
76
77
  )
77
78
  }
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md CHANGED
@@ -1,2 +1,2 @@
1
- You can individually shift a piece of table data, or shift an entire column.
1
+ Pass our `verticalAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
2
2
  The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb ADDED
@@ -0,0 +1,54 @@
1
+ <%= pb_rails("table") do %>
2
+ <%= pb_rails("table/table_head") do %>
3
+ <%= pb_rails("table/table_row") do %>
4
+ <%= pb_rails("table/table_header", props: { text: "&nbsp;" }) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Price" }) %>
6
+ <% end %>
7
+ <% end %>
8
+ <%= pb_rails("table/table_body") do %>
9
+ <%= pb_rails("table/table_row") do %>
10
+ <%= pb_rails("table/table_cell", props: { text: "Total", vertical_align: "bottom" }) %>
11
+ <%= pb_rails("table/table_cell") do %>
12
+ $12<br/>
13
+ $46<br/>
14
+ $25<br/>
15
+ -------<br/>
16
+ $83
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
20
+ <% end %>
21
+ <br/>
22
+ <%= pb_rails("table", props: { size: "sm" }) do %>
23
+ <%= pb_rails("table/table_head") do %>
24
+ <%= pb_rails("table/table_row") do %>
25
+ <%= pb_rails("table/table_header", props: { text: "Espresso Drinks" }) %>
26
+ <%= pb_rails("table/table_header", props: { text: "Ingredients" }) %>
27
+ <% end %>
28
+ <% end %>
29
+ <%= pb_rails("table/table_body") do %>
30
+ <%= pb_rails("table/table_row") do %>
31
+ <%= pb_rails("table/table_cell", props: { text: "Cappuccino", vertical_align: "top" }) %>
32
+ <%= pb_rails("table/table_cell") do %>
33
+ Espresso<br/>
34
+ Steamed Milk<br/>
35
+ Milk Foam
36
+ <% end %>
37
+ <% end %>
38
+ <%= pb_rails("table/table_row") do %>
39
+ <%= pb_rails("table/table_cell", props: { text: "Macchiato", vertical_align: "top" }) %>
40
+ <%= pb_rails("table/table_cell") do %>
41
+ Espresso<br/>
42
+ Steamed Milk
43
+ <% end %>
44
+ <% end %>
45
+ <%= pb_rails("table/table_row") do %>
46
+ <%= pb_rails("table/table_cell", props: { text: "Mocha", vertical_align: "top" }) %>
47
+ <%= pb_rails("table/table_cell") do %>
48
+ Espresso<br/>
49
+ Hot Chocolate<br/>
50
+ Steamed Milk
51
+ <% end %>
52
+ <% end %>
53
+ <% end %>
54
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md ADDED
@@ -0,0 +1,2 @@
1
+ Pass our `vertical_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
2
+ The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx CHANGED
@@ -4,60 +4,59 @@ import Table from '../_table'
4
4
 
5
5
  const TableAlignmentShiftRow = (props) => {
6
6
  return (
7
- <Table
8
- {...props}
9
- >
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
- <tr>
21
- <td>
7
+ <Table {...props}>
8
+ <Table.Head>
9
+ <Table.Row>
10
+ <Table.Header>{'Column 1'}</Table.Header>
11
+ <Table.Header>{'Column 2'}</Table.Header>
12
+ <Table.Header>{'Column 3'}</Table.Header>
13
+ <Table.Header>{'Column 4'}</Table.Header>
14
+ <Table.Header>{'Column 5'}</Table.Header>
15
+ </Table.Row>
16
+ </Table.Head>
17
+ <Table.Body>
18
+ <Table.Row>
19
+ <Table.Cell>
22
20
  {'Value 1a'}
23
21
  <br />
24
22
  {'Value 1a'}
25
23
  <br />
26
24
  {'Value 1a'}
27
- </td>
28
- <td>{'Value 2a'}</td>
29
- <td>{'Value 3a'}</td>
30
- <td>{'Value 4a'}</td>
31
- <td>{'Value 5a'}</td>
32
- </tr>
33
- <tr shift="middle">
34
- <td>
25
+ </Table.Cell>
26
+ <Table.Cell>{'Value 2a'}</Table.Cell>
27
+ <Table.Cell>{'Value 3a'}</Table.Cell>
28
+ <Table.Cell>{'Value 4a'}</Table.Cell>
29
+ <Table.Cell>{'Value 5a'}</Table.Cell>
30
+ </Table.Row>
31
+ <Table.Row verticalAlign="middle">
32
+ <Table.Cell>
35
33
  {'Value 1b'}
36
34
  <br />
37
35
  {'Value 1b'}
38
36
  <br />
39
37
  {'Value 1b'}
40
- </td>
41
- <td>{'Value 2b'}</td>
42
- <td>{'Value 3b'}</td>
43
- <td>{'Value 4b'}</td>
44
- <td>{'Value 5b'}</td>
45
- </tr>
46
- <tr shift="down">
47
- <td>
38
+ </Table.Cell>
39
+ <Table.Cell>{'Value 2b'}</Table.Cell>
40
+ <Table.Cell>{'Value 3b'}</Table.Cell>
41
+ <Table.Cell>{'Value 4b'}</Table.Cell>
42
+ <Table.Cell>{'Value 5b'}</Table.Cell>
43
+ </Table.Row>
44
+ <Table.Row verticalAlign="bottom">
45
+ <Table.Cell>
48
46
  {'Value 1c'}
49
47
  <br />
50
48
  {'Value 1c'}
51
49
  <br />
52
50
  {'Value 1c'}
53
- </td>
54
- <td>{'Value 2c'}</td>
55
- <td>{'Value 3c'}</td>
56
- <td>{'Value 4c'}</td>
57
- <td>{'Value 5c'}</td>
58
- </tr>
59
- </tbody>
51
+ </Table.Cell>
52
+ <Table.Cell>{'Value 2c'}</Table.Cell>
53
+ <Table.Cell>{'Value 3c'}</Table.Cell>
54
+ <Table.Cell>{'Value 4c'}</Table.Cell>
55
+ <Table.Cell>{'Value 5c'}</Table.Cell>
56
+ </Table.Row>
57
+ </Table.Body>
60
58
  </Table>
59
+
61
60
  )
62
61
  }
63
62
 
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md ADDED
@@ -0,0 +1 @@
1
+ Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row.
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb ADDED
@@ -0,0 +1,53 @@
1
+ <%= pb_rails("table") 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
+ <% end %>
10
+ <% end %>
11
+ <%= pb_rails("table/table_body") do %>
12
+ <%= pb_rails("table/table_row") do %>
13
+ <%= pb_rails("table/table_cell") do %>
14
+ Value 1a
15
+ <br />
16
+ Value 1a
17
+ <br />
18
+ Value 1a
19
+ <% end %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 2a" }) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 3a" }) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "Value 4a" }) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "Value 5a" }) %>
24
+ <% end %>
25
+ <%= pb_rails("table/table_row", props: { vertical_align: "middle" }) do %>
26
+ <%= pb_rails("table/table_cell") do %>
27
+ Value 1b
28
+ <br />
29
+ Value 1b
30
+ <br />
31
+ Value 1b
32
+ <% end %>
33
+ <%= pb_rails("table/table_cell", props: { text: "Value 2b" }) %>
34
+ <%= pb_rails("table/table_cell", props: { text: "Value 3b" }) %>
35
+ <%= pb_rails("table/table_cell", props: { text: "Value 4b" }) %>
36
+ <%= pb_rails("table/table_cell", props: { text: "Value 5b" }) %>
37
+ <% end %>
38
+ <%= pb_rails("table/table_row", props: { vertical_align: "bottom" }) do %>
39
+ <%= pb_rails("table/table_cell") do %>
40
+ Value 1c
41
+ <br />
42
+ Value 1c
43
+ <br />
44
+ Value 1c
45
+ <% end %>
46
+ <%= pb_rails("table/table_cell", props: { text: "Value 2c" }) %>
47
+ <%= pb_rails("table/table_cell", props: { text: "Value 3c" }) %>
48
+ <%= pb_rails("table/table_cell", props: { text: "Value 4c" }) %>
49
+ <%= pb_rails("table/table_cell", props: { text: "Value 5c" }) %>
50
+ <% end %>
51
+ <% end %>
52
+ <% end %>
53
+
data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md ADDED
@@ -0,0 +1 @@
1
+ Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row.
data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb} RENAMED
@@ -1,11 +1,11 @@
1
- <%= pb_rails("table") do %>
1
+ <%= pb_rails("table", props: { outer_padding: "sm", size: "sm" }) do %>
2
2
  <thead>
3
3
  <tr>
4
4
  <th>Column 1</th>
5
5
  <th>Column 2</th>
6
6
  <th>Column 3</th>
7
7
  <th>Column 4</th>
8
- <th>Column 5</th>
8
+ <th></th>
9
9
  </tr>
10
10
  </thead>
11
11
  <tbody>
@@ -14,21 +14,21 @@
14
14
  <td>Value 2</td>
15
15
  <td>Value 3</td>
16
16
  <td>Value 4</td>
17
- <td>Value 5</td>
17
+ <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
18
18
  </tr>
19
- <tr align="center">
19
+ <tr>
20
20
  <td>Value 1</td>
21
21
  <td>Value 2</td>
22
22
  <td>Value 3</td>
23
23
  <td>Value 4</td>
24
- <td>Value 5</td>
24
+ <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
25
25
  </tr>
26
- <tr align="right">
26
+ <tr>
27
27
  <td>Value 1</td>
28
28
  <td>Value 2</td>
29
29
  <td>Value 3</td>
30
30
  <td>Value 4</td>
31
- <td>Value 5</td>
31
+ <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
32
32
  </tr>
33
33
  </tbody>
34
34
  <% end %>