playbook_ui 16.7.0.pre.alpha.play2924tooltipmisalignment16242 → 16.7.0.pre.alpha.play2924tooltipmisalignment16289

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3992fdab5906608c6118a8ce2ba3c4fea08b25c565d0978c524905c4d6954f64
-  data.tar.gz: cc07250a9142d0344314a823c2f0b01eba76f0277daa1a33b10066a844228c7d
+  metadata.gz: 9b032b2af16b04367de05d6b9acdfa51697b94da0010ba7189b001adcf0ba447
+  data.tar.gz: 322e6db4a0669d03521b9e676a71682b210c316ada7898d94a37eea4cba696fd
 SHA512:
-  metadata.gz: 99ea73cdfd8b0b0b73a46d3cee50b20f24d2dc5b11a39d6730b7eb0dd147dce3d774c5c7270d3c9ce060a6ec4d06d752ad870033dfcc766a7d8bc795ebd0e883
-  data.tar.gz: 4cd63b0368a8f3746e8555485cf4236066a3ac4828b60d49c888a6e0f5d6e7cc38909b34a5469ddf4fd906258909774fe17976bca4e8838e03eadc6af638e94c
+  metadata.gz: 0f8b662b1de6dcb08081c06101dee838ac36cc3cd616b64214893226942eaef61723bc52e215646b068a0756de9a90f037b2f4c6d04206570babc3f1c01a73a2
+  data.tar.gz: b4f795a65bb17995ae668450ea8535f16e2cee02b3e9a451aac53849fa0fc922a345630b0aac60974b8517fb7413de2d3347c5ea8705f551459bab6cbd0e5c47

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -12,6 +12,20 @@ import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import colors from "../tokens/exports/_colors.module.scss"
 
+function serializeDefaultDateForFilterReset(defaultDate: unknown): string | undefined {
+  if (defaultDate === '' || defaultDate == null) return undefined
+  if (Array.isArray(defaultDate)) {
+    const parts = defaultDate.map((d) => {
+      if (d == null || d === '') return ''
+      if (d instanceof Date) return d.toISOString()
+      return String(d)
+    }).filter(Boolean)
+    return parts.length ? parts.join(',') : undefined
+  }
+  if (defaultDate instanceof Date) return defaultDate.toISOString()
+  return String(defaultDate)
+}
+
 type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
@@ -113,7 +127,11 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(defaultDate)
+  const dataProps = buildDataProps({
+    ...data,
+    ...(filterResetDefaultSerialized ? { 'default-value': filterResetDefaultSerialized } : {}),
+  })
   const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
@@ -180,6 +198,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
+    inLine && 'inline-date-picker',
     className
   )
 
@@ -262,7 +281,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               }
             </div>
 
-            {!hideIcon &&
+            {!hideIcon && !inLine &&
               <div
                   className={iconWrapperClass()}
                   id={`cal-icon-${pickerId}`}
@@ -274,7 +293,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               </div>
             }
 
-            {hideIcon && inLine ?
+            {inLine ?
               <div>
                 <div
                     className={`${iconWrapperClass()} date-picker-inline-icon-plus`}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,8 +1,11 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class,
-    'data-pb-date-picker' => true,
-    'data-validation-message' => object.validation_message,
-      ) do %>
+<% date_picker_root_attrs = {
+  class: object.classname + object.error_class,
+  'data-pb-date-picker' => true,
+  'data-validation-message' => object.validation_message,
+}
+  date_picker_root_attrs['data-default-value'] = object.serialized_default_date_for_dom if object.serialized_default_date_for_dom.present?
+%>
+<%= pb_content_tag(:div, date_picker_root_attrs) do %>
   <div class="input_wrapper">
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
@@ -39,7 +42,7 @@
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
 
-    <% if !object.hide_icon %>
+    <% if !object.hide_icon && !object.inline %>
       <div
           class="<%= object.icon_wrapper_class %>"
           id="cal-icon-<%= object.picker_id %>"
@@ -52,7 +55,7 @@
     <% end %>
 
     <!-- Inline -->
-    <% if object.hide_icon && object.inline %>
+    <% if object.inline %>
       <!-- Plus Icon -->
       <div
           class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -92,7 +92,8 @@ module Playbook
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_date_picker_kit") + default_margin_bottom
+        inline_class = inline ? " inline-date-picker" : ""
+        generate_classname("pb_date_picker_kit") + default_margin_bottom + inline_class
       end
 
       def date_picker_config
@@ -144,6 +145,18 @@ module Playbook
       def angle_down_path
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
+
+      # Serialized business default for opt-in smart filter reset (Nitro / data-default-value).
+      def serialized_default_date_for_dom
+        case default_date
+        when nil, ""
+          nil
+        when Array
+          default_date.compact_blank.map(&:to_s).join(",")
+        else
+          default_date.to_s.presence
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -40,6 +40,63 @@ describe('DatePicker Kit', () => {
     expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
+  test('exposes data-default-value on kit root when defaultDate is set', () => {
+    const testId = 'datepicker-def-attr'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          pickerId="date-picker-def-attr"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('data-default-value', DEFAULT_DATE.toISOString())
+  })
+
+  test('omits data-default-value when defaultDate is empty', () => {
+    const testId = 'datepicker-no-def-attr'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate=""
+          pickerId="date-picker-no-def-attr"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toHaveAttribute('data-default-value')
+  })
+
+  test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
+    const testId = 'datepicker-inline-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          inLine
+          pickerId="date-picker-inline-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('inline-date-picker')
+    expect(kit.querySelector('#cal-icon-date-picker-inline-only')).not.toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-icon-plus')).toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-angle-down')).toBeInTheDocument()
+  })
+
+  test('hideIcon without inLine does not render inline control icons', () => {
+    const testId = 'datepicker-hide-icon-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          hideIcon
+          pickerId="date-picker-hide-icon-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('#date-picker-hide-icon-only-icon-plus')).not.toBeInTheDocument()
+  })
+
   test('shows DatePicker date format m/d/Y', async () => {
     const testId = 'datepicker-date'
     render(

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -1,6 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  classname: "inline-date-picker",
-  hide_icon: true,
   inline: true,
   picker_id: "date-picker-inline"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx

@@ -6,8 +6,6 @@ const DatePickerInline = (props) => {
   return (
     <div>
       <DatePicker
-          className="inline-date-picker"
-          hideIcon
           inLine
           pickerId="date-picker-inline"
           {...props}

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -113,9 +113,7 @@
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "className": "inline-date-picker",
-        "inLine": true,
-        "hideIcon": true
+        "inLine": true
       }
     },
     {

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.overrides.json

@@ -88,9 +88,7 @@
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "className": "inline-date-picker",
-        "inLine": true,
-        "hideIcon": true
+        "inLine": true
       }
     },
     {

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

@@ -21,6 +21,58 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+function serializeDropdownFilterResetDefault(
+    variant: "default" | "subtle" | "quickpick" | undefined,
+    multiSelect: boolean,
+    defaultValue: GenericObject | GenericObject[] | string | undefined,
+    dropdownOptions: GenericObject[] | GenericObject | undefined,
+): string | undefined {
+    const optionList: GenericObject[] = Array.isArray(dropdownOptions)
+        ? dropdownOptions
+        : [];
+    const optionDefaultId = (option: GenericObject | undefined): string | undefined => {
+        if (!option) return undefined;
+
+        const id = option.id;
+        if (id != null && id !== "") return String(id);
+
+        const matched = optionList.find((listOption: GenericObject) => (
+            (option.value != null && listOption.value === option.value) ||
+            (option.label != null && listOption.label === option.label)
+        ));
+
+        if (matched?.id != null && matched.id !== "") return String(matched.id);
+        return undefined;
+    };
+
+    if (variant === "quickpick") {
+        if (typeof defaultValue === "string" && defaultValue) {
+            const matched = optionList.find(
+                (opt: GenericObject) => opt.label?.toLowerCase() === defaultValue.toLowerCase()
+            );
+            if (matched?.id != null && matched.id !== "") return String(matched.id);
+        }
+        return undefined;
+    }
+    if (multiSelect) {
+        const arr = Array.isArray(defaultValue)
+            ? defaultValue
+            : defaultValue && typeof defaultValue === "object" && Object.keys(defaultValue).length
+                ? [defaultValue as GenericObject]
+                : [];
+        if (!arr.length) return undefined;
+        const ids = arr
+            .map((v) => optionDefaultId(v as GenericObject))
+            .filter((id) => id != null && id !== "");
+        return ids.length ? ids.join(",") : undefined;
+    }
+    if (defaultValue && typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
+        const id = optionDefaultId(defaultValue as GenericObject);
+        if (id) return id;
+    }
+    return undefined;
+}
+
 type CustomQuickPickDate = {
     label: string;
     value: string[] | { timePeriod: string; amount: number };
@@ -157,6 +209,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       initialSelected
     );
 
+    const filterResetDefaultSerialized = useMemo(
+        () => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
+        [variant, multiSelect, defaultValue, dropdownOptions]
+    );
+
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -432,6 +489,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         <div {...ariaProps}
             {...dataProps}
             {...htmlProps}
+            {...(filterResetDefaultSerialized ? { "data-default-value": filterResetDefaultSerialized } : {})}
             className={classes}
             id={id}
             ref={outerDivRef}

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

@@ -12,7 +12,9 @@
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
+            <% if input_default_value.present? %>
             data-default-value="<%= input_default_value %>"
+            <% end %>
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -51,6 +51,7 @@ test('generated default kit and classname', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
   expect(kit).toHaveClass('pb_dropdown_default')
+  expect(kit).not.toHaveAttribute('data-default-value')
 })
 
 test('generated default Trigger and Container when none passed in', () => {
@@ -433,12 +434,16 @@ test("defaultValue works with multiSelect", () => {
     render(
       <Dropdown
           data={{ testid: testId }}
-          defaultValue={[options[0], options[2]]}
+          defaultValue={[
+            { label: options[0].label, value: options[0].value },
+            { label: options[2].label, value: options[2].value },
+          ]}
           multiSelect
           options={options}
       />
     )
     const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute("data-default-value", "United-states,pakistan")
     expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
@@ -499,6 +504,7 @@ test("quickpick variant accepts string defaultValue", () => {
   const trigger = kit.querySelector('.pb_dropdown_trigger')
   
   expect(trigger).toHaveTextContent("This Month")
+  expect(kit).toHaveAttribute("data-default-value", "quickpick-this-month")
 })
 
 test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {

data/app/pb_kits/playbook/pb_select/select.rb

@@ -50,9 +50,18 @@ module Playbook
       def validation_data
         fields = input_options[:data] || {}
         fields[:message] = validation_message unless validation_message.blank?
+        dv = filter_reset_default_value
+        fields[:default_value] = dv if dv.present?
         fields
       end
 
+      def filter_reset_default_value
+        s = selected
+        return if s.blank?
+
+        s.join(",")
+      end
+
       # Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
       def select_input_id
         all_attributes[:id].presence

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -121,9 +121,18 @@ module Playbook
         fields[:message] = validation_message unless validation_message.blank?
         fields[:pb_input_mask] = true if mask
         fields[:pb_emoji_mask] = true if emoji_mask
+        dv = filter_reset_default_value
+        fields[:default_value] = dv if dv.present?
         fields
       end
 
+      def filter_reset_default_value
+        return if value.nil?
+        return if value.is_a?(String) && value.empty?
+
+        value.to_s
+      end
+
       def error_class
         error ? " error" : ""
       end

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -58,7 +58,7 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
 
     &.visible,
     &.show {
-      z-index: $z_9;
+      z-index: $z_max;
       padding: $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
@@ -160,7 +160,7 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
 
   &.visible,
   &.show {
-    z-index: $z_9;
+    z-index: $z_max;
     padding: $space_xs $space_sm;
     box-shadow: $shadow_deeper;
     border-radius: $border_rad_light;