playbook_ui 7.0.1 → 7.1.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +4 -3
  3. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -1
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  5. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
  6. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
  7. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
  8. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
  9. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
  10. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
  11. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
  12. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
  13. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
  14. data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
  15. data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
  16. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
  19. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  31. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
  33. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
  34. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
  35. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
  36. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
  37. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
  52. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
  60. data/app/pb_kits/playbook/pb_popover/index.js +3 -1
  61. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
  62. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
  63. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
  64. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
  65. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
  66. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
  67. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
  68. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
  69. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
  70. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
  71. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
  72. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
  73. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
  74. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
  76. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
  77. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
  84. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
  86. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
  87. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
  88. data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
  89. data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
  90. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
  91. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
  92. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
  93. data/app/pb_kits/playbook/pb_toggle/toggle.rb +4 -1
  94. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
  95. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
  96. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
  97. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
  105. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
  106. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
  107. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
  108. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  109. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
  110. data/app/pb_kits/playbook/react_rails_kits.js +1 -0
  111. data/app/pb_kits/playbook/vendor.js +3 -0
  112. data/lib/playbook/version.rb +1 -1
  113. metadata +32 -28
  114. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
  115. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
  116. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
  117. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
  118. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
  119. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
  120. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
  121. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
  122. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
  123. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
  124. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
  125. data/lib/generators/kit/USAGE +0 -5
  126. data/lib/generators/kit/kit_generator.rb +0 -95
  127. data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
  128. data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
  129. data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
  130. data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
  131. data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
  132. data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
  133. data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
  134. data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
  135. data/lib/generators/kit/templates/kit_scss.erb +0 -3
  136. data/lib/tasks/pb_release.rake +0 -88
  137. data/lib/tasks/playbook_tasks.rake +0 -26
@@ -0,0 +1 @@
1
+ Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm" }) do %>
2
+ <thead>
3
+ <tr>
4
+ <th>Column 1</th>
5
+ <th>Column 2</th>
6
+ <th>Column 3</th>
7
+ <th>Column 4</th>
8
+ <th></th>
9
+ </tr>
10
+ </thead>
11
+ <tbody>
12
+ <tr>
13
+ <td>Value 1</td>
14
+ <td>Value 2</td>
15
+ <td>Value 3</td>
16
+ <td>Value 4</td>
17
+ <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
18
+ </tr>
19
+ <tr>
20
+ <td>Value 1</td>
21
+ <td>Value 2</td>
22
+ <td>Value 3</td>
23
+ <td>Value 4</td>
24
+ <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
25
+ </tr>
26
+ <tr>
27
+ <td>Value 1</td>
28
+ <td>Value 2</td>
29
+ <td>Value 3</td>
30
+ <td>Value 4</td>
31
+ <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
32
+ </tr>
33
+ </tbody>
34
+ <% end %>
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+ import { Table } from '../..'
3
+ import { Button } from '../../'
4
+
5
+ const TableOneAction = () => {
6
+ return (
7
+ <Table size="sm">
8
+ <thead>
9
+ <tr>
10
+ <th>{'Column 1'}</th>
11
+ <th>{'Column 2'}</th>
12
+ <th>{'Column 3'}</th>
13
+ <th>{'Column 4'}</th>
14
+ <th>{''}</th>
15
+ </tr>
16
+ </thead>
17
+ <tbody>
18
+ <tr>
19
+ <td>{'Value 1'}</td>
20
+ <td>{'Value 2'}</td>
21
+ <td>{'Value 3'}</td>
22
+ <td>{'Value 4'}</td>
23
+ <td>
24
+ {' '}
25
+ <Button
26
+ onClick={() => alert('button clicked!')}
27
+ text="Action"
28
+ variant="secondary"
29
+ />
30
+ {' '}
31
+ </td>
32
+ </tr>
33
+ <tr>
34
+ <td>{'Value 1'}</td>
35
+ <td>{'Value 2'}</td>
36
+ <td>{'Value 3'}</td>
37
+ <td>{'Value 4'}</td>
38
+ <td>
39
+ {' '}
40
+ <Button
41
+ onClick={() => alert('button clicked!')}
42
+ text="Action"
43
+ variant="secondary"
44
+ />
45
+ {' '}
46
+ </td>
47
+ </tr>
48
+ <tr>
49
+ <td>{'Value 1'}</td>
50
+ <td>{'Value 2'}</td>
51
+ <td>{'Value 3'}</td>
52
+ <td>{'Value 4'}</td>
53
+ <td>
54
+ {' '}
55
+ <Button
56
+ onClick={() => alert('button clicked!')}
57
+ text="Action"
58
+ variant="secondary"
59
+ />
60
+ {' '}
61
+ </td>
62
+ </tr>
63
+ </tbody>
64
+ </Table>
65
+ )
66
+ }
67
+
68
+ export default TableOneAction
@@ -0,0 +1,2 @@
1
+ If there is one button on each row of the table, ideally, it should use the `secondary` variant and be placed at the end of the row
2
+
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("table", props: { size: "sm" }) do %>
2
+ <thead>
3
+ <tr>
4
+ <th>Column 1</th>
5
+ <th>Column 2</th>
6
+ <th>Column 3</th>
7
+ <th>Column 4</th>
8
+ <th></th>
9
+ </tr>
10
+ </thead>
11
+ <tbody>
12
+ <tr>
13
+ <td>Value 1</td>
14
+ <td>Value 2</td>
15
+ <td>Value 3</td>
16
+ <td>Value 4</td>
17
+ <td>
18
+ <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
19
+ <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
20
+ </td>
21
+ </tr>
22
+ <tr>
23
+ <td>Value 1</td>
24
+ <td>Value 2</td>
25
+ <td>Value 3</td>
26
+ <td>Value 4</td>
27
+ <td>
28
+ <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
29
+ <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
30
+ </td>
31
+ </tr>
32
+ <tr>
33
+ <td>Value 1</td>
34
+ <td>Value 2</td>
35
+ <td>Value 3</td>
36
+ <td>Value 4</td>
37
+ <td>
38
+ <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
39
+ <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
40
+ </td>
41
+ </tr>
42
+ </tbody>
43
+ <% end %>
@@ -0,0 +1,80 @@
1
+ import React from 'react'
2
+ import { Table } from '../..'
3
+ import { Button } from '../../'
4
+
5
+ const TableOneAction = () => {
6
+ return (
7
+ <Table size="sm">
8
+ <thead>
9
+ <tr>
10
+ <th>{'Column 1'}</th>
11
+ <th>{'Column 2'}</th>
12
+ <th>{'Column 3'}</th>
13
+ <th>{'Column 4'}</th>
14
+ <th>{''}</th>
15
+ </tr>
16
+ </thead>
17
+ <tbody>
18
+ <tr>
19
+ <td>{'Value 1'}</td>
20
+ <td>{'Value 2'}</td>
21
+ <td>{'Value 3'}</td>
22
+ <td>{'Value 4'}</td>
23
+ <td>
24
+ <Button
25
+ onClick={() => alert('button clicked!')}
26
+ paddingLeft="none"
27
+ text="Tetriary Action"
28
+ variant="link"
29
+ />
30
+ <Button
31
+ onClick={() => alert('button clicked!')}
32
+ text="Secondary Action"
33
+ variant="secondary"
34
+ />
35
+ </td>
36
+ </tr>
37
+ <tr>
38
+ <td>{'Value 1'}</td>
39
+ <td>{'Value 2'}</td>
40
+ <td>{'Value 3'}</td>
41
+ <td>{'Value 4'}</td>
42
+ <td>
43
+ <Button
44
+ onClick={() => alert('button clicked!')}
45
+ paddingLeft="none"
46
+ text="Tetriary Action"
47
+ variant="link"
48
+ />
49
+ <Button
50
+ onClick={() => alert('button clicked!')}
51
+ text="Secondary Action"
52
+ variant="secondary"
53
+ />
54
+ </td>
55
+ </tr>
56
+ <tr>
57
+ <td>{'Value 1'}</td>
58
+ <td>{'Value 2'}</td>
59
+ <td>{'Value 3'}</td>
60
+ <td>{'Value 4'}</td>
61
+ <td>
62
+ <Button
63
+ onClick={() => alert('button clicked!')}
64
+ paddingLeft="none"
65
+ text="Tetriary Action"
66
+ variant="link"
67
+ />
68
+ <Button
69
+ onClick={() => alert('button clicked!')}
70
+ text="Secondary Action"
71
+ variant="secondary"
72
+ />
73
+ </td>
74
+ </tr>
75
+ </tbody>
76
+ </Table>
77
+ )
78
+ }
79
+
80
+ export default TableOneAction
@@ -0,0 +1 @@
1
+ If there are two actions on each of the row, one should ideally one should use the `secondary` variant and the other use the `link` variant. The button using the `secondary` variant should be placed at the end.
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm" }) do %>
2
+ <thead>
3
+ <tr>
4
+ <th>Column 1</th>
5
+ <th>Column 2</th>
6
+ <th>Column 3</th>
7
+ <th>Column 4</th>
8
+ <th></th>
9
+ </tr>
10
+ </thead>
11
+ <tbody>
12
+ <tr>
13
+ <td>Value 1</td>
14
+ <td>Value 2</td>
15
+ <td>Value 3</td>
16
+ <td>Value 4</td>
17
+ <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
18
+ </tr>
19
+ <tr>
20
+ <td>Value 1</td>
21
+ <td>Value 2</td>
22
+ <td>Value 3</td>
23
+ <td>Value 4</td>
24
+ <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
25
+ </tr>
26
+ <tr>
27
+ <td>Value 1</td>
28
+ <td>Value 2</td>
29
+ <td>Value 3</td>
30
+ <td>Value 4</td>
31
+ <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
32
+ </tr>
33
+ </tbody>
34
+ <% end %>
@@ -0,0 +1,63 @@
1
+ import React from 'react'
2
+ import { Table } from '../..'
3
+ import { CircleIconButton } from '../../'
4
+
5
+ const TableTwoPlusActions = () => {
6
+ return (
7
+ <Table size="sm">
8
+ <thead>
9
+ <tr>
10
+ <th>{'Column 1'}</th>
11
+ <th>{'Column 2'}</th>
12
+ <th>{'Column 3'}</th>
13
+ <th>{'Column 4'}</th>
14
+ <th>{''}</th>
15
+ </tr>
16
+ </thead>
17
+ <tbody>
18
+ <tr>
19
+ <td>{'Value 1'}</td>
20
+ <td>{'Value 2'}</td>
21
+ <td>{'Value 3'}</td>
22
+ <td>{'Value 4'}</td>
23
+ <td>
24
+ {' '}
25
+ <CircleIconButton
26
+ icon="ellipsis-h"
27
+ variant="secondary"
28
+ />
29
+ </td>
30
+ </tr>
31
+ <tr>
32
+ <td>{'Value 1'}</td>
33
+ <td>{'Value 2'}</td>
34
+ <td>{'Value 3'}</td>
35
+ <td>{'Value 4'}</td>
36
+ <td>
37
+ {' '}
38
+ <CircleIconButton
39
+ icon="ellipsis-h"
40
+ variant="secondary"
41
+ />
42
+ </td>
43
+
44
+ </tr>
45
+ <tr>
46
+ <td>{'Value 1'}</td>
47
+ <td>{'Value 2'}</td>
48
+ <td>{'Value 3'}</td>
49
+ <td>{'Value 4'}</td>
50
+ <td>
51
+ {' '}
52
+ <CircleIconButton
53
+ icon="ellipsis-h"
54
+ variant="secondary"
55
+ />
56
+ </td>
57
+ </tr>
58
+ </tbody>
59
+ </Table>
60
+ )
61
+ }
62
+
63
+ export default TableTwoPlusActions
@@ -0,0 +1 @@
1
+ If there are more than two actions on each row, then they should be contained in secondary circle icon button with the `ellipsis-h` icon (horizontal ellipsis) at the end of the row
@@ -10,6 +10,12 @@ examples:
10
10
  - table_single_line: Force Single Line
11
11
  - table_data_table: Data Table
12
12
  - table_responsive_table: Responsive Tables
13
+ - table_one_action: Table with 1 Action
14
+ - table_two_actions: Table with 2 Actions
15
+ - table_two_plus_actions: Table with 2+ Actions
16
+ - table_action_middle: Table with Actions in the Middle
17
+ - table_icon_buttons: Table with Icon Buttons
18
+
13
19
 
14
20
  react:
15
21
  - table_sm: Small
@@ -22,3 +28,9 @@ examples:
22
28
  - table_single_line: Force Single Line
23
29
  - table_data_table: Data Table
24
30
  - table_responsive_table: Responsive Tables
31
+ - table_one_action: Table with 1 Action
32
+ - table_two_actions: Table with 2 Actions
33
+ - table_two_plus_actions: Table with 2+ Actions
34
+ - table_action_middle: Table with Actions in the Middle
35
+ - table_icon_buttons: Table with Icon Buttons
36
+
@@ -8,3 +8,9 @@ export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
8
8
  export { default as TableDisableHover } from './_table_disable_hover.jsx'
9
9
  export { default as TableSingleLine } from './_table_single_line.jsx'
10
10
  export { default as TableMultiline } from './_table_multiline.jsx'
11
+ export { default as TableOneAction } from './_table_one_action.jsx'
12
+ export { default as TableTwoActions } from './_table_two_actions.jsx'
13
+ export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
14
+ export { default as TableActionMiddle } from './_table_action_middle.jsx'
15
+ export { default as TableIconButtons } from './_table_icon_buttons.jsx'
16
+
@@ -22,14 +22,14 @@
22
22
  display: flex;
23
23
  align-items: center;
24
24
  [class*=pb_time_range_inline_arrow] {
25
- margin-left: 4px;
26
- margin-right: 4px;
25
+ margin-left: $space_xs/2;
26
+ margin-right: $space_xs/2;
27
27
  }
28
28
  [class*=pb_time_range_inline_timezone] {
29
- margin-left: 4px;
29
+ margin-left: $space_xs/2;
30
30
  }
31
31
  [class*=pb_time_range_inline_icon] {
32
- margin-right: 4px;
32
+ margin-right: $space_xs/2;
33
33
  }
34
34
  }
35
- }
35
+ }
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("toggle" , props: {
2
+ text: "Toggle with Options",
3
+ input_options: {
4
+ id: "toggle-id",
5
+ name: "toggle-name",
6
+ value: "toggle-value",
7
+ class: "toggle-class",
8
+ checked: true
9
+ }
10
+ }) %>
@@ -5,6 +5,7 @@ examples:
5
5
  - toggle_name: Name and Value
6
6
  - toggle_custom: Custom checkbox input
7
7
  - toggle_custom_radio: Custom radio inputs
8
+ - toggle_options: Toggle w/ Options
8
9
 
9
10
  react:
10
11
  - toggle_default: Default State
@@ -11,6 +11,9 @@ module Playbook
11
11
 
12
12
  partial "pb_toggle/toggle"
13
13
 
14
+ prop :input_options, type: Playbook::Props::Hash,
15
+ default: {}
16
+
14
17
  prop :checked, type: Playbook::Props::Boolean,
15
18
  default: false
16
19
  prop :name
@@ -24,7 +27,7 @@ module Playbook
24
27
  end
25
28
 
26
29
  def input
27
- check_box_tag(name, value, checked)
30
+ check_box_tag(name, value, checked, input_options)
28
31
  end
29
32
 
30
33
  private
@@ -1,25 +1,29 @@
1
- <%= content_tag(:div,
1
+ <% if object.pills %>
2
+ <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
3
+ <% else %>
4
+ <%= content_tag(:div,
2
5
  id: object.id,
3
6
  data: object.data,
4
7
  class: object.classname) do %>
5
- <div class="pb_typeahead_wrapper">
6
- <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
7
- <i class="far fa-spinner fa-spin"></i>
8
+ <div class="pb_typeahead_wrapper">
9
+ <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
10
+ <i class="far fa-spinner fa-spin"></i>
11
+ </div>
12
+ <%= pb_rails("text_input", props: {
13
+ type: "search",
14
+ label: object.label,
15
+ name: object.name,
16
+ value: object.value,
17
+ placeholder: object.placeholder
18
+ }) %>
19
+ <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
20
+ <% end %>
8
21
  </div>
9
- <%= pb_rails("text_input", props: {
10
- type: "search",
11
- label: object.label,
12
- name: object.name,
13
- value: object.value,
14
- placeholder: object.placeholder
15
- }) %>
16
- <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
17
- <% end %>
18
- </div>
19
22
 
20
- <template data-pb-typeahead-kit-result-option>
21
- <%= pb_rails("list/item") do %>
22
- <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
23
- <% end %>
24
- </template>
25
- <% end %>
23
+ <template data-pb-typeahead-kit-result-option>
24
+ <%= pb_rails("list/item") do %>
25
+ <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
26
+ <% end %>
27
+ </template>
28
+ <% end %>
29
+ <% end %>