playbook_ui_docs 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.play1662cssbargraph5200

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx +60 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md +1 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx +74 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  8. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +8 -0
  9. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +9 -0
  10. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md +1 -0
  11. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb +10 -0
  12. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +42 -0
  13. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md +3 -0
  14. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +2 -0
  15. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md +3 -0
  17. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb +9 -0
  18. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -0
  19. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb +7 -0
  20. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb +119 -0
  22. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +10 -2
  23. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb +15 -0
  24. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +6 -2
  25. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md +3 -0
  26. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb +3 -0
  27. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb +63 -0
  28. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +11 -3
  29. data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +7 -2
  30. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +88 -0
  31. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +3 -0
  32. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -0
  34. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +4 -1
  35. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +87 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +5 -0
  37. data/dist/playbook-doc.js +1 -1
  38. metadata +25 -4
  39. /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_border_radius.md → _skeleton_loading_border_radius_react.md} +0 -0
  40. /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_height_width.md → _skeleton_loading_height_width_react.md} +0 -0
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx ADDED
@@ -0,0 +1,88 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableStickyColumns = () => {
5
+ return (
6
+ <Table
7
+ responsive="scroll"
8
+ size="md"
9
+ stickyLeftColumn={["a"]}
10
+ stickyRightColumn={["b"]}
11
+ >
12
+ <thead>
13
+ <tr>
14
+ <th id="a">{'Column 1'}</th>
15
+ <th>{'Column 2'}</th>
16
+ <th>{'Column 3'}</th>
17
+ <th>{'Column 4'}</th>
18
+ <th>{'Column 5'}</th>
19
+ <th>{'Column 6'}</th>
20
+ <th>{'Column 7'}</th>
21
+ <th>{'Column 8'}</th>
22
+ <th>{'Column 9'}</th>
23
+ <th>{'Column 10'}</th>
24
+ <th>{'Column 11'}</th>
25
+ <th>{'Column 12'}</th>
26
+ <th>{'Column 13'}</th>
27
+ <th>{'Column 14'}</th>
28
+ <th id="b">{'Column 15'}</th>
29
+ </tr>
30
+ </thead>
31
+ <tbody>
32
+ <tr>
33
+ <td id="a">{'Value 1'}</td>
34
+ <td>{'Value 2'}</td>
35
+ <td>{'Value 3'}</td>
36
+ <td>{'Value 4'}</td>
37
+ <td>{'Value 5'}</td>
38
+ <td>{'Value 6'}</td>
39
+ <td>{'Value 7'}</td>
40
+ <td>{'Value 8'}</td>
41
+ <td>{'Value 9'}</td>
42
+ <td>{'Value 10'}</td>
43
+ <td>{'Value 11'}</td>
44
+ <td>{'Value 12'}</td>
45
+ <td>{'Value 13'}</td>
46
+ <td>{'Value 14'}</td>
47
+ <td id="b">{'Value 15'}</td>
48
+ </tr>
49
+ <tr>
50
+ <td id="a">{'Value 1'}</td>
51
+ <td>{'Value 2'}</td>
52
+ <td>{'Value 3'}</td>
53
+ <td>{'Value 4'}</td>
54
+ <td>{'Value 5'}</td>
55
+ <td>{'Value 6'}</td>
56
+ <td>{'Value 7'}</td>
57
+ <td>{'Value 8'}</td>
58
+ <td>{'Value 9'}</td>
59
+ <td>{'Value 10'}</td>
60
+ <td>{'Value 11'}</td>
61
+ <td>{'Value 12'}</td>
62
+ <td>{'Value 13'}</td>
63
+ <td>{'Value 14'}</td>
64
+ <td id="b">{'Value 15'}</td>
65
+ </tr>
66
+ <tr>
67
+ <td id="a">{'Value 1'}</td>
68
+ <td>{'Value 2'}</td>
69
+ <td>{'Value 3'}</td>
70
+ <td>{'Value 4'}</td>
71
+ <td>{'Value 5'}</td>
72
+ <td>{'Value 6'}</td>
73
+ <td>{'Value 7'}</td>
74
+ <td>{'Value 8'}</td>
75
+ <td>{'Value 9'}</td>
76
+ <td>{'Value 10'}</td>
77
+ <td>{'Value 11'}</td>
78
+ <td>{'Value 12'}</td>
79
+ <td>{'Value 13'}</td>
80
+ <td>{'Value 14'}</td>
81
+ <td id="b">{'Value 15'}</td>
82
+ </tr>
83
+ </tbody>
84
+ </Table>
85
+ )
86
+ }
87
+
88
+ export default TableStickyColumns
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md ADDED
@@ -0,0 +1,3 @@
1
+ The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
2
+
3
+ Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx CHANGED
@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
6
6
  <Table
7
7
  responsive="scroll"
8
8
  size="md"
9
- stickyLeftcolumn={["1", "2", "3"]}
9
+ stickyLeftColumn={["1", "2", "3"]}
10
10
  >
11
11
  <thead>
12
12
  <tr>
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md CHANGED
@@ -1 +1,3 @@
1
1
  The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
+
3
+ Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md CHANGED
@@ -1,2 +1,5 @@
1
1
  The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
2
+
3
+ If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
4
+
5
+ Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx ADDED
@@ -0,0 +1,87 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableStickyRightColumns = () => {
5
+ return (
6
+ <Table
7
+ responsive="scroll"
8
+ size="md"
9
+ stickyRightColumn={["13", "14", "15"]}
10
+ >
11
+ <thead>
12
+ <tr>
13
+ <th>{'Column 1'}</th>
14
+ <th>{'Column 2'}</th>
15
+ <th>{'Column 3'}</th>
16
+ <th>{'Column 4'}</th>
17
+ <th>{'Column 5'}</th>
18
+ <th>{'Column 6'}</th>
19
+ <th>{'Column 7'}</th>
20
+ <th>{'Column 8'}</th>
21
+ <th>{'Column 9'}</th>
22
+ <th>{'Column 10'}</th>
23
+ <th>{'Column 11'}</th>
24
+ <th>{'Column 12'}</th>
25
+ <th id="13">{'Column 13'}</th>
26
+ <th id="14">{'Column 14'}</th>
27
+ <th id="15">{'Column 15'}</th>
28
+ </tr>
29
+ </thead>
30
+ <tbody>
31
+ <tr>
32
+ <td>{'Value 1'}</td>
33
+ <td>{'Value 2'}</td>
34
+ <td>{'Value 3'}</td>
35
+ <td>{'Value 4'}</td>
36
+ <td>{'Value 5'}</td>
37
+ <td>{'Value 6'}</td>
38
+ <td>{'Value 7'}</td>
39
+ <td>{'Value 8'}</td>
40
+ <td>{'Value 9'}</td>
41
+ <td>{'Value 10'}</td>
42
+ <td>{'Value 11'}</td>
43
+ <td>{'Value 12'}</td>
44
+ <td id="13">{'Value 13'}</td>
45
+ <td id="14">{'Value 14'}</td>
46
+ <td id="15">{'Value 15'}</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>{'Value 5'}</td>
54
+ <td>{'Value 6'}</td>
55
+ <td>{'Value 7'}</td>
56
+ <td>{'Value 8'}</td>
57
+ <td>{'Value 9'}</td>
58
+ <td>{'Value 10'}</td>
59
+ <td>{'Value 11'}</td>
60
+ <td>{'Value 12'}</td>
61
+ <td id="13">{'Value 13'}</td>
62
+ <td id="14">{'Value 14'}</td>
63
+ <td id="15">{'Value 15'}</td>
64
+ </tr>
65
+ <tr>
66
+ <td>{'Value 1'}</td>
67
+ <td>{'Value 2'}</td>
68
+ <td>{'Value 3'}</td>
69
+ <td>{'Value 4'}</td>
70
+ <td>{'Value 5'}</td>
71
+ <td>{'Value 6'}</td>
72
+ <td>{'Value 7'}</td>
73
+ <td>{'Value 8'}</td>
74
+ <td>{'Value 9'}</td>
75
+ <td>{'Value 10'}</td>
76
+ <td>{'Value 11'}</td>
77
+ <td>{'Value 12'}</td>
78
+ <td id="13">{'Value 13'}</td>
79
+ <td id="14">{'Value 14'}</td>
80
+ <td id="15">{'Value 15'}</td>
81
+ </tr>
82
+ </tbody>
83
+ </Table>
84
+ )
85
+ }
86
+
87
+ export default TableStickyRightColumns
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md ADDED
@@ -0,0 +1,5 @@
1
+ The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
+
3
+ If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
4
+
5
+ Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.