RubyGems - playbook_ui - Versions diffs - 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.rc.0 - Mend

playbook_ui 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

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

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

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

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

@@ -8,4 +8,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
+}) %>

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

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

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

@@ -36,16 +36,6 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     height: $pb_multiple_users_size_xxs;
   }
-  .user_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-  }
-  .user_count_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-    position: relative;
-  }
   .pb_multiple_users_item {
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx CHANGED Viewed

@@ -5,19 +5,17 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { globalProps } from '../utilities/globalProps'
 import Avatar from '../pb_avatar/_avatar'
-import Tooltip from '../pb_tooltip/_tooltip'
 type MultipleUsersProps = {
   aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
-  withTooltip?: boolean,
   users: Array<{ [key: string]: string }>,
 }
@@ -32,7 +30,6 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     maxDisplayedUsers = 4,
     reverse = false,
     size = 'xs',
-    withTooltip = false,
     users,
   } = props
@@ -65,70 +62,22 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      {withTooltip ?
-        <>
-          {usersToDisplay.map((avatarData, index) => (
-            <Tooltip
-                key={"user_tooltip_" + index}
-                placement='top'
-                text={avatarData.tooltip ? avatarData.tooltip : ''}
-                zIndex={10}
-            >
-              <Avatar
-                  {...avatarData}
-                  className={"pb_multiple_users_item" + (withTooltip ? " user_tooltip" : "")}
-                  dark={dark}
-                  imageAlt={avatarData.name}
-                  key={index}
-                  size={size}
-              />
-            </Tooltip>
-          ))}
+      {usersToDisplay.map((avatarData, index) => (
+        <Avatar
+            {...avatarData}
+            className="pb_multiple_users_item"
+            dark={dark}
+            imageAlt={avatarData.name}
+            key={index}
+            size={size}
+        />
+      ))}
-          {users.length > maxDisplayedUsers &&
-            <Tooltip
-                placement='top'
-                text={
-                  <div>
-                    {
-                      usersToDisplay.length < users.length ?
-                        users.slice(displayCount).map((u, i) => (
-                          <div key={i}>{u.tooltip}</div>
-                        ))
-                      :
-                        ''
-                    }
-                  </div>
-                }
-                zIndex={10}
-            >
-              <div className={itemClasses + (withTooltip ? " user_count_tooltip" : "")}>
-                {`+${users.length - displayCount}`}
-              </div>
-            </Tooltip>
-          }
-        </>
-        :
-        <>
-          {usersToDisplay.map((avatarData, index) => (
-            <Avatar
-                {...avatarData}
-                className="pb_multiple_users_item"
-                dark={dark}
-                imageAlt={avatarData.name}
-                key={index}
-                size={size}
-            />
-          ))}
-          {users.length > maxDisplayedUsers &&
-            <div className={itemClasses}>
-              {`+${users.length - 3}`}
-            </div>
-          }
-        </>
+      { users.length > maxDisplayedUsers &&
+        <div className={itemClasses}>
+          {`+${users.length - 3}`}
+        </div>
       }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml CHANGED Viewed

@@ -10,7 +10,6 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
-  - multiple_users_with_tooltip: With Tooltip
   swift:
   - multiple_users_default_swift: Default

data/app/pb_kits/playbook/pb_multiple_users/docs/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
 export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
-export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js CHANGED Viewed

@@ -49,29 +49,4 @@ test('should render aria-label', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveAttribute('aria-label', testId)
-})
-test('should render withTooltip prop', () => {
-  render(
-      <MultipleUsers
-          data={{ testid: testId }}
-          users={[
-            {
-              name: 'Patrick Welch',
-              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-              tooltip: "Patrick Welch - Online"
-            },
-            {
-              name: 'Lucille Sanchez',
-              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-              tooltip: "Lucille Sanchez - Offline"
-            },
-          ]}
-          withTooltip
-      />
-  )
-  const kit = screen.getByTestId(testId)
-  const childWithTooltip = kit.querySelector('.pb_tooltip_kit')
-  expect(childWithTooltip).not.toBeNull()
 })

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

@@ -110,25 +110,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const hasBlurredRef = useRef<boolean>(false);
-  const formSubmittedRef = useRef<boolean>(false);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error || "")
   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)
-  // Keep refs in sync with state for use in event listeners
-  useEffect(() => {
-    hasBlurredRef.current = hasBlurred
-  }, [hasBlurred])
-  useEffect(() => {
-    formSubmittedRef.current = formSubmitted
-  }, [formSubmitted])
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
@@ -155,8 +143,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
   // Determine which error to display
-  // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasBlurred || formSubmitted) && error
+  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
   const displayError = shouldShowInternalError ? error : ""
   useEffect(() => {
@@ -271,9 +259,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       return
     }
-     // Only validate if field has been blurred or form has been submitted
-     // Use refs here since state updates are async and we need current values
-     if (!hasBlurredRef.current && !formSubmittedRef.current) return
+     if (!hasTyped && !error) return
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -294,7 +280,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       if (phoneNumberContainer && phoneNumberContainer === wrapperRef.current) {
         const invalidInputName = target.name || target.getAttribute('name')
         if (invalidInputName === name) {
-          formSubmittedRef.current = true
           setFormSubmitted(true)
           // Trigger validation when form is submitted
           validateErrors()
@@ -320,9 +305,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
-        hasBlurredRef.current = false
-        setHasBlurred(false)
-        formSubmittedRef.current = false
         setFormSubmitted(false)
         setHasStartedValidating(false)
         // Only clear validation state if field was required
@@ -340,7 +322,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         if (required && isEmpty) {
           setError('Missing phone number')
-          formSubmittedRef.current = true
           setFormSubmitted(true)
           return 'Missing phone number'
         }
@@ -397,7 +378,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           // Set the error state so the validation attribute gets added
           setError(errorMessage)
-          formSubmittedRef.current = true
           setFormSubmitted(true)
           setHasTyped(true)
@@ -421,7 +401,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     // Reset form submitted state when user types
     if (formSubmitted) {
-      formSubmittedRef.current = false
       setFormSubmitted(false)
     }
@@ -437,15 +416,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    // Don't call isValid callback on change - only on blur or form submission
-    // This prevents triggering validation while typing
-    // Use refs to get current values in case this is called from event listener
-    if (hasBlurredRef.current || formSubmittedRef.current) {
-      isValid(itiRef.current.isValidNumber())
-    }
+    isValid(itiRef.current.isValidNumber())
-    // Don't validate on change - only validate on blur or form submission
+    // Trigger validation after onChange for React Hook Form
+    // This ensures validation state is up-to-date
+    setTimeout(() => validateErrors(), 0)
   }
   // Separating Concerns as React Docs Recommend
@@ -507,12 +482,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           setSelectedData(phoneNumberData)
           onChange(phoneNumberData)
-          // Don't call isValid callback on change - only on blur or form submission
-          // Use refs to check current blur state in the event listener (closure issue)
-          if (hasBlurredRef.current || formSubmittedRef.current) {
-            isValid(telInputInit.isValidNumber())
-          }
+          isValid(telInputInit.isValidNumber())
         })
       }
     }
@@ -522,16 +492,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: displayError || props.error || "",
+    error: hasTyped ? error : props.error || displayError,
     type: 'tel',
     id,
     label,
     name,
-    onBlur: () => {
-      hasBlurredRef.current = true
-      setHasBlurred(true)
-      validateErrors()
-    },
+    onBlur: validateErrors,
     onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb CHANGED Viewed

@@ -1,42 +1,12 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: {
-        id: "validation",
-        initial_country: "af",
-        value: "",
-        required: true
-    }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 <%= javascript_tag do %>
     document.addEventListener('DOMContentLoaded', function () {
-        const form = document.querySelector('#example-form-validation');
-        // Wait for React component to mount
-        function waitForComponent() {
-            const phoneInput = form.querySelector('#validation');
-            if (!phoneInput) {
-                setTimeout(waitForComponent, 100);
-                return;
-            }
-            // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
-            setTimeout(function() {
-                phoneInput.focus({ preventScroll: true });
-                setTimeout(function() {
-                    phoneInput.blur();
-                }, 100);
-            }, 500);
-        }
-        waitForComponent();
-        // Prevent form submission if there are validation errors
-        form.addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
-                e.preventDefault();
-            }
-        });
+        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+        })
     })
 <% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx CHANGED Viewed

@@ -10,19 +10,8 @@ const PhoneNumberInputValidation = (props) => {
     const [showFormErrors, setShowFormErrors] = useState(false);
     const [phoneNumber, setPhoneNumber] = useState("");
     const [countryCode, setCountryCode] = useState("af");
-    const [isValid, setIsValid] = useState(false);
-    const [hasInteracted, setHasInteracted] = useState(false);
-    // Start with initial error - will be cleared on blur if valid
-    const initialError = (
-        <>
-            <Icon icon="warning" /> Missing phone number.
-        </>
-    );
     const handleOnValidate = (valid) => {
-        setIsValid(valid);
-        setHasInteracted(true);
         setFormErrors(
             valid ? "" : "Please correct the fields below and try again."
         );
@@ -34,16 +23,18 @@ const PhoneNumberInputValidation = (props) => {
     };
     const handleOnSubmit = (e) => {
-        if (!isValid) e.preventDefault()
+        if (showFormErrors) e.preventDefault()
     }
     useEffect(() => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
-    // Only show error prop initially, or if invalid after interaction
-    // Clear error prop once valid (component handles validation on blur)
-    const shouldShowError = !hasInteracted || (hasInteracted && !isValid);
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
     return (
         <form
@@ -59,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={shouldShowError ? initialError : undefined}
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md CHANGED Viewed

	@@ -1 +1 @@
1	- Error shows that the radio option must be selected or is invalid (~~i.e.~~ when used in a form it signals a user to fix an error).
1	+ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).