playbook_ui 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 306dc4745caf34ef63a31a17242d418bd467d6c83de7d01581ff0fd035fef180
-  data.tar.gz: c4a0db4b8c8a9a43c3728f22d54089b601feff2d9a344b7c04f8dc234ef94350
+  metadata.gz: fcf251161270426f1872fe6a3344fa2b30027ebf0e8de2438a1425b76227a846
+  data.tar.gz: 7c0f7ef946114d87099cdf24562e8731f1686498dcef593092d0fd8a7c9f4091
 SHA512:
-  metadata.gz: f08753405a0f522a8eb84b2f9d027e416f185161aa70c0e1482c75efcccb813619b17320f17eea0a2bf0d52939ad0c81a9b82309b8c9608aedfa76bc55bb6365
-  data.tar.gz: 678925d5dc93f1c249e3ec1c59529ae9ee822566d0ea7594c84a25813f983043636fd84192a7fda479ce86ad5f558c1637c357f77117fe68b6eed95780796b92
+  metadata.gz: f1d66fe512c67ece02687f200a99c4daf2fd581b83e45857bac0214a6ea62160eee6f9152833b35ee6a9b618a212f360e721604ebfc913fdfb5871c4464e24ae
+  data.tar.gz: fd937db687917267ff67e23f04344d63dda613ee7c56c17870892c8a2894f2a9d5c2c06916a607711c9d70dbd028acad003480d9585c4ab05f6481b7b96b1ff6

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,7 @@
 
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';
@@ -14,7 +15,6 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
+          justify={!hasAnySubRows ? "end" : "start"}
           orientation="row"
       >
         {

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,15 +39,8 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const {
-    sortControl,
-    responsive,
-    selectableRows,
-    hasAnySubRows,
-    showActionsBar,
-    inlineRowLoading,
-    isActionBarVisible,
-  } = useContext(AdvancedTableContext);
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
+    useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
@@ -72,7 +65,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
+  `${showActionsBar && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
@@ -98,7 +91,7 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
+  if (header?.index === 0 && hasAnySubRows) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,12 @@
     width: 100%;
   }
 
-    .row-selection-actions-card {
-      border-bottom-right-radius: 0px !important;
-      border-bottom-left-radius: 0px !important;
-      border-bottom-color: transparent;
-      transition: height 300ms ease;
-    }
+  .row-selection-actions-card {
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-color: transparent;
+  }
+
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -89,47 +89,11 @@
     }
   }
 
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
 
-  // Sticky Header
-  .sticky-header {
-    thead {
-      z-index: 3 !important;
-    }
-  }
-
-  // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
-  &.advanced-table-max-height-xs {
-    max-height: 320px;
-    overflow-y: auto;
-  }
-  &.advanced-table-max-height-sm {
-    max-height: 480px;
-    overflow-y: auto;
-  }
-  &.advanced-table-max-height-md {
-    max-height: 768px;
-    overflow-y: auto;
-  }
-  &.advanced-table-max-height-lg {
-    max-height: 1024px;
-    overflow-y: auto;
-  }
-  &.advanced-table-max-height-xl {
-    max-height: 1280px;
-    overflow-y: auto;
-  }
-  &.advanced-table-max-height-xxl {
-    max-height: 1440px;
-    overflow-y: auto;
-  }
-  &.advanced-table-max-height-xxxl {
-    max-height: 1920px;
-    overflow-y: auto;
-  }
-  
   // Icons
   .button-icon {
     display: flex;
@@ -215,7 +179,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {
+  @media only screen and (max-width: $screen-xl-min) {  
     &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
@@ -251,27 +215,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      .row-selection-actions-card {
-        border-right-width: 0px;
-        border-left-width: 0px;
-        position: sticky;
-        top: 0;
-        left: 0;
-        border-radius: unset;
-      }
-      .checkbox-cell {
-        display: table-cell !important;
-      }
-      .sticky-header {
-        thead {
-          th:first-child {
-            box-shadow: 1px 0 10px -2px $border_light !important;
-          }
-        }
-        .pb_advanced_table_header {
-          box-shadow: none !important;
-        }
-      }
+      
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -359,15 +303,7 @@
         .bg-white td:first-child {
           background-color: $bg_dark_card;
         }
-        .sticky-header {
-          thead {
-            th:first-child {
-              background: $bg_dark;
-              box-shadow: 1px 0 10px -2px $border_dark !important;
-            }
-          }
-        }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from "react"
+import React, { useState, useEffect, useCallback } from "react"
 import classnames from "classnames"
 
 import { GenericObject } from "../types"
@@ -27,7 +27,6 @@ import FlexItem from "../pb_flex/_flex_item"
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
 import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
-import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
 
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
@@ -49,7 +48,6 @@ type AdvancedTableProps = {
   initialLoadingRowsCount?: number
   inlineRowLoading?: boolean
   loading?: boolean | string
-  maxHeight?: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl"
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
@@ -81,7 +79,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     initialLoadingRowsCount = 10,
     inlineRowLoading = false,
     loading,
-    maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
     pagination = false,
@@ -116,7 +113,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 
   //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
       row,
       getValue,
@@ -126,7 +123,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    if (isFirstColumn) {
+    if (index === 0) {
       switch (row.depth) {
         case 0: {
           return (
@@ -164,16 +161,15 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     return columnCells
   }
 
-  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
+  const buildColumns = (columnDefinitions: GenericObject[]): any => {
     return (
       columnDefinitions &&
       columnDefinitions.map((column, index) => {
-        const isFirstColumn = isRoot && index === 0; 
         //Checking to see if grouped column or not
         if (column.columns && column.columns.length > 0) {
           return {
             header: column.label || "",
-            columns: buildColumns(column.columns, false),
+            columns: buildColumns(column.columns),
           };
         } else {
           // Define the base column structure
@@ -187,7 +183,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnStructure.cell = createCellFunction(
               column.cellAccessors,
               column.customRenderer,
-              isFirstColumn
+              index
             );
           }
 
@@ -292,7 +288,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
-    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
     globalProps(props),
     className
   )
@@ -300,20 +295,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const onPageChange = (page: number) => {
     table.setPageIndex(page - 1)
   }
-//When to show the actions bar as a whole
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
-
-  //Ref and useEffect for animating the actions bar
-  const cardRef = useRef(null);
-  useEffect(() => {
-    if (cardRef.current) {
-      if (isActionBarVisible) {
-        showActionBar(cardRef.current);
-      } else {
-        hideActionBar(cardRef.current);
-      }
-    }
-  }, [isActionBarVisible]);
 
   return (
     <div {...ariaProps} 
@@ -330,7 +311,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
-            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -353,24 +333,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          <Card
-              borderNone={!isActionBarVisible}
-              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
-              htmlOptions={{ ref: cardRef as any }}
-              padding={`${isActionBarVisible ? "xs" : "none"}`}
-          >
-            <Flex alignItems="center" 
-                justify="between"
-            >
-              <Caption color="light" 
-                  paddingLeft="xs" 
-                  size="xs"
+          {
+            selectableRows && showActionsBar && (
+              <Card className="row-selection-actions-card"
+                  padding="xs"
               >
-                {selectedRowsLength} Selected
-              </Caption>
-              <FlexItem>{actions}</FlexItem>
-            </Flex>
-          </Card>
+                <Flex alignItems="center"
+                    justify="between"
+                >
+                    <Caption color="light"
+                        paddingLeft="xs"
+                        size="xs"
+                    >
+                      {selectedRowsLength} Selected
+                    </Caption>
+                    <FlexItem>
+                    {actions}
+                    </FlexItem>
+                </Flex>
+              </Card>
+            )
+          }
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

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

@@ -17,21 +17,14 @@ module Playbook
                         default: "scroll"
       prop :table_props, type: Playbook::Props::HashProp,
                          default: {}
-      prop :max_height, type: Playbook::Props::Enum,
-                        values: %w[auto xs sm md lg xl xxl xxxl],
-                        default: "auto"
 
       def classname
-        generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
+        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
       end
 
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end
-
-      def max_height_classname
-        max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
-      end
     end
   end
 end

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, sticky: true }}) %>

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

@@ -44,7 +44,6 @@ const AdvancedTableTableProps = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          responsive="none"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}

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

@@ -1,3 +1 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
-
-This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).

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

@@ -1,3 +1 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
-
-This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).

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

@@ -5,7 +5,6 @@ examples:
   - 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
@@ -23,7 +22,6 @@ 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
@@ -31,7 +29,6 @@ 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,6 +18,4 @@ 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 AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'

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

@@ -133,18 +133,15 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-
-    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);
+    if (isVisible) {
+      this.hideElement(elements);
+      this.displayDownArrow();
+    } else {
+      this.showElement(elements);
+      this.displayUpArrow();
     }
   }
 
-
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

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

@@ -14,13 +14,10 @@
                     <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? %>
@@ -45,4 +42,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

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

@@ -27,9 +27,6 @@ $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%;
@@ -55,10 +52,6 @@ $avatar-sizes: (
         flex-grow: 0;
         flex-basis: $size;
 
-        .dark & {
-          background: $text_dk_light;
-        }
-
         &::before {
           content: attr(data-initials);
           width: 100%;
@@ -85,11 +78,9 @@ $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
   },
-  dark?: boolean,
   data?: {[key: string]: string},
+  dark?: boolean,
   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,14 +115,12 @@ 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"}
@@ -133,13 +131,11 @@ 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"}
@@ -149,7 +145,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", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
+      <%= 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: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
+        <%= 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" %>
-  <%= 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", 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] }) %>
+    <%= 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] }) %>
     <% end %>
     <% end %>
   <% else %>
@@ -26,3 +26,4 @@
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
 <% end %>
+