playbook_ui 14.24.0.pre.alpha.testingwithoutlazyload9529 → 14.24.0.pre.rc.0

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

@@ -29,10 +29,6 @@ module Playbook
                                      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)
@@ -43,7 +39,7 @@ module Playbook
       end
 
       def td_classname(column, index)
-        classes = %w[id-cell]
+        classes = %w[id-cell chrome-styles]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
@@ -58,14 +54,12 @@ 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: "#{prefix}select-row-#{row_id || row.object_id}",
-                       indeterminate_parent: "#{id ? "#{id}-" : ''}select-all-rows",
-                       name: "#{prefix}select-row-#{row_id || row.object_id}",
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
                          flat_advanced_table_select: true,
@@ -78,20 +72,9 @@ 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: "#{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}",
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "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]
+        classes = %w[id-cell chrome-styles]
         classes << "pinned-left" if index.zero? && responsive == "scroll"
         classes.join(" ")
       end

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

@@ -6,8 +6,6 @@ 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
@@ -51,19 +49,10 @@ module Playbook
       end
 
       def data
-        base_data = Hash(prop(:data)).merge(
+        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,2 +1 @@
-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.
+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.

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

@@ -10,239 +10,47 @@ export default class PbCheckbox extends PbEnhancedElement {
   connect() {
     const mainCheckboxWrapper = this.element;
     const mainCheckbox = mainCheckboxWrapper.querySelector('input')
-    const directChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
 
-    // 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;
+    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;
       
-      return {
-        allChecked: checkedCount === totalCount,
-        noneChecked: checkedCount === 0,
-        indeterminate: !(checkedCount === totalCount || checkedCount === 0),
-        checkedCount,
-        totalCount
-      };
-    };
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
 
-    // Helper function to update checkbox visual state
-    const updateCheckboxVisualState = (checkbox, isIndeterminate, isChecked) => {
-      checkbox.indeterminate = isIndeterminate;
-      checkbox.checked = isChecked;
-    };
+      // 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 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;
+      // 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';
 
-      // Update label
-      const bodyKitElement = wrapper.getElementsByClassName('pb_body_kit')[0];
-      if (bodyKitElement) {
-        bodyKitElement.textContent = text;
-      }
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
       
-      // 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);
-      }
+      // 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);
       
-      // 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();
-            }
-          }
-        }
-      }
+      // 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);
     };
 
-    // 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
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
     updateMainCheckbox();
 
-    // 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
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
       updateMainCheckbox();
-      setTimeout(() => {
-        updateParentCheckboxes();
-      }, 0);
-      
-      // Also trigger updates on all main checkboxes to ensure proper state propagation
-      triggerAllMainCheckboxUpdates();
     });
 
-    // Handle child checkbox changes
-    directChildCheckboxes.forEach(cb => {
+    childCheckboxes.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_icon_button/circle_icon_button.html.erb

@@ -1,14 +1,5 @@
 <%= 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
-  }.merge(object.input_options)) 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("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,8 +21,6 @@ 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/example.yml

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

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -13,8 +13,8 @@
     <% end %>
 
     <!-- month day, year -->
-    <%# if not current year or show_current_year is false %>
-    <% if object.year.to_s == DateTime.now.year.to_s && !object.show_current_year %>
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
       <span><%= "#{object.month} #{object.day}" %></span>
     <%# if is current year %>
     <% else %>
@@ -44,8 +44,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year or show_current_year is false %>
-    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year  %>
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
       <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
     <%# if is current year %>
     <% else %>
@@ -74,8 +74,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year or show_current_year is false %>
-    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year %>
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
       <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
     <%# if is current year %>
     <% else %>

data/app/pb_kits/playbook/pb_date/date.rb

@@ -11,8 +11,6 @@ module Playbook
                        default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean,
                               default: false
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm xs],
                   default: "md"

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

@@ -5,14 +5,12 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
-  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
-  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,4 +2,3 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
-export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -8,7 +8,6 @@
 @import "../pb_textarea/textarea_mixin";
 
 @import "./scss_partials/dropdown_animation";
-@import "dropdown_mixin";
 
 [class*="pb_dropdown"] {
   .dropdown_wrapper {
@@ -99,23 +98,9 @@
           [class^="pb_title_kit"], a {
             color: $white !important;
           }
-          border-bottom: 1px solid $border_light;
           &:hover {
-            background-color: $product_1_background;
-          }
- 
-          // activeStyle font color map
-          @each $name, $color in $font-colors {
-            &.font-#{$name} {
-              @include apply-font-color($color);
-            }
+            background-color: $product_1_background !important;
           }
-          // activeStyle background color map (no difference between selected and selected+hover custom colors)
-          @each $name, $bg in $background-colors {
-            &.bg-#{$name} {
-              background-color: $bg;
-            }
-          }     
         }
       }
 
@@ -282,7 +267,6 @@
         }
         &[class*="selected"] {
           background-color: $primary;
-          border-bottom: rgba($white, 0.15);
         }
       }
     }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -39,10 +39,6 @@ type DropdownProps = {
     options: GenericObject;
     separators?: boolean;
     variant?: "default" | "subtle";
-    activeStyle?: {
-      backgroundColor?: string;
-      fontColor?: string;
-    };
 };
 
 interface DropdownComponent
@@ -73,7 +69,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         options,
         separators = true,
         variant = "default",
-        activeStyle,
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -256,7 +251,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         >
             <DropdownContext.Provider
                 value={{
-                    activeStyle,
                     autocomplete,
                     dropdownContainerRef,
                     filteredOptions,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx

@@ -18,7 +18,6 @@ const DropdownCustomRadioOptions = (props) => {
   return (
   <div>
       <Dropdown
-          activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
           label="Select Item"
           onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
           options={options}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md

@@ -1 +1 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -16,7 +16,7 @@ examples:
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,9 +39,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_active_style_options: Custom Active Style Options
   - dropdown_with_custom_icon_options: Custom Icon Options
-  - dropdown_with_custom_radio_options: Custom Radio Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -21,5 +21,4 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'