playbook_ui 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

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

@@ -4,7 +4,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
@@ -21,168 +20,107 @@ type DropdownTriggerProps = {
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
   customDisplay?: React.ReactChild[] | React.ReactChild;
-  dark?: boolean;
   data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  placeholder?: string;
 };
 
 const DropdownTrigger = (props: DropdownTriggerProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    customDisplay,
-    dark = false,
-    data = {},
-    htmlOptions = {},
-    id,
-    placeholder,
-  } = props;
+  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
 
   const {
     autocomplete,
+    handleWrapperClick,
+    selected,
     filterItem,
     handleChange,
-    handleWrapperClick,
-    inputRef,
-    inputWrapperRef,
+    toggleDropdown,
     isDropDownClosed,
+    inputRef,
     isInputFocused,
-    selected,
-    setIsInputFocused,
-    toggleDropdown,
-    triggerRef,
+    setIsInputFocused
   } = useContext(DropdownContext);
-
+  
   const handleKeyDown = useHandleOnKeyDown();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_trigger"),
     globalProps(props),
     className
   );
 
-  const triggerWrapperClasses = buildCss(
-    "dropdown_trigger_wrapper",
-    isInputFocused && "focus",
-    !autocomplete && "select_only"
-  );
-
-  const customDisplayPlaceholder = selected.label ? (
-    <b>{selected.label}</b>
-  ) : autocomplete ? (
-    ""
-  ) : placeholder ? (
-    placeholder
-  ) : (
-    "Select..."
-  );
-
-  const defaultDisplayPlaceholder = selected.label
-    ? selected.label
-    : autocomplete
-    ? ""
-    : placeholder
-    ? placeholder
-    : "Select...";
-
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
     >
-      {
-        !triggerRef && (
-          children ? (
-            <div
-                onClick={() => toggleDropdown()}
-                onKeyDown= {handleKeyDown}
-                ref={inputWrapperRef}
-                style={{ display: "inline-block" }}
-                tabIndex= {0}
-            >
-              {children}
-            </div>
-          ) : (
-            <>
-              <Flex
-                  align="center"
-                  borderRadius="lg"
-                  className={triggerWrapperClasses}
-                  cursor={`${autocomplete ? "text" : "pointer"}`}
-                  htmlOptions={{
-                    onClick: () => handleWrapperClick(),
-                    onKeyDown: handleKeyDown,
-                    tabIndex: "0",
-                    ref:inputWrapperRef
-                  }}
-                  justify="between"
-                  paddingX="sm"
-                  paddingY="xs"
-              >
-                <FlexItem>
-                  <Flex align="center">
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            style={{ display: "inline-block" }}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex align="center"
+              borderRadius="lg"
+              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
+              cursor="pointer"
+              htmlOptions={{ 
+                onClick: () => handleWrapperClick(), 
+                onKeyDown: handleKeyDown,
+                tabIndex:"0",
+              }}
+              justify="between"
+              paddingX="sm"
+              paddingY="xs"
+          >
+            <FlexItem>
+                <Flex align="center">
                     {customDisplay ? (
                       <Flex align="center">
-                        {customDisplay}
-                        <Body dark={dark} 
-                            paddingLeft={`${selected.label ? "xs" : "none"}`}
-                        >
-                          {customDisplayPlaceholder}
-                        </Body>
+                          {customDisplay}
+                          <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
+                            {selected.label ? <b>{selected.label}</b> : autocomplete ? "" : "Select..." }
+                          </Body>
                       </Flex>
-                    ) : (
-                      <Body dark={dark} 
-                          text={defaultDisplayPlaceholder} 
-                      />
-                    )}
-                    {autocomplete && (
-                      <input
-                          className="dropdown_input"
-                          onChange={handleChange}
-                          onClick={() => toggleDropdown()}
-                          onFocus={() => setIsInputFocused(true)}
-                          onKeyDown={handleKeyDown}
-                          placeholder={
-                            selected.label
-                              ? ""
-                              : placeholder
-                              ? placeholder
-                              : "Select..."
-                          }
-                          ref={inputRef}
-                          value={filterItem}
-                      />
-                    )}
-                  </Flex>
-                </FlexItem>
-                  <Body
-                      dark={dark}
-                      display="flex"
-                      htmlOptions={{
-                        onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
-                      }}
-                      key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
-                    <Icon
-                        cursor="pointer"
-                        dark={dark}
-                        icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                        size="sm"
+                      ) : (
+                        <Body text={selected.label ? selected.label : autocomplete ? "" : "Select..."} />
+                      )
+                    }
+                    {
+                      autocomplete && (
+                        <input
+                            className="dropdown_input"
+                            onChange={handleChange}
+                            onClick={() => toggleDropdown()}
+                            onFocus={() => setIsInputFocused(true)}
+                            onKeyDown={handleKeyDown}
+                            placeholder={selected.label ? "" : "Select..."}
+                            ref={inputRef}
+                            value={filterItem}
+                        />
+                      )
+                    }
+                    
+                </Flex>
+            </FlexItem>
+            <FlexItem>
+                <Body display="flex"
+                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                >
+                    <Icon cursor="pointer"
+                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                        size="sm" 
                     />
-                  </Body>
-              </Flex>
-            </>
-          )
-        )
-      }
+                </Body>
+            </FlexItem>
+          </Flex>
+        </>
+      )}
     </div>
   );
 };

data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx

@@ -4,12 +4,11 @@ import DropdownContainer from "../subcomponents/DropdownContainer";
 
 type PrepareComponentsProps = {
   children: React.ReactChild[] | React.ReactChild;
-  container: React.ReactChild;
-  dark?: boolean;
-  hasContainerSubcomponent: boolean;
   hasTriggerSubcomponent: boolean;
-  otherChildren: React.ReactChild[];
+  hasContainerSubcomponent: boolean;
   trigger: React.ReactChild;
+  container: React.ReactChild;
+  otherChildren: React.ReactChild[];
 };
 
 export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
@@ -37,20 +36,19 @@ export const prepareSubcomponents = ({
   trigger,
   container,
   otherChildren,
-  dark
 }: PrepareComponentsProps) => {
   const componentsToRender = [];
 
   if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
-    componentsToRender.push(<DropdownTrigger dark={dark}/>);
-    componentsToRender.push(<DropdownContainer dark={dark}>{children}</DropdownContainer>);
+    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(<DropdownContainer>{children}</DropdownContainer>);
   } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
-    componentsToRender.push(<DropdownTrigger dark={dark}/>);
+    componentsToRender.push(<DropdownTrigger />);
     componentsToRender.push(children);
   } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
     componentsToRender.push(trigger);
     componentsToRender.push(
-      <DropdownContainer dark={dark}>{otherChildren}</DropdownContainer>
+      <DropdownContainer>{otherChildren}</DropdownContainer>
     );
   } else {
     componentsToRender.push(trigger);

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

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

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

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

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

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

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

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

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

data/app/pb_kits/playbook/pb_layout/footer.html.erb

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

data/app/pb_kits/playbook/pb_layout/header.html.erb

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

data/app/pb_kits/playbook/pb_layout/item.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 %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.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 %>

data/app/pb_kits/playbook/pb_layout/sidebar.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 %>

data/app/pb_kits/playbook/pb_list/item.html.erb

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

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,7 +1,13 @@
 <%= content_tag(:div, class: object.list_classname) do %>
-  <%= pb_content_tag(:"#{object.ordered_class}",
+  <%= content_tag(:"#{object.ordered_class}",
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
                   role: object.role,
-                  tabindex: object.tabindex) do %>
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
       <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
+
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
   <% end %>

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.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 %>
 <% end %>

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
+      **combined_html_options) do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,11 +1,16 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= pb_content_tag(object.tag,
+        <%= content_tag(object.tag,
+          aria: object.aria,
+          class: object.classname,
+          data: object.data,
           dark: object.dark,
+          id: object.id,
           href: object.link && object.link,
           target: object.link && object.target,
-         ) do %>
+          **combined_html_options
+          ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
@@ -22,7 +27,13 @@
       <% end %>
     <% end %>
   <% else %>
-    <%= pb_content_tag(object.tag,
+    <%= content_tag(object.tag,
+      aria: object.aria,
+      class: object.classname,
+      **combined_html_options,
+      data: object.data,
+      dark: object.dark,
+      id: object.id,
       href: object.link && object.link,
       target: object.link && object.target
       ) do %>