playbook_ui 14.23.0.pre.alpha.play23129273 → 14.23.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -124,23 +124,6 @@ const columnDefinitions = [
   },
 ]
 
-const columnDefinitionsSort = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    accessor: "newEnrollments",
-    label: "New Enrollments",
-    enableSort: true,
-  },
-  {
-    accessor: "scheduledMeetings",
-    label: "Scheduled Meetings",
-  },
-];
-
 const columnDefinitionsCustomRenderer = [
   {
     accessor: "year",
@@ -693,20 +676,3 @@ test("rowStyling prop works as expected", () => {
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
 })
-
-test("Sort icon renders with enableSort on individual columns", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitionsSort}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const sortIcon = kit.querySelector(".sort-button-icon");
-  expect(sortIcon).toBeInTheDocument();
-  const sortButton = kit.querySelector(".header-sort-secondary-columns");
-  expect(sortButton).toBeInTheDocument();
-});
-

data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js

@@ -1,7 +1,4 @@
 function showActionBar(actionBar, selectedCount) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Show action bar directly
   actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
@@ -11,11 +8,6 @@ function showActionBar(actionBar, selectedCount) {
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
-  // Remove hidden-action-bar class when action bar is shown
-  if (tableContainer) {
-    tableContainer.classList.remove("hidden-action-bar");
-  }
-
   // Update the count
   const countElement = actionBar.querySelector(".selected-count");
   if (countElement) {
@@ -24,20 +16,12 @@ function showActionBar(actionBar, selectedCount) {
 }
 
 function hideActionBar(actionBar) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Hide action bar directly
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
   actionBar.classList.add("p_none");
   actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-
-  // Add hidden-action-bar class when action bar is hidden
-  if (tableContainer) {
-    tableContainer.classList.add("hidden-action-bar");
-  }
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -10,28 +10,23 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
-  - advanced_table_column_border_color_rails: Column Group Border Color
-
 
   react:
   - advanced_table_default: Default (Required Props)
+  - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
-  - advanced_table_sort_per_column: Enable Sort By Column
-  - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
-  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -42,32 +37,29 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_with_custom_header: Custom Header Cell
-  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
-  - advanced_table_loading: Loading State
-  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
-  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_fullscreen: Fullscreen
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_border_color: Column Group Border Color
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -38,8 +38,3 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
-export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
-export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
-export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
-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'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -79,14 +79,8 @@
     left: 0;
     border-radius: unset;
     z-index: 5;
-
-    // Add proper border radius when action bar is visible
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
+
   .checkbox-cell {
     display: table-cell !important;
   }

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -23,8 +23,6 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -68,7 +66,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
 
         if row[:children].present?
           row[:children].each do |child_row|

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -26,11 +26,7 @@
                 <% end %>
               <% end %>
             <% end %>
-            <% if object.has_header_renderer?(cell) %>
-              <%= raw(object.render_header(cell)) %>
-            <% else %>
-              <%= cell[:label] %>
-            <% end %>
+            <%= cell[:label] %>
           <% end %>
         <% end %>
       <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -76,30 +76,6 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering
-      def find_original_column_def(accessor)
-        find_column_def_by_accessor(column_definitions, accessor)
-      end
-
-      # Check if a header cell has a custom renderer
-      def has_header_renderer?(cell)
-        return false unless cell[:accessor].present?
-
-        original_def = find_original_column_def(cell[:accessor])
-        original_def && original_def[:header].present?
-      end
-
-      # Render custom header content
-      def render_header(cell)
-        return cell[:label] unless has_header_renderer?(cell)
-
-        original_def = find_original_column_def(cell[:accessor])
-        custom_renderer = original_def[:header]
-
-        # Call the custom renderer with the cell data and label
-        custom_renderer.call(cell, cell[:label])
-      end
-
     private
 
       def compute_max_depth(columns)
@@ -172,18 +148,6 @@ module Playbook
         end
         wrapped
       end
-
-      def find_column_def_by_accessor(defs, target_accessor)
-        defs.each do |col|
-          return col if col[:accessor] == target_accessor
-
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
-            return found if found
-          end
-        end
-        nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,10 +1,3 @@
-<% 
-  row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s } 
-  button_color = row_style&.[](:expand_button_color)
-  bg_color = row_style&.[](:background_color)
-  font_color = row_style&.[](:font_color)
-%>
-
 <%= pb_content_tag(:tr) do %>
     <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
     <% if has_separate_checkbox %>
@@ -12,7 +5,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: {  html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
+        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
@@ -35,15 +28,13 @@
                                 <button
                                     id="<%= "#{object.id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true"
-                                    style="color: <%= button_color %>"
-                                >
+                                    data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item") do %>
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -27,8 +27,6 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -5,7 +5,7 @@
 @import "../tokens/typography";
 
 [class^=pb_badge_kit] {
-  $pb_badge_height_rounded: 16px;
+  $pb_badge_height: 18px;
 
   display: inline-flex;
   align-items: center;
@@ -13,6 +13,7 @@
   border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
   border-width: 1px;
+  border-style: solid;
   border-color: $card_light;
   white-space: nowrap;
 
@@ -30,10 +31,10 @@
   }
 
   &[class*=_rounded] {
-    height: $pb_badge_height_rounded;
-    min-height: $pb_badge_height_rounded;
-    min-width: $pb_badge_height_rounded;
-    border-radius: $pb_badge_height_rounded / 2;
+    height: $pb_badge_height;
+    min-height: $pb_badge_height;
+    min-width: $pb_badge_height;
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx

@@ -1,10 +1,6 @@
 import React from 'react'
-import colors from '../../tokens/exports/_colors.module.scss'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -23,33 +19,19 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const BarGraphColors = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphColors = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="bar-colors"
+        title="Bar Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphColors

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
+
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
+
+const barGraphOptions = {
+  yAxis: {
+    tickInterval: 5,
+  },
+  xAxis: {
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
+}
+
+const BarGraphCustom = () => (
+  <div>
+    <BarGraph
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="happiness-dashboard"
+        legend
+        title="Bar Graph with Custom Overrides"
+    />
+  </div>
+)
+
+export default BarGraphCustom

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

@@ -0,0 +1,6 @@
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -21,35 +19,19 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-
-const BarGraphDefault = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const BarGraphDefault = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default BarGraphDefault

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

@@ -1,69 +1,39 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
 
+import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const pixelHeightChartOptions = {
-  chart: {
-    height: "300"
-  },
-  series: chartData,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const percentageHeightChartOptions = {
-  chart: {
-    height: "50%"
-  },
-  series: chartData,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
-
-const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
-
-const BarGraphHeight = () => (
+const BarGraphDefault = (props) => (
   <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={pixelOptions}
-      />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="300"
+        id="bar-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
 
     <br />
     <br />
 
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={percentageOptions}
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="50%"
+        id="bar-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )
 
-export default BarGraphHeight
+export default BarGraphDefault