playbook_ui_docs 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d9b4d405a39101e0f329a907be546a7ab4bc9d631ae904f77eb216abf0d0047
-  data.tar.gz: 52b25596b80c2bde6fd33df95247f92cbf83beb9a90257fa2ed797f7449716fe
+  metadata.gz: fc63509b9914d445b8232d63a763b3124da50bbf65d94c991efa6d9481178e04
+  data.tar.gz: d8556675f5da05fa76cf13550a2a343ea3902ca523ddba0947586602d6877d53
 SHA512:
-  metadata.gz: dc238e7d8dfe6f0791422f251e295b0e384306f8f13bee76838cb150b48f7348de5b0f18bda20cd79b0b9a8c73cefc596ce3ebdadd7066fe2c0a5519c5b5e4dc
-  data.tar.gz: 691d54ef396770be79ac9d912b3e4982177d7d4447f478e79e60dff322c92f35480ecc254ed926504e2f0fba3adb243d0bf63a27962296d2144cf07991220da5
+  metadata.gz: 929fbeb53c31baffe7fa87145cd22e979dd7a455fb8077ea689759d26ab9d770143e5a48fac37b967a9ce05d01aad03e38aaf59347ca069f7cd18251d323ac78
+  data.tar.gz: 5f463ddb6a68a95ed3360fc2409d74d6d01302a426f8ee93cf0ce5b71cb083f0003c05fc8b346e62418fed8234ae54dd5e083c455b3a541c4bd74b0f8cb9884e

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

@@ -1,51 +1,71 @@
+<%= 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: "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-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: "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-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: "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: "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: "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-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: "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,6 +4,28 @@ 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",
@@ -18,7 +40,7 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-left",
+                    placement: "bottom-left",
                     text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -29,9 +51,8 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-center",
-                    text: "On Roadtip",
-                    variant: "info"
+                    placement: "top-left",
+                    text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
@@ -41,14 +62,14 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "bottom-center",
-                    text: "Out of Office",
-                    variant: "error"
+                    placement: "top-right",
+                    text: "12"
                 }}
                 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.html.erb

@@ -1,9 +1,32 @@
+<%= 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: "shield",
-        placement: "bottom-right",
-        variant: "royal"
+        icon: "plus",
+        placement: "bottom-right"
     },
     name: "Terry Johnson",
     size: "sm",
@@ -14,9 +37,8 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "check",
-        placement: "top-right",
-        variant: "green"
+        icon: "plus",
+        placement: "bottom-left"
     },
     name: "Terry Johnson",
     size: "md",
@@ -27,9 +49,8 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "lock",
-        placement: "top-left",
-        variant: "red"
+        icon: "plus",
+        placement: "top-left"
     },
     name: "Terry Johnson",
     size: "lg",
@@ -40,12 +61,11 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "star",
-        placement: "left-center",
-        variant: "yellow"
+        icon: "plus",
+        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_circle_icon_component_overlay.jsx

@@ -4,54 +4,73 @@ import { Avatar } from '../..'
 const AvatarCircleIconComponentOverlay = () => {
     return (
         <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>
+            <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>
     )
 }
 

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

@@ -57,6 +57,26 @@ 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: Icon Circle Component Overlay
+    - avatar_circle_icon_component_overlay: Circle Icon 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: Icon Circle Component Overlay
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -42,23 +42,3 @@
     dark: true
   }) %>
 <% end %>
-
-<%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-
-<%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Success Subtle"
-  }) %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Warning Subtle"
-  }) %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Info Subtle"
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -90,47 +90,7 @@ const CardBackground = (props) => {
         />
       </Card>
 
-
-      <Title
-          {...props}
-          marginBottom="sm"
-          size={4}
-          tag="h4"
-          text="Subtle Status Colors"
-      />
-
-      <Card
-          background="success_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Success Subtle"
-            {...props}  
-        />
-      </Card>
-
-      <Card
-          background="warning_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Warning Subtle"
-            {...props}
-        />
-      </Card>
-
-      <Card
-          background="info_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Info Subtle"
-            {...props}
-        />
-      </Card>
+      
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,4 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

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

@@ -7,9 +7,6 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
-  - collapsible_custom_main_rails: Custom Main Section
-  - collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
-
 
   react:
   - collapsible_default: Default
@@ -17,10 +14,6 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-  - collapsible_custom_main: Custom Main Section
-  - collapsible_custom_main_with_icon: Custom Main Section With Icon
-
-
 
   swift:
   - collapsible_default_swift: Default

data/app/pb_kits/playbook/pb_collapsible/docs/index.js

@@ -2,6 +2,4 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
 export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
-export { default as CollapsibleState } from './_collapsible_state.jsx'
-export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
-export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'
+export {default as CollapsibleState } from './_collapsible_state.jsx'

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

@@ -6,7 +6,4 @@ examples:
   
   react:
   - date_range_inline_default: Default
-
-  swift:
-  - date_range_inline_default_swift: Default
-  - date_range_inline_props_swift: ""
+  

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

@@ -15,10 +15,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold
-
-  swift:
-  - date_stacked_default_swift: Default
-  - date_stacked_not_current_year_swift: Not Current Year
-  - date_stacked_reversed_swift: Day & Month Reverse
-  - date_stacked_bold_swift: Bold
-  - date_stacked_props_swift: ""

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

@@ -9,9 +9,3 @@ examples:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-
-  swift:
-  - date_time_default_swift: Default
-  - date_time_alignment_swift: Alignment
-  - date_time_size_swift: Size
-  - date_time_props_swift: ""

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

@@ -5,7 +5,3 @@ examples:
 
   react:
   - date_year_stacked_default: Default
-
- swift:
-  - date_year_stacked_default_swift: Default
-  - date_year_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Pakistan', value: 'Pakistan' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md

@@ -1 +1 @@
-This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.
+The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb}

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Pakistan', value: 'Pakistan' },
   ]
 
 %>