playbook_ui 14.23.0.pre.alpha.PLAY2330removewalkthrough9176 → 14.23.0.pre.alpha.advancedtablefix9082

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02efd0660039e5a7b7feded3c762b0512229efd0969763d72c4dbb9ad6b67dfb
-  data.tar.gz: 17a35b1f152c7c57ec490d5eaddb4cebf2ee8216d8403d62e3d0dab6f3ba12f6
+  metadata.gz: b0b8707f27e1d78520568b40d2f13050f404af79a1cbcda223db14444569aa9e
+  data.tar.gz: 30329a170b42fd317808886d5d6a3c54d0b76ce766e8d425f673388f4f743080
 SHA512:
-  metadata.gz: abfa3c42375a34b984b331b3fc0d28a814355dd6b4f4f995b156c67683b7a834ebae444a89db79e15a1ab06f3e45ab33720555b0235fea24537921c79a4c90d4
-  data.tar.gz: cc20c9590ab8471770c406898fe93aabdd9aaa9bc94e228579d49b1aa13a95fac4b9a95ee1b64ec4495be940b52060e67c6d1f3def412299b5ec743202691088
+  metadata.gz: 95a214937ae321b93e42789ae622c9690ee90b7773be34444f6c659961f39f1ed22a64448b19867419accaaebda7489431bc54d8a9a559a48be8d77a7407f256
+  data.tar.gz: 89966b80daf0eb0911e9c2232ab75c263d68309b6a18dc5112e599ff0b484bc5eb555cd88603b1ea4b152e1fe82bc44472cfc4e78ae68f6870991a405d254a31

data/app/pb_kits/playbook/_playbook.scss

@@ -107,6 +107,7 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-} 
+}
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
+
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex 
-          alignItems="center" 
+      <Flex
+          alignItems="center"
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,12 +71,11 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play"
-                  rotation={90}
+                  icon="circle-play-down"
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"    
+                  icon="circle-play"
                />
             )}
           </button>

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -112,7 +112,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             paddingBottom="xs"
             text={node.label}
         />
-        <Flex flexDirection="column"
+        <Flex flexDirection="column" 
             paddingLeft="lg"
         >
           {node?.children?.map((child) =>
@@ -141,8 +141,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     setShowPopover(!shouldClose)
 
   const popoverReference = (
-    <Tooltip
-        placement="top"
+    <Tooltip 
+        placement="top" 
         text="Column Configuration"
     >
       <div onClick={togglePopover}>
@@ -170,8 +170,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       >
         {type === "row-selection" ? (
           <>
-            <Caption color="light"
-                paddingLeft="xs"
+            <Caption color="light" 
+                paddingLeft="xs" 
                 size="xs"
             >
               {selectedCount} Selected
@@ -188,15 +188,15 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
               zIndex={3}
           >
             <>
-              <Caption
-                  paddingY="sm"
+              <Caption 
+                  paddingY="sm" 
                   text="Columns Config"
-                  textAlign="center"
+                  textAlign="center" 
               />
               <SectionSeparator paddingBottom="xs" />
               {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer"
-                    flexDirection="column"
+                <Flex cursor="pointer" 
+                    flexDirection="column" 
                     key={node.id}
                     paddingX="xs"
                 >

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -124,65 +124,13 @@
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
   }
-
-  // When action bar is hidden, ensure proper border radius for header corners
-  &.hidden-action-bar {
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-
-    // Also handle the case when there are multiple header rows
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child,
-        .table-header-cells:first-child,
-        .table-header-cells-custom:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child,
-        .table-header-cells:last-child,
-        .table-header-cells-custom:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-  }
-
-  // When action bar is shown, remove border radius from header
-  .row-selection-actions-card.is-visible ~ * .pb_advanced_table_header,
-  .row-selection-actions-card.show-action-card ~ * .pb_advanced_table_header {
-    > tr:first-child {
-      th:first-child,
-      th:last-child,
-      .table-header-cells:first-child,
-      .table-header-cells:last-child,
-      .table-header-cells-custom:first-child,
-      .table-header-cells-custom:last-child {
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
-      }
-    }
-  }
-
+  
 
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-bottom-color: transparent;
     transition: height 300ms ease;
-
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
   .table-header-cells:first-child {
     min-width: 180px;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -218,10 +218,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
 
     return (
-      <Card
+      <Card 
           borderNone
           borderRadius="none"
-          className="advanced-table-fullscreen-header"
+          className="advanced-table-fullscreen-header" 
           {...props}
       >
           <Flex justify="end">
@@ -250,10 +250,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
@@ -261,8 +257,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen,
-      // Add the hidden-action-bar class when action bar functionality exists but is not visible
-      'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -276,6 +270,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? getVirtualizedContainerStyles(maxHeight)
     : {};
 
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+
   // The actual Main <Table /> element
   const tableElement = (
     <Table
@@ -291,7 +288,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody
+          <TableBody   
               isFetching={isFetching}
           />
         </>

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

@@ -35,12 +35,7 @@ module Playbook
                          default: []
 
       def classname
-        additional_classes = [
-          responsive_classname,
-          max_height_classname,
-          hide_scroll_bar_class,
-          hidden_action_bar_class,
-        ]
+        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
@@ -54,12 +49,7 @@ module Playbook
       end
 
       def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar" : ""
-      end
-
-      def hidden_action_bar_class
-        # Add hidden-action-bar class when action bar functionality is enabled but not currently visible
-        selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
+        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
       end
 
       def selected_rows

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/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_row.html.erb

@@ -39,11 +39,11 @@
                                     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", 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_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

@@ -23,9 +23,7 @@ export default class PbCheckbox extends PbEnhancedElement {
       mainCheckbox.checked = checkedCount > 0;
 
       // Determine the main checkbox label based on the number of checked checkboxes
-      const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
-      const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
-      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
 
       // 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';

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'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -369,28 +369,4 @@ test("defaultValue works with multiSelect", () => {
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)
-  })
-
-test("applies activeStyle backgroundColor and fontColor when selected", () => {
-    render(
-      <Dropdown
-          activeStyle={{
-            backgroundColor: "bg_light",
-            fontColor: "primary",
-          }}
-          data={{ testid: testId }}
-          options={options}
-      />
-    )
-  
-    const kit = screen.getByTestId(testId)
-    const option = kit.querySelectorAll(".pb_dropdown_option_list")[1]
-  
-    fireEvent.click(option)
-  
-    const selected = kit.querySelector(".pb_dropdown_option_selected")
-
-    expect(selected).toBeInTheDocument()
-    expect(selected).toHaveClass("bg-bg_light")
-    expect(selected).toHaveClass("font-primary")
   })

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -41,7 +41,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = props;
 
   const {
-    activeStyle,
     filteredOptions,
     filterItem,
     focusedOptionIndex,
@@ -60,6 +59,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
    ? selected.some((item) => item.label === option?.label)
    : (selected as GenericObject)?.label === option?.label;
 
+  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
@@ -70,14 +70,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   const selectedClass = isSelected ? "selected" : "list";
 
-
-  const bgTokenClass = activeStyle?.backgroundColor
-      ? `bg-${activeStyle.backgroundColor}`
-      : "";
-  const fontTokenClass = activeStyle?.fontColor
-    ? `font-${activeStyle.fontColor}`
-    : "";
-
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -87,8 +79,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    bgTokenClass, 
-    fontTokenClass,
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,9 +24,7 @@ module Playbook
       prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
-        ([classname] + [inline_class, compact_class, show_arrow_class])
-          .reject(&:empty?)
-          .join(" ")
+        classname + inline_class + compact_class + show_arrow_class
       end
 
       def all_attributes
@@ -46,7 +44,7 @@ module Playbook
       end
 
       def inline_class
-        inline ? "inline" : ""
+        inline ? " inline " : " "
       end
 
       def compact_class

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -19,7 +19,6 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
-                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>