playbook_ui_docs 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863 → 14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863
+  version: 14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-11 00:00:00.000000000 Z
+date: 2025-06-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -74,8 +74,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
@@ -149,8 +147,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -230,13 +226,14 @@ files:
 - 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
@@ -248,6 +245,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
@@ -418,8 +417,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
@@ -431,6 +429,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
@@ -439,7 +439,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/docs/_circle_icon_button_click.jsx
@@ -2282,10 +2281,8 @@ files:
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md
 - app/pb_kits/playbook/pb_toggle/docs/example.yml
 - app/pb_kits/playbook/pb_toggle/docs/index.js
-- 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

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

@@ -1,65 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableCustomSort = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      id: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      id: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      id: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      id: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      id: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      id: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-//Render the subRow header rows
-const subRowHeaders = ["Quarter", "Month", "Day"]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          customSort
-          enableToggleExpansion="all"
-          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
-          tableData={MOCK_DATA}
-          {...props}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableCustomSort

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

@@ -1,5 +0,0 @@
-The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
-
-The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table. 
-
-__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided. 

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

@@ -1,69 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Icon from "../../pb_icon/_icon"
-import Flex from "../../pb_flex/_flex"
-import Caption from "../../pb_caption/_caption"
-import Tooltip from "../../pb_tooltip/_tooltip"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableWithCustomHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      header: () => (
-        <Flex alignItems="center" 
-            justifyContent="center"
-        >
-          <Caption marginRight="xs">New Enrollments</Caption>
-          <Tooltip placement="top" 
-              text="Whoa. I'm a Tooltip" 
-              zIndex={10}
-          >
-            <Icon cursor="pointer" 
-                icon="info"
-                size="xs" 
-            />
-          </Tooltip>
-        </Flex>
-      ),
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableWithCustomHeader

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

@@ -1 +0,0 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

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_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_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.