playbook_ui 15.4.0.pre.rc.0 → 15.4.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ffa062a1dee192ded6eb85e82b07ea7ded408162b2607216f8ca4efaf2025c01
-  data.tar.gz: 8baba08f216168f75043aa15d1d44b7cfe5a4a7a3ede98d966a75fd586aa8c83
+  metadata.gz: 8756195b79021a48424cf2bd8a089948bebbf4c613c04a66960f680d891d79f6
+  data.tar.gz: 904bdd2056ff5dd877f4d96d131a6548a05e9b601e83e8a9de77256a4265b08d
 SHA512:
-  metadata.gz: c95c2c0458e574f14a5bddb1ff5c3f487b52670718248b4f92c9ed49c1d00d5ca5075b9531d0d45ec2b3ca0b96023138cc24d01fbe1950d883d62bf748232f87
-  data.tar.gz: 96dd7aa86bb80b87139d8625d2d1fafc4432064977bd86bcc07ffcd90d1c697c1fc3530ec688d0001a289810d1e92219111483d079fc1ad61d8fc942417a1113
+  metadata.gz: 375ba6253df92a3e7f304d214d60cbe0c0a19b663362be0499349704516a2307d810acd570cf2c8124148352d45f7c46bb178c6563802eb24501a701a557e11e
+  data.tar.gz: a5d7cce19c57a82b4cd3328bdec7b902d891d0930541d41fc4789adb93eb3b8910ba3284bd4ae8963f36f63b85cb1eabe9da3a7de6cc7a89dd878103419a66a9

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/Hooks/useTableState.ts

@@ -250,6 +250,21 @@ export function useTableState({
     }
   }, [pagination, inlineRowLoading, paginationProps?.pageIndex, paginationProps?.pageSize]);
 
+  // Call the callback with the new page index when localPagination.pageIndex changes (with inlineRowLoading)
+  useEffect(() => {
+    if (pagination && inlineRowLoading && paginationProps?.onPageChange) {
+      paginationProps.onPageChange(localPagination.pageIndex);
+    }
+  }, [localPagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
+
+  // Call the callback with the new page index when localPagination.pageIndex changes (without inlineRowLoading)
+  useEffect(() => {
+    if (pagination && !inlineRowLoading && paginationProps?.onPageChange) {
+      const currentPageIndex = table.getState().pagination.pageIndex;
+      paginationProps.onPageChange(currentPageIndex);
+    }
+  }, [table.getState().pagination.pageIndex, pagination, inlineRowLoading, paginationProps]);
+
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

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

@@ -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_border_color.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).

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

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).

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/docs/_advanced_table_pagination_with_props.jsx

@@ -38,7 +38,10 @@ const AdvancedTablePaginationWithProps = (props) => {
   const paginationProps = {
     pageIndex: 1,
     pageSize: 10,
-    range: 2
+    range: 2,
+    onPageChange: (pageIndex) => {
+      console.log('Current page index:', pageIndex);
+    }
   }
   
   return (

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

@@ -1,5 +1,6 @@
-`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
+`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
 
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
-- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
+- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
+- `onPageChange`: A callback function that gives to access to the current page index.

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

@@ -1,7 +1,7 @@
 To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
 
 - Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud//global_props/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
 

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

@@ -1,4 +1,4 @@
-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. 
+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/global_props/max_height) global prop. 
 
 **NOTE**: 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.
 

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

@@ -1,4 +1,4 @@
-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. 
+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/global_props/max_height) global prop. 
 
 **NOTE**: 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.
 

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

@@ -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_background/docs/_background_category.md

@@ -1 +1 @@
-Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>  

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')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: "342",
+  amount: 342,
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount="342"
+          amount={342}
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md

@@ -0,0 +1 @@
+**NOTE:** The value passed into the `amount` prop can be either a string or numeric value.

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -85,6 +85,8 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
+      prop :cursor, type: Playbook::Props::String,
+                    default: "pointer"
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.