playbook_ui_docs 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c5a0ca4ba49f9761948d5396d862f7a7dca62755280c4a327d8be07578131efa
-  data.tar.gz: d47839a1a9c0f199291420ecf5d116ce04f79e1154a3f02b69519a667b4496ed
+  metadata.gz: 68319a6bec5bf342bcc43c82ea9f60eea9b3998bbc731ec509cc9045935afde3
+  data.tar.gz: 587805464e81282168cf9035f2100486356f4ceca8495879fcd10f0360d3df7e
 SHA512:
-  metadata.gz: 3a8e4c4a70ee7b4c2cf06da4a1215219109050161b27fbee7fbeadfbcb86d23ecd95b3282f2ba3483832553f826343c45116cea1aae33d56a86a055ded39b195
-  data.tar.gz: 139f88815ff1cbda2ff72a5a4915c3b955f47f32fc4f25e9b52286ea4f764a874eeef219d5906c99bbf338cb1b24cb40de4f85ddfd5c98952fa5513edfbae907
+  metadata.gz: 76cedfd8ebd4cfb5cf29a38f03e646d52044cb058c486e26c82a0f8e84b30e051b5320591c86d605c14988719392e799cbff4c200580e8a063b85b074c12aaa4
+  data.tar.gz: dc466cd04903c60c0173f5e62ade2a93c92da6760c3f74da08d42adfcb07d677befe201b04435750b61688f6e82d80c57574c67e85d63d483417c46fdfc8cc51

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -0,0 +1,40 @@
+<% 
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md

@@ -0,0 +1,3 @@
+`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
+
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_beta_subrow_headers: SubRow Headers
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -12,4 +13,3 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: inline Row Loading
-

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_bar_graph/docs/_bar_graph_custom.md

@@ -1 +1,2 @@
-See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb}

@@ -15,7 +15,7 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<% custom_options = {
+<% bar_graph_options = {
     customOptions: {
         subtitle: {
             text: "Overwritten subtitle",
@@ -45,5 +45,5 @@
     y_axis_min: 0,
     subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
-    custom_options: custom_options
-}) %>
+    custom_options: bar_graph_options
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md

@@ -0,0 +1,2 @@
+The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

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

@@ -8,7 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
-  - bar_graph_custom: Custom Overrides
+  - bar_graph_custom_rails: Custom Overrides
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -42,3 +42,23 @@
     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,7 +90,47 @@ 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.
+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.

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/utilities" 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/visual_guidelines/colors" target="_blank">here</a>.