playbook_ui 15.6.0.pre.alpha.play261013050 → 15.6.0.pre.alpha.play263913015

data/dist/menu.yml

@@ -81,7 +81,7 @@ kits:
     enhanced_element_used: true
   - name: styling
     parent: advanced_table
-    kit_section: ["Collapsible Trail","Row Styling", "Padding Control using Row Styling", "Column Styling", "Column Styling with Multiple Headers", "Column Styling Background Color", "Column Styling Background Color with Multiple Headers","Column Styling Individual Cell Background Color", "Padding Control using Column Styling", "Column Group Border Color"]
+    kit_section: ["Collapsible Trail","Row Styling", "Padding Control using Row Styling", "Column Styling", "Column Styling with Multiple Headers", "Padding Control using Column Styling", "Column Group Border Color"]
     platforms: *1
     status: stable
     icons_used: true

data/lib/playbook/pb_kit_helper.rb

@@ -13,40 +13,5 @@ module Playbook
         render kit.new(props, &block), &block
       end
     end
-
-    def deprecated_kit_warning(kit_name, message = nil)
-      # Skip in test and production environments
-      return "".html_safe if Rails.env.test? || Rails.env.production?
-
-      # Build the warning message
-      base_message = "PLAYBOOK DEPRECATION WARNING\\n  ----------------------------\\n  The \\\"#{kit_name}\\\" kit is deprecated and will be removed in a future version."
-
-      full_message = if message
-                       "#{base_message} #{message}"
-                     else
-                       "#{base_message} Please migrate to the recommended alternative"
-                     end
-
-      # Escape the message for JavaScript
-      escaped_message = full_message.gsub("'", "\\\\'").gsub("\n", "\\n")
-
-      # Return a self-executing script that checks if we're already warned
-      # Uses client-side tracking to ensure one warning per page load
-      # Only shows warnings on localhost (matching React behavior)
-      script = "<script type=\"text/javascript\">\n"
-      script += "(function() {\n"
-      script += "  var hostname = window.location.hostname;\n"
-      script += "  var isLocalDev = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.endsWith('.local') || hostname.includes('local.') || !hostname;\n"
-      script += "  if (!isLocalDev) return;\n"
-      script += "  if (!window.__PB_WARNED_KITS__) window.__PB_WARNED_KITS__ = new Set();\n"
-      script += "  if (!window.__PB_WARNED_KITS__.has('#{kit_name}')) {\n"
-      script += "    window.__PB_WARNED_KITS__.add('#{kit_name}');\n"
-      script += "    console.warn('#{escaped_message}');\n"
-      script += "  }\n"
-      script += "})();\n"
-      script += "</script>"
-
-      script.html_safe
-    end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.6.0"
-  VERSION = "15.6.0.pre.alpha.play261013050"
+  VERSION = "15.6.0.pre.alpha.play263913015"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.6.0.pre.alpha.play261013050
+  version: 15.6.0.pre.alpha.play263913015
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-12 00:00:00.000000000 Z
+date: 2025-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -273,8 +273,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.rb
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
 - app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
@@ -302,10 +300,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
@@ -3443,9 +3437,6 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_description.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
@@ -3842,7 +3833,6 @@ files:
 - app/pb_kits/playbook/utilities/_truncate.scss
 - app/pb_kits/playbook/utilities/_vertical_align.scss
 - app/pb_kits/playbook/utilities/_width.scss
-- app/pb_kits/playbook/utilities/deprecated.ts
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb

@@ -1,43 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      column_styling: { 
-        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
-      }
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      column_styling: { 
-        cell_background_color: "category_1",
-        font_color: "white"
-      }
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
-<% end %>

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

@@ -1 +0,0 @@
-`column_styling` can also be used to control the background color on individual cells in a given column as shown here. 

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

@@ -1,54 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-
-const AdvancedTableColumnStylingBackground = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      columnStyling:{cellBackgroundColor: colors.info_subtle},
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
-    },
-    {
-      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 AdvancedTableColumnStylingBackground

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

@@ -1,9 +0,0 @@
-The `columnStyling` prop can also be used to set background color for entire columns.As stated above, `columnStyling` is an object that has several optional key/value pairs, here are the options highlighted in this doc:
-
-1) `cellBackgroundColor`: use this to control the background color of all cells in the given column
-2) `headerBackgroundColor`: use this to control the background color of the column header
-3) `fontColor`: use this to control font color for all cells in the given column if needed, for example if using a darker background color.
-4) `headerFontColor`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
-
-
-

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

@@ -1,80 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-
-const AdvancedTableColumnStylingBackgroundMulti = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-              columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-              columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-              columnStyling:{cellBackgroundColor: colors.info_subtle},
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableColumnStylingBackgroundMulti

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

@@ -1,3 +0,0 @@
-The `columnStyling` prop can also be used to set background color for entire columns for the multi header variant as well. 
-
-It should be noted that `headerFontColor` and `headerBackgroundColor` in the multi header variant will only apply to the immediate header for the given column as shown here.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb

@@ -1,60 +0,0 @@
-<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Jackson Heights",
-            detail: "37-27 74th Street"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Greenpoint",
-            detail: "81 Gate St Brooklyn"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-      <% item.label do %>
-        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
-      <% end %>
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
-      <% end %>
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-        }) %>
-      <% end %>
-    <% end %>
-<% end %>
-
-<br /><br /><br />
-
-<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Jackson Heights",
-            detail: "37-27 74th Street"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Greenpoint",
-            detail: "81 Gate St Brooklyn"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-      <% item.label do %>
-        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
-      <% end %>
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
-      <% end %>
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-        }) %>
-      <% end %>
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx

@@ -1,118 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import TitleDetail from '../../pb_title_detail/_title_detail'
-
-const TimelineShowCurrentYear = (props) => (
-  <div>
-    <Timeline
-        orientation="horizontal"
-        showDate
-        {...props}
-    >
-      <Timeline.Item
-          date={new Date()}
-          icon="user"
-          iconColor="royal"
-          showCurrentYear
-          {...props}
-      >
-        <TitleDetail
-            detail="37-27 74th Street"
-            title="Jackson Heights"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          icon="check"
-          iconColor="teal"
-          lineStyle="dotted"
-          {...props}
-      >
-        <TitleDetail
-            detail="81 Gate St Brooklyn"
-            title="Greenpoint"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label
-            date={new Date()}
-            showCurrentYear
-        />
-        <Timeline.Step
-            icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail
-              detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-
-    <br />
-    <br />
-    <br />
-
-    <Timeline
-        orientation="vertical"
-        showDate
-        {...props}
-    >
-      <Timeline.Item
-          date={new Date()}
-          icon="user"
-          iconColor="royal"
-          showCurrentYear
-          {...props}
-      >
-        <TitleDetail
-            detail="37-27 74th Street"
-            title="Jackson Heights"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          icon="check"
-          iconColor="teal"
-          lineStyle="dotted"
-          {...props}
-      >
-        <TitleDetail
-            detail="81 Gate St Brooklyn"
-            title="Greenpoint"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label
-            date={new Date()}
-            showCurrentYear
-        />
-        <Timeline.Step
-            icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail
-              detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-  </div>
-)
-
-export default TimelineShowCurrentYear

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md

@@ -1 +0,0 @@
-By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.

data/app/pb_kits/playbook/utilities/deprecated.ts

@@ -1,73 +0,0 @@
-/**
- * Tracks which deprecated kits have already logged warnings in this session
- * to ensure we only log once per page load per kit
- */
-const warnedKits = new Set<string>();
-
-/**
- * Logs a deprecation warning for a Playbook kit
- * - Only logs once per kit per page load (prevents spam on re-renders)
- * - Only logs in development mode (not in production or test environments)
- * 
- * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
- * @param message - Optional custom deprecation message. If not provided, uses a default message.
- * 
- * @example
- * // In your kit component:
- * useEffect(() => {
- *   deprecatedKitWarning('BarGraph');
- * }, []);
- */
-export const deprecatedKitWarning = (
-  kitName: string,
-  message?: string
-): void => {
-  // Skip in test environments (Jest sets NODE_ENV to 'test')
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
-    return;
-  }
-
-  // In browser environments, check if we're on localhost/dev
-  if (typeof window !== 'undefined') {
-    const hostname = window.location?.hostname;
-    const isLocalDev = hostname === 'localhost' || 
-                       hostname === '127.0.0.1' ||
-                       hostname?.endsWith('.local') ||
-                       hostname?.includes('local.') ||
-                       !hostname; // file:// protocol
-    
-    // Only show warnings in local development
-    if (!isLocalDev) {
-      return;
-    }
-  }
-
-  // Only warn once per kit per page load
-  if (warnedKits.has(kitName)) {
-    return;
-  }
-
-  // Mark this kit as warned
-  warnedKits.add(kitName);
-
-  // Build the warning message
-  const baseMessage = `PLAYBOOK DEPRECATION WARNING
-  ----------------------------
-  The "${kitName}" kit is deprecated and will be removed in a future version.`;
-  
-  const fullMessage = message 
-    ? `${baseMessage} ${message}`
-    : `${baseMessage} Please migrate to the recommended alternative
- 
-  `;
-  
-  console.warn(fullMessage);
-};
-
-/**
- * Resets the warned kits tracker (useful for testing)
- * @internal
- */
-export const resetDeprecationWarnings = (): void => {
-  warnedKits.clear();
-};