RubyGems - playbook_ui - Versions diffs - 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713 → 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2785 - Mend

playbook_ui 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713 → 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2785

Files changed (151) hide show

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx CHANGED Viewed

@@ -4,8 +4,9 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps,
 } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
+import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import DropdownContext from "../context";
@@ -19,16 +20,33 @@ type DropdownOptionProps = {
   className?: string;
   children?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   option?: GenericObject;
   key?: string;
-};
+  padding?: string;
+}  & GlobalProps;
 const DropdownOption = (props: DropdownOptionProps) => {
-  const { aria = {}, className, children, data = {}, id, option, key } = props;
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    htmlOptions = {},
+    id,
+    option,
+    key,
+    padding = "xs",
+  } = props;
-  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
-    useContext(DropdownContext);
+  const {
+    handleOptionClick,
+    selected,
+    filterItem,
+    filteredOptions,
+    focusedOptionIndex,
+  } = useContext(DropdownContext);
   const isItemMatchingFilter = (option: GenericObject) =>
     option?.label.toLowerCase().includes(filterItem.toLowerCase());
@@ -36,37 +54,42 @@ const DropdownOption = (props: DropdownOptionProps) => {
   if (!isItemMatchingFilter(option)) {
     return null;
   }
-  const isFocused = focusedOptionIndex >= 0 && filteredOptions[focusedOptionIndex].label === option.label
-  const focusedClass = isFocused && "dropdown_option_focused"
+  const isFocused =
+    focusedOptionIndex >= 0 &&
+    filteredOptions[focusedOptionIndex].label === option.label;
+  const focusedClass = isFocused && "dropdown_option_focused";
   const selectedClass = `${
     selected.label === option.label
-        ? "dropdown_option_selected"
-        : "dropdown_option_list"
-  }`
+      ? "dropdown_option_selected"
+      : "dropdown_option_list"
+  }`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_option"),
     selectedClass,
     focusedClass,
-    globalProps(props),
+    globalProps(props, {padding}),
     className
   );
   return (
-    <div {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
         key={key}
+        onClick= {() => handleOptionClick(option)}
     >
       <ListItem
           cursor="pointer"
           data-name={option.value}
-          htmlOptions={{ onClick: () => handleOptionClick(option) }}
           key={option.label}
-          padding="xs"
+          padding="none"
       >
         <Flex
             align="center"
@@ -75,13 +98,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
             paddingX="sm"
             paddingY="xxs"
         >
-          {
-            children ? (
-              children
-            ) : (
-              <Body text={option.label}/>
-            )
-          }
+          {children ? children : <Body text={option.label} />}
         </Flex>
       </ListItem>
     </div>

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

@@ -4,6 +4,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
@@ -21,11 +22,22 @@ type DropdownTriggerProps = {
   className?: string;
   customDisplay?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  placeholder?: string;
 };
 const DropdownTrigger = (props: DropdownTriggerProps) => {
-  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
+  const {
+    aria = {},
+    className,
+    children,
+    customDisplay,
+    data = {},
+    htmlOptions = {},
+    id,
+    placeholder,
+  } = props;
   const {
     autocomplete,
@@ -37,87 +49,119 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     isDropDownClosed,
     inputRef,
     isInputFocused,
-    setIsInputFocused
+    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 = `dropdown_trigger_wrapper ${
+    isInputFocused && "dropdown_trigger_wrapper_focus"
+  } ${!autocomplete && "dropdown_trigger_wrapper_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}
     >
       {children ? (
         <div
             onClick={() => toggleDropdown()}
+            onKeyDown= {handleKeyDown}
             style={{ display: "inline-block" }}
+            tabIndex= {0}
         >
           {children}
         </div>
       ) : (
         <>
-          <Flex align="center"
+          <Flex
+              align="center"
               borderRadius="lg"
-              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
-              cursor="pointer"
-              htmlOptions={{
-                onClick: () => handleWrapperClick(),
+              className={triggerWrapperClasses}
+              cursor={`${autocomplete ? "text" : "pointer"}`}
+              htmlOptions={{
+                onClick: () => handleWrapperClick(),
                 onKeyDown: handleKeyDown,
-                tabIndex:"0",
+                tabIndex: "0",
               }}
               justify="between"
               paddingX="sm"
               paddingY="xs"
           >
             <FlexItem>
-                <Flex align="center">
-                    {customDisplay ? (
-                      <Flex align="center">
-                          {customDisplay}
-                          <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
-                            {selected.label ? <b>{selected.label}</b> : autocomplete ? "" : "Select..." }
-                          </Body>
-                      </Flex>
-                      ) : (
-                        <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 align="center">
+                {customDisplay ? (
+                  <Flex align="center">
+                    {customDisplay}
+                    <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
+                      {customDisplayPlaceholder}
+                    </Body>
+                  </Flex>
+                ) : (
+                  <Body 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
+                  display="flex"
+                  htmlOptions={{
+                    onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                  }}
+                  key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+              >
+                <Icon
+                    cursor="pointer"
+                    icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                    size="sm"
+                />
+              </Body>
           </Flex>
         </>
       )}

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

@@ -1,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.classname + object.size_class) 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 CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:span,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) 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 CHANGED Viewed

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

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

@@ -1,8 +1,3 @@
-<%= 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 }) %>
+<%= pb_content_tag 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 CHANGED Viewed

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

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

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

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

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

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

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

data/app/pb_kits/playbook/pb_layout/item.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/layout.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb CHANGED Viewed

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

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

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

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

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

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

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

data/app/pb_kits/playbook/pb_message/message_mention.html.erb CHANGED Viewed

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

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

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

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag 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 CHANGED Viewed

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