playbook_ui_docs 15.6.0.pre.alpha.play261013050 → 15.6.0.pre.alpha.play263913015

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1429a20e3269b6dfc72f937549b5dd567146dfa0ea624369ad1b06c87e761dc9
-  data.tar.gz: 78fd1522fb2d408c992a5d9bca3213379302059fc91a8adefa69b8dac62fd26e
+  metadata.gz: 7ebde2741678c3de10cd2c9984d863a18489881ed4fca072af9c3efa175433eb
+  data.tar.gz: d89a64e2ba3c58fd88367f67619a0de0e1fd45ae80ceb03b8fc47e1ccd0e093d
 SHA512:
-  metadata.gz: 846a6d3bf6536e911cd4b0d1f6b619b9e331396d333af15a9e2c9b987e9c5c526fbc8a976e46c8f2786bc92d606135655e171999774bcac6bd4c77985bf9dcd3
-  data.tar.gz: 44be50ab6f4c563eebba01fedb8f1d3fe4034d907d0981f6bcb90d975bed8750ba6a40834651cf947ccb39b5fe4c9f6ae31108fd054fe0c25023c49f633a258f
+  metadata.gz: 51fbb94c8014a7e4c0f740b5d6b81b77a8105a56248e026e94d9cd1d769c617f5b17cc35a36e552dc3f9b116073b0114073655c19f068c512c5c31f2a7a3462b
+  data.tar.gz: 5ecbfbe339c2393d2bd40834adb757cc2c7c0483f99695b37b086f90044235dc85aca24e64e0bf924c5375a27d46d3cd57866616915ffaed7f2f0d1b4b53461d

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

@@ -8,26 +8,16 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: "error_subtle",
-        header_background_color: "error_subtle"
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
-      column_styling: { 
-        cell_background_color: "info_subtle",
-      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
-      column_styling: { 
-        cell_background_color: "info",
-        header_background_color: "info",
-        header_font_color: "white",
-        font_color: "white"
-      }
     },
     {
       accessor: "completedClasses",
@@ -36,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1,7 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
-
-1)  `cell_background_color`:  use this to control the background color of all cells in the given column
-2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
-3) `header_background_color`: use this to control the background color of the column header
-4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
-
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -26,8 +26,7 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Column Styling Background Color
-  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -76,8 +75,6 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -45,6 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
-export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

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

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

data/app/pb_kits/playbook/pb_timeline/docs/example.yml

@@ -5,7 +5,6 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -14,5 +13,4 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

data/app/pb_kits/playbook/pb_timeline/docs/index.js

@@ -3,5 +3,4 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
-export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 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: playbook_ui
@@ -33,8 +33,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- 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
@@ -62,10 +60,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
@@ -2425,9 +2419,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

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.