playbook_ui 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -5
  3. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -5
  4. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -5
  5. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -5
  6. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +16 -0
  7. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +16 -0
  8. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  10. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +47 -0
  11. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  13. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  14. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  15. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  16. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  17. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  18. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  19. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -6
  20. data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -6
  21. data/app/pb_kits/playbook/pb_body/_body.scss +3 -0
  22. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +1 -1
  23. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +3 -3
  24. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +1 -6
  25. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
  26. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +5 -0
  27. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  28. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  29. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  30. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  31. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  32. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  33. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  34. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -6
  35. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -6
  36. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -6
  37. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -6
  38. data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -6
  39. data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -6
  40. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -6
  41. data/app/pb_kits/playbook/pb_date/date.html.erb +1 -6
  42. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -5
  43. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -5
  44. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -5
  45. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -6
  46. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -6
  47. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -5
  48. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +1 -1
  49. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +3 -3
  50. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +2 -1
  51. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -2
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +3 -3
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +3 -3
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  58. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +1 -0
  59. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +1 -0
  60. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +1 -1
  61. data/app/pb_kits/playbook/pb_dropdown/index.js +2 -1
  62. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +4 -2
  63. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -6
  64. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -6
  65. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -6
  66. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -6
  67. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -6
  68. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -6
  69. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -5
  70. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +6 -6
  71. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +8 -0
  72. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -6
  73. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -6
  74. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -6
  75. data/app/pb_kits/playbook/pb_person/person.html.erb +1 -6
  76. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -6
  77. data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -6
  78. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -6
  79. data/app/pb_kits/playbook/pb_source/source.html.erb +1 -5
  80. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -5
  81. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -5
  82. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -5
  83. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -5
  84. data/app/pb_kits/playbook/pb_timeline/item.html.erb +1 -5
  85. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -5
  86. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -6
  87. data/app/pb_kits/playbook/pb_title/_title.scss +5 -1
  88. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -6
  89. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -5
  90. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -6
  91. data/app/pb_kits/playbook/tokens/_titles.scss +5 -1
  92. data/dist/playbook-rails.js +2 -2
  93. data/lib/playbook/kit_base.rb +1 -1
  94. data/lib/playbook/version.rb +1 -1
  95. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 13b6125e3cb0229c3dcf449f12ae4ca3f34084a498dfea3d1c18095be1c65fd9
4
- data.tar.gz: 319fb35a1e6950bd4b80cbae57ae064f35cddbf19adb2ce7685a883abbe016c4
3
+ metadata.gz: 86010ce79177c236d7f8407fa85ab4204e2b1828a406d3be849f8015d83bc473
4
+ data.tar.gz: eb445cf16692e00d7969def69849d916bd7fba5a2106aa1f987dc3114f9146eb
5
5
  SHA512:
6
- metadata.gz: '087378f8eff02db4a21cdb6228e5ff5f109ec480840ae44df5735f56a538a9900e42f490847bea7cf175658670ccca90171c8b360ce724fb28abd47436134ad8'
7
- data.tar.gz: 572e3262a0d53319e5b7e578dd83ea4126b19e3a1f72a0272ff0e3d81f21d9dc744b03a7f43b1c31fba883d4f0614ed390dda5a235965fb1650b444b3662012e
6
+ metadata.gz: 1e8b4eff3ba718fe73cc04f6dcf5f072f47d5d3fab4e408de793bcd4ad62542ddc7de30044be5a31a4b54a21af8b6de366f51384762eaf87c98ba327227811c7
7
+ data.tar.gz: 8aee0c92d46a1c6c885beb73a791beeac13449d7b8dbbf70f15dcadbeea8f3e0f384268270769906078606a92ae0411079c55dd694952e48024b35332e752876
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
1
+ <%= pb_content_tag do %>
6
2
  <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
7
3
  <% if content.present? %>
8
4
  <% content.presence %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
1
+ <%= pb_content_tag do %>
6
2
  <% object.table_data.each do |row| %>
7
3
  <%= render_row_and_children(row, object.column_definitions) %>
8
4
  <% end %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
1
+ <%= pb_content_tag do %>
6
2
  <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
7
3
  <% object.column_definitions.each_with_index do |item, index| %>
8
4
  <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
1
+ <%= pb_content_tag do %>
6
2
  <% object.column_definitions.each_with_index do |column, index| %>
7
3
  <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
8
4
  <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
@@ -9,6 +9,10 @@ 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" }
12
16
  };
13
17
  break;
14
18
 
@@ -18,6 +22,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
18
22
  'bottom-left': { bottom: '0', left: 'xs' },
19
23
  'top-left': { top: '0', left: 'xs' },
20
24
  '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" }
21
29
  };
22
30
  break;
23
31
 
@@ -28,6 +36,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
28
36
  'bottom-left': { bottom: '0', left: '0' },
29
37
  'top-left': { top: '0', left: '0' },
30
38
  '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" }
31
43
  };
32
44
  break;
33
45
 
@@ -37,6 +49,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
37
49
  'bottom-left': { bottom: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
38
50
  'top-left': { top: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
39
51
  '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" }
40
56
  };
41
57
  break;
42
58
  }
@@ -26,6 +26,22 @@ $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
+
29
45
  .avatar_wrapper {
30
46
  width: $size;
31
47
  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] }) %>
10
+ <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
11
11
  <% end %>
12
12
  <% end %>
13
13
  <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
@@ -71,6 +71,10 @@ 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" },
74
78
  }
75
79
  end
76
80
  end
@@ -42,3 +42,50 @@ 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,71 +1,51 @@
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
- }) %>
12
1
 
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
- }) %>
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
+ }) %>
24
13
 
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
- }) %>
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
+ }) %>
36
25
 
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
- }) %>
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
+ }) %>
48
38
 
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
- }) %>
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
+ }) %>
60
51
 
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,28 +4,6 @@ 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
-
29
7
  <Avatar
30
8
  componentOverlay={{
31
9
  component: "badge",
@@ -40,7 +18,7 @@ const AvatarBadgeComponentOverlay = () => {
40
18
  <Avatar
41
19
  componentOverlay={{
42
20
  component: "badge",
43
- placement: "bottom-left",
21
+ placement: "top-left",
44
22
  text: "12"
45
23
  }}
46
24
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -51,8 +29,9 @@ const AvatarBadgeComponentOverlay = () => {
51
29
  <Avatar
52
30
  componentOverlay={{
53
31
  component: "badge",
54
- placement: "top-left",
55
- text: "12"
32
+ placement: "top-center",
33
+ text: "On Roadtip",
34
+ variant: "info"
56
35
  }}
57
36
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
37
  marginBottom="sm"
@@ -62,14 +41,14 @@ const AvatarBadgeComponentOverlay = () => {
62
41
  <Avatar
63
42
  componentOverlay={{
64
43
  component: "badge",
65
- placement: "top-right",
66
- text: "12"
44
+ placement: "bottom-center",
45
+ text: "Out of Office",
46
+ variant: "error"
67
47
  }}
68
48
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
49
  marginBottom="sm"
70
50
  size="xl"
71
- />
72
-
51
+ />
73
52
  </div>
74
53
  )
75
54
  }
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.
@@ -1,32 +1,9 @@
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
-
25
1
  <%= pb_rails("avatar", props: {
26
2
  component_overlay: {
27
3
  component: "icon_circle",
28
- icon: "plus",
29
- placement: "bottom-right"
4
+ icon: "shield",
5
+ placement: "bottom-right",
6
+ variant: "royal"
30
7
  },
31
8
  name: "Terry Johnson",
32
9
  size: "sm",
@@ -37,8 +14,9 @@
37
14
  <%= pb_rails("avatar", props: {
38
15
  component_overlay: {
39
16
  component: "icon_circle",
40
- icon: "plus",
41
- placement: "bottom-left"
17
+ icon: "check",
18
+ placement: "top-right",
19
+ variant: "green"
42
20
  },
43
21
  name: "Terry Johnson",
44
22
  size: "md",
@@ -49,8 +27,9 @@
49
27
  <%= pb_rails("avatar", props: {
50
28
  component_overlay: {
51
29
  component: "icon_circle",
52
- icon: "plus",
53
- placement: "top-left"
30
+ icon: "lock",
31
+ placement: "top-left",
32
+ variant: "red"
54
33
  },
55
34
  name: "Terry Johnson",
56
35
  size: "lg",
@@ -61,11 +40,12 @@
61
40
  <%= pb_rails("avatar", props: {
62
41
  component_overlay: {
63
42
  component: "icon_circle",
64
- icon: "plus",
65
- placement: "top-right"
43
+ icon: "star",
44
+ placement: "left-center",
45
+ variant: "yellow"
66
46
  },
67
47
  name: "Terry Johnson",
68
48
  size: "xl",
69
49
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
50
  margin_bottom: "sm"
71
- }) %>
51
+ }) %>
@@ -4,73 +4,54 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <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>
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>
74
55
  )
75
56
  }
76
57
 
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.
@@ -57,26 +57,6 @@ 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
- />
80
60
  </div>
81
61
  )
82
62
  }
@@ -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: Circle Icon Component Overlay
7
+ - avatar_circle_icon_component_overlay: Icon Circle 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: Circle Icon Component Overlay
14
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
15
15
  - avatar_badge_component_overlay: Badge Component Overlay
16
16
  swift:
17
17
  - avatar_default_swift: Default
@@ -1,9 +1,4 @@
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 %>
1
+ <%= pb_content_tag do %>
7
2
  <% if object.tooltip_text.present? %>
8
3
  <%= pb_rails("tooltip", props: {
9
4
  trigger_element_id: object.tooltip_id,