playbook_ui 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510 → 15.0.0.pre.alpha.PLAY198710641

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3ed0631c51b54669ffc7faa87720d44235290b760f64df26d8cad1af3e527d5
-  data.tar.gz: 06da8419d842a780b2e5567affe683a5c28e227400a5231f82bdc6d920411186
+  metadata.gz: 4f692a3e63d89de4fe158b94d5114817e3e6dfd45108fb5ea88dec73f8a3362b
+  data.tar.gz: b77805447d91e42a4167450176bcf1772ed6d9bed5231786cde8cf6ce3929651
 SHA512:
-  metadata.gz: 2ac52928a5ea5c597a37469b85f6509cbd26236e7e5195b9636d8409cfc7ad513d22ddb4a7889f47bf12d7d1fca748704fcd72007b89acef5e66a93cf4681db4
-  data.tar.gz: faa7715595570f694456f0d9a19430c3ff0b7cbdf66ab1f63e8a843110541e1da10fb22149e004069bc82dd8a27a7469f279e9fd41957befdcca61d3f21b8038
+  metadata.gz: f6619f4dc7594a4b1e2cf846f29847640f6ae076afc3b60b1b2f385c37ced204c40b9355a63af0ea65aa9bb4ab2130f4c43198a48eaa2719761e91a9ebe61930
+  data.tar.gz: e29fa8941bdf8b40ccae627949a91b336e52dc63e888b9b1c48e53b6588f39cbf5aac5c4bfaf53cdc7115c06b385e0f3ee96d791a25085e6ef6286e52d13d423

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,6 @@
 
 
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -109,6 +110,7 @@
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'pb_pb_bar_graph/pb_bar_graph';
+@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -61,7 +60,7 @@ const TableCellRenderer = ({
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
-
+        
         return (
           <td
               align={cellAlignment}
@@ -133,7 +132,6 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
-
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -146,7 +144,7 @@ export const RegularTableView = ({
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
-            top:
+            top:   
               row.getIsPinned() === 'top'
                   ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
                   : undefined,
@@ -171,20 +169,21 @@ export const RegularTableView = ({
   return (
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
-        <PinnedRow key={row.id}
-            row={row}
+        <PinnedRow key={row.id} 
+            row={row} 
         />
       ))}
       {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
+        const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
+        const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         const numberOfColumns = table.getAllFlatColumns().length;
+        const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
+        const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
+        const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
-        // Use functions from RowUtils for consistent cell coloring
-        const rowColor = getRowColorClass(row, inlineRowLoading || false);
-        const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
-
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
             {isFirstChildofSubrow && subRowHeaders && (
@@ -229,7 +228,7 @@ export const RegularTableView = ({
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
             {isDataLoading && (
-              <tr key={`${row.id}-loading-row`}>
+              <tr key={`${row.id}-row`}>
                 <td colSpan={numberOfColumns}
                     style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
                 >
@@ -244,4 +243,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

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

@@ -7,7 +7,6 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
-import { getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -46,10 +45,10 @@ export const VirtualizedTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const sortingState = JSON.stringify(table.getState().sorting || []);
-
+  
   // Store column widths extracted from header
   const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
-
+  
   // Function to get header cell widths
   const getHeaderCellWidths = () => {
     const widths: {[key: string]: string} = {};
@@ -104,7 +103,7 @@ export const VirtualizedTableView = ({
     // Create debounced version of the width measurement function
     const handleResize = debounce(() => {
       setColumnWidths(getHeaderCellWidths());
-    }, 100);
+    }, 0);
 
     // Add the event listener
     window.addEventListener('resize', handleResize);
@@ -137,7 +136,7 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
-
+  
   // Establish # of Parent Rows (so that Footer count does not include every single row)
   const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
@@ -173,9 +172,10 @@ export const VirtualizedTableView = ({
 
         if (item.type === 'row') {
           const row = item.row;
-
-          // Use the utility function to get consistent row color
-          const rowColor = getRowColorClass(row, inlineRowLoading || false);
+          const isExpandable = row.getIsExpanded();
+          const rowHasNoChildren = row.original?.children && !row.original.children.length;
+          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
+          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 
           return (
             <tr

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

@@ -10,14 +10,9 @@ export const getRowColorClass = (
 ): string => {
   const isExpandable = row.getIsExpanded();
   const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+  const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
 
-  // Check if row can expand or is currently expanded
-  const shouldShowExpandedBackground = isExpandable && (
-    (!inlineRowLoading && row.getCanExpand()) ||
-    (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
-  );
-
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
+  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 }
 
 /**

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -20,7 +20,7 @@
 // Dark mode
 .pb_card_kit.dark {
   @include pb_card_dark;
-  
+
   &.pb_card_kit_selected {
     @include pb_card_selected_dark;
   }
@@ -33,7 +33,8 @@
 
 // Highlight styles
 .pb_card_kit_highlight_top,
-.pb_card_kit_highlight_side {
+.pb_card_kit_highlight_side,
+.pb_card_kit_highlight_right_side {
   overflow: hidden;
 }
 
@@ -52,13 +53,20 @@
   }
 }
 
-// Highlight side variants  
+// Highlight side variants
 @each $color_name, $color_value in $pb_card_highlight_colors {
   .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
     @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
   }
 }
 
+// Highlight side right variants
+@each $color_name, $color_value in $pb_card_highlight_colors {
+  .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
+    @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
+  }
+}
+
 // Card Header
 .pb_card_header_kit {
   flex-grow: 0;
@@ -68,7 +76,7 @@
   padding: $space_sm;
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-  
+
   // Inherit border radius from parent card
   .pb_card_kit_border_radius_xs & {
     border-radius: $border_radius_xs $border_radius_xs 0px 0px;

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -26,7 +26,7 @@ type CardPropTypes = {
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
-    position?: "side" | "top",
+    position?: "side" | "right_side" | "top",
     color?: string,
   },
   id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
   const headerColorCSS = `pb_card_header_kit_${headerColor}`
   const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
-  
+
   const headerCSS = classnames(
     'pb_card_header_kit',
     headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
   const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
   const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
-  
+
   const cardCss = classnames(
     'pb_card_kit', // Base class
     selectedCSS,

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -87,6 +87,16 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background: $background;
 }
 
+@mixin pb_card_right_highlight($width, $height, $background){
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: $width;
+  height: $height;
+  background: $background;
+}
+
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
 }

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,6 +4,9 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
+<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
+  Right Side Position & Product 5 Highlight Color
+<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

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

@@ -21,6 +21,14 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
+      <Card
+          {...props}
+          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
+          marginBottom="sm"
+      >
+        {'Right Side Position & Product 5 Highlight Color'}
+      </Card>
+
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -51,6 +51,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
+          aria={aria}
           borderRadius="xs"
           htmlType={htmlType}
           link={link}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -1,5 +1,6 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: { type: object.type,
+  <%= pb_rails("button", props: { aria: object.aria,
+                                  type: object.type,
                                   link: object.link,
                                   new_window:object.new_window,
                                   target: object.target,

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -140,7 +140,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const Tag = link ? "a" : "div";
+  const isLink = !!link
+  const Tag = isLink ? "a" : "div"
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
@@ -200,6 +201,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isLink && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault()
+      onClick?.()
+    }
+  }
+
   return (
     <>
       {collapsible ? (
@@ -222,15 +230,18 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                   {...dataProps}
                   {...htmlProps}
                   className={classes}
-                  href={link}
+                  href={isLink ? link : undefined}
                   id={id}
-                  target={target}
+                  role={!isLink ? "button" : undefined}
+                  tabIndex={!isLink ? 0 : undefined}
+                  target={isLink ? target : undefined}
               >
                 {imageUrl && (
                   <div
                       className="pb_nav_list_item_icon_section_collapsible"
                       key={imageUrl}
                       onClick={(e) => handleIconClick(e)}
+                      onKeyDown={!isLink ? handleKeyDown : undefined}
                   >
                     <Image className="pb_nav_img_wrapper"
                         url={imageUrl}
@@ -265,10 +276,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...dataProps}
             {...htmlProps}
             className={classes}
-            href={link}
+            href={isLink ? link : undefined}
             id={id}
             onClick={onClick}
-            target={target}
+            onKeyDown={!isLink ? handleKeyDown : undefined}
+            role={!isLink ? "button" : undefined}
+            tabIndex={!isLink ? 0 : undefined}
+            target={isLink ? target : undefined}
         >
           {imageUrl && (
             <div className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,7 +3,9 @@
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,
-            target: object.link && object.target
+            target: object.link && object.target,
+            onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
+            tabindex: object.link ? nil : 0,
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -23,7 +25,9 @@
   <% else %>
     <%= pb_content_tag( object.tag,
         href: object.link && object.link,
-        target: object.link && object.target
+        target: object.link && object.target,
+        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
+        tabindex: object.link ? nil : 0,
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss

@@ -0,0 +1,3 @@
+.pb_pb_circle_chart {
+
+}

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -0,0 +1,62 @@
+
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import pbCircleGraphTheme from './pbCircleChartTheme'
+import { globalProps } from '../utilities/globalProps'
+
+type PbCircleChartProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  options: Record<string, unknown>
+}
+
+const PbCircleChart = (props: PbCircleChartProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  htmlOptions = {},
+  options
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
+
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <PbCircleChart />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbCircleGraphTheme, options)
+  }, [options])
+
+  return (
+
+    <div>
+      <HighchartsReact
+          containerProps={{
+                  className: classnames(globalProps, className),
+                  id: id,
+                  ...ariaProps,
+                  ...dataProps,
+                  ...htmlProps
+                }}
+          highcharts={Highcharts}
+          options={mergedOptions}
+      />
+    </div>
+  )
+}
+
+export default PbCircleChart

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb

@@ -0,0 +1,31 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: '20',
+    }],
+  } %>
+
+<div style="position: relative;">
+  <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
+
+  <div class="pb-circle-chart-block"
+       style="position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; text-align: center; pointer-events: none;">
+    <%= pb_rails("title", props: { size: 1, tag: "div", text: "83" }) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { PbCircleChart, Title } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartBlockContent = (props) => {
+const chartOptions = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: 20,
+      borderColor: null,
+    }],
+    chart: {
+      events: {
+        render: function() {
+          const chart = this;
+          const blockElement = document.querySelector('.pb-circle-chart-block');
+          if (blockElement) {
+            blockElement.style.width = chart.chartWidth + 'px';
+            blockElement.style.height = chart.chartHeight + 'px';
+          }
+        },
+        redraw: function() {
+          const chart = this;
+          const blockElement = document.querySelector('.pb-circle-chart-block');
+          if (blockElement) {
+            blockElement.style.width = chart.chartWidth + 'px';
+            blockElement.style.height = chart.chartHeight + 'px';
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+      <div 
+          className="pb-circle-chart-block"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1,
+            textAlign: 'center',
+            pointerEvents: 'none'
+          }}
+      >
+        <Title
+            size={1}
+            tag="div"
+        >
+          {'83'}
+        </Title>
+      </div>
+    </div>
+  );
+};
+
+export default PbCircleChartBlockContent;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb

@@ -0,0 +1,25 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        colors: ["#144075", "#1CA05C", "#F9BB00"],
+      },
+    },
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { PbCircleChart, colors } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartColorOverrides = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
+      },
+    },
+  };
+
+  return (
+  <div>
+    <PbCircleChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartColorOverrides;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md

@@ -0,0 +1,5 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. 
+
+For Rails, only HEX colors can be used eg: `#CA0095`