RubyGems - playbook_ui - Versions diffs - 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 → 13.33.1 - Mend

playbook_ui 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 → 13.33.1

Files changed (59) hide show

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx CHANGED Viewed

@@ -10,16 +10,16 @@ import Caption from "../pb_caption/_caption";
 import Icon from "../pb_icon/_icon";
 type DateRangeInlineProps = {
-  align?: "left" | "center" | "vertical";
   className?: string;
-  dark?: boolean;
-  data?: string;
-  endDate?: Date;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => any) };
-  icon?: boolean;
   id?: string;
+  data?: string;
+  align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
+  dark?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => any)};
+  icon?: boolean;
   startDate?: Date;
+  endDate?: Date;
 };
 const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
@@ -36,36 +36,59 @@ const dateTimeIso = (dateValue: Date) => {
 const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const {
-    align = "left",
-    className,
+    icon = false,
     dark = false,
+    size = "sm",
+    align = "left",
     data = {},
-    endDate,
     htmlOptions = {},
-    icon = false,
-    size = "sm",
     startDate,
+    endDate,
+    className,
   } = props;
+  const iconContent = () => {
+    return (
+      <>
+        {icon && (
+          <>
+            <Body color="light"
+                key={Math.random()}
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_icon"
+                  dark={dark}
+                  fixedWidth
+                  icon="calendar-alt"
+                  size={size}
+                  tag="span"
+              />
+            </Body>
+          </>
+        )}
+      </>
+    );
+  };
   const dateInCurrentYear = () => {
     const currentDate = new Date();
     return (
-      startDate?.getFullYear() === endDate?.getFullYear() &&
-      startDate?.getFullYear() === currentDate.getFullYear()
+      startDate.getFullYear() == endDate.getFullYear() &&
+      startDate.getFullYear() == currentDate.getFullYear()
     );
   };
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
-          ` ${dateTimestamp(date, false)} `
+          <>{` ${dateTimestamp(date, false)} `}</>
         ) : (
-          ` ${dateTimestamp(date, true)} `
+          <>{` ${dateTimestamp(date, true)} `}</>
         )}
       </time>
     );
@@ -78,83 +101,53 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
-        {size === "xs" && (
+        {size == "xs" && (
           <>
-            {icon && (
-              <Caption
-                  dark={dark}
-                  tag="span">
-                <Icon
-                    className="pb_date_range_inline_icon"
-                    dark={dark}
-                    fixedWidth
-                    icon="calendar-alt"
-                    size={size}
-                    tag="span"
-                />
-              </Caption>
-            )}
-            <Caption
-                dark={dark}
-                tag="span">
+            {iconContent()}
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
-            <Caption
-                dark={dark}
-                tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
-                  dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
-                  tag="span"
               />
             </Caption>
-            <Caption
-                dark={dark}
-                tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
         )}
-        {size === "sm" && (
+        {size == "sm" && (
           <>
-            {icon && (
-              <Body
-                  color={"light"}
-                  dark={dark}
-                  tag="span">
-                <Icon
-                    className="pb_date_range_inline_icon"
-                    dark={dark}
-                    fixedWidth
-                    icon="calendar-alt"
-                    size={size}
-                    tag="span"
-                />
-              </Body>
-            )}
-            <Body
-                dark={dark}
-                tag="span">
+            {iconContent()}
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
-            <Body
-                color={"light"}
-                dark={dark}
-                tag="span">
+            <Body color="light"
+                dark={dark}
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
-                  tag="span"
               />
             </Body>
-            <Body
-                dark={dark}
-                tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.html.erb CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_flex/flex.html.erb CHANGED Viewed

@@ -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_form_pill/_form_pill.scss CHANGED Viewed

@@ -89,10 +89,6 @@ $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 CHANGED Viewed

@@ -50,15 +50,4 @@ 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 CHANGED Viewed

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

@@ -5,11 +5,10 @@ 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,19 +1,12 @@
 <%= 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" }) %>
-    <% 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 %>
+      <%= 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 %>

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

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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