playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { render, fireEvent, screen } from '../utilities/test-utils';
+import { Drawer, Button } from 'playbook-ui';
+import { waitFor } from '@testing-library/react';
+
+const size = 'sm';
+
+function DrawerTest({ props }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const close = () => setIsOpen(false);
+  const open = () => setIsOpen(true);
+
+  return (
+    <>
+    <Button onClick={open}>{'Open Drawer'}</Button>
+      <Drawer
+          className="wrapper"
+          id="drawer-id"
+          onClose={close}
+          opened={isOpen}
+          placement="left"
+          portalClassName="portal"
+          size={size}
+          {...props}
+      >
+        {props && props.children}
+      </Drawer>
+    </>
+  );
+}
+
+test('renders with the right border class when border prop is right', async () => {
+  render(<DrawerTest props={{ border: 'right' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
+
+  expect(drawer).toHaveClass('drawer_border-right');
+});
+
+test('renders with the full border class when border prop is full', async () => {
+  render(<DrawerTest props={{ border: 'full' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  expect(drawer).toHaveClass('drawer_border-full');
+});
+
+test('does not have a border class when border prop is none', async () => {
+  render(<DrawerTest props={{ border: 'none' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  expect(drawer).not.toHaveClass('drawer_border-right');
+  expect(drawer).not.toHaveClass('drawer_border-left');
+  expect(drawer).not.toHaveClass('drawer_border-full');
+});
+
+test('renders the correct size class for a large drawer', async () => {
+  render(<DrawerTest props={{ size: 'lg' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
+});

data/app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+
+export const breakpointValues = {
+  none: 0,
+  xs: 575,
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1400,
+} as const
+
+type BreakpointSize = keyof typeof breakpointValues
+
+interface UseBreakpointProps {
+  breakpoint?: BreakpointSize
+  triggerId?: string
+}
+
+export const useBreakpoint = ({ 
+  breakpoint = 'none',
+  triggerId 
+}: UseBreakpointProps) => {
+  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false)
+  const [isUserClosed, setIsUserClosed] = useState(false)
+
+  useEffect(() => {
+    if (breakpoint === 'none') return
+
+    const handleResize = () => {
+      const width = window.innerWidth
+      
+        const openBreakpointWidth = breakpointValues[breakpoint]
+        if (width >= openBreakpointWidth) {
+          setIsOpenBreakpointOpen(true)
+        } else {
+          setIsOpenBreakpointOpen(false)
+          setIsUserClosed(false)
+        }
+
+      // Handle menu button visibility
+      if (triggerId) {
+        const menuButton = document.getElementById(triggerId)
+        if (menuButton) {
+          menuButton.style.display = isOpenBreakpointOpen ? 'none' : ''
+        }
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize()
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [breakpoint, triggerId, isOpenBreakpointOpen])
+
+  return {
+    isOpenBreakpointOpen,
+    isUserClosed,
+    setIsUserClosed
+  }
+} 

data/app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+export const useDrawerAnimation = (isOpen: boolean) => {
+  const [animationState, setAnimationState] = useState('')
+
+  useEffect(() => {
+    if (isOpen) {
+      setAnimationState('afterOpen')
+    } else if (!isOpen && animationState === 'afterOpen') {
+      setAnimationState('beforeClose')
+      setTimeout(() => {
+        setAnimationState('')
+      }, 200)
+    }
+  }, [isOpen])
+
+  return {
+    animationState,
+    isVisible: isOpen || animationState === 'beforeClose'
+  }
+} 

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

@@ -0,0 +1,257 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+export default class PbDrawer extends PbEnhancedElement {
+  static get selector() {
+    return ".pb_drawer_wrapper"
+  }
+
+  connect() {
+    this.handleToggleClick = this.handleToggleClick.bind(this)
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleResize = this.handleResize.bind(this)
+
+    this._toggleTriggers = Array.from(document.querySelectorAll("[data-open-drawer]"))
+    this._toggleTriggers.forEach(el => {
+      el.addEventListener("click", this.handleToggleClick)
+    })
+
+    this._wrappers = Array.from(document.querySelectorAll(".pb_drawer_wrapper"))
+    this._wrappers.forEach(el => {
+      el.addEventListener("mousedown", this.handleOutsideClick)
+    })
+
+    this._withinElementDrawers = Array.from(
+      document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]")
+    )
+
+    window.addEventListener("resize", this.handleResize)
+    this.handleResize()
+  }
+
+  disconnect() {
+    this._toggleTriggers.forEach(el => {
+      el.removeEventListener("click", this.handleToggleClick)
+    })
+    this._wrappers.forEach(el => {
+      el.removeEventListener("mousedown", this.handleOutsideClick)
+    })
+    window.removeEventListener("resize", this.handleResize)
+  }
+
+  getOverlay(wrapper) {
+    if (wrapper.id && wrapper.id.startsWith("drawer-wrapper-")) {
+      const overlayId = wrapper.id.replace("drawer-wrapper-", "drawer-overlay-")
+      return document.getElementById(overlayId)
+    }
+    return wrapper.querySelector(".pb_drawer_overlay") || wrapper.querySelector(".pb_drawer_no_overlay")
+  }
+
+  handleToggleClick(event) {
+    const trigger = event.currentTarget
+    const drawerId = trigger.dataset.openDrawer
+    const dialog = document.getElementById(drawerId)
+    if (!dialog) return
+
+    if (dialog.classList.contains("pb_drawer_within_element_rails")) {
+      if (dialog.classList.contains("open")) {
+        this.closeWithinElementDrawer(dialog)
+        dialog.dataset.manualOpen = "false"
+      } else {
+        this.openWithinElementDrawer(dialog)
+        dialog.dataset.manualOpen = "true"
+      }
+      return
+    }
+
+    const wrapperId = `drawer-wrapper-${drawerId}`
+    const wrapper = document.getElementById(wrapperId)
+    if (!wrapper) return
+
+    if (wrapper !== this.element) return
+
+    if (wrapper.classList.contains("open")) {
+      this.closeDrawer(wrapper, dialog)
+      wrapper.dataset.manualOpen = "false"
+    } else {
+      this.openDrawer(wrapper, dialog)
+      wrapper.dataset.manualOpen = "true"
+    }
+  }
+
+  openWithinElementDrawer(dialog) {
+    if (dialog.classList.contains("open")) return
+    dialog.style.maxHeight = "0px"
+    dialog.offsetHeight
+    dialog.classList.add("open")
+    // Get trigger's height and add it to the final height
+    const trigger = document.querySelector(`[data-open-drawer="${dialog.id}"]`)
+    const triggerHeight = trigger ? trigger.offsetHeight : 0
+    const finalHeight = (dialog.scrollHeight + triggerHeight) + "px"
+    dialog.style.maxHeight = finalHeight
+    dialog.addEventListener("transitionend", function handleOpenEnd(e) {
+      if (e.propertyName === "max-height") {
+        dialog.style.maxHeight = "none"
+        dialog.removeEventListener("transitionend", handleOpenEnd)
+      }
+    })
+  }
+
+  closeWithinElementDrawer(dialog) {
+    if (!dialog.classList.contains("open")) return
+    const currentHeight = dialog.scrollHeight
+    dialog.style.maxHeight = currentHeight + "px"
+    dialog.offsetHeight
+    dialog.classList.remove("open")
+    dialog.style.maxHeight = "0px"
+    dialog.addEventListener("transitionend", function handleCloseEnd(e) {
+      if (e.propertyName === "max-height") {
+        dialog.removeEventListener("transitionend", handleCloseEnd)
+        dialog.style.maxHeight = "0px"
+      }
+    })
+  }
+
+  openDrawer(wrapper, dialog) {
+    const behavior = wrapper.dataset.behavior
+    const size = wrapper.dataset.size
+    const placement = wrapper.dataset.placement
+    this.handlePushOpen(behavior, size, placement)
+
+    wrapper.style.display = ""
+    const overlay = this.getOverlay(wrapper)
+    if (overlay) overlay.style.display = ""
+
+    wrapper.classList.add("open")
+    dialog.classList.add("open")
+  }
+
+  closeDrawer(wrapper, dialog) {
+    const behavior = wrapper.dataset.behavior
+    this.handlePushClose(behavior)
+
+    if (wrapper.className.includes("open")) wrapper.style.display = "none"
+    const overlay = this.getOverlay(wrapper)
+    if (overlay && wrapper.className.includes("open")) overlay.style.display = "none"
+
+    wrapper.classList.remove("open")
+    dialog.classList.remove("open")
+  }
+
+  handleOutsideClick(event) {
+    const wrapper = event.currentTarget
+    const dialog = wrapper.querySelector(".pb_drawer")
+    const overlay = this.getOverlay(wrapper)
+
+    if (dialog && dialog.classList.contains("pb_drawer_within_element_rails")) {
+      return
+    }
+
+    if (wrapper.dataset.overlayClick === "overlay_close" && event.target === overlay) {
+      this.closeDrawer(wrapper, dialog)
+      event.stopPropagation()
+      return
+    }
+
+    const dialogRect = dialog.getBoundingClientRect()
+    const clickedOutside =
+      event.clientX < dialogRect.left ||
+      event.clientX > dialogRect.right ||
+      event.clientY < dialogRect.top ||
+      event.clientY > dialogRect.bottom
+
+    if (clickedOutside) {
+      this.closeDrawer(wrapper, dialog)
+      event.stopPropagation()
+    }
+  }
+
+  handleResize() {
+    const breakpointValues = {
+      none: 0,
+      xs: 575,
+      sm: 768,
+      md: 992,
+      lg: 1200,
+      xl: 1400,
+    }
+
+    // Process wrappers
+    this._wrappers.forEach(wrapper => {
+      const bp = wrapper.dataset.breakpoint || "none"
+      if (bp === "none") return
+
+      const threshold = breakpointValues[bp] || 0
+      const dialog = wrapper.querySelector(".pb_drawer")
+      const trigger = dialog ? document.querySelector(`[data-open-drawer="${dialog.id}"]`) : null
+
+      if (window.innerWidth >= threshold) {
+        if (!wrapper.classList.contains("open")) {
+          this.openDrawer(wrapper, dialog)
+        }
+        if (trigger) trigger.style.display = "none"
+      } else {
+        if (trigger) trigger.style.display = ""
+        if (wrapper.classList.contains("open") && wrapper.dataset.manualOpen !== "true") {
+          this.closeDrawer(wrapper, dialog)
+        }
+      }
+    })
+
+    // Process within element drawers
+    this._withinElementDrawers.forEach(drawer => {
+      const bp = drawer.dataset.breakpoint || "none"
+      if (bp === "none") return
+
+      const threshold = breakpointValues[bp] || 0
+      const trigger = document.querySelector(`[data-open-drawer="${drawer.id}"]`)
+
+      if (window.innerWidth >= threshold) {
+        if (!drawer.classList.contains("open")) {
+          this.openWithinElementDrawer(drawer)
+        }
+        if (trigger) trigger.style.display = "none"
+      } else {
+        if (trigger) trigger.style.display = ""
+        if (drawer.classList.contains("open") && drawer.dataset.manualOpen !== "true") {
+          this.closeWithinElementDrawer(drawer)
+        }
+      }
+    })
+  }
+
+  handlePushOpen(behavior, size, placement) {
+    if (behavior !== "push") return
+
+    const sizeMap = {
+      xl: "365px",
+      lg: "300px",
+      md: "250px",
+      sm: "200px",
+      xs: "64px",
+      full: "100%",
+    }
+
+    const body = document.querySelector("body")
+    if (!body) return
+
+    if (placement === "left") {
+      body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`
+    } else if (placement === "right") {
+      body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`
+    }
+    body.classList.add("PBDrawer__Body--open")
+  }
+
+  handlePushClose(behavior) {
+    if (behavior !== "push") return
+
+    const body = document.querySelector("body")
+    if (!body) return
+
+    if (body.classList.contains("PBDrawer__Body--open")) {
+      body.classList.add("PBDrawer__Body--close")
+    }
+    body.style.cssText = ""
+    body.classList.remove("PBDrawer__Body--open")
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -287,4 +287,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -278,7 +278,7 @@ test("MultiSelect prop to allow multiple selections + add correct Form Pills", (
   const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
   fireEvent.click(option[0]); // Select first option
   fireEvent.click(option[1]); // Select second option
-  const formPills = kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary");
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
   expect(formPills.length).toBe(2);
   expect(formPills[0]).toHaveTextContent("United States");
   expect(formPills[1]).toHaveTextContent("Canada");
@@ -314,7 +314,7 @@ test("renders form pills inside trigger", () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
   expect(formPill).toBeInTheDocument()
   })
 
@@ -333,7 +333,7 @@ test("multiSelect and autocomplete to work together", () => {
   expect(input).toBeInTheDocument()
     const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
   expect(formPill).toBeInTheDocument()
 })
 
@@ -350,9 +350,9 @@ test("renders form pills with size and color", () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
+  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
   expect(formPill).toBeInTheDocument()
-  expect(formPill).toHaveClass("pb_form_pill_small")
+  expect(formPill).toHaveClass("small")
   })
 
 test("defaultValue works with multiSelect", () => {
@@ -365,7 +365,7 @@ test("defaultValue works with multiSelect", () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)

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

@@ -507,14 +507,14 @@ export default class PbDropdown extends PbEnhancedElement {
       // Create a form pill for each selected option
       const pill = document.createElement("div");
       const color = this.formPillProps.color || "primary";
-      pill.classList.add("pb_form_pill_kit", `pb_form_pill_${color}`, "pb_form_pill_none", "mr_xs");
+      pill.classList.add(`pb_form_pill_kit_${color}`, "mr_xs");
       if (this.formPillProps.size === "small") {
-        pill.classList.add("pb_form_pill_small");
+        pill.classList.add("small");
       }
       pill.tabIndex = 0;
       pill.dataset.pillId = JSON.parse(option).id;
       const innerDiv = document.createElement("h3");
-      innerDiv.className = "pb_title_kit pb_title_4 pb_form_pill_text";
+      innerDiv.className = "pb_title_kit_size_4 pb_form_pill_text";
       innerDiv.textContent = JSON.parse(option).label;
       pill.appendChild(innerDiv);
 

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -37,9 +37,9 @@
   }
 
   &.dark {
-    .pb_title_kit,
-    .pb_body_kit,
-    .pb_detail_kit,
-    .pb_button_kit_link:hover { color: $white; }
+    [class*="pb_title_kit"],
+    [class*="pb_body_kit"],
+    [class*="pb_detail_kit"],
+    [class*="pb_button_kit_link"]:hover { color: $white; }
   }
 }

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 {
+[class^='pb_file_upload_kit'] {
+  [class^='pb_card_kit'] {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -9,33 +9,22 @@
     border: none;
     width: 0;
   }
-  &.error,
-  &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+  &.error {
+    [class^='pb_card_kit'] {
       border-color: $error;
     }
-    .pb_body_kit_negative {
+    [class^='pb_body_kit'][status="negative"] {
       margin-top: $space_xs;
     }
   }
 }
 
-.pb_file_upload_kit_error {
-  ::file-selector-button {
-    visibility: hidden;
-    padding: 0;
-    border: none;
-    width: 0;
-  }
-}
-
-.dark .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+.dark [class*='pb_file_upload_kit'] {
+  [class*='pb_card_kit'] {
     border: 1px $text_dk_lighter dashed;
   }
-  &.error,
-  &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+  &.error {
+    [class^='pb_card_kit'] {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -2,7 +2,7 @@
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"
-          class="pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled <%= 'dark' if object.dark %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
         >
           <%= "#{object.label}" %>
         </label>

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -6,7 +6,7 @@
     padding: 0 $space_sm !important;
   }
 
-  .pb_button_kit.pb_button_link {
+  [class^=pb_button_kit][class*=_link] {
     flex-shrink:0;
     padding: 0 $space_xs !important;
     [id^="sort"] {
@@ -14,19 +14,19 @@
     }
   }
 
-  .pb_card_body_kit_md {
+  [class^=pb_card_body_kit][class*=_md] {
     padding: 0 !important;
   }
 }
 
-.pb_filter_kit {
-  .pb_circle_icon_button_kit {
+[class^=pb_filter_kit] {
+  [class^=pb_circle_icon_button_kit] {
     padding-left: $space_sm !important;
     padding-top: $space_sm !important;
     padding-bottom: $space_sm !important;
   }
 
-  .pb-form {
+  [class^=pb-form] {
     padding: $space_sm ;
   }
 
@@ -88,11 +88,11 @@
     z-index: 1;
   }
 
-  .pb_collapsible_kit .toggle-content.filter_section_collapsible {
+  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
     padding-top: $space_xs !important;
   }
 
-  &.dark {
+  &[class*=dark] {
     .filters .filter {
     border-right: 1px solid $border_dark !important;
     }
@@ -103,4 +103,4 @@
       opacity:0;
     }
   }
-}
+}