playbook_ui 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableTablePropsStickyHeader = (props) => {
+  const columnDefinitions = [
+    {
+      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",
+    },
+  ]
+
+  const tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableTablePropsStickyHeader

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

@@ -0,0 +1,3 @@
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+
+A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table#table-props) doc example above.

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

@@ -0,0 +1,3 @@
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+
+A sticky header on a nonresponsive table is demonstrated in the ["Table Props"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props) doc example above.

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

@@ -1,10 +1,13 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_beta_sort: Enable Sorting
+  - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
@@ -20,6 +23,7 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
@@ -27,6 +31,7 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)

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

@@ -18,4 +18,6 @@ export { default as AdvancedTableSelectableRows } from './_advanced_table_select
 export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
-export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
+export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
+export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-    if (isVisible) {
-      this.hideElement(elements);
-      this.displayDownArrow();
-    } else {
-      this.showElement(elements);
-      this.displayUpArrow();
+
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+
+    const row = this.element.closest("tr");
+    if (row) {
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
   }
 
+
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -16,6 +16,11 @@ module Playbook
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -46,12 +51,12 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -74,7 +79,16 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
+      end
+
+      def pinned_cell_class(index)
+        return "pinned-left" if index.zero? && responsive == "scroll"
+
+        ""
       end
 
     private

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

@@ -3,17 +3,21 @@
     <%= pb_rails("table/table_row") do %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
-        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-                        <button
-                            class="gray-icon toggle-all-icon"
-                            onclick="expandAllRows(this); event.preventDefault();">
-                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                        </button>
-                    <% end %>
-                    <%= cell[:label] %>
-                <% end %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+              <% if loading %>
+                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+              <% else %>
+                <button
+                  class="gray-icon toggle-all-icon"
+                  onclick="expandAllRows(this); event.preventDefault();">
+                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                </button>
+              <% end %>
+            <% end %>
+            <%= cell[:label] %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -8,13 +8,24 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def classname
-        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
-      def th_classname
-        generate_classname("table-header-cells", separator: " ")
+      def th_classname(is_first_column: false)
+        additional_classes = []
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+
+        generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
 
       def header_rows

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

@@ -1,8 +1,8 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
                             <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -14,10 +14,13 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
                                 <% if column[:custom_renderer].present? %>
@@ -42,4 +45,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -13,6 +13,13 @@ module Playbook
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
+      prop :is_pinned_left, type: Playbook::Props::Boolean,
+                            default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -22,9 +29,10 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column)
+      def td_classname(column, index)
         classes = %w[id-cell chrome-styles]
         classes << "last-cell" if column[:is_last_in_group]
+        classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
       end
 

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

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -16,6 +16,9 @@ module Playbook
                                default: true
       prop :subrow_data_attributes, type: Playbook::Props::HashProp,
                                     default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
@@ -25,6 +28,12 @@ module Playbook
         generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
+      def td_classname(index)
+        classes = %w[id-cell chrome-styles]
+        classes << "pinned-left" if index.zero? && responsive == "scroll"
+        classes.join(" ")
+      end
+
     private
 
       def subrow_depth_classname

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

@@ -27,6 +27,9 @@ $avatar-sizes: (
       flex-basis: $size;
 
       & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
         [class^=pb_card_kit].overlay_bottom_center,
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
@@ -52,6 +55,10 @@ $avatar-sizes: (
         flex-grow: 0;
         flex-basis: $size;
 
+        .dark & {
+          background: $text_dk_light;
+        }
+
         &::before {
           content: attr(data-initials);
           width: 100%;
@@ -78,4 +85,11 @@ $avatar-sizes: (
       }
     }
   }
+
+  &.dark {
+    [class^=pb_card_kit] {
+      position: absolute;
+      padding: 2px;
+    }
+  }
 }

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

@@ -23,8 +23,8 @@ export type AvatarProps = {
     variant?: string,
     icon?: string
   },
-  data?: {[key: string]: string},
   dark?: boolean,
+  data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
-  const onlineStatusSize = 
+  const onlineStatusSize =
     ['xxs', 'xs'].includes(size) ? 'sm' :
       ['sm', 'md'].includes(size) ? 'md' :
         ['lg', 'xl'].includes(size) ? 'lg' :
           'sm';
 
-  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
     {
       top: { inset: true, value: "0" },
       right: { inset: false, value: "xxs" }
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         id={id}
     >
       {componentOverlay ? (
-        <Flex display="display_inline_block" 
+        <Flex display="display_inline_block"
             position="relative"
         >
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
              <Card
                  borderNone
                  borderRadius="rounded"
+                 dark={dark}
                  padding="none"
                  position="absolute"
                  {...getPlacementProps(componentOverlay.placement, size)}
              >
-    
+
             <Badge
+                dark={dark}
                 rounded
                 text={componentOverlay.text}
                 variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
             <Card
                 borderNone
                 borderRadius="rounded"
+                dark={dark}
                 htmlOptions={{style: {padding:"2px"}}}
                 position="absolute"
                 {...getPlacementProps(componentOverlay.placement, size)}
             >
               <IconCircle
+                  dark={dark}
                   icon={componentOverlay.icon}
                   size="xxs"
                   variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         </Flex>
       ) : (
         <>
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (

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

@@ -1,22 +1,22 @@
 
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
   <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
-    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+    <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
       <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
         <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
       <% 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("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
         
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
+        <%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
-  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+  <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
       <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
     <% end %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
-    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
+    <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
     <% end %>
     <% end %>
   <% else %>
@@ -26,4 +26,3 @@
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
 <% end %>
-

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

@@ -1,18 +1,19 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = () => {
+const AvatarBadgeComponentOverlay = (props) => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12"
+                    text: "12",
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
+                {...props}
             />
 
             <Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
+                {...props}
+
             />
 
             <Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
+                {...props}
+
             />
 
             <Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+                {...props}
+            />
         </div>
     )
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = () => {
+const AvatarCircleIconComponentOverlay = (props) => {
     return (
         <div>
         <Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
+            {...props}
         />
 
         <Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
+            {...props}
         />
 
         <Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
+            {...props}
         />
 
         <Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-        /> 
+            {...props}
+        />
     </div>
     )
 }

data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss

@@ -0,0 +1,58 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}
+
+.highcharts-point {
+  border-radius: 3px;
+}
+
+.highcharts-axis-line {
+  stroke: $border_light;
+}