playbook_ui 13.31.0.pre.alpha.powercentrainplaybookpt23212 → 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a1c64dce06929e6d1c5308db0a219c98928f941b659f06d2a6780d8ec7884de
-  data.tar.gz: 2f5256ff5648697c7f144b54dc62277e23c1189d1c0ae87d04c60f86a1fe7240
+  metadata.gz: 46be62680a9b7f69c65dbc7401bac4bfa0fdcc6eb8e77b636053147335db6aeb
+  data.tar.gz: a6b937a47504236820e0452a347643dd726ab61d2b95ecf78ecaf9c88eae14cf
 SHA512:
-  metadata.gz: f06bcdc6d07585a0eb44a4784f32cf9d1bccfc4e8811dee814e6affa7c587983d32615663745b14ab37f3e542ecb0aa0e159aa36fc5b75c4032ffcdfbcddd3fc
-  data.tar.gz: cea9826880aad795f72f212dd9719800dee0de2c09fb090c6f2c3bfd7f1624c0f1b615ede15c0cf444c25df80e429cfeb416fb665752924cb9095655a5040ac3
+  metadata.gz: 30558fa14a011d3a22c55218a8e66e23a6beb66f11e065135189e5f171799669c7f213aa751554df57dc599416b99759971f66d319e9c44a4cdd30dfb23c25d7
+  data.tar.gz: 5690e376f3790d415dc66f95a53c73327fd5c5f769ed7dd3199aa097ca1f36c3584505bffa08ae142d546f5249c199160f531772e904878f06c89d9d7fabcdc6

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,14 +1,23 @@
 <% if object.image_url.present? %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
               background-position: #{object.background_position};",
+      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>
 <% else %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1,2 +1,6 @@
 The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
  It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

data/app/pb_kits/playbook/pb_body/body.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do%>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,4 +1,10 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    dark: object.dark,
+    **combined_html_options) do %>
     <%= content.presence %>
 <% end %>
 

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,5 +1,10 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= pb_content_tag(:dialog) do %>
+    <%= content_tag(:dialog,
+        aria: object.aria,
+        data: object.data,
+        id: object.id,
+        class: object.classname,
+        **combined_html_options) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
         <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div, class: "") do %>
-  <%  'excluded classname?'  %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    **combined_html_options) do %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, class: object.sticky_header) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.sticky_header,
+    aria: object.aria,
+    **combined_html_options) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 

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

@@ -22,10 +22,12 @@ import {
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
+    blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
     dark?: boolean;
     data?: { [key: string]: string };
+    defaultValue?: GenericObject;
     error?: string;
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string;
@@ -40,10 +42,12 @@ const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
+        blankSelection = '',
         children,
         className,
         dark = false,
         data = {},
+        defaultValue = {},
         error,
         htmlOptions = {},
         id,
@@ -66,7 +70,7 @@ const Dropdown = (props: DropdownProps) => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>({});
+    const [selected, setSelected] = useState<GenericObject>(defaultValue);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -116,11 +120,12 @@ const Dropdown = (props: DropdownProps) => {
         setIsDropDownClosed(isClosed)
     }, [isClosed])
 
-    const filteredOptions = options?.filter((option: GenericObject) => {
+    const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
+    const optionsWithBlankSelection = blankSelectionOption.concat(options);
+    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    }
-    );
+    });    
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -194,7 +199,7 @@ const Dropdown = (props: DropdownProps) => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    options,
+                    optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
@@ -233,8 +238,8 @@ const Dropdown = (props: DropdownProps) => {
                         <>
                             <DropdownTrigger />
                             <DropdownContainer>
-                                {options &&
-                                    options?.map((option: GenericObject) => (
+                                {optionsWithBlankSelection &&
+                                    optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <Dropdown.Option key={option.id}
                                             option={option}
                                         />

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from '../../'
+
+const DropdownBlankSelection = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+  return (
+  <>
+    <Dropdown
+        blankSelection="Select one..."
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownBlankSelection

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, default_value: options.last}) %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from '../../'
+
+const DropdownDefaultValue = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+  return (
+  <>
+    <Dropdown
+        defaultValue={options[2]}
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownDefaultValue

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

@@ -8,6 +8,8 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
+  - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
 
   react:
   - dropdown_default: Default
@@ -18,6 +20,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
+  - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -9,4 +9,6 @@ export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
-export { default as DropdownError } from './_dropdown_error.jsx'
+export { default as DropdownError } from './_dropdown_error.jsx'
+export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
+export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -8,8 +8,7 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
+        <input id="dropdown-selected-option" name="<%= object.name %>" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
 
         <% if content.present? %>
             <%= content.presence %>
@@ -17,8 +16,8 @@
         <% else %>
             <%= pb_rails("dropdown/dropdown_trigger") %>
             <%= pb_rails("dropdown/dropdown_container") do %>
-                <% if object.options.present? %>
-                    <% object.options.each do |option| %>
+                <% if options_with_blank.present? %>
+                    <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
                     <% end %>
                 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -10,6 +10,9 @@ module Playbook
       prop :error, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :default_value
+      prop :blank_selection, type: Playbook::Props::String,
+                             default: ""
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -24,6 +27,14 @@ module Playbook
       def error_class
         error.present? ? " error" : ""
       end
+
+      def input_default_value
+        default_value.present? ? default_value.transform_keys(&:to_s) : ""
+      end
+
+      def options_with_blank
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -11,7 +11,7 @@ module Playbook
       prop :custom_display
 
       def data
-        Hash(prop(:data)).merge(dropdown_trigger: true)
+        Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
       end
 
       def classname

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

@@ -8,7 +8,9 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
+const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
+const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
+const DROPDOWN_INPUT = "#dropdown-selected-option";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -21,9 +23,11 @@ export default class PbDropdown extends PbEnhancedElement {
 
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.setDefaultValue();
     this.bindEventListeners();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
+    this.handleFormReset();
   }
 
   bindEventListeners() {
@@ -43,14 +47,13 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      inputFormValidation.value = JSON.parse(value).id;
-      this.clearFormValidation(inputFormValidation);
+      this.clearFormValidation(hiddenInput);
+
       this.onOptionSelected(value, option);
     }
   }
@@ -83,9 +86,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   onOptionSelected(value, selectedOption) {
-    const triggerElement = this.element.querySelector(
-      "#dropdown_trigger_display"
-    );
+    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
@@ -158,14 +159,18 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleFormValidation() {
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-
-    inputFormValidation.addEventListener("invalid", function (event) {
-      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
-        event.preventDefault();
-        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
-      }
-    }, true);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+
+    hiddenInput.addEventListener(
+      "invalid",
+      function (event) {
+        if (hiddenInput.hasAttribute("required") && hiddenInput.value === "") {
+          event.preventDefault();
+          hiddenInput.closest(".dropdown_wrapper").classList.add("error");
+        }
+      },
+      true
+    );
   }
 
   clearFormValidation(input) {
@@ -173,10 +178,63 @@ export default class PbDropdown extends PbEnhancedElement {
       const dropdownWrapperElement = input.closest(".dropdown_wrapper");
       dropdownWrapperElement.classList.remove("error");
 
-      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
       if (errorLabelElement) {
         errorLabelElement.remove();
       }
     }
   }
+
+  setDefaultValue() {
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+
+    if (hiddenInput.value) {
+      const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":"));
+      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+
+      options.forEach((option) => {
+        if (
+          defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id
+        ) {
+          option.classList.add("pb_dropdown_option_selected");
+        }
+      });
+
+      this.setTriggerElementText(defaultValue.label);
+
+      hiddenInput.value = defaultValue.id;
+    }
+  }
+
+  handleFormReset() {
+    const form = this.element.closest("form");
+
+    if (form) {
+      form.addEventListener("reset", () => {
+        this.resetDropdownValue();
+      });
+    }
+  }
+
+  resetDropdownValue() {
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    options.forEach((option) => {
+      option.classList.remove("pb_dropdown_option_selected");
+    });
+
+    hiddenInput.value = "";
+
+    const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
+    this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);
+  }
+
+  setTriggerElementText(text) {
+    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
+    if (triggerElement) {
+      triggerElement.textContent = text;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>