playbook_ui 15.5.0 → 15.6.0.pre.alpha.draggableask12906

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -0,0 +1,22 @@
+The multiple container functionality also supports customized dropzone styling as shown here. 
+
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
+
+The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `droppedContainer` - The container where the item was dropped
+- `originalContainer` - The container where the drag started
+- `item` - The complete item object with all properties (including the updated container)
+- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
+
+The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
+- `originalContainer` - The container where the drag started
+- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

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

@@ -5,11 +5,12 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -17,8 +18,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,4 +7,5 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -255,4 +255,80 @@ test("line dropZone with horizontal direction applies 'line_horizontal' class to
   const container = kit.querySelector(".pb_draggable_container");
   
   expect(container).toHaveClass("line_horizontal");
-});
+});
+
+// Cross-container drag tests
+const multiContainerData = [
+  { id: "1", container: "To Do", text: "Task 1" },
+  { id: "2", container: "To Do", text: "Task 2" },
+  { id: "3", container: "In Progress", text: "Task 3" },
+  { id: "4", container: "Done", text: "Task 4" },
+];
+
+const containers = ["To Do", "In Progress", "Done"];
+
+const DraggableMultipleContainers = () => {
+  const [initialState, setInitialState] = useState(multiContainerData);
+
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "outline" }}
+          initialItems={multiContainerData}
+          onReorder={(items) => setInitialState(items)}
+      >
+        {containers.map((container) => (
+          <Draggable.Container
+              container={container}
+              data={{testid:`container-${container}`}}
+              key={container}
+          >
+            {initialState
+              .filter((item) => item.container === container)
+              .map(({ id, text }) => (
+                <Draggable.Item
+                    container={container}
+                    data-testid={`item-${id}`}
+                    dragId={id}
+                    key={id}
+                >
+                  {text}
+                </Draggable.Item>
+              ))}
+          </Draggable.Container>
+        ))}
+      </DraggableProvider>
+    </div>
+  );
+};
+
+test("renders multiple containers with correct items", () => {
+  render(<DraggableMultipleContainers />);
+  
+  const kit = screen.getByTestId(testId);
+  expect(kit).toBeInTheDocument();
+  
+  containers.forEach((container) => {
+    const containerEl = kit.querySelector(`[data-testid="container-${container}"]`);
+    expect(containerEl).toBeInTheDocument();
+  });
+  
+  // Check items are in correct containers
+  expect(screen.getByText("Task 1")).toBeInTheDocument();
+  expect(screen.getByText("Task 2")).toBeInTheDocument();
+  expect(screen.getByText("Task 3")).toBeInTheDocument();
+  expect(screen.getByText("Task 4")).toBeInTheDocument();
+});
+
+test("items have correct container association", () => {
+  const { container } = render(<DraggableMultipleContainers />);
+  
+  // items rendered within their respective containers
+  const todoContainer = container.querySelector('[data-testid="container-To Do"]');
+  const inProgressContainer = container.querySelector('[data-testid="container-In Progress"]');
+  const doneContainer = container.querySelector('[data-testid="container-Done"]');
+  
+  expect(todoContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(2);
+  expect(inProgressContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
+  expect(doneContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
+})

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_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_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()
 })