playbook_ui 13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311 → 13.33.0.pre.alpha.PLAY1454formpillicons3309

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8fbda811742441cdb16b2651544b02a6053acfca38e070ef814ff1f2fcb1c27c
-  data.tar.gz: 159b81a126b1d13b8f64f2e16a53326dfbf21b1afd7118c469c95bf7e9524b5b
+  metadata.gz: e3efbce8e6bf0e2038cb58c547e077b7b44abba6abf56c59a4fc907fbfce2c5e
+  data.tar.gz: 7880d9315a8eaa5c0e9a3a265511ec50560452fe801cdbc4c0ccacd8dc788d83
 SHA512:
-  metadata.gz: dc57caefdde9638b830c0ad6a010c8e0ada6cd7fd2d72b7b134271ed86de9e3bb7a45a351690afea6950b8c7e8733d3063fac7436e0d1bdc7cdc82074c219289
-  data.tar.gz: ddce620575e43112f59837ad5a39d4efbda50072d4c48e3c171b37d8774605ee84770cdcd8c200ef0bb3018dee8b6e8fa10c1a30d58dbbccefa30e1e131158c2
+  metadata.gz: 0dbccb4ffc9f8ddf6aa98023dcfe77065eb705d3d2212ab6dff3d0c15e6797708f20789530ea9fcde6a1f2d687f4c6d2ff57e106f983171ed6d326b7f62ff99c
+  data.tar.gz: 8d4dc0b7828a8d9add30dd1c23416fbc4181a2ecb319e38792a80a717aef3b37e75a99790ef42d703be18dcd09c474faaaa5c4b6e6b612097bfb1044167128ed

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

@@ -8,13 +8,9 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input 
-            data-default-value="<%= input_default_value %>" 
-            id="dropdown-selected-option" 
-            name="<%= object.name %>" 
-            style="display: none" 
-            <%= object.required ? "required" : ""%> 
-        />
+        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="<%= input_default_value %>" />
+        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
+
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

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

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
+        default_value.present? ? default_value.transform_keys(&:to_s) : ""
       end
 
       def options_with_blank

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

@@ -8,9 +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() {
@@ -47,13 +47,14 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      this.clearFormValidation(hiddenInput);
-
+      inputFormValidation.value = JSON.parse(value).id;
+      this.clearFormValidation(inputFormValidation);
       this.onOptionSelected(value, option);
     }
   }
@@ -159,18 +160,14 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleFormValidation() {
-    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
-    );
+    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);
   }
 
   clearFormValidation(input) {
@@ -178,9 +175,7 @@ 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();
       }
@@ -188,22 +183,23 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   setDefaultValue() {
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
-    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
 
-    const defaultValue = hiddenInput.dataset.defaultValue || "";
-    hiddenInput.value = defaultValue;
+    if (hiddenInput.value) {
+      const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+      const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":"));
+      const options = this.element.querySelectorAll(OPTION_SELECTOR);
 
-    if (defaultValue) {
-      const selectedOption = Array.from(options).find((option) => {
-        return (
-          JSON.parse(option.dataset.dropdownOptionLabel).id === defaultValue
-        );
+      options.forEach((option) => {
+        if (defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id) {
+          option.classList.add("pb_dropdown_option_selected");
+        }
       });
-      selectedOption.classList.add("pb_dropdown_option_selected");
-      this.setTriggerElementText(
-        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
-      );
+
+      this.setTriggerElementText(defaultValue.label);
+
+      hiddenInput.value = defaultValue.id;
+      inputFormValidation.value = defaultValue.id;
     }
   }
 
@@ -218,13 +214,11 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   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");
-    });
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
 
     hiddenInput.value = "";
+    inputFormValidation.value = "";
 
     const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
     this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -89,6 +89,10 @@ $form_pill_colors: (
     outline: $primary solid 2px;
     outline-offset: -1px;
   }
+  .pb_form_pill_icon {
+    height: 12px !important;
+    width: 12px !important;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -50,4 +50,15 @@ test('displays size variant', () => {
     )
     const kit = screen.getByTestId('formpill')
     expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});
+
+test('displays icon', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            icon={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -21,6 +21,7 @@ type FormPillProps = {
   color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
+  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -42,9 +43,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     color = "primary",
     data = {},
     tabIndex,
+    icon = "",
   } = props
+
+  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
@@ -61,29 +65,60 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         {...dataProps}
         {...htmlProps}
     >
-        {name &&
+      {((name && !icon && !text) || (name && !icon && text)) && (
         <>
-        <Avatar
-            imageUrl={avatarUrl}
-            name={name}
-            size="xs"
-            status={null}
-        />
-        <Title
-            className="pb_form_pill_text"
-            size={4}
-            text={name}
-        />
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
         </>
-        }
-
-      {text &&
+      )}
+      {((name && icon && !text) || (name && icon && text)) && (
+        <>
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+        </>
+      )}
+      {(!name && icon && text) && (
+        <>
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+          />
+        </>
+      )}
+      {(!name && !icon && text) && (
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      }
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("form_pill", props: {
+    icon: "badge-check",
+    text: "icon and tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+
+const FormPillIcon = (props) => {
+  return (
+    <div>
+      <FormPill
+          icon="badge-check"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="icon and tag"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillIcon

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

@@ -5,10 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-
+  - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  - form_pill_icon: Form Pill Icon

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

@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
-
+export { default as FormPillIcon } from './_form_pill_icon.jsx'

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

@@ -1,12 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **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" }) %>
-        <% elsif object.text.present? %>
-          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-            <% end %>
-
-              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-                  <% end %>
-                    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+    <% end %>
+  <% elsif object.text.present? %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
+  <% end %>
+  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -15,9 +15,10 @@ module Playbook
                    values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
+      prop :icon
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
 
       def display_text
@@ -27,6 +28,10 @@ module Playbook
       def size_class
         size == "small" ? " small" : ""
       end
+
+      def icon_class
+        icon ? "icon" : nil
+      end
     end
   end
 end