playbook_ui_docs 13.28.0 → 13.29.0.pre.alpha.PBNTR329draggablev33059

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +40 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +3 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +2 -1
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb} +3 -3
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md +2 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -1
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +53 -0
  11. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +4 -0
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +158 -0
  13. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +101 -0
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +50 -0
  15. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -0
  16. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +51 -0
  17. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +11 -0
  18. data/app/pb_kits/playbook/pb_draggable/docs/index.js +5 -0
  19. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +10 -0
  20. data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
  21. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +33 -32
  22. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
  23. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +2 -0
  24. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
  25. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
  26. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +34 -0
  27. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +2 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +51 -50
  29. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
  30. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +54 -0
  31. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +2 -0
  32. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +37 -38
  33. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +1 -0
  34. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +53 -0
  35. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +1 -0
  36. data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb} +7 -7
  37. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +76 -0
  38. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +1 -0
  39. data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
  40. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  41. data/dist/menu.yml +5 -2
  42. data/dist/playbook-doc.js +10 -10
  43. metadata +30 -10
  44. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +0 -63
  45. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +0 -52
  46. /data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_column.html.erb → _table_alignment_column_rails.html.erb} +0 -0
@@ -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.
@@ -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.
@@ -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
 
@@ -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.
@@ -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 %>
@@ -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.
@@ -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
  }
@@ -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.
@@ -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 %>
@@ -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.
@@ -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
 
@@ -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.
@@ -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
+
@@ -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.
@@ -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 %>
@@ -0,0 +1,76 @@
1
+ import React from 'react'
2
+
3
+ import Table from '../_table'
4
+ import Button from '../../pb_button/_button'
5
+
6
+ const TableOuterPadding = (props) => {
7
+ return (
8
+ <Table
9
+ outerPadding="sm"
10
+ size="sm"
11
+ {...props}
12
+ >
13
+ <thead>
14
+ <tr>
15
+ <th>{'Column 1'}</th>
16
+ <th>{'Column 2'}</th>
17
+ <th>{'Column 3'}</th>
18
+ <th>{'Column 4'}</th>
19
+ <th>{''}</th>
20
+ </tr>
21
+ </thead>
22
+ <tbody>
23
+ <tr>
24
+ <td>{'Value 1'}</td>
25
+ <td>{'Value 2'}</td>
26
+ <td>{'Value 3'}</td>
27
+ <td>{'Value 4'}</td>
28
+ <td align="right">
29
+ {' '}
30
+ <Button
31
+ onClick={() => alert('button clicked!')}
32
+ text="Action"
33
+ variant="secondary"
34
+ {...props}
35
+ />
36
+ {' '}
37
+ </td>
38
+ </tr>
39
+ <tr>
40
+ <td>{'Value 1'}</td>
41
+ <td>{'Value 2'}</td>
42
+ <td>{'Value 3'}</td>
43
+ <td>{'Value 4'}</td>
44
+ <td align="right">
45
+ {' '}
46
+ <Button
47
+ onClick={() => alert('button clicked!')}
48
+ text="Action"
49
+ variant="secondary"
50
+ {...props}
51
+ />
52
+ {' '}
53
+ </td>
54
+ </tr>
55
+ <tr>
56
+ <td>{'Value 1'}</td>
57
+ <td>{'Value 2'}</td>
58
+ <td>{'Value 3'}</td>
59
+ <td>{'Value 4'}</td>
60
+ <td align="right">
61
+ {' '}
62
+ <Button
63
+ onClick={() => alert('button clicked!')}
64
+ text="Action"
65
+ variant="secondary"
66
+ {...props}
67
+ />
68
+ {' '}
69
+ </td>
70
+ </tr>
71
+ </tbody>
72
+ </Table>
73
+ )
74
+ }
75
+
76
+ export default TableOuterPadding
@@ -0,0 +1 @@
1
+ Pass any of our spacing tokens to the `outerPadding` / `outer_padding` prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).
@@ -5,10 +5,10 @@ examples:
5
5
  - table_lg: Large
6
6
  - table_sticky: Sticky Header
7
7
  - table_header: Table Header
8
- - table_alignment_row: Row Alignment
9
- - table_alignment_column: Column Alignment
10
- - table_alignment_shift_row: Shift Row
11
- - table_alignment_shift_data: Shift Column Data
8
+ - table_alignment_row_rails: Row Alignment
9
+ - table_alignment_column_rails: Cell Alignment
10
+ - table_alignment_shift_row_rails: Row Shift
11
+ - table_alignment_shift_data_rails: Cell Shift
12
12
  - table_side_highlight: Side Highlight
13
13
  - table_container: Table Container Off
14
14
  - table_disable_hover: Disable Hover
@@ -26,7 +26,7 @@ examples:
26
26
  - table_striped: Striped Table
27
27
  - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
28
28
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
29
-
29
+ - table_outer_padding: Outer Padding
30
30
 
31
31
  react:
32
32
  - table_sm: Small
@@ -34,9 +34,9 @@ examples:
34
34
  - table_lg: Large
35
35
  - table_sticky: Sticky Header
36
36
  - table_alignment_row: Row Alignment
37
- - table_alignment_column: Column Alignment
38
- - table_alignment_shift_row: Shift Row
39
- - table_alignment_shift_data: Shift Column Data
37
+ - table_alignment_column: Cell Alignment
38
+ - table_alignment_shift_row: Row Shift
39
+ - table_alignment_shift_data: Cell Shift
40
40
  - table_side_highlight: Side Highlight
41
41
  - table_container: Table Container Off
42
42
  - table_disable_hover: Disable Hover
@@ -54,4 +54,4 @@ examples:
54
54
  - table_striped: Striped Table
55
55
  - table_with_subcomponents: Table with Sub Components (Table Elements)
56
56
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
57
-
57
+ - table_outer_padding: Outer Padding