playbook_ui 15.4.0 → 15.5.0.pre.alpha.PLAY2503datepickerdefaultdateoutsideminmaxrange12814

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

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -36,6 +36,7 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const {
     autoClose = 0,
@@ -67,21 +68,42 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const autoCloseToast = () => {
-    if (autoClose && open) {
-      setTimeout(() => {
+  useEffect(() => {
+    toggleToast(open);
+  }, [open]);
+
+  // Manage auto-close timeout separately
+  useEffect(() => {
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Set new timeout if autoClose is enabled and toast is open
+    if (autoClose && open && showToast) {
+      timeoutRef.current = setTimeout(() => {
         toggleToast(false);
         onClose();
+        timeoutRef.current = null;
       }, autoClose);
     }
-  };
 
-  useEffect(() => {
-    toggleToast(open);
-    autoCloseToast();
-  }, [open]);
+    // Cleanup function to clear timeout on unmount or when dependencies change
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [autoClose, open, showToast, onClose]);
 
   const handleClick = () => {
+    // Clear autoClose timeout when manually closing
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
     toggleToast(!closeable);
     onClose();
   };

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -28,22 +29,28 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
+  
   const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
   const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
   const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
   const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
   const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
-  const fixedStyle =
-    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const fixedStyle = fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
   const dynamicInlineProps = globalInlineProps(props)
+
+// Extract style from htmlOptions and remove it
+  const { style: htmlStyle, ...htmlOptionsWithoutStyle } = htmlOptions
+  const htmlStyleObj = htmlStyle && typeof htmlStyle === 'object' ? htmlStyle : {}
+  
+  // Merge all styles
   const combinedStyles = {
+    ...htmlStyleObj,
     ...fixedStyle,
     ...dynamicInlineProps
   }
 
-  const htmlProps = buildHtmlProps(htmlOptions)
-
+  const htmlProps = buildHtmlProps(htmlOptionsWithoutStyle)
 
   return (
     <div
@@ -66,4 +73,4 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   )
 }
 
-export default FlexItem
+export default FlexItem

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -15,6 +15,7 @@ const FlexItemExample = (props) => {
         <FlexItem
             displayFlex
             gap="xs"
+            htmlOptions={{style: {padding:"2px"}}}
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -112,7 +112,14 @@
     name: "checkbox-name",
     class: "checkbox-class"
   %>
-  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.date_picker :example_date_picker_1, props: { 
+    label: true,
+    # Testing out-of-range default date feature: default_date is earlier than min_date
+    # This should still display the default date even though it's outside the valid range
+    default_date: (DateTime.current - 3.days).utc.iso8601,
+    min_date: (DateTime.current - 1.day).utc.iso8601,
+    max_date: (DateTime.current + 7.days).utc.iso8601
+  } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -113,7 +113,17 @@
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { 
+    label: true, 
+    required: true, 
+    validation_message: "Please, select a date.", 
+    allow_input: true,
+    # Testing out-of-range default date feature: default_date is earlier than min_date
+    # This should still display the default date even though it's outside the valid range
+    default_date: (DateTime.current - 3.days).utc.iso8601,
+    min_date: (DateTime.current - 1.day).utc.iso8601,
+    max_date: (DateTime.current + 7.days).utc.iso8601
+  } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import FormPill from '../_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

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

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

@@ -1,15 +1,19 @@
-<%= 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
-} %>
+<% 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 %>
 <div>
   <%= pb_rails "title", props: {
     tag: "span",

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

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

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

@@ -1,15 +1,19 @@
-<%= 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
-} %>
+<% 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: {
   color: "light",
   text: object.city_state_zip,

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

@@ -1,15 +1,19 @@
-<%= 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
-} %>
+<% 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 "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LoadingInline } from 'playbook-ui'
+import LoadingInline from '../_loading_inline'
 
 const LoadingInlineVariant = (props) => {
   return (

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

@@ -36,6 +36,16 @@ $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

@@ -5,17 +5,19 @@ 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 }>,
 }
 
@@ -30,6 +32,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     maxDisplayedUsers = 4,
     reverse = false,
     size = 'xs',
+    withTooltip = false,
     users,
   } = props
 
@@ -62,22 +65,70 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      {usersToDisplay.map((avatarData, index) => (
-        <Avatar
-            {...avatarData}
-            className="pb_multiple_users_item"
-            dark={dark}
-            imageAlt={avatarData.name}
-            key={index}
-            size={size}
-        />
-      ))}
+      {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 && 
-        <div className={itemClasses}>
-          {`+${users.length - 3}`}
-        </div>
+          {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>
   )
 }

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+
+const MultipleUsersWithTooltip = (props) => {
+    return (
+        <div>
+            <MultipleUsers
+                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"
+                    },
+                    {
+                        name: 'Beverly Reyes',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+                        tooltip: "Beverly Reyes - Online"
+                    },
+                    {
+                        name: 'Keith Craig',
+                        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+                        tooltip: "Keith Craig - Away"
+                    },
+                    {
+                        name: 'Alicia Cooper',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+                        tooltip: "Alicia Cooper - Busy"
+                    },
+                ]}
+                withTooltip
+                {...props}
+            />
+        </div>
+    )
+}
+``
+export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -0,0 +1 @@
+Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

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

@@ -10,6 +10,7 @@ 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

@@ -1,3 +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'

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

@@ -49,4 +49,29 @@ 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()
 })