playbook_ui 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

Sign up to get free protection for your applications and to get access to all the features.
Files changed (164) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +5 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +5 -1
  6. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +0 -16
  7. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -16
  8. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_avatar/avatar.rb +0 -4
  10. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +0 -47
  11. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +66 -46
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +29 -8
  13. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +33 -13
  14. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +67 -48
  15. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  16. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  17. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +6 -1
  18. data/app/pb_kits/playbook/pb_badge/badge.html.erb +6 -1
  19. data/app/pb_kits/playbook/pb_body/_body.scss +0 -3
  20. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +1 -1
  21. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +3 -4
  22. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +6 -1
  23. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
  24. data/app/pb_kits/playbook/pb_card/_card.scss +1 -1
  25. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -5
  26. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  27. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +0 -20
  28. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -41
  29. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  30. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  31. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  32. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  33. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +6 -1
  34. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +10 -21
  35. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +75 -3
  36. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +6 -1
  37. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +6 -1
  38. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +6 -1
  39. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -7
  40. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -3
  41. data/app/pb_kits/playbook/pb_collapsible/index.js +6 -16
  42. data/app/pb_kits/playbook/pb_contact/contact.html.erb +6 -1
  43. data/app/pb_kits/playbook/pb_currency/currency.html.erb +6 -1
  44. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +6 -1
  45. data/app/pb_kits/playbook/pb_date/date.html.erb +6 -1
  46. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +5 -1
  47. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +1 -4
  48. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +5 -1
  49. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +5 -1
  50. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +0 -7
  51. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +6 -1
  52. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +0 -6
  53. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +6 -1
  54. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +5 -1
  55. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +0 -4
  56. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +1 -1
  57. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +3 -3
  58. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -6
  59. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +6 -5
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  62. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb} +3 -3
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +6 -5
  64. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display_rails.html.erb → _dropdown_with_custom_display.html.erb} +6 -11
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +3 -6
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  67. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options_rails.html.erb → _dropdown_with_custom_options.html.erb} +11 -16
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +2 -5
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  72. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger_rails.html.erb → _dropdown_with_custom_trigger.html.erb} +11 -16
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +2 -5
  74. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  75. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  76. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  77. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  78. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +0 -1
  79. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -1
  80. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -1
  81. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +9 -3
  82. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +6 -2
  83. data/app/pb_kits/playbook/pb_dropdown/index.js +1 -2
  84. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +14 -6
  85. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -9
  86. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +6 -1
  87. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  88. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  89. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +0 -15
  90. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +6 -1
  91. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +6 -1
  92. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +6 -1
  93. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +6 -1
  94. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +6 -1
  95. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +5 -1
  96. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +6 -6
  97. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +6 -1
  98. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -1
  99. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -1
  100. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +6 -1
  101. data/app/pb_kits/playbook/pb_person/person.html.erb +6 -1
  102. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +6 -1
  103. data/app/pb_kits/playbook/pb_pill/pill.html.erb +6 -1
  104. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +6 -1
  105. data/app/pb_kits/playbook/pb_select/_select.scss +0 -8
  106. data/app/pb_kits/playbook/pb_source/source.html.erb +5 -1
  107. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +5 -1
  108. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +5 -1
  109. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -19
  110. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +5 -1
  111. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +5 -1
  112. data/app/pb_kits/playbook/pb_timeline/item.html.erb +5 -1
  113. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +5 -1
  114. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +6 -1
  115. data/app/pb_kits/playbook/pb_title/_title.scss +1 -5
  116. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +6 -1
  117. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +5 -1
  118. data/app/pb_kits/playbook/pb_tooltip/index.js +0 -1
  119. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +6 -1
  120. data/app/pb_kits/playbook/tokens/_titles.scss +1 -5
  121. data/dist/menu.yml +2 -2
  122. data/dist/playbook-rails.js +5 -5
  123. data/lib/playbook/forms/builder.rb +0 -1
  124. data/lib/playbook/kit_base.rb +1 -1
  125. data/lib/playbook/version.rb +1 -1
  126. metadata +6 -44
  127. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +0 -3
  128. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +0 -3
  129. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +0 -92
  130. data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb +0 -15
  131. data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb +0 -37
  132. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +0 -72
  133. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +0 -3
  134. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +0 -19
  135. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +0 -3
  136. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +0 -73
  137. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.md +0 -3
  138. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb +0 -20
  139. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.md +0 -3
  140. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md +0 -61
  141. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md +0 -11
  142. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md +0 -32
  143. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md +0 -17
  144. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md +0 -19
  145. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md +0 -10
  146. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md +0 -17
  147. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md +0 -39
  148. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md +0 -39
  149. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md +0 -15
  150. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md +0 -78
  151. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default_swift.md +0 -20
  152. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_props_swift.md +0 -6
  153. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +0 -6
  154. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +0 -5
  155. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +0 -1
  156. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +0 -1
  157. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md +0 -23
  158. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md +0 -7
  159. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md +0 -9
  160. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md +0 -22
  161. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md +0 -9
  162. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md +0 -62
  163. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md +0 -8
  164. data/lib/playbook/forms/builder/phone_number_field.rb +0 -12
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 84d66eed5b978ecd745e826ec17f388a4dbe57dfa989b153aca53faf75cded75
4
- data.tar.gz: 5b9618559b5d5a6dd1ddae3523df8e9f8e690af6ac0e0cd711ccc6bb41756601
3
+ metadata.gz: 2c75da57f5a97adfc38df188be0c6a4de3e10c2577d811d1d47a491b4074e77c
4
+ data.tar.gz: 6c33e4eb580a12b2de7301c97fc447b2c003e87d95ce192f9b56116eef84edce
5
5
  SHA512:
6
- metadata.gz: 605001caf6eb9108ec8456543bebb0123a7897a3a9c60a708db790712ddcbdd2ad064ae8520c80fd4eb545b61cbb11e53f06e338ddff87a85f766cb9db69c290
7
- data.tar.gz: ac4df765d7761099f29b4e7c57d538473f52e6b0b0727e8e5783abcbfeee2cbf4e28a8c1bca55ac5f8ef98ad29550308ff339ab3f39b47713e1bee52b2721d95
6
+ metadata.gz: 2f0e697e201ac42ec4d36612b22c5891b877f25b2bf60ed86000023a5baca4fe18b4abae54fa9a0c133455c4a4383dfea7ec39ea3926ed38a728a5d86b2d369f
7
+ data.tar.gz: 26064871c9351cb46067a246824f534267328937e7de3bc47c38f9b891135e1ca8ecad0b1650f42f282e9b85ba8861ed1b950fa7d73988b70d609d5eb6124429
@@ -1,4 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
2
6
  <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
3
7
  <% if content.present? %>
4
8
  <% content.presence %>
@@ -1,4 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
2
6
  <% object.table_data.each do |row| %>
3
7
  <%= render_row_and_children(row, object.column_definitions) %>
4
8
  <% end %>
@@ -1,4 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
2
6
  <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
3
7
  <% object.column_definitions.each_with_index do |item, index| %>
4
8
  <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
@@ -1,4 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
2
6
  <% object.column_definitions.each_with_index do |column, index| %>
3
7
  <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
4
8
  <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
@@ -9,10 +9,6 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
9
9
  'bottom-left': { bottom: 'xs', left: 'xs' },
10
10
  'top-left': { top: 'xs', left: 'xs' },
11
11
  'bottom-right': { bottom: 'xs', right: 'xs' },
12
- 'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
13
- 'top-center': { top: "xs", className: "overlay_top_center" },
14
- 'left-center': { left: "sm", className: "overlay_left_center" },
15
- 'right-center': { right: "sm", className: "overlay_right_center" }
16
12
  };
17
13
  break;
18
14
 
@@ -22,10 +18,6 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
22
18
  'bottom-left': { bottom: '0', left: 'xs' },
23
19
  'top-left': { top: '0', left: 'xs' },
24
20
  'bottom-right': { bottom: '0', right: 'xs' },
25
- 'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
26
- 'top-center': { top: "xs", className: "overlay_top_center" },
27
- 'left-center': { left: "sm", className: "overlay_left_center" },
28
- 'right-center': { right: "sm", className: "overlay_right_center" }
29
21
  };
30
22
  break;
31
23
 
@@ -36,10 +28,6 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
36
28
  'bottom-left': { bottom: '0', left: '0' },
37
29
  'top-left': { top: '0', left: '0' },
38
30
  'bottom-right': { bottom: '0', right: '0' },
39
- 'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
40
- 'top-center': { top: "xs", className: "overlay_top_center" },
41
- 'left-center': { left: "sm", className: "overlay_left_center" },
42
- 'right-center': { right: "sm", className: "overlay_right_center" }
43
31
  };
44
32
  break;
45
33
 
@@ -49,10 +37,6 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
49
37
  'bottom-left': { bottom: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
50
38
  'top-left': { top: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
51
39
  'bottom-right': { bottom: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
52
- 'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
53
- 'top-center': { top: "xs", className: "overlay_top_center" },
54
- 'left-center': { left: "sm", className: "overlay_left_center" },
55
- 'right-center': { right: "sm", className: "overlay_right_center" }
56
40
  };
57
41
  break;
58
42
  }
@@ -26,22 +26,6 @@ $avatar-sizes: (
26
26
  flex-grow: 0;
27
27
  flex-basis: $size;
28
28
 
29
- & > [class^=pb_flex_kit] {
30
- [class^=pb_card_kit].overlay_bottom_center,
31
- [class^=pb_card_kit].overlay_top_center {
32
- left: 50%;
33
- transform: translateX(-50%);
34
- padding: 2px !important;
35
- }
36
-
37
- [class^=pb_card_kit].overlay_left_center,
38
- [class^=pb_card_kit].overlay_right_center {
39
- top: 50%;
40
- transform: translateY(-50%);
41
- padding: 2px !important;
42
- }
43
- }
44
-
45
29
  .avatar_wrapper {
46
30
  width: $size;
47
31
  height: $size;
@@ -7,7 +7,7 @@
7
7
  <% end %>
8
8
  <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
9
9
 
10
- <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
10
+ <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon] }) %>
11
11
  <% end %>
12
12
  <% end %>
13
13
  <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
@@ -71,10 +71,6 @@ module Playbook
71
71
  "bottom-left" => { bottom: top_bottom_offset, left: offset },
72
72
  "top-left" => { top: top_bottom_offset, left: offset },
73
73
  "bottom-right" => { bottom: top_bottom_offset, right: offset },
74
- "bottom-center" => { bottom: "xs", classname: "overlay_bottom_center" },
75
- "top-center" => { top: "xs", classname: "overlay_top_center" },
76
- "left-center" => { left: "sm", classname: "overlay_left_center" },
77
- "right-center" => { right: "sm", classname: "overlay_right_center" },
78
74
  }
79
75
  end
80
76
  end
@@ -42,50 +42,3 @@ test('uses the name prop as the alt property if no imageAlt prop is passed in',
42
42
 
43
43
  expect(image).toHaveAttribute('alt', name)
44
44
  })
45
-
46
- test('renders with badge overlay', () => {
47
- const componentOverlay = {
48
- component: "badge",
49
- placement: "top-right",
50
- text: "New",
51
- variant: "error"
52
- };
53
- render(
54
- <Avatar
55
- componentOverlay={componentOverlay}
56
- data={{ testid: testId }}
57
- imageAlt={imageAlt}
58
- imageUrl={imageUrl}
59
- name={name}
60
- />
61
- );
62
-
63
- const badgeOverlay = screen.getByTestId(testId);
64
-
65
- expect(badgeOverlay).toBeInTheDocument();
66
- expect(badgeOverlay).toHaveClass('pb_avatar_kit_size_md');
67
- expect(badgeOverlay).toHaveTextContent('New');
68
- });
69
-
70
- test('renders with iconCircle overlay', () => {
71
- const componentOverlay = {
72
- component: "iconCircle",
73
- placement: "bottom-left",
74
- icon: "plus",
75
- variant: "blue"
76
- };
77
- render(
78
- <Avatar
79
- componentOverlay={componentOverlay}
80
- data={{ testid: testId }}
81
- imageAlt={imageAlt}
82
- imageUrl={imageUrl}
83
- name={name}
84
- />
85
- );
86
-
87
- const iconCircleOverlay = screen.getByTestId(testId);
88
-
89
- expect(iconCircleOverlay).toBeInTheDocument();
90
- expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
91
- });
@@ -1,51 +1,71 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "badge",
4
+ text: "12",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
1
12
 
2
- <%= pb_rails("avatar", props: {
3
- component_overlay: {
4
- component: "badge",
5
- text: "12",
6
- placement: "bottom-right"
7
- },
8
- name: "Terry Johnson",
9
- size: "sm",
10
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
11
- margin_bottom: "sm"
12
- }) %>
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "badge",
16
+ text: "12",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
13
24
 
14
- <%= pb_rails("avatar", props: {
15
- component_overlay: {
16
- component: "badge",
17
- text: "12",
18
- placement: "top-left"
19
- },
20
- name: "Terry Johnson",
21
- size: "md",
22
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
23
- margin_bottom: "sm"
24
- }) %>
25
+ <%= pb_rails("avatar", props: {
26
+ component_overlay: {
27
+ component: "badge",
28
+ text: "12",
29
+ placement: "bottom-right"
30
+ },
31
+ name: "Terry Johnson",
32
+ size: "sm",
33
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
+ margin_bottom: "sm"
35
+ }) %>
25
36
 
26
- <%= pb_rails("avatar", props: {
27
- component_overlay: {
28
- component: "badge",
29
- text: "On Roadtrip",
30
- placement: "top-center",
31
- variant: "info"
32
- },
33
- name: "Terry Johnson",
34
- size: "lg",
35
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
36
- margin_bottom: "sm"
37
- }) %>
37
+ <%= pb_rails("avatar", props: {
38
+ component_overlay: {
39
+ component: "badge",
40
+ text: "12",
41
+ placement: "bottom-left"
42
+ },
43
+ name: "Terry Johnson",
44
+ size: "md",
45
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
+ margin_bottom: "sm"
47
+ }) %>
38
48
 
39
- <%= pb_rails("avatar", props: {
40
- component_overlay: {
41
- component: "badge",
42
- text: "Out of Office",
43
- placement: "bottom-center",
44
- variant: "error"
45
- },
46
- name: "Terry Johnson",
47
- size: "xl",
48
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
49
- margin_bottom: "sm"
50
- }) %>
49
+ <%= pb_rails("avatar", props: {
50
+ component_overlay: {
51
+ component: "badge",
52
+ text: "12",
53
+ placement: "top-left"
54
+ },
55
+ name: "Terry Johnson",
56
+ size: "lg",
57
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
+ margin_bottom: "sm"
59
+ }) %>
51
60
 
61
+ <%= pb_rails("avatar", props: {
62
+ component_overlay: {
63
+ component: "badge",
64
+ text: "12",
65
+ placement: "top-right"
66
+ },
67
+ name: "Terry Johnson",
68
+ size: "xl",
69
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
+ margin_bottom: "sm"
71
+ }) %>
@@ -4,6 +4,28 @@ import { Avatar } from '../..'
4
4
  const AvatarBadgeComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "badge",
10
+ placement: "top-left",
11
+ text: "12"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "badge",
21
+ placement: "top-right",
22
+ text: "12"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
7
29
  <Avatar
8
30
  componentOverlay={{
9
31
  component: "badge",
@@ -18,7 +40,7 @@ const AvatarBadgeComponentOverlay = () => {
18
40
  <Avatar
19
41
  componentOverlay={{
20
42
  component: "badge",
21
- placement: "top-left",
43
+ placement: "bottom-left",
22
44
  text: "12"
23
45
  }}
24
46
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -29,9 +51,8 @@ const AvatarBadgeComponentOverlay = () => {
29
51
  <Avatar
30
52
  componentOverlay={{
31
53
  component: "badge",
32
- placement: "top-center",
33
- text: "On Roadtip",
34
- variant: "info"
54
+ placement: "top-left",
55
+ text: "12"
35
56
  }}
36
57
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
37
58
  marginBottom="sm"
@@ -41,14 +62,14 @@ const AvatarBadgeComponentOverlay = () => {
41
62
  <Avatar
42
63
  componentOverlay={{
43
64
  component: "badge",
44
- placement: "bottom-center",
45
- text: "Out of Office",
46
- variant: "error"
65
+ placement: "top-right",
66
+ text: "12"
47
67
  }}
48
68
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
49
69
  marginBottom="sm"
50
70
  size="xl"
51
- />
71
+ />
72
+
52
73
  </div>
53
74
  )
54
75
  }
@@ -1,9 +1,32 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "icon_circle",
4
+ icon: "plus",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
12
+
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "icon_circle",
16
+ icon: "plus",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
24
+
1
25
  <%= pb_rails("avatar", props: {
2
26
  component_overlay: {
3
27
  component: "icon_circle",
4
- icon: "shield",
5
- placement: "bottom-right",
6
- variant: "royal"
28
+ icon: "plus",
29
+ placement: "bottom-right"
7
30
  },
8
31
  name: "Terry Johnson",
9
32
  size: "sm",
@@ -14,9 +37,8 @@
14
37
  <%= pb_rails("avatar", props: {
15
38
  component_overlay: {
16
39
  component: "icon_circle",
17
- icon: "check",
18
- placement: "top-right",
19
- variant: "green"
40
+ icon: "plus",
41
+ placement: "bottom-left"
20
42
  },
21
43
  name: "Terry Johnson",
22
44
  size: "md",
@@ -27,9 +49,8 @@
27
49
  <%= pb_rails("avatar", props: {
28
50
  component_overlay: {
29
51
  component: "icon_circle",
30
- icon: "lock",
31
- placement: "top-left",
32
- variant: "red"
52
+ icon: "plus",
53
+ placement: "top-left"
33
54
  },
34
55
  name: "Terry Johnson",
35
56
  size: "lg",
@@ -40,12 +61,11 @@
40
61
  <%= pb_rails("avatar", props: {
41
62
  component_overlay: {
42
63
  component: "icon_circle",
43
- icon: "star",
44
- placement: "left-center",
45
- variant: "yellow"
64
+ icon: "plus",
65
+ placement: "top-right"
46
66
  },
47
67
  name: "Terry Johnson",
48
68
  size: "xl",
49
69
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
50
70
  margin_bottom: "sm"
51
- }) %>
71
+ }) %>
@@ -4,54 +4,73 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "iconCircle",
10
- placement: "bottom-right",
11
- icon: "shield",
12
- variant: "royal"
13
- }}
14
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
15
- marginBottom="sm"
16
- size="sm"
17
- />
18
-
19
- <Avatar
20
- componentOverlay={{
21
- component: "iconCircle",
22
- placement: "bottom-right",
23
- icon: "check",
24
- variant: "green"
25
- }}
26
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
27
- marginBottom="sm"
28
- size="md"
29
- />
30
-
31
- <Avatar
32
- componentOverlay={{
33
- component: "iconCircle",
34
- placement: "top-left",
35
- icon: "lock",
36
- variant: "red"
37
- }}
38
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
39
- marginBottom="sm"
40
- size="lg"
41
- />
42
-
43
- <Avatar
44
- componentOverlay={{
45
- component: "iconCircle",
46
- placement: "left-center",
47
- icon: "star",
48
- variant: "yellow"
49
- }}
50
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
51
- marginBottom="sm"
52
- size="xl"
53
- />
54
- </div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "iconCircle",
10
+ icon: "plus",
11
+ placement: "top-left"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "iconCircle",
21
+ icon: "plus",
22
+ placement: "top-right"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
29
+ <Avatar
30
+ componentOverlay={{
31
+ component: "iconCircle",
32
+ icon: "plus",
33
+ placement: "bottom-right",
34
+ }}
35
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
+ marginBottom="sm"
37
+ size="sm"
38
+ />
39
+
40
+ <Avatar
41
+ componentOverlay={{
42
+ component: "iconCircle",
43
+ icon: "plus",
44
+ placement: "bottom-left"
45
+ }}
46
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
+ marginBottom="sm"
48
+ size="md"
49
+ />
50
+
51
+ <Avatar
52
+ componentOverlay={{
53
+ component: "iconCircle",
54
+ icon: "plus",
55
+ placement: "top-left"
56
+ }}
57
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
+ marginBottom="sm"
59
+ size="lg"
60
+ />
61
+
62
+ <Avatar
63
+ componentOverlay={{
64
+ component: "iconCircle",
65
+ icon: "plus",
66
+ placement: "top-right"
67
+ }}
68
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
+ marginBottom="sm"
70
+ size="xl"
71
+ />
72
+
73
+ </div>
55
74
  )
56
75
  }
57
76
 
@@ -57,6 +57,26 @@ const AvatarDefault = (props) => {
57
57
  status="offline"
58
58
  {...props}
59
59
  />
60
+ <br/>
61
+ <Avatar
62
+ imageAlt="Terry Johnson Standing"
63
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
64
+ name="Terry Johnson"
65
+ overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
66
+ size="lg"
67
+ status="offline"
68
+ {...props}
69
+ />
70
+ <br/>
71
+ <Avatar
72
+ imageAlt="Terry Johnson Standing"
73
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
74
+ name="Terry Johnson"
75
+ overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
76
+ size="xl"
77
+ status="offline"
78
+ {...props}
79
+ />
60
80
  </div>
61
81
  )
62
82
  }
@@ -4,14 +4,14 @@ examples:
4
4
  - avatar_monogram: Monogram
5
5
  - avatar_no_image: "Bad Image Link"
6
6
  - avatar_status: Status
7
- - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
7
+ - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
8
8
  - avatar_badge_component_overlay: Badge Component Overlay
9
9
  react:
10
10
  - avatar_default: Default
11
11
  - avatar_monogram: Monogram
12
12
  - avatar_no_image: "Bad Image Link"
13
13
  - avatar_status: Status
14
- - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
14
+ - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
15
15
  - avatar_badge_component_overlay: Badge Component Overlay
16
16
  swift:
17
17
  - avatar_default_swift: Default
@@ -1,4 +1,9 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ id: object.id,
4
+ data: object.data,
5
+ class: object.classname,
6
+ **combined_html_options) do %>
2
7
  <% if object.tooltip_text.present? %>
3
8
  <%= pb_rails("tooltip", props: {
4
9
  trigger_element_id: object.tooltip_id,
@@ -1,3 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ id: object.id,
4
+ data: object.data,
5
+ class: object.classname,
6
+ **combined_html_options) do %>
2
7
  <span><%= object.text %></span>
3
8
  <% end %>