playbook_ui 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9151 → 14.23.0.pre.alpha.PLAY2330removewalkthrough9176

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e8849282c22bb4870841f96e110bc89eaca2ed4e4dfbef18b709b6c2e93a701b
-  data.tar.gz: 6d844177bce8a58692b5e383ceae03ea8c607e29e357c37c2931a0b9df9ee02d
+  metadata.gz: 02efd0660039e5a7b7feded3c762b0512229efd0969763d72c4dbb9ad6b67dfb
+  data.tar.gz: 17a35b1f152c7c57ec490d5eaddb4cebf2ee8216d8403d62e3d0dab6f3ba12f6
 SHA512:
-  metadata.gz: a4cfa9a835da85fbd7af7c6c5aacabf227d5e01e284f748e71eceb2c5d1c7337336e1a69a8d00ffce7cd32b903b9c0fa18ce7644cfe1faeea85fb65d6f32727f
-  data.tar.gz: 8821b2b62bfc362fb5b688ba476489d8284bd22734102d00829097f05024ac5400b11c22216d4a14d03abb60e9a03d2360b68804b726c5c7c8e6835278db93c8
+  metadata.gz: abfa3c42375a34b984b331b3fc0d28a814355dd6b4f4f995b156c67683b7a834ebae444a89db79e15a1ab06f3e45ab33720555b0235fea24537921c79a4c90d4
+  data.tar.gz: cc20c9590ab8471770c406898fe93aabdd9aaa9bc94e228579d49b1aa13a95fac4b9a95ee1b64ec4495be940b52060e67c6d1f3def412299b5ec743202691088

data/app/pb_kits/playbook/_playbook.scss

@@ -107,7 +107,6 @@
 @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/_advanced_table.scss

@@ -593,101 +593,6 @@
     }
   }
 
-  // Ensure vertical borders work with non-container tables
-  .pb_table:not(.table-card) {
-    &.vertical-border {
-      // Sticky header with vertical borders
-      &.sticky-header {
-        thead th:not(:last-child) {
-          border-right: 1px solid $border_light !important;
-        }
-      }
-
-      // Regular table cells with vertical borders
-      td:not(:last-child),
-      th:not(:last-child),
-      .pb_table_td:not(:last-child),
-      .pb_table_th:not(:last-child) {
-        border-right: 1px solid $border_light !important;
-      }
-    }
-  }
-
-  // Pinned rows should maintain vertical borders regardless of container prop
-  .pinned-row {
-    position: sticky !important;
-    z-index: 2 !important;
-
-    &.pb_table_tr,
-    tr {
-      // Apply right border to ALL cells including last one when verticalBorder is true
-      td,
-      .pb_table_td {
-        border-right: 1px solid var(--column-border-color, $border_light) !important;
-      }
-    }
-  }
-
-  // Specific fixes for vertical borders with sticky elements
-  .pb_table.vertical-border {
-
-    // Sticky header - apply borders to ALL cells including last
-    &.sticky-header {
-      thead th {
-        border-right: 1px solid $border_light !important;
-        border-left: none !important;
-        border-top: none !important;
-      }
-    }
-
-    // Regular pinned rows
-    .pinned-row {
-      td,
-      .pb_table_td {
-        border-right: 1px solid var(--column-border-color, $border_light) !important;
-        // Ensure no unwanted borders
-        border-left: none !important;
-        border-top: none !important;
-      }
-    }
-
-    // Ensure non-container tables don't get unwanted borders
-    &:not(.table-card) {
-      thead th,
-      td,
-      .pb_table_td {
-        border-left: none !important;
-        border-top: none !important;
-      }
-    }
-  }
-
-  // Firefox-specific
-  @-moz-document url-prefix() {
-    .pb_table.vertical-border {
-
-      &.sticky-header {
-        thead th {
-          border: none !important;
-          // Use box-shadow for both right border AND bottom border
-          box-shadow:
-            inset -1px 0 0 0 $border_light,     // Right border
-            inset 0 -1px 0 0 $border_light !important;  // Bottom border
-        }
-      }
-
-      .pinned-row {
-        td,
-        .pb_table_td {
-          border-right: none !important;
-          border-left: none !important;
-          border-top: none !important;
-          box-shadow: inset -1px 0 0 0 var(--column-border-color, $border_light) !important;
-        }
-      }
-    }
-  }
-
   @include chrome_styles($border-color);
 
   tr:hover {
@@ -867,81 +772,6 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
-    // Dark mode adjustments for non-container tables
-    .pb_table:not(.table-card) {
-      &.vertical-border {
-        &.sticky-header {
-          thead th:not(:last-child) {
-            border-right: 1px solid $border_dark !important;
-          }
-        }
-
-        td:not(:last-child),
-        th:not(:last-child),
-        .pb_table_td:not(:last-child),
-        .pb_table_th:not(:last-child) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-    }
-
-    // Dark mode pinned rows
-    .pinned-row {
-      &.pb_table_tr,
-      tr {
-        td,
-        .pb_table_td {
-          border-right: 1px solid var(--column-border-color, $border_dark) !important;
-        }
-      }
-    }
-
-    // Dark mode browser-specific fixes
-    .pb_table.vertical-border {
-      &.sticky-header {
-        thead th {
-          border-right: 1px solid $border_dark !important;
-          border-left: none !important;
-          border-top: none !important;
-        }
-      }
-
-      .pinned-row {
-        td,
-        .pb_table_td {
-          border-right: 1px solid var(--column-border-color, $border_dark) !important;
-          border-left: none !important;
-          border-top: none !important;
-        }
-      }
-    }
-
-    // Dark mode Firefox
-    @-moz-document url-prefix() {
-      .pb_table.vertical-border {
-
-        &.sticky-header {
-          thead th {
-            border: none !important;
-            // Use box-shadow for both right border AND bottom border
-            box-shadow:
-              inset -1px 0 0 0 $border_dark,     // Right border
-              inset 0 -1px 0 0 $border_dark !important;  // Bottom border
-          }
-        }
-
-        .pinned-row {
-          td,
-          .pb_table_td {
-            border-right: none !important;
-            border-left: none !important;
-            border-top: none !important;
-            box-shadow: inset -1px 0 0 0 var(--column-border-color, $border_dark) !important;
-          }
-        }
-      }
-    }
-
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -44,7 +44,7 @@ const AdvancedTableRowPinning = (props) => {
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
           tableData={MOCK_DATA}
-          tableProps={{sticky: true, verticalBorder: true, container: false}}
+          tableProps={{sticky: true}}
           {...props}
       >
         <AdvancedTable.Header enableSorting />

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

@@ -8,29 +8,24 @@
   border-radius: 4px;
   box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
-
-  // Handle both table-card and non-table-card cases
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card tbody tr td:first-child,
-  [class^="pb_table"].table-sm:not(.table-card) thead tr th:first-child,
-  [class^="pb_table"].table-sm:not(.no-hover):not(.table-card) tbody tr td:first-child {
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:first-child {
     border-left-width: 0px !important;
   }
-
   [class^="pb_table"].table-sm.table-card thead tr th:last-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card tbody tr td:last-child,
-  [class^="pb_table"].table-sm:not(.table-card) thead tr th:last-child,
-  [class^="pb_table"].table-sm:not(.no-hover):not(.table-card) tbody tr td:last-child {
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:last-child {
     border-right-width: 0px;
   }
-
   [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
-  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child,
-  [class^="pb_table"].table-sm:not(.table-card) tbody tr:last-child td:first-child,
-  [class^="pb_table"].table-sm:not(.table-card) tbody tr:last-child td:last-child {
+  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
     border-radius: 0 0 0 0;
   }
-
   .table-header-cells:first-child,
   td:first-child,
   .pb_table_td:first-child,
@@ -44,42 +39,12 @@
     z-index: 2;
   }
 
-  // For tables with verticalBorder, ensure sticky elements maintain their borders
-  [class^="pb_table"].vertical-border {
-    .table-header-cells:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child,
-    .table-header-cells.sticky-left {
-      // Maintain right border for vertical border styling when sticky
-      &:not(:last-child) {
-        border-right: 1px solid $border-color !important;
-      }
-    }
-
-    // Ensure pinned rows maintain vertical borders
-    .pinned-row {
-      td:not(:last-child),
-      .pb_table_td:not(:last-child) {
-        border-right: 1px solid $border-color !important;
-      }
-    }
-
-    // Handle sticky header with vertical borders
-    &.sticky-header thead th {
-      &:not(:last-child) {
-        border-right: 1px solid $border-color !important;
-      }
-    }
-  }
-
   .bg-silver {
     td:first-child,
     .sticky-left {
       background-color: $bg-secondary;
     }
   }
-
   .bg-row-selection {
     td:first-child,
     .sticky-left {

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