playbook_ui 13.18.0.pre.alpha.useexactnodejsversionghactions2183 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_reset.scss +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +5 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +9 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +17 -11
  6. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +29 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +18 -4
  8. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -4
  9. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +17 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +84 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +6 -1
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +49 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +68 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +1 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +3 -1
  24. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +3 -1
  25. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -2
  26. data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +42 -0
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
  29. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  32. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -1
  33. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +4 -0
  34. data/app/pb_kits/playbook/pb_form_group/form_group.rb +5 -1
  35. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +46 -0
  37. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  38. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  40. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  41. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  42. data/app/pb_kits/playbook/pb_table/styles/_div_support.scss +22 -0
  43. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  44. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  45. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  46. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  47. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  48. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  49. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  50. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  51. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  52. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +6 -6
  53. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  54. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  55. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  56. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  57. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  58. data/app/pb_kits/playbook/pb_table/table.html.erb +14 -2
  59. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  60. data/dist/menu.yml +1 -1
  61. data/dist/playbook-rails.js +3 -3
  62. data/lib/playbook/version.rb +2 -2
  63. metadata +13 -2
@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
7
7
  &.table-md,
8
8
  &.table-lg {
9
9
  &.table-dark {
10
- thead {
11
- tr {
10
+ thead, .thead {
11
+ tr, .tr {
12
12
  border-color: $border_dark !important;
13
13
 
14
- th {
14
+ th, .th {
15
15
  border-color: $border_dark !important;
16
16
  color: $text_dk_light;
17
17
  }
18
18
  }
19
19
  }
20
- tbody {
21
- tr {
20
+ tbody, .tbody {
21
+ tr, .tr {
22
22
  border-color: $border_dark;
23
23
  transition: none !important;
24
24
 
25
- td {
25
+ td, .td {
26
26
  border-color: $border_dark !important;
27
27
  color: $white;
28
28
 
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
31
31
  }
32
32
  }
33
33
  &:first-child {
34
- td {
34
+ td, .td {
35
35
  border-top-width: 0 !important;
36
36
  }
37
37
  }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
54
54
  &.table-dark {
55
55
  background: none !important;
56
56
 
57
- tbody {
58
- tr {
59
- td {
57
+ tbody, .tbody {
58
+ tr, .tr {
59
+ td, .td {
60
60
  background: $table-dark-card-bg !important;
61
61
  }
62
62
  }
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
64
64
  }
65
65
  }
66
66
  &.table-dark {
67
- tbody {
68
- tr {
69
- td {
67
+ tbody, .tbody {
68
+ tr, .tr {
69
+ td, .td {
70
70
  &:first-child {
71
71
  border-top-color: $border_dark !important;
72
72
  }
73
73
  }
74
74
  &:first-child {
75
- td {
75
+ td, .td {
76
76
  border-top-width: 1px !important;
77
77
  }
78
78
  }
@@ -10,7 +10,7 @@ $text_align_values: (
10
10
  );
11
11
 
12
12
  [class^=pb_table] {
13
- thead {
13
+ thead, .thead {
14
14
  [class^=pb_table_header_kit] {
15
15
  @each $align_name, $align_value in $text_align_values {
16
16
  &[class*=_align_#{$align_name}] {
@@ -32,7 +32,7 @@ $text_align_values: (
32
32
  }
33
33
 
34
34
  [class^=pb_table] {
35
- thead {
35
+ thead, .thead {
36
36
  [class^=pb_th_active] {
37
37
  color: $primary !important;
38
38
  }
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .tbody {
26
+ tr, .tr {
27
+ td, .td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .tbody {
78
+ tr, .tr {
79
+ td, .td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .tbody {
102
+ tr, .tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .tbody {
112
+ tr, .tr {
113
+ td, .td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -1,13 +1,12 @@
1
1
  [class^=pb_table] {
2
2
  &.vertical-border {
3
- td,
4
- th {
3
+ td, th, .td, .th {
5
4
  border-right: 1px solid $border_light !important;
6
5
  }
7
6
 
8
7
  @media screen and (min-width: $screen-xs-min) {
9
- tr:hover {
10
- td:last-child {
8
+ tr:hover, .tr:hover {
9
+ td:last-child, .td:last-child {
11
10
  border-right-color: darken($border_light, 10%) !important;
12
11
  }
13
12
  }
@@ -1,9 +1,21 @@
1
1
  <%= content_tag(:div) do %>
2
- <%= content_tag(:table,
2
+ <% if object.tag == "table" %>
3
+ <%= content_tag(:table,
3
4
  aria: object.aria,
4
5
  class: object.classname,
5
6
  data: object.data,
6
7
  id: object.id) do %>
7
- <%= content.presence %>
8
+ <%= content.presence %>
9
+ <% end %>
10
+ <% else %>
11
+ <%= content_tag(:div,
12
+ aria: object.aria,
13
+ class: object.classname,
14
+ data: object.data,
15
+ id: object.id) do %>
16
+ <%= content_tag(:div, class: "div-table") do %>
17
+ <%= content.presence %>
18
+ <% end %>
19
+ <% end %>
8
20
  <% end %>
9
21
  <% end %>
@@ -27,6 +27,9 @@ module Playbook
27
27
  default: false
28
28
  prop :striped, type: Playbook::Props::Boolean,
29
29
  default: false
30
+ prop :tag, type: Playbook::Props::Enum,
31
+ values: %w[table div],
32
+ default: "table"
30
33
 
31
34
  def classname
32
35
  generate_classname(
data/dist/menu.yml CHANGED
@@ -55,7 +55,7 @@ kits:
55
55
  - name: "advanced_table"
56
56
  platforms: *react_only
57
57
  description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
58
- status: "beta"
58
+ status: "stable"
59
59
  - name: "list"
60
60
  platforms: *web
61
61
  description: Lists display a vertical set of related content.