playbook_ui 15.3.0.pre.alpha.play249512047 → 15.3.0.pre.alpha.play262912095

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89525b2c53030f64515954ae6f1badd973e456e2f2549d5f921de84530f6880c
-  data.tar.gz: 5b2f3e1c9daaef48d3b3c3286c9aaa2a081be42e1a86e11b066c1e7a8a153ddb
+  metadata.gz: 1421a383b2bc47999a9d91bd809be646df02ba56985ea34c30c1a86a91a0b778
+  data.tar.gz: eb79f292c2cccef9214abc3ff25b40cd3d77f6045230ac74717179584c917dcf
 SHA512:
-  metadata.gz: 6fb5b48ffb1b6074b075de87f296ee4c1b9d994335b0d4578c87e5c3697f0814e6e15e35edf8a70f883fb0aaf653b3fd4801486134d59341ae8386056d20c26a
-  data.tar.gz: 67de52130ab150e6b370f639ad9ed26a787d6c891630a5134a7459392c2d1e1be2c5ec8a5f5da5484ee4a038a23c89ffdea516635d973f6812004aadcae29edf
+  metadata.gz: ff3c9ce78d4d2364931c6213568080685aba5c15cc7365badd40e1a712a30fa9e6195c9ead12462bd3c9659b65eff7b418d02490052baede10ad673c6dba1ef4
+  data.tar.gz: f95f7db7d8d7682079a05e6e66de4bf0e025eb7e3d4df6dc2158896fd5f49881604721be7a0bb6c33dd0cb28a6cbc88a60e22a82e997fc6d80cbb337ab7d0a76

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

@@ -66,6 +66,7 @@ const TableCellRenderer = ({
         // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
+        const cellFontColor = colDef?.columnStyling?.fontColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -88,7 +89,7 @@ const TableCellRenderer = ({
                     : `${column.getStart("left")}px`
                   : undefined,
                   backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: customRowStyle?.fontColor,
+                  color: cellFontColor || customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -17,7 +17,7 @@ export const getRowColorClass = (
     (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
   );
 
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "pb-bg-row-white";
 }
 
 /**

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

@@ -51,7 +51,7 @@
     background-color: lighten($silver, $opacity_7);
   }
 
-  .bg-white {
+  .pb-bg-row-white {
     background-color: $white;
   }
 
@@ -278,7 +278,7 @@
         }
       }
 
-      &.bg-white {
+      &.pb-bg-row-white {
         td:first-child {
           background-color: $white;
         }
@@ -756,7 +756,7 @@
       border-bottom-color: $border_dark !important;
     }
 
-    .bg-white {
+    .pb-bg-row-white {
       background: $bg_dark_card;
     }
 
@@ -766,7 +766,7 @@
 
     // Dark mode virtualized rows
     .virtualized-table-row {
-      &.bg-white {
+      &.pb-bg-row-white {
         background: $bg_dark_card !important;
 
         td:first-child {

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

@@ -308,10 +308,10 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
+  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
   expect(subRow1).not.toBeInTheDocument()
   rowButton.click()
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -328,13 +328,13 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
   expect(toggleButton).toBeInTheDocument();
 
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
+  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
   expect(subRow1).not.toBeInTheDocument();
 
   toggleButton.click();
 
   await waitFor(() => {
-    const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
+    const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
     expect(subRow).toBeInTheDocument();
   })
 })
@@ -385,7 +385,7 @@ test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
   const kit = screen.getByTestId(testId)
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -740,6 +740,69 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
+test("columnStyling.fontColor sets cell font color", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { fontColor: colors.category_1 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveStyle({ color: colors.category_1 });
+});
+
+test("columnStyling.fontColor works with background color", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling: { 
+        cellBackgroundColor: (row) => row.newEnrollments > 20 ? "success_secondary" : "warning_secondary",
+        fontColor: colors.white 
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveStyle({ color: colors.white });
+});
+
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable

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

@@ -26,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

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

@@ -1,7 +1,8 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable, colors } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
+
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -34,6 +35,7 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

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

@@ -4,4 +4,6 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
+3) `fontColor`: This will allow you to control the font color for a given column.
+
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

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

@@ -29,6 +29,7 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      column_styling: { font_color: "red" }
     }
 ] %>
 

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

@@ -4,4 +4,6 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
+3) `font_color`: This will allow you to control the font color for a given column.
+
 `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -22,7 +22,6 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
-
     },
     {
       accessor: "scheduledMeetings",
@@ -39,6 +38,15 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      columnStyling:{cellPadding: "none", fontColor: "white"},
+      customRenderer: (row, value) => (
+        <Background 
+            backgroundColor={"category_1"}
+            padding="xs" 
+        >
+         {value}
+        </Background>
+      ), 
     },
     {
       accessor: "graduatedStudents",

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

@@ -1,3 +1,3 @@
 `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
 
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 
+This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.

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

@@ -51,7 +51,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
 
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
-        tr?.classList.toggle("bg-white", !rowCb.checked);
+        tr?.classList.toggle("pb-bg-row-white", !rowCb.checked);
       }
 
       if (allCb) {
@@ -62,7 +62,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
           cb.checked = checked;
           const tr = cb.closest("tr");
           tr?.classList.toggle("bg-row-selection", checked);
-          tr?.classList.toggle("bg-white", !checked);
+          tr?.classList.toggle("pb-bg-row-white", !checked);
           const id = cb.id;
           if (checked) this.selectedRows.add(id);
           else this.selectedRows.delete(id);

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

@@ -76,7 +76,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Only apply styling if the checkbox is inside a table row
         if (rowEl) {
           rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("bg-white", "bg-silver");
+          rowEl.classList.remove("pb-bg-row-white", "bg-silver");
         }
       } else {
         // Only apply styling if the checkbox is inside a table row
@@ -85,9 +85,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           
           if (this.isRowExpanded(rowEl)) {
             rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("bg-white");
+            rowEl.classList.add("pb-bg-row-white");
           } else {
-            rowEl.classList.remove("bg-white");
+            rowEl.classList.remove("pb-bg-row-white");
             rowEl.classList.add("bg-silver");
           }
         }
@@ -120,7 +120,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (isChecked) {
       PbAdvancedTable.selectedRows.add(rowId);
       rowEl.classList.add("bg-row-selection");
-      rowEl.classList.remove("bg-white", "bg-silver");
+      rowEl.classList.remove("pb-bg-row-white", "bg-silver");
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
@@ -130,9 +130,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
       if (this.isRowExpanded(rowEl)) {
         rowEl.classList.remove("bg-silver");
-        rowEl.classList.add("bg-white");
+        rowEl.classList.add("pb-bg-row-white");
       } else {
-        rowEl.classList.remove("bg-white");
+        rowEl.classList.remove("pb-bg-row-white");
         rowEl.classList.add("bg-silver");
       }
     }
@@ -407,7 +407,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     const row = this.element.closest("tr");
     if (row) {
       row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("bg-white", isVisible);
+      row.classList.toggle("pb-bg-row-white", isVisible);
     }
 
     this.addBorderRadiusOnLastVisibleRow();

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -52,7 +52,7 @@
     }
   }
 
-  .bg-white {
+  .pb-bg-row-white {
     td:first-child,
     .sticky-left {
       background-color: $bg-main;
@@ -63,7 +63,7 @@
     &.bg-silver td:first-child {
       background-color: $bg-secondary;
     }
-    &.bg-white td:first-child {
+    &.pb-bg-row-white td:first-child {
       background-color: $bg-main;
     }
     &.bg-row-selection td:first-child {

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

@@ -39,7 +39,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(column, index)
@@ -79,15 +79,44 @@ module Playbook
         cell_background_color(column).present?
       end
 
+      def cell_font_color(column)
+        return nil unless column[:accessor].present?
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:font_color].present?
+          font_color = orig_def[:column_styling][:font_color]
+          if font_color.respond_to?(:call)
+            font_color.call(row)
+          else
+            font_color
+          end
+        end
+      end
+
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
       def cell_component_info(column, index, bg_color, font_color)
+        column_font_color = cell_font_color(column)
+        effective_font_color = column_font_color || font_color
+
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
           component_name = "background"
-          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
+          component_props = {
+            background_color: custom_bg_color,
+            tag: "td",
+            classname: td_classname(column, index),
+          }
+          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
         else
           component_name = "table/table_cell"
-          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
+          style_hash = { "background-color": bg_color }
+          style_hash[:color] = effective_font_color if effective_font_color.present?
+          component_props = {
+            html_options: {
+              style: style_hash,
+            },
+            classname: td_classname(column, index),
+          }
         end
 
         { name: component_name, props: component_props }

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,3 +1,11 @@
+<% 
+  html_options_style = ""
+  if object.html_options[:style].is_a?(Hash)
+    html_options_style = object.html_options[:style].map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
+  elsif object.html_options[:style].is_a?(String)
+    html_options_style = object.html_options[:style]
+  end
+%>
 <% if object.image_url.present? %>
   <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
@@ -9,8 +17,8 @@
   <% end %>
 <% else %>
   <%= pb_content_tag(object.tag,
-      style: object.custom_background_color
+      style: "#{object.custom_background_color}#{html_options_style.present? ? "; #{html_options_style}" : ""}"
   ) do %>
     <%= content.presence %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string,
+  amount: string | number,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,6 +59,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
+  // Convert numeric input to string format
+  const convertAmount = (input: string | number): string => {
+    if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
+      return input.toFixed(2)
+    }
+    return input
+  }
+
+  const currencyAmount = convertAmount(amount)
+
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
@@ -68,7 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = amount.split('.')
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -92,19 +105,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
-    
+
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -152,7 +165,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
-      
+
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -160,7 +173,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
-      
+
               <Body
                   className="unit"
                   color="light"

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -17,8 +17,7 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
 
-      prop :amount, type: Playbook::Props::String,
-                    required: true
+      prop :amount, required: true
 
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -92,7 +91,7 @@ module Playbook
       end
 
       def negative_sign
-        amount.starts_with?("-") && swap_negative ? "-" : ""
+        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
       end
 
       def body_props
@@ -117,10 +116,32 @@ module Playbook
         end
       end
 
+      def currency_amount
+        @currency_amount ||= convert_amount(amount)
+      end
+
     private
 
+      # Convert numeric input to string format
+      def convert_amount(input)
+        if input.is_a?(Numeric)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
+        else
+          input.to_s
+        end
+      end
+
       def whole_value
-        value = amount.split(".").first
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -129,7 +150,9 @@ module Playbook
       end
 
       def decimal_value
-        amount.split(".")[1] || "00"
+        return "00" if currency_amount.blank?
+
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element
@@ -147,7 +170,9 @@ module Playbook
       end
 
       def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
+        return "" if currency_amount.blank?
+
+        value = currency_amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -174,9 +199,11 @@ module Playbook
 
         if decimals == "matching"
           if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
+            return "" if currency_amount.blank?
+
+            number_with_delimiter(currency_amount.gsub(",", ""))
           else
-            amount
+            currency_amount
           end
         else
           whole_value

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -133,3 +133,50 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
+
+test('handles numeric amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount={320}
+          data={{ testid: 'test-numeric-default' }}
+      />
+      <Currency
+          abbreviate
+          amount={3200000}
+          data={{ testid: 'test-numeric-millions' }}
+      />
+      <Currency
+          amount={123456.78}
+          commaSeparator
+          data={{ testid: 'test-numeric-comma-decimals' }}
+      />
+      <Currency
+          amount={400.50}
+          data={{ testid: 'test-numeric-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount={500.55}
+          data={{ testid: 'test-numeric-medium-size' }}
+          size="md"
+      />
+      <Currency
+          amount={-600.70}
+          data={{ testid: 'test-numeric-negative' }}
+      />
+      <Currency
+          amount={0.00}
+          data={{ testid: 'test-numeric-null' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
+  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
+  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
+  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
+  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
+  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
+})