playbook_ui 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 (111) 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_advanced_table/advanced_table.html.erb +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +40 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +3 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +14 -4
  11. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +10 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +34 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +31 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +31 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +16 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +2 -1
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb} +3 -3
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -1
  23. data/app/pb_kits/playbook/pb_card/_card.scss +5 -0
  24. data/app/pb_kits/playbook/pb_card/_card.tsx +56 -9
  25. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +2 -1
  26. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +1 -2
  27. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +9 -3
  28. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +45 -0
  29. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +24 -1
  30. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +53 -0
  31. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +14 -8
  32. data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +24 -0
  33. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +7 -1
  34. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +9 -1
  35. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +13 -0
  36. data/app/pb_kits/playbook/pb_draggable/_draggable.tsx +53 -0
  37. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +92 -0
  38. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +53 -0
  39. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +4 -0
  40. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +158 -0
  41. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +101 -0
  42. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +50 -0
  43. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -0
  44. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +51 -0
  45. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +11 -0
  46. data/app/pb_kits/playbook/pb_draggable/docs/index.js +5 -0
  47. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +63 -0
  48. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +54 -0
  49. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +57 -0
  50. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +10 -0
  51. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -2
  52. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +4 -1
  53. data/app/pb_kits/playbook/pb_gauge/gauge.rb +6 -1
  54. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +35 -0
  55. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -2
  56. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +8 -2
  57. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +52 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +22 -1
  59. data/app/pb_kits/playbook/pb_list/_list.tsx +43 -2
  60. data/app/pb_kits/playbook/pb_list/_list_item.tsx +46 -10
  61. data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
  62. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -0
  63. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +30 -32
  64. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +0 -2
  65. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +35 -28
  66. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +5 -1
  67. data/app/pb_kits/playbook/pb_table/_table.tsx +5 -0
  68. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +33 -32
  69. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
  70. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +2 -0
  71. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
  72. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
  73. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +34 -0
  74. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +2 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +51 -50
  76. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
  77. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +54 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +2 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +37 -38
  80. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +1 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +53 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +1 -0
  83. data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb} +7 -7
  84. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +76 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +1 -0
  86. data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
  87. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  88. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  89. data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss +21 -0
  90. data/app/pb_kits/playbook/pb_table/table.rb +14 -1
  91. data/app/pb_kits/playbook/pb_table/table.test.js +5 -1
  92. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -0
  93. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +12 -9
  94. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +61 -0
  95. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +6 -1
  96. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  97. data/app/pb_kits/playbook/tokens/_vertical_align.scss +18 -0
  98. data/app/pb_kits/playbook/utilities/_vertical_align.scss +16 -0
  99. data/app/pb_kits/playbook/utilities/globalProps.ts +12 -1
  100. data/dist/menu.yml +5 -2
  101. data/dist/playbook-rails.js +7 -7
  102. data/lib/playbook/classnames.rb +1 -0
  103. data/lib/playbook/forms/builder/dropdown_field.rb +14 -0
  104. data/lib/playbook/forms/builder.rb +1 -0
  105. data/lib/playbook/kit_base.rb +2 -0
  106. data/lib/playbook/version.rb +2 -2
  107. data/lib/playbook/vertical_align.rb +37 -0
  108. metadata +49 -10
  109. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +0 -63
  110. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +0 -52
  111. /data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_column.html.erb → _table_alignment_column_rails.html.erb} +0 -0
@@ -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
@@ -24,3 +24,4 @@ export { default as TableStriped } from './_table_striped.jsx'
24
24
  export { default as TableDiv } from './_table_div.jsx'
25
25
  export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
26
26
  export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
27
+ export { default as TableOuterPadding } from './_table_outer_padding.jsx'
@@ -19,3 +19,4 @@
19
19
  @import "vertical_border";
20
20
  @import "table_header";
21
21
  @import "striped";
22
+ @import "outer_padding";
@@ -0,0 +1,21 @@
1
+ @import "../../tokens/spacing";
2
+
3
+ [class^=pb_table] {
4
+ @each $name, $value in $spaces {
5
+ &.outer_padding_#{$name} {
6
+ td:first-child,
7
+ th:first-child,
8
+ .pb_table_td:first-child,
9
+ .pb_table_th:first-child {
10
+ padding-left: #{$value} !important;
11
+ }
12
+
13
+ td:last-child,
14
+ th:last-child,
15
+ .pb_table_td:last-child,
16
+ .pb_table_th:last-child {
17
+ padding-right: #{$value} !important;
18
+ }
19
+ }
20
+ }
21
+ }
@@ -30,12 +30,16 @@ module Playbook
30
30
  prop :tag, type: Playbook::Props::Enum,
31
31
  values: %w[table div],
32
32
  default: "table"
33
+ prop :outer_padding, type: Playbook::Props::Enum,
34
+ values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
35
+ default: nil
33
36
 
34
37
  def classname
35
38
  generate_classname(
36
39
  "pb_table", "table-#{size}", single_line_class, dark_class,
37
40
  disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
38
- vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
41
+ vertical_border_class, striped_class, outer_padding_class,
42
+ "table-responsive-#{responsive}", separator: " "
39
43
  )
40
44
  end
41
45
 
@@ -76,6 +80,15 @@ module Playbook
76
80
  def vertical_border_class
77
81
  vertical_border ? "vertical-border" : nil
78
82
  end
83
+
84
+ def outer_padding_class
85
+ if outer_padding.nil?
86
+ outer_padding
87
+ else
88
+ space_css_name = outer_padding != "none" ? "space_" : ""
89
+ outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
90
+ end
91
+ end
79
92
  end
80
93
  end
81
94
  end
@@ -52,7 +52,6 @@ const TableTagTable = () => {
52
52
  );
53
53
  };
54
54
 
55
-
56
55
  const props = {
57
56
  data: { testid: "table" },
58
57
  sticky: false
@@ -161,3 +160,8 @@ test("Renders Table.Cell subkit for HTML Table elements Table", () => {
161
160
  expect(head).toBeInTheDocument()
162
161
  expect(head.tagName).toBe("TD")
163
162
  })
163
+
164
+ test("Should have outerPadding class", () => {
165
+ const kit = renderKit(Table, props, { outerPadding: "sm" })
166
+ expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
167
+ })
@@ -58,6 +58,7 @@ export default class PbTooltip extends PbEnhancedElement {
58
58
 
59
59
  this.popper = createPopper(trigger, this.tooltip, {
60
60
  placement: this.position,
61
+ strategy: 'fixed',
61
62
  modifiers: [
62
63
  {
63
64
  name: 'offset',