playbook_ui 13.27.0.pre.alpha.PBNTR48phonenumberform2852 → 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 95ac0ea9e7bb139ef4d92f659e024423095eae94e41850491e67c604bf11166a
-  data.tar.gz: 5c7df5b7c03fe937e780f015f89c6f1b4d8a5444e0ad4c2b7403681d4d263df4
+  metadata.gz: 84d66eed5b978ecd745e826ec17f388a4dbe57dfa989b153aca53faf75cded75
+  data.tar.gz: 5b9618559b5d5a6dd1ddae3523df8e9f8e690af6ac0e0cd711ccc6bb41756601
 SHA512:
-  metadata.gz: 3610fe5c23968bb7313a2b1402347ddf034e97aced69a7add3bf4eb032ce0ac457cfb84a7e1d9bae10c460163fe8aeec71b680737f318105ab448e3c95770ae3
-  data.tar.gz: a3a8edacab61267f15694d6bce0c72e38f8915180b39d6e6b8f43a789634e46c0c897ca0d14b4a6013457efefd124a9e1ceb00dd4b6bc73450d946c7c054b9b6
+  metadata.gz: 605001caf6eb9108ec8456543bebb0123a7897a3a9c60a708db790712ddcbdd2ad064ae8520c80fd4eb545b61cbb11e53f06e338ddff87a85f766cb9db69c290
+  data.tar.gz: ac4df765d7761099f29b4e7c57d538473f52e6b0b0727e8e5783abcbfeee2cbf4e28a8c1bca55ac5f8ef98ad29550308ff339ab3f39b47713e1bee52b2721d95

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
           <% if content.present? %>
             <% content.presence %>

data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <% object.table_data.each do |row| %>
           <%= render_row_and_children(row, object.column_definitions) %>
         <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
             <% object.column_definitions.each_with_index do |item, index| %>
                 <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>

data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx

@@ -9,6 +9,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: 'xs', left: 'xs' },
               'top-left': { top: 'xs', left: 'xs' },
               'bottom-right': { bottom: 'xs', right: 'xs' },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
       
@@ -18,6 +22,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: '0', left: 'xs' },
               'top-left': { top: '0', left: 'xs' },
               'bottom-right': { bottom: '0', right: 'xs' },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
       
@@ -28,6 +36,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: '0', left: '0' },
               'top-left': { top: '0', left: '0' },
               'bottom-right': { bottom: '0', right: '0' },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
 
@@ -37,6 +49,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
               'top-left': { top: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
               'bottom-right': { bottom: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
   }

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -26,6 +26,22 @@ $avatar-sizes: (
       flex-grow: 0;
       flex-basis: $size;
 
+      & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit].overlay_bottom_center,
+        [class^=pb_card_kit].overlay_top_center {
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 2px !important;
+        }
+
+        [class^=pb_card_kit].overlay_left_center,
+        [class^=pb_card_kit].overlay_right_center {
+          top: 50%;
+          transform: translateY(-50%);
+          padding: 2px !important;
+        }
+      }
+
       .avatar_wrapper {
         width: $size;
         height: $size;

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -7,7 +7,7 @@
       <% end %>
       <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
         
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon] }) %>
+        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -71,6 +71,10 @@ module Playbook
           "bottom-left" => { bottom: top_bottom_offset, left: offset },
           "top-left" => { top: top_bottom_offset, left: offset },
           "bottom-right" => { bottom: top_bottom_offset, right: offset },
+          "bottom-center" => { bottom: "xs", classname: "overlay_bottom_center" },
+          "top-center" => { top: "xs", classname: "overlay_top_center" },
+          "left-center" => { left: "sm", classname: "overlay_left_center" },
+          "right-center" => { right: "sm", classname: "overlay_right_center" },
         }
       end
     end

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -42,3 +42,50 @@ test('uses the name prop as the alt property if no imageAlt prop is passed in',
 
   expect(image).toHaveAttribute('alt', name)
 })
+
+test('renders with badge overlay', () => {
+  const componentOverlay = {
+    component: "badge",
+    placement: "top-right",
+    text: "New",
+    variant: "error"
+  };
+  render(
+    <Avatar
+        componentOverlay={componentOverlay}
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  );
+
+  const badgeOverlay = screen.getByTestId(testId);
+ 
+  expect(badgeOverlay).toBeInTheDocument();
+  expect(badgeOverlay).toHaveClass('pb_avatar_kit_size_md');
+  expect(badgeOverlay).toHaveTextContent('New');
+});
+
+test('renders with iconCircle overlay', () => {
+  const componentOverlay = {
+    component: "iconCircle",
+    placement: "bottom-left",
+    icon: "plus",
+    variant: "blue"
+  };
+  render(
+    <Avatar
+        componentOverlay={componentOverlay}
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  );
+
+  const iconCircleOverlay = screen.getByTestId(testId);
+ 
+  expect(iconCircleOverlay).toBeInTheDocument();
+  expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
+});

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb

@@ -1,71 +1,51 @@
-<%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "badge",
-        text: "12",
-        placement: "top-left"
-    },
-    name: "Terry Johnson",
-    size: "xxs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
 
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "badge",
-        text: "12",
-        placement: "top-right"
-    },
-    name: "Terry Johnson",
-    size: "xs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
+ <%= pb_rails("avatar", props: {
+      component_overlay: {
+          component: "badge",
+          text: "12",
+          placement: "bottom-right"
+      },
+      name: "Terry Johnson",
+      size: "sm",
+      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+      margin_bottom: "sm"
+    }) %>
 
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "badge",
-        text: "12",
-        placement: "bottom-right"
-    },
-    name: "Terry Johnson",
-    size: "sm",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
+    <%= pb_rails("avatar", props: {
+      component_overlay: {
+          component: "badge",
+          text: "12",
+          placement: "top-left"
+      },
+      name: "Terry Johnson",
+      size: "md",
+      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+      margin_bottom: "sm"
+    }) %>
 
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "badge",
-        text: "12",
-        placement: "bottom-left"
-    },
-    name: "Terry Johnson",
-    size: "md",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
+    <%= pb_rails("avatar", props: {
+      component_overlay: {
+          component: "badge",
+          text: "On Roadtrip",
+          placement: "top-center",
+          variant: "info"
+      },
+      name: "Terry Johnson",
+      size: "lg",
+      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+      margin_bottom: "sm"
+    }) %>
 
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "badge",
-        text: "12",
-        placement: "top-left"
-    },
-    name: "Terry Johnson",
-    size: "lg",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
+    <%= pb_rails("avatar", props: {
+      component_overlay: {
+          component: "badge",
+          text: "Out of Office",
+          placement: "bottom-center",
+          variant: "error"
+      },
+      name: "Terry Johnson",
+      size: "xl",
+      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+      margin_bottom: "sm"
+    }) %>
 
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "badge",
-        text: "12",
-        placement: "top-right"
-    },
-    name: "Terry Johnson",
-    size: "xl",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -4,28 +4,6 @@ import { Avatar } from '../..'
 const AvatarBadgeComponentOverlay = () => {
     return (
         <div>
-            <Avatar
-                componentOverlay={{
-                    component: "badge",
-                    placement: "top-left",
-                    text: "12"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xxs"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "badge",
-                    placement: "top-right",
-                    text: "12"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xs"
-            />
-
             <Avatar
                 componentOverlay={{
                     component: "badge",
@@ -40,7 +18,7 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "bottom-left",
+                    placement: "top-left",
                     text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -51,8 +29,9 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-left",
-                    text: "12"
+                    placement: "top-center",
+                    text: "On Roadtip",
+                    variant: "info"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
@@ -62,14 +41,14 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-right",
-                    text: "12"
+                    placement: "bottom-center",
+                    text: "Out of Office",
+                    variant: "error"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            />    
-
+            /> 
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md

@@ -0,0 +1,3 @@
+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`.
+
+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`.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb

@@ -1,32 +1,9 @@
-<%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "icon_circle",
-        icon: "plus",
-        placement: "top-left"
-    },
-    name: "Terry Johnson",
-    size: "xxs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
-
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "icon_circle",
-        icon: "plus",
-        placement: "top-right"
-    },
-    name: "Terry Johnson",
-    size: "xs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
-
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "bottom-right"
+        icon: "shield",
+        placement: "bottom-right",
+        variant: "royal"
     },
     name: "Terry Johnson",
     size: "sm",
@@ -37,8 +14,9 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "bottom-left"
+        icon: "check",
+        placement: "top-right",
+        variant: "green"
     },
     name: "Terry Johnson",
     size: "md",
@@ -49,8 +27,9 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "top-left"
+        icon: "lock",
+        placement: "top-left",
+        variant: "red"
     },
     name: "Terry Johnson",
     size: "lg",
@@ -61,11 +40,12 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "top-right"
+        icon: "star",
+        placement: "left-center",
+        variant: "yellow"
     },
     name: "Terry Johnson",
     size: "xl",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     margin_bottom: "sm"
-  }) %>
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -4,73 +4,54 @@ import { Avatar } from '../..'
 const AvatarCircleIconComponentOverlay = () => {
     return (
         <div>
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-left"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xxs"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-right"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xs"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "bottom-right",
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="sm"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "bottom-left"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="md"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-left"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="lg"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-right"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xl"
-            />
-
-        </div>
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "bottom-right",
+                icon: "shield",
+                variant: "royal"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="sm"
+        />
+
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "bottom-right",
+                icon: "check",
+                variant: "green"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="md"
+        />
+
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "top-left",
+                icon: "lock",
+                variant: "red"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="lg"
+        />
+
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "left-center",
+                icon: "star",
+                variant: "yellow"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="xl"
+        /> 
+    </div>
     )
 }
 

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md

@@ -0,0 +1,3 @@
+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`.
+
+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`.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -57,26 +57,6 @@ const AvatarDefault = (props) => {
           status="offline"
           {...props}
       />
-      <br/>
-      <Avatar
-          imageAlt="Terry Johnson Standing"
-          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-          name="Terry Johnson"
-          overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
-          size="lg"
-          status="offline"
-          {...props}
-      />
-      <br/>
-      <Avatar
-          imageAlt="Terry Johnson Standing"
-          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-          name="Terry Johnson"
-          overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
-          size="xl"
-          status="offline"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_avatar/docs/example.yml

@@ -4,14 +4,14 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,