playbook_ui 14.23.0.pre.alpha.PLAY2146dropdownactivestylesreact9141 → 14.23.0.pre.alpha.PLAY2148selectclassnamessinglespacesfix9144

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b783164512f6b5e7e98483119372bb12b40995eb3e6d26e82b404adf26a087f5
-  data.tar.gz: 95361abd82579e6d3ce4c721386b6939fd878d1d17c040294745b9a30ef9cf1c
+  metadata.gz: 0b0dee98ba9f1bca1aaece689189d13e7707261135705a0f55970414e38bdaee
+  data.tar.gz: 5bb3723be73e7f3c8471eb9b8dcd0bba2e63c9ed7bef2afb081634d64cb41b4a
 SHA512:
-  metadata.gz: 1ec3ee8c3daaaa8a0efa2af68a2a25975d8c8a079b9b8da8cfe3f3e19464801cddcdf8507949cdb04d1cc24399ca29369345de0e05fc83494e515317293cb97b
-  data.tar.gz: 3a0e4707bfd204588fc5b5559a8d4dc3bc6f628d901b8d8f36ec626ce9f226933583e47649b80a9f7b1fef729ddefafbdc8f146a18bd2e344fd9a53ebcbd297c
+  metadata.gz: 636193294df1115b7401bf1a64dd158e49a4edf9b46bd8b8a9ee7c7dc289c54dd901a85144cc7057104800677c6e138ec96dd0f0b1e668a8270a39a5d55b54a7
+  data.tar.gz: '038ae63e9295efe8a2ad5acee53c0c323cd536f6f4be904f4345f96ab271456082207fbc17a6e05c80b9788401891dd35791f56b70129cf673e6cf78627959d8'

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,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