playbook_ui 14.22.0.pre.alpha.PLAY2303optB8977 → 14.22.0.pre.alpha.PLAY22578709

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.22.0"
-  VERSION = "14.22.0.pre.alpha.PLAY2303optB8977"
+  VERSION = "14.22.0.pre.alpha.PLAY22578709"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.22.0.pre.alpha.PLAY2303optB8977
+  version: 14.22.0.pre.alpha.PLAY22578709
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-15 00:00:00.000000000 Z
+date: 2025-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -518,19 +518,19 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
 - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
 - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
-- app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -542,6 +542,8 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -573,8 +575,7 @@ files:
 - app/pb_kits/playbook/pb_body/docs/_body_styled.md
 - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
 - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
-- app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
-- app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
+- app/pb_kits/playbook/pb_body/docs/_body_truncate.md
 - app/pb_kits/playbook/pb_body/docs/_description.md
 - app/pb_kits/playbook/pb_body/docs/_footer.md
 - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -768,8 +769,7 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -781,6 +781,8 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -789,7 +791,6 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
 - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
 - app/pb_kits/playbook/pb_circle_chart/docs/index.js
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3283,8 +3284,7 @@ files:
 - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
 - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
 - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
-- app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
+- app/pb_kits/playbook/pb_title/docs/_title_truncate.md
 - app/pb_kits/playbook/pb_title/docs/example.yml
 - app/pb_kits/playbook/pb_title/docs/index.js
 - app/pb_kits/playbook/pb_title/title.html.erb
@@ -3341,10 +3341,8 @@ files:
 - app/pb_kits/playbook/pb_toggle/toggle.test.js
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
 - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3620,12 +3618,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_circle_chart-BZmlhBs2.js
-- dist/chunks/_typeahead-B1tu_vWi.js
-- dist/chunks/_weekday_stacked-CKk0dR5s.js
+- dist/chunks/_typeahead-BZsshVoi.js
+- dist/chunks/_weekday_stacked-DO4S-plL.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-DYpq0k8j.js
-- dist/chunks/pb_form_validation-BUOKwfvW.js
+- dist/chunks/lib-Carqm8Ip.js
+- dist/chunks/pb_form_validation-DqRmTS8m.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts

@@ -1,106 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const barGraphTheme = {
-    title: {
-        text: "",
-        style: {
-            color: colors.text_lt_default,
-            fontFamily: typography.font_family_base,
-            fontWeight: typography.bold,
-            fontSize: typography.heading_3,
-        },
-    },
-    subtitle: {
-        text: "",
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_lt_light,
-            fontWeight: typography.regular,
-            fontSize: typography.text_base,
-        },
-    },
-    chart: {
-        type: "column",
-    },
-    tooltip: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-            stops: [
-                [0, colors.bg_dark],
-                [1, colors.bg_dark],
-            ],
-        },
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_dk_default,
-            fontWeight: typography.regular,
-            fontSize: typography.text_smaller,
-        },
-    },
-    colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-    ],
-    credits: { enabled: false },
-    legend: { 
-        enabled: false, 
-        itemStyle: {
-            color: colors.text_lt_light,
-            fill: colors.text_lt_light,
-            fontSize: typography.text_smaller,
-        },
-     },
-    xAxis: {
-        gridLineWidth: 0,
-        lineColor: colors.border_light,
-        tickColor: colors.border_light,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                color: colors.text_lt_default,
-                fontFamily: typography.font_family_base,
-                fontWeight: typography.regular,
-                fontSize: typography.heading_4,
-            },
-        },
-    },
-    yAxis: {
-        alternateGridColor: undefined as string | undefined,
-        minorTickInterval: null as number | null,
-        gridLineColor: colors.border_light,
-        minorGridLineColor: colors.border_light,
-        lineWidth: 0,
-        tickWidth: 0,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-    },
-}
-
-export default barGraphTheme;

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md

@@ -1,4 +0,0 @@
-##### Prop
-`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
-
-The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md

@@ -1,4 +0,0 @@
-##### Prop
-`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
-
-The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb

@@ -1,14 +0,0 @@
-<%= pb_rails("button", props: { 
-  text: "Click to Open",
-  id: "click-tooltip-trigger-1",
-  variant: "primary"
-}) %>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_selector: "#click-tooltip-trigger-1",
-  tooltip_id: "click-tooltip-1",
-  position: "top",
-  use_click_to_open: true
-}) do %>
-  Tooltip opened by click! Click trigger again to close.
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md

@@ -1 +0,0 @@
-Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

data/dist/chunks/_circle_chart-BZmlhBs2.js

@@ -1 +0,0 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-B1tu_vWi.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-DYpq0k8j.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};