playbook_ui 14.23.0 → 14.24.0.pre.alpha.PLAY2116datepickercursorfix9610

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

@@ -3,6 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -56,8 +58,10 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "select-all-rows",
-                       name: "select-all-rows",
+                       id: "#{id ? "#{id}-" : ''}select-all-rows",
+                       indeterminate_main: true,
+                       indeterminate_main_labels: ["", ""],
+                       name: "#{id ? "#{id}-" : ''}select-all-rows",
                      })
           end
         end
@@ -67,8 +71,10 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "select-all-rows",
-                     name: "select-all-rows",
+                     id: "#{id ? "#{id}-" : ''}select-all-rows",
+                     indeterminate_main: true,
+                     indeterminate_main_labels: ["", ""],
+                     name: "#{id ? "#{id}-" : ''}select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },
@@ -76,6 +82,30 @@ 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)
@@ -148,6 +178,18 @@ 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,3 +1,10 @@
+<% 
+  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 %>
@@ -5,7 +12,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+        <%= 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("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| %>
@@ -28,13 +35,15 @@
                                 <button
                                     id="<%= "#{object.id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true">
+                                    data-advanced-table="true"
+                                    style="color: <%= button_color %>"
+                                >
                                     <%= 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-down", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </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,6 +27,12 @@ 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: []
+      prop :last_row, type: Playbook::Props::Boolean,
+                      default: false
+      prop :immediate_parent_row_id, type: Playbook::Props::String,
+                                     default: ""
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -37,7 +43,7 @@ module Playbook
       end
 
       def td_classname(column, index)
-        classes = %w[id-cell chrome-styles]
+        classes = %w[id-cell]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
@@ -52,12 +58,14 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_checkbox_cell
         if selectable_rows
+          prefix = id ? "#{id}-" : ""
           pb_rails("table/table_cell", props: {
                      classname: "checkbox-cell",
                    }) do
             pb_rails("checkbox", props: {
-                       id: "select-row-#{row_id || row.object_id}",
-                       name: "select-row-#{row_id || row.object_id}",
+                       id: "#{prefix}select-row-#{row_id || row.object_id}",
+                       indeterminate_parent: "#{id ? "#{id}-" : ''}select-all-rows",
+                       name: "#{prefix}select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
                          flat_advanced_table_select: true,
@@ -70,9 +78,20 @@ module Playbook
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_row_checkbox
         if selectable_rows
+          prefix = id ? "#{id}-" : ""
+          indeterminate_parent =
+            if depth.zero?
+              "#{prefix}select-all-rows"
+            else
+              "#{prefix}select-row-#{immediate_parent_row_id}"
+            end
+
           pb_rails("checkbox", props: {
-                     id: "select-row-#{row_id || row.object_id}",
-                     name: "select-row-#{row_id || row.object_id}",
+                     id: "#{prefix}select-row-#{row_id || row.object_id}",
+                     indeterminate_main: !last_row,
+                     indeterminate_main_labels: ["", ""],
+                     indeterminate_parent: indeterminate_parent,
+                     name: "#{prefix}select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
                      },

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

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def td_classname(index)
-        classes = %w[id-cell chrome-styles]
+        classes = %w[id-cell]
         classes << "pinned-left" if index.zero? && responsive == "scroll"
         classes.join(" ")
       end

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

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -6,6 +6,8 @@ module Playbook
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_main_labels, type: Playbook::Props::Array,
+                                       default: []
       prop :indeterminate_parent
       prop :text
       prop :value
@@ -49,10 +51,19 @@ module Playbook
       end
 
       def data
-        Hash(prop(:data)).merge(
+        base_data = Hash(prop(:data)).merge(
           pb_checkbox_indeterminate_main: indeterminate_main,
           pb_checkbox_indeterminate_parent: indeterminate_parent
         )
+
+        if indeterminate_main && indeterminate_main_labels.size == 2
+          base_data.merge!(
+            pb_checkbox_indeterminate_main_label_check: indeterminate_main_labels[0],
+            pb_checkbox_indeterminate_main_label_uncheck: indeterminate_main_labels[1]
+          )
+        end
+
+        base_data
       end
 
     private

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
+          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1 +1,2 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.

data/app/pb_kits/playbook/pb_checkbox/index.js

@@ -10,47 +10,239 @@ export default class PbCheckbox extends PbEnhancedElement {
   connect() {
     const mainCheckboxWrapper = this.element;
     const mainCheckbox = mainCheckboxWrapper.querySelector('input')
-    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    const directChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
 
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+    // Helper function to get all descendant checkboxes
+    const getAllDescendantCheckboxes = () => {
+      const descendants = [];
+      const queue = [...directChildCheckboxes];
+      
+      // Breadth-first search to find all nested descendants
+      while (queue.length > 0) {
+        const checkbox = queue.shift();
+        descendants.push(checkbox);
+        
+        // Find children of this checkbox
+        const checkboxWrapper = checkbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
+        if (checkboxWrapper) {
+          const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${checkboxWrapper.id}"] input[type="checkbox"]`);
+          queue.push(...childCheckboxes);
+        }
+      }
+      
+      // Also include any non-"main" checkboxes that have this as a parent
+      const nonMainChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+      nonMainChildCheckboxes.forEach(cb => {
+        if (!descendants.includes(cb)) {
+          descendants.push(cb);
+        }
+      });
+      
+      return descendants;
+    };
+
+    // Helper function to determine checkbox state
+    const getCheckboxState = (checkboxes) => {
+      const checkedCount = checkboxes.filter(cb => cb.checked).length;
+      const totalCount = checkboxes.length;
       
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
+      return {
+        allChecked: checkedCount === totalCount,
+        noneChecked: checkedCount === 0,
+        indeterminate: !(checkedCount === totalCount || checkedCount === 0),
+        checkedCount,
+        totalCount
+      };
+    };
 
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+    // Helper function to update checkbox visual state
+    const updateCheckboxVisualState = (checkbox, isIndeterminate, isChecked) => {
+      checkbox.indeterminate = isIndeterminate;
+      checkbox.checked = isChecked;
+    };
 
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+    // Helper function to update checkbox label and icons
+    const updateCheckboxLabelAndIcons = (wrapper, isIndeterminate, checkedCount) => {
+      const checkAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All';
+      const uncheckAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All';
+      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
 
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      // Update label
+      const bodyKitElement = wrapper.getElementsByClassName('pb_body_kit')[0];
+      if (bodyKitElement) {
+        bodyKitElement.textContent = text;
+      }
       
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      // Update icons
+      const iconSpan = wrapper.querySelector('[data-pb-checkbox-icon-span]');
+      if (iconSpan) {
+        const iconClassToAdd = isIndeterminate ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+        const iconClassToRemove = isIndeterminate ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+        iconSpan.classList.add(iconClassToAdd);
+        iconSpan.classList.remove(iconClassToRemove);
+      }
       
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+      // Toggle icon visibility
+      const indeterminateIcon = wrapper.getElementsByClassName("indeterminate_icon")[0];
+      const checkIcon = wrapper.getElementsByClassName("check_icon")[0];
+      
+      if (indeterminateIcon) {
+        indeterminateIcon.classList.toggle('hidden', !isIndeterminate);
+      }
+      if (checkIcon) {
+        checkIcon.classList.toggle('hidden', isIndeterminate);
+      }
+    };
+
+    // Main function to update this checkbox's state
+    const updateMainCheckbox = () => {
+      const allDescendantCheckboxes = getAllDescendantCheckboxes();
+      const state = getCheckboxState(allDescendantCheckboxes);
+      
+      updateCheckboxVisualState(mainCheckbox, state.indeterminate, state.allChecked);
+      updateCheckboxLabelAndIcons(mainCheckboxWrapper, state.indeterminate, state.checkedCount);
+    };
+
+    // Function to update parent checkboxes recursively
+    const updateParentCheckboxes = () => {
+      const parentId = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateParent;
+      if (parentId) {
+        const parentCheckbox = document.getElementById(parentId);
+        if (parentCheckbox) {
+          const parentWrapper = parentCheckbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
+          if (parentWrapper) {
+            const parentInstance = parentWrapper.pbCheckboxInstance;
+            if (parentInstance && parentInstance.updateMainCheckbox) {
+              parentInstance.updateMainCheckbox();
+              parentInstance.updateParentCheckboxes();
+            }
+          }
+        }
+      }
     };
 
-    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    // Function to update non-main checkboxes when their children change
+    const setupNonMainCheckboxUpdates = () => {
+      const allCheckboxesWithChildren = document.querySelectorAll('input[type="checkbox"]');
+      allCheckboxesWithChildren.forEach(cb => {
+        const checkboxWrapper = cb.closest('[data-pb-checkbox-indeterminate-main="true"]');
+        if (checkboxWrapper && checkboxWrapper !== mainCheckboxWrapper) {
+          return; // Skip different "main" checkboxes
+        }
+        
+        const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${cb.id}"] input[type="checkbox"]`);
+        if (childCheckboxes.length > 0) {
+          childCheckboxes.forEach(childCb => {
+            childCb.addEventListener('change', () => {
+              const state = getCheckboxState(Array.from(childCheckboxes));
+              updateCheckboxVisualState(cb, state.indeterminate, state.allChecked);
+              
+              // Trigger updates on all main checkboxes that might be affected
+              const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
+              mainCheckboxes.forEach(mainCb => {
+                const mainInstance = mainCb.pbCheckboxInstance;
+                if (mainInstance && mainInstance.updateMainCheckbox) {
+                  setTimeout(() => {
+                    mainInstance.updateMainCheckbox();
+                  }, 0);
+                }
+              });
+            });
+          });
+        }
+      });
+    };
+
+
+
+    // Initialize checkbox state
     updateMainCheckbox();
 
-    this.element.querySelector('input').addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
+    // Handle main checkbox change - propagate to all descendants
+    mainCheckbox.addEventListener('change', function() {
+      const allDescendantCheckboxes = getAllDescendantCheckboxes();
+      const state = getCheckboxState(allDescendantCheckboxes);
+      
+      if (state.indeterminate) {
+        // If indeterminate, uncheck all descendants and the parent
+        allDescendantCheckboxes.forEach(cb => {
+          cb.checked = false;
+          // Dispatch custom event for programmatic changes- change styles in advanced table
+          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
+        });
+        this.checked = false;
+      } else {
+        // Otherwise, set all descendants to the same state as this checkbox
+        allDescendantCheckboxes.forEach(cb => {
+          cb.checked = this.checked;
+          // Dispatch custom event for programmatic changes- change styles in advanced table
+          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
+        });
+      }
+      
+      // Update this checkbox first, then parents after a delay
       updateMainCheckbox();
+      setTimeout(() => {
+        updateParentCheckboxes();
+      }, 0);
+      
+      // Also trigger updates on all main checkboxes to ensure proper state propagation
+      triggerAllMainCheckboxUpdates();
     });
 
-    childCheckboxes.forEach(cb => {
+    // Handle child checkbox changes
+    directChildCheckboxes.forEach(cb => {
       cb.addEventListener('change', updateMainCheckbox);
     });
+
+    // Handle deeper descendant changes
+    const allDescendantCheckboxes = getAllDescendantCheckboxes();
+    allDescendantCheckboxes.forEach(cb => {
+      if (!Array.from(directChildCheckboxes).includes(cb)) {
+        cb.addEventListener('change', updateMainCheckbox);
+      }
+    });
+
+    // Handle non-main child checkboxes
+    const allChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    allChildCheckboxes.forEach(cb => {
+      if (!allDescendantCheckboxes.includes(cb)) {
+        cb.addEventListener('change', updateMainCheckbox);
+      }
+    });
+    
+    // Also trigger updates on all main checkboxes when any checkbox changes
+    let updateTimeout = null;
+    const triggerAllMainCheckboxUpdates = () => {
+      // Debounce the updates to prevent excessive calls
+      if (updateTimeout) {
+        clearTimeout(updateTimeout);
+      }
+      updateTimeout = setTimeout(() => {
+        const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
+        mainCheckboxes.forEach(mainCb => {
+          const mainInstance = mainCb.pbCheckboxInstance;
+          if (mainInstance && mainInstance.updateMainCheckbox) {
+            mainInstance.updateMainCheckbox();
+          }
+        });
+      }, 10); // Small delay to batch updates
+    };
+    
+    // Store the original updateMainCheckbox function and create a new one that also triggers updates
+    const originalUpdateMainCheckbox = updateMainCheckbox;
+    const enhancedUpdateMainCheckbox = () => {
+      originalUpdateMainCheckbox();
+      triggerAllMainCheckboxUpdates();
+    };
+    
+    // Replace the updateMainCheckbox function
+    mainCheckboxWrapper.pbCheckboxInstance = {
+      updateMainCheckbox: enhancedUpdateMainCheckbox,
+      updateParentCheckboxes
+    };
+
+    // Setup updates for non-main checkboxes with children
+    setupNonMainCheckboxUpdates();
   }
 }

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,14 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {
+    type: object.type, 
+    loading: object.loading, 
+    link: object.link, 
+    new_window: object.new_window, 
+    variant: object.variant, 
+    target: object.target, 
+    disabled: object.disabled, 
+    dark: object.dark
+  }.merge(object.input_options)) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[default sm],
                   default: "default"
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
 
       def classname
         generate_classname("pb_circle_icon_button_kit") + size_class

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("circle_icon_button", props: {
+  icon: "plus",
+  input_options: {
+    data: { "test-id": "add-button", remote: true },
+  }
+}) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "pen",
+  variant: "secondary",
+  input_options: {
+    data: { "test-id": "edit-button" },
+    classname: "custom-secondary-button-class"
+  }
+}) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "user",
+  variant: "link",
+  input_options: {
+    data: { "test-id": "user-button" },
+    id: "user-button-id"
+  }
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md

@@ -0,0 +1,3 @@
+Use the `input_options` prop to pass additional attributes directly to the internal Playbook Button component. While the wrapper div has access to the standard `data` prop from KitBase, `input_options` allows you to attach attributes specifically to the internal button element.
+
+This is particularly useful when you need data attributes or other HTML attributes to apply to the button itself.

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

@@ -5,6 +5,7 @@ examples:
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
   - circle_icon_button_size: Size
+  - circle_icon_button_input_options: Input Options
   
   react:
   - circle_icon_button_default: Default

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,6 +19,7 @@ type PbDateProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
+  showCurrentYear?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
@@ -35,6 +36,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     htmlOptions = {},
     id,
     showDayOfWeek = false,
+    showCurrentYear = false,
     showIcon = false,
     size = "md",
     unstyled = false,
@@ -90,7 +92,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 {month} {day}
               </span>
 
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </span>
           </>
         : size == "md" || size == "lg"
@@ -124,7 +126,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <span>
                 {month} {day}
               </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </Title>
             )
           : (
@@ -158,7 +160,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 <Caption dark={dark}
                     tag="span">
                   {month} {day}
-                  {currentYear != year && <>{`, ${year}`}</>}
+                  {(currentYear !== year || showCurrentYear) && <>{`, ${year}`}</>}
                 </Caption>
               </>
             )}