playbook_ui 14.12.0.pre.alpha.playrailsinputmaskissue5933 → 14.12.0.pre.alpha.testingwithfas5686

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d0b37aeb1934fcd42145b3b00c5ccdb1d0d202320271ffb3f6cce025a8842c1
-  data.tar.gz: d4947bdab12110f001ddb7a4dccd6cb76632f77c5d834aa7ceb4c2ca3f090de9
+  metadata.gz: 70aa73eb8ece3ea28aa88fa13da553148852aeeb320f7754aa1a44a281b818b8
+  data.tar.gz: e280408bed26178739f5968366d25e022fe2ce82cd0de0d44a1b0edd314e5548
 SHA512:
-  metadata.gz: ed89b4908906b35935f6dc4a95243dbcecc890b73cad32d5e91420d9ccaf762a4ab38fecb391b0c4c72af07d04222066a38b7e8a2c31881da1038457c91861b6
-  data.tar.gz: 07a73fd48069b741436c35ed29821d438f1f2114ff1d90eda9626ca2d6632fbf6a0c997eefe8398e0b37b1935fc929c45160e2a959574b7b4f400fd9195e7229
+  metadata.gz: df3c914b0851d7062f5d13d2c9a69ee3e0958f06c65ac1981db9ce734736e18a2bc959d9f3c80796cf7f5239f82ab20a077ffda3d350f2e2054e619335706fcc
+  data.tar.gz: 8e9b984ed70aa177c2c77b72c0d4b28953a4c1e752bea2a35f129b551c934600a4908d04d831f06485c75514e3cfd28ed183c59f5ac29f21e54652824872e6cb

data/app/pb_kits/playbook/_playbook.scss

@@ -15,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,6 +89,7 @@
     }
   }
 
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -178,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,
@@ -214,7 +215,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-
+      
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -305,4 +306,4 @@
       }
     }
   }
-}
+}

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"
@@ -296,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} 
@@ -326,7 +311,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
-            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -349,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.html.erb

@@ -1,10 +1,15 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
-          <% if content.present? %>
-            <% content.presence %>
-          <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
-          <% end %>
-        <% end %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) do %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions,
+                                                            enable_toggle_expansion: object.enable_toggle_expansion,
+                                                            responsive: object.responsive }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id,
+                                                         table_data: object.table_data,
+                                                         column_definitions: object.column_definitions,
+                                                         responsive: object.responsive }) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -10,8 +10,6 @@ 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"

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
 })
 
 
-test("loading state + initialLoadingRowsCount prop", () => {
+test("loading state + initialLoadingRowCount prop", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading_react.md → _advanced_table_loading.md}

@@ -1,3 +1,3 @@
-The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
+the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

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

@@ -1,7 +1,6 @@
 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

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_body.rb

@@ -16,8 +16,6 @@ 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"
@@ -56,7 +54,7 @@ module Playbook
         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, responsive: responsive, loading: loading })
+        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 })
 
         if row[:children].present?
           row[:children].each do |child_row|

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

@@ -6,15 +6,11 @@
         <%= 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 %>
+              <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 %>

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

@@ -8,8 +8,6 @@ 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"

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

@@ -2,7 +2,7 @@
         <% 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, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
                             <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -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_advanced_table/table_row.rb

@@ -13,8 +13,6 @@ 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"

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,4 @@ $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 %>
+

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

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

data/app/pb_kits/playbook/pb_button/button.rb

@@ -65,7 +65,7 @@ module Playbook
       end
 
       def tag
-        link && !disabled ? "a" : "button"
+        link ? "a" : "button"
       end
 
       def valid_emoji(icon)

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit fas fa-lg fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"