playbook_ui 14.24.0.pre.rc.2 → 14.24.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d7c921bbafc031c8734dd2fbda179f02f97762f1bb3b4a2964386933139bd51
-  data.tar.gz: 87432d1e7a1256d628fbe3d00341b0887cc7f8b2607865d4a5f6ecc16333f772
+  metadata.gz: a1b614d21917603d1c708b5fa2ae0a5979c59f8585775f530f5ad6d46466a137
+  data.tar.gz: bd3feccefc93d4eba14bafdadff62e3f4c8dfaf54838558baf848db18391570b
 SHA512:
-  metadata.gz: 5bdab5a8aafafab76f68147d22a30729c8a23f8bd50bdc6e8528b3ece3cbb0bfe56fedc4de839bfbeefdb01ee641b4d91ca8e105323d7c8f3202957e9ce49fa5
-  data.tar.gz: d17e97778b03d734ab6001803d941dcc7bc04a6369c0758c69ada662639de8e88e3c80191d6d43a7338f80b766882bd36685791c8b74fd390b04238cae42faf5
+  metadata.gz: be0d1b4a2c260b6bf92c7a2f844a7f82bdd4386410a30431ebb0088a16fdd15db75b2e8ca76136795ddc346f9f928f5c383616545b50d388bc3d28b9b3646155
+  data.tar.gz: 41c468c85039f785d31d85bb9ae13acc223cf704769a47bfb079177df31b2ab96d8146f1b00373c2fe93e338d32edd24a2a7510746b0dad0424308059579ddac

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,13 +124,65 @@
       -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,6 +250,10 @@ 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}`,
@@ -257,6 +261,8 @@ 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}` : '',
@@ -270,9 +276,6 @@ 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
@@ -288,7 +291,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody   
+          <TableBody
               isFetching={isFetching}
           />
         </>

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

@@ -35,7 +35,12 @@ module Playbook
                          default: []
 
       def classname
-        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
+        additional_classes = [
+          responsive_classname,
+          max_height_classname,
+          hide_scroll_bar_class,
+          hidden_action_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
@@ -49,7 +54,12 @@ module Playbook
       end
 
       def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
+        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" : ""
       end
 
       def selected_rows

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

@@ -1,4 +1,7 @@
 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";
@@ -8,6 +11,11 @@ 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) {
@@ -16,12 +24,20 @@ 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,8 +79,14 @@
     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_dropdown/_dropdown.scss

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

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

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

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

@@ -0,0 +1,36 @@
+@import "../tokens/colors";
+
+// activeStyle fontColor sass map to go through text colors + set of custom colors
+$custom-font-colors: (
+  primary: $primary
+);
+
+$merged-font-colors: map-merge($text_colors, $custom-font-colors);
+
+$font-colors: ();
+
+@each $key, $val in $merged-font-colors {
+  $font-colors: map-merge($font-colors, ($key: $val));
+}
+
+@mixin apply-font-color($color) {
+  color: $color;
+
+  [class^="pb_body"],
+  [class^="pb_title_kit"],
+  a {
+    color: $color !important;
+  }
+}
+
+// activeStyle backgroundColor map (set of custom colors)
+$custom-background-colors: (
+  "bg_light": $bg_light,
+  "white": $white,
+);
+
+$background-colors: ();
+
+@each $key, $val in $custom-background-colors {
+  $background-colors: map-merge($background-colors, ($key: $val));
+}

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownCustomActiveStyleOptions = (props) => {
+
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "bg_light",
+          fontColor: "primary",
+        }}
+        label="Background Color: bg_light; Font Color: primary"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "white",
+          fontColor: "primary",
+        }}
+        label="Background Color: white; Font Color: primary"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    />
+    <Dropdown
+        activeStyle={{
+          backgroundColor: "bg_light",
+          fontColor: "text_lt_default",
+        }}
+        autocomplete
+        label="Background Color: bg_light; Font Color: text_lt_default"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    />
+    <Dropdown
+        activeStyle={{
+          fontColor: "text_lt_lighter",
+        }}
+        label="Font Color: text_lt_lighter"
+        marginBottom="sm"
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownCustomActiveStyleOptions

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

@@ -0,0 +1,4 @@
+The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
+
+`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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

@@ -18,6 +18,7 @@ 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.
+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.

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 [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 the Rails follow up to [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,8 +39,9 @@ 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 # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  - dropdown_with_custom_radio_options: Custom Radio Options
   - 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,4 +21,5 @@ 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 DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'

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

@@ -369,4 +369,28 @@ 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,6 +41,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = props;
 
   const {
+    activeStyle,
     filteredOptions,
     filterItem,
     focusedOptionIndex,
@@ -59,7 +60,6 @@ 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,6 +70,14 @@ 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);
@@ -79,6 +87,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
+    bgTokenClass, 
+    fontTokenClass,
     globalProps(props),
     className
   );

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

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