playbook_ui 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12650

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b17349abd67079ab8e811b239c8971e2809a0299a6f69e41e247ee2a34a8d7bc
-  data.tar.gz: f0d3ef9cca63f616d580065e9058bc5a6514ddfda74ea028af65191562bf7c9e
+  metadata.gz: e03ff921e93222ee43918cb8f7587728ec77eecf9d7bf901103e955fa387d9d3
+  data.tar.gz: 124557cd8f737ad7999cf59787eb9183e52f3ebcd4853bad2241b7e4d1982aa0
 SHA512:
-  metadata.gz: 65f48b3ade3d01c25fb8e4f44828db75e64aba0ceba8bcfd7b9f7b17b11750ed7c7ad890e424a33333da0c88e299701094d18fbc8227b20994579cecaa575a2c
-  data.tar.gz: 858d50215f7af0969b58fddf455b162a6109efd4a3854884dcfbf55fbf29658345dd7dcd1faf97f9b5ecaf79a2022637e0f9f869f3ba7159cdf174e9c615bc0d
+  metadata.gz: 2a97fa52358423064cf1c1564ea623fc2087debacc08bf9e282c59ea274b41c8725f9ea37b3dc414d35227bf7d17dc621e2850def822925047564deb6181edf0
+  data.tar.gz: '0195e845746b7ab77e555c006a506a951ca7347ce65668b12d67401387363c1031b641f156cda4ba2332bfd11b9b46d3dfbe772d3d42c01f58f3930650870f88'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -143,30 +143,25 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalClickHandler = dialogElement._outsideClickHandler
-      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
-      
+      const originalMousedownHandler = dialogElement._outsideClickHandler
+      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        // Get the dialog's bounding box (the actual content area)
-        const rect = dialogElement.getBoundingClientRect()
-        const clickedInDialog = (
-          event.clientX >= rect.left &&
-          event.clientX <= rect.right &&
-          event.clientY >= rect.top &&
-          event.clientY <= rect.bottom
-        )
-
-        // Only close if clicked outside the dialog content (on the backdrop)
-        if (!clickedInDialog) {
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+
+        if (clickedOutsideDialogModal) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
 .pb_file_upload_kit {
-  .pb_card_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -11,7 +11,7 @@
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error;
     }
     .pb_body_kit_negative {
@@ -30,12 +30,12 @@
 }
 
 .dark .pb_file_upload_kit {
-  .pb_card_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px $text_dk_lighter dashed;
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -96,24 +96,20 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {hasAllEmptyProps && '—'}
       {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Title>
-          )}
-          {addressCont && (
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {titleize(addressCont)}
-            </Title>
-          )}
+          <Title
+              className="pb_home_address_street_address"
+              dark={dark}
+              size={4}
+          >
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Title>
+          <Title
+              className="pb_home_address_street_address"
+              dark={dark}
+              size={4}
+          >
+            {titleize(addressCont)}
+          </Title>
           <Body color="light">
             {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
@@ -121,14 +117,10 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Body color="light">
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Body>
-          )}
-          {addressCont && (
-            <Body color="light">{titleize(addressCont)}</Body>
-          )}
+          <Body color="light">
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Body>
+          <Body color="light">{titleize(addressCont)}</Body>
           <div>
             <Title
                 className="pb_home_address_street_address"
@@ -149,14 +141,10 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Body dark={dark}>
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Body>
-          )}
-          {addressCont && (
-            <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
-          )}
+          <Body dark={dark}>
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"

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

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    color: "light",
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    color: "light",
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <div>
   <%= pb_rails "title", props: {
     tag: "span",

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -1,4 +1,3 @@
-<%= pb_rails("caption", props: { text: "with all" }) %>
 <%= pb_rails("home_address_street", props: {
   address: "70 Prospect Ave",
   address_cont: "Apt M18",
@@ -10,126 +9,3 @@
   zipcode: "19382",
   territory: "PHL",
 }) %>
-
-<%= pb_rails("caption", props: { margin_top: "sm", text: "First two lines blank: without address and address cont and housestyle" }) %>
-<%= pb_rails("home_address_street", props: {
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("caption", props: { margin_top: "sm", text: "First line half blank Second line full: with housestyle and without address and address cont" }) %>
-<%= pb_rails("home_address_street", props: {
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("caption", props: { margin_top: "sm", text: "First line full Second line blank: with address and housestyle and without address cont" }) %>
-<%= pb_rails("home_address_street", props: {
-  address: "70 Prospect Ave",
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("caption", props: { margin_top: "sm", text: "First line half blank Second line full: without address and with housestyle and address cont" }) %>
-<%= pb_rails("home_address_street", props: {
-  address_cont: "Apt M18",
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("caption", props: { margin_top: "sm", text: "First line blank Second line full: with address cont and without address and housestyle" }) %>
-<%= pb_rails("home_address_street", props: {
-  address_cont: "Apt M18",
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("caption", props: { margin_top: "sm", text: "Emphasis, Modified, Target and Formatted doc examples below" }) %>
-<%= pb_rails("home_address_street", props: {
-  address: "70 Prospect Ave",
-  city: "West Chester",
-  emphasis: "none",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  margin_bottom: "sm",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("home_address_street", props: {
-  city: "West Chester",
-  emphasis: "city",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  margin_bottom: "sm",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("home_address_street", props: {
-  city: "West Chester",
-  emphasis: "none",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  margin_bottom: "sm",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("home_address_street", props: {
-  address: "70 Prospect Ave",
-  city: "West Chester",
-  margin_bottom: "sm",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("home_address_street", props: {
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  margin_bottom: "sm",
-  state: "PA",
-  target: "_blank",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
-
-<%= pb_rails("home_address_street", props: {
-  address: "70 pRoSpEcT ave",
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  preserve_case: true,
-  state: "pa",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -1,156 +1,21 @@
 import React from 'react'
 
 import HomeAddressStreet from '../_home_address_street'
-import Caption from '../../pb_caption/_caption'
 
 const HomeAddressStreetDefault = (props) => {
   return (
-    <>
-      <Caption text="with all" />
-      <HomeAddressStreet
-          address="70 Prospect Ave"
-          addressCont="Apt M18"
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <Caption marginTop="sm"
-          text="First two lines blank: without address and address cont and housestyle"
-      />
-      <HomeAddressStreet
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <Caption marginTop="sm"
-          text="First line half blank Second line full: with housestyle and without address and address cont"
-      />
-      <HomeAddressStreet
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <Caption marginTop="sm"
-          text="First line full Second line blank: with address and housestyle and without address cont and address cont"
-      />
-      <HomeAddressStreet
-          address="70 Prospect Ave"
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <Caption marginTop="sm"
-          text="First line half blank Second line full: without address and with housestyle and address cont and address cont"
-      />
-      <HomeAddressStreet
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <Caption marginTop="sm"
-          text="First line blank Second line full: with address cont and without address and housestyle and address cont"
-      />
-      <HomeAddressStreet
-          addressCont="Apt M18"
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <Caption marginTop="sm"
-          text="Emphasis, Modified, Target and Formatted doc examples below and address cont"
-      />
-      <HomeAddressStreet
-          address="70 Prospect Ave"
-          city="West Chester"
-          emphasis="none"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          marginBottom="sm"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <HomeAddressStreet
-          city="West Chester"
-          emphasis="city"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          marginBottom="sm"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <HomeAddressStreet
-          city="West Chester"
-          emphasis="none"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          marginBottom="sm"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
-      <HomeAddressStreet
-          address="70 Prospect Ave"
-          city="West Chester"
-          marginBottom="sm"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-      />
-      <HomeAddressStreet
-          city="West Chester"
-          homeId={8250263}
-          homeUrl="https://powerhrg.com/"
-          marginBottom="sm"
-          state="PA"
-          target="_blank"
-          territory="PHL"
-          zipcode="19382"
-      />
-      <HomeAddressStreet
-          address="70 pRoSpEcT ave"
-          city="West Chester"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          preserveCase
-          state="pa"
-          territory="PHL"
-          zipcode="19382"
-      />
-    </>
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId="8250263"
+        homeUrl="https://powerhrg.com/"
+        houseStyle="Colonial"
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
   )
 }
 

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

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

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

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -115,6 +115,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
+  const [hasBlurred, setHasBlurred] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
   const [hasStartedValidating, setHasStartedValidating] = useState(false)
 
@@ -143,8 +144,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   // Determine which error to display
-  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
+  // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasBlurred || formSubmitted) && error
   const displayError = shouldShowInternalError ? error : ""
 
   useEffect(() => {
@@ -259,7 +260,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       return
     }
 
-     if (!hasTyped && !error) return
+     // Only validate if field has been blurred or form has been submitted
+     if (!hasBlurred && !formSubmitted && !error) return
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -305,6 +307,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
+        setHasBlurred(false)
         setFormSubmitted(false)
         setHasStartedValidating(false)
         // Only clear validation state if field was required
@@ -418,9 +421,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
 
-    // Trigger validation after onChange for React Hook Form
-    // This ensures validation state is up-to-date
-    setTimeout(() => validateErrors(), 0)
+    // Don't validate on change - only validate on blur or form submission
   }
 
   // Separating Concerns as React Docs Recommend
@@ -497,7 +498,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     id,
     label,
     name,
-    onBlur: validateErrors,
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
+      setHasBlurred(true)
+      validateErrors()
+    },
     onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }