playbook_ui 16.1.0.pre.alpha.play2708fixmaxdisplayeduserprop14270 → 16.1.0.pre.alpha.play2711phonenumberkitupdatevalidation14239

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f98400b497a72993f63ef503a8c014b76aa9345a4cf5079947ab08a900f429b
-  data.tar.gz: 2f0cf3ca2f463c3c5e1f507949c1eb17b285beca9026fdc1036fa6c254a53b18
+  metadata.gz: dd27de80b668a2b1542488069299e9aa43faa0df6685fc515f67ecde9c12fef1
+  data.tar.gz: 715e911ecef41a4ae1c9915e60cb51e0913026e4448376a0e8bcf6ee6da6e2a0
 SHA512:
-  metadata.gz: fcd74946caa8e71c7d93b0a23a2bc0b620b0f8007a40caa7176275c8f5735298bc1a658760e76b2c7b1227d77fd705b945a118c3b8aa15895ed2bfa405a828c0
-  data.tar.gz: c896dd839df6ce0bda00019e7a277991e76dcfdd965e2474c198a004b1e1fa281e1db977769ca88ff7437e0f135916280a952860e543a35ddc97609ebd116f4d
+  metadata.gz: 17a22ef6df9fdff617631f912aeee82d7170ca9b9f0039979e82ada596d00ba555a91019e68424c16b8e01dc6f3b43a39bbfb0a803105b76cee4f329afbec248
+  data.tar.gz: 6fb8ebbe3f63d1d3774be2f84754eb8eb5004ad9d79f4119935175f8eb70a707bc2fa50e9b3b713d163ff50c9fdecd6f79398ecee33ef78fff021e4f47ae2af7

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -37,11 +37,11 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
   }
 
 
-  .pb_multiple_users_overlap {
+  .user_tooltip {
     margin-left: $pb_multiple_users_overlap !important;
   }
 
-  .pb_multiple_users_count_overlap {
+  .user_count_tooltip {
     margin-left: $pb_multiple_users_overlap !important;
     position: relative;
   }
@@ -83,9 +83,4 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
       margin-right: 0;
     }
   }
-
-  .pb_multiple_users_count_overlap {
-    margin-left: 0 !important;
-    margin-right: $pb_multiple_users_overlap !important;
-  }
-}
+}

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

@@ -37,7 +37,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   } = props
 
   const displayCount =
-    users.length > maxDisplayedUsers ? Math.max(1, maxDisplayedUsers - 1) : users.length
+    users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
 
   const reverseClass = reverse === true ? 'reverse' : ''
@@ -57,70 +57,6 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     buildCss('multiple_users_badge', avatarSizeClass)
   )
 
-  const shouldApplyOverlapClass = (index: number, length: number): boolean => {
-    return reverse ? index < length - 1 : index > 0;
-  }
-
-  const renderAvatar = (avatarData: { [key: string]: string; }, index: number) => {
-    const avatar = (
-      <Avatar
-          {...avatarData}
-          className={`pb_multiple_users_item${shouldApplyOverlapClass(index, usersToDisplay.length) ? ' pb_multiple_users_overlap' : ''}`}
-          dark={dark}
-          imageAlt={avatarData.name}
-          size={size}
-      />
-    );
-
-    if (withTooltip) {
-      return (
-        <Tooltip
-            key={"user_tooltip_" + index}
-            placement='top'
-            text={avatarData.tooltip ? avatarData.tooltip : ''}
-            zIndex={10}
-        >
-          {avatar}
-        </Tooltip>
-      );
-    }
-
-    return <div key={index}>{avatar}</div>;
-  };
-
-  const renderCountBadge = () => {
-    const badge = (
-      <div className={itemClasses + " pb_multiple_users_count_overlap"}>
-        {`+${users.length - displayCount}`}
-      </div>
-    );
-
-    if (withTooltip) {
-      return (
-        <Tooltip
-            placement='top'
-            text={
-            <div>
-              {
-                usersToDisplay.length < users.length ?
-                  users.slice(displayCount).map((u, i) => (
-                    <div key={i}>{u.tooltip}</div>
-                  ))
-                  :
-                  ''
-              }
-            </div>
-          }
-            zIndex={10}
-        >
-          {badge}
-        </Tooltip>
-      );
-    }
-
-    return badge;
-  };
-
   return (
     <div
         {...ariaProps}
@@ -129,12 +65,72 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      {usersToDisplay.map((avatarData, index) => renderAvatar(avatarData, index))}
-
-      {users.length > maxDisplayedUsers && renderCountBadge()}
+      {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>
+          ))}
+
+          {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>
+          }
+        </>
+      }
 
     </div>
-  );
-};
+  )
+}
 
-export default MultipleUsers;
+export default MultipleUsers

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

@@ -12,10 +12,9 @@ examples:
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
   - multiple_users_with_tooltip: With Tooltip
-  - multiple_users_max_displayed_users: Max Displayed Users
 
   swift:
   - multiple_users_default_swift: Default
   - multiple_users_reverse_swift: Reverse
   - multiple_users_size_swift: Small
-  - multiple_users_props_swift: ""
+  - multiple_users_props_swift: ""

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

@@ -1,5 +1,4 @@
 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'
-export { default as MultipleUsersMaxDisplayedUsers } from './_multiple_users_max_displayed_users.jsx'
+export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'

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

@@ -154,6 +154,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
       }
     }
+    
+    // Set custom validity on the input element to prevent form submission
+    if (inputRef.current) {
+      if (hasError && error) {
+        inputRef.current.setCustomValidity(error)
+      } else {
+        inputRef.current.setCustomValidity('')
+      }
+    }
   }
 
   // Determine which error to display