playbook_ui 14.18.1.pre.rc.0 → 14.19.0.pre.rc.0

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.18.0"
-  VERSION = "14.18.1.pre.rc.0"
+  VERSION = "14.19.0.pre.rc.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.18.1.pre.rc.0
+  version: 14.19.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-30 00:00:00.000000000 Z
+date: 2025-04-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1218,15 +1218,12 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
@@ -1426,8 +1423,6 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
-- app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb
-- app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md
 - app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx
 - app/pb_kits/playbook/pb_filter/docs/example.yml
@@ -1939,13 +1934,10 @@ files:
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md
 - app/pb_kits/playbook/pb_line_graph/docs/example.yml
 - app/pb_kits/playbook/pb_line_graph/docs/index.js
 - app/pb_kits/playbook/pb_line_graph/lineGraph.test.js
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
-- app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
 - app/pb_kits/playbook/pb_link/_link.scss
@@ -2351,9 +2343,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
@@ -2402,8 +2391,6 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -3534,11 +3521,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/_typeahead-D8CsVBZO.js
-- dist/chunks/_weekday_stacked-CHQsoCdP.js
+- dist/chunks/_typeahead-BX8IifKY.js
+- dist/chunks/_weekday_stacked-DfMD7HJz.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BmTAc7Nc.js
-- dist/chunks/pb_form_validation-BWjy4bFn.js
+- dist/chunks/lib-96_ZmvAo.js
+- dist/chunks/pb_form_validation-Vv2TqXVC.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb

@@ -1,43 +0,0 @@
-<% data_shadow = [
-  { id: "51", text: "Task 1" },
-  { id: "52", text: "Task 2" },
-  { id: "53", text: "Task 3" }
-] %>
-
-<% data_outline = [
-  { id: "61", text: "Task 1" },
-  { id: "62", text: "Task 2" },
-  { id: "63", text: "Task 3" }
-] %>
-
-<%= pb_rails("flex", props: { justify: "around" }) do %>
-  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
-    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
-      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
-      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
-        <% data_shadow.each do |item| %>
-          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
-            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
-              <%= pb_rails("body", props: { text: item[:text] }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
-    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
-      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
-      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
-        <% data_outline.each do |item| %>
-          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
-            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
-              <%= pb_rails("body", props: { text: item[:text] }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb

@@ -1,55 +0,0 @@
-<% initial_items = [
-  {
-    id: "141",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "142",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "143",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<% next_init_items = [
-  {
-    id: "151",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "152",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "153",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex", props: { gap: "sm" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<br/>
-
-<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex", props: { gap: "sm" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md

@@ -1 +0,0 @@
-  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb

@@ -1,41 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    id: "filter_within_trubo_frames",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-    popover_props: { append_to: "parent"  },
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -1 +0,0 @@
-By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-}, {
-  name: 'Project Development',
-  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const baseOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -1,110 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const lineGraphTheme = {
-  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: "line",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    line: {
-      dataLabels: {
-        enabled: false,
-      },
-    },
-  },
-  credits: { enabled: false },
-  legend: { enabled: false },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  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 lineGraphTheme;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search",
-}) %>
-
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search-limited",
-    only_countries: ["br", "us", "ph", "gb"],
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../_phone_number_input'
-
-const PhoneNumberInputCountrySearch = (props) => (
-    <>
-        <PhoneNumberInput
-            countrySearch
-            id='country-search'
-            {...props} 
-        />
-        <PhoneNumberInput
-            countrySearch
-            id='country-search-limited'
-            onlyCountries={["br", "us", "ph", "gb"]}
-            {...props} 
-        />
-    </>
-)
-
-export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -1 +0,0 @@
-Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -1,46 +0,0 @@
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center",
-    margin_bottom: "md"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-1"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-1",
-        tooltip_id: "append-to-tooltip-1",
-        offset: true,
-        position: "top",
-        append_to: "parent",
-    }) do %>
-        I'm a popover. I have been appended to my parent element.
-    <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-2"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-2",
-        tooltip_id: "append-to-tooltip-2",
-        offset: true,
-        position: "top",
-        append_to: ".kit-show-wrapper",
-    }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.