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

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -0,0 +1,381 @@
+@import "../tokens/positioning";
+@import "../tokens/colors";
+@import "../pb_card/card_mixin";
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/animation-curves";
+@import "../tokens/positioning";
+
+$gutter: $space_lg;
+$xsmall: 64px;
+$small: 200px;
+$medium: 250px;
+$large: 300px;
+$xlarge: 365px;
+$animation-duration: .25s;
+$z-index: $z_7;
+
+@keyframes modalFadeInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes modalFadeOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes modalFadeInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes modalFadeOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes modalFadeIn {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes modalFadeOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes overlayFade {
+  from {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes overlayFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes modalFadeDownIn {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes modalFadeDownOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes modalFadeUpIn {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes modalFadeUpOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+body.PBDrawer__Body--open {
+  transition: margin-left $animation-duration ease-in, margin-right $animation-duration ease-in;
+}
+
+body.PBDrawer__Body--close {
+  transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
+}
+
+.pb_drawer_lg_left .pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right .pb_drawer {
+  transform: translateX(100%);
+}
+
+.pb_drawer.pb_drawer_after_open {
+  pointer-events: auto;
+  transform: translate3d(0, 0, 0);
+}
+
+// Drawer Styles
+.pb_drawer {
+  background-color: $white;
+  z-index: $z-index;
+  border: 0;
+  height: 100%;
+  overflow: auto;
+  animation-duration: $animation-duration;
+  outline: none;
+
+ &.pb_drawer_within_element_rails {
+    position: relative;
+    width: 100%;
+    display: block;
+    background-color: $white;
+    overflow: hidden;
+
+    // Use max-height for a smooth accordion-like animation
+    max-height: 0;
+    transition: max-height $animation-duration ease-in-out;
+    z-index: 1;
+
+    &.open {
+      max-height: 1000px;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: inherit;
+      z-index: -1;
+    }
+  }
+
+  &.pb_drawer_within_element {
+    position: relative;
+    width: 100%;
+    display: block;
+    background-color: $white;
+    overflow: hidden;
+    transition: height $animation-duration ease-in-out;
+    height: var(--drawer-height);
+    z-index: 1;
+
+    &.pb_drawer_before_close {
+      height: 0;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: inherit;
+      z-index: -1;
+    }
+  }
+
+  .toggle-content.is-visible {
+    display: block;
+    height: auto;
+  }
+
+  .drawer {
+    position: sticky;
+    will-change: transform;
+    top: 0;
+    background-color: $white;
+    z-index: $z_9;
+  }
+
+  &[class*="_left"] {
+    animation-name: modalFadeInLeft;
+  }
+
+  &[class*="_left"][class*="_before_close"] {
+    animation-name: modalFadeOutLeft;
+    animation-duration: $animation-duration;
+    transform: translateX(-100%);
+  }
+
+  &[class*="_right"] {
+    animation-name: modalFadeInRight;
+    justify-content: flex-end;
+  }
+
+  &[class*="_right"][class*="_before_close"] {
+    animation-name: modalFadeOutRight;
+    animation-duration: $animation-duration;
+    transform: translateX(100%);
+  }
+
+  &[class*="_bottom"] {
+    animation: none;
+    transform: none;
+  }
+
+  &[class*="_bottom"][class*="_before_close"] {
+    animation: none;
+    transform: none;
+  }
+
+  &[class*="_top"] {
+    animation-name: modalFadeUpIn;
+  }
+
+  &[class*="_top"][class*="_before_close"] {
+    animation-name: modalFadeUpOut;
+    animation-duration: $animation-duration;
+  }
+
+
+  &[class*="_xs_"] {
+    width: $xsmall;
+    max-width: $xsmall;
+  }
+
+  &[class*="_sm_"] {
+    width: $small;
+    max-width: $small;
+  }
+
+  &[class*="_md_"] {
+    width: $medium;
+    max-width: $medium;
+  }
+
+  &[class*="_lg_"] {
+    width: $large;
+    max-width: $large; 
+  }
+
+  &[class*="_xl_"] {
+    width: $xlarge;
+    max-width: $xlarge; 
+  }
+
+  &[class*="_full_"] {
+    width: 100%;
+    max-width: 100%; 
+  }
+
+  &.drawer_border-full {
+    box-shadow: none;
+    border: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border-right {
+    border-right: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border-left {
+    border-left: 2px solid #f3f7fb;
+  }
+
+  &.no-background {
+    background-color: transparent; 
+  }
+
+  &_close_icon {
+    cursor: pointer;
+  }
+
+  &_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    background-color: rgba($bg_dark, $opacity_4);
+    z-index: $z-index;
+    animation: overlayFade $animation-duration ease-in-out forwards;
+    
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
+    
+    &_before_close {
+      animation: overlayFadeOut $animation-duration ease-in-out forwards;
+      opacity: 0;
+      // height: 0;
+    }
+  }
+
+  &_no_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    z-index: $z-index;
+    opacity: 1;
+    pointer-events: none;
+
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
+
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &_before_close {
+      height: 0;
+    }
+  }
+
+
+  &.pb_drawer_before_close {
+    transform: translateX(-100%);
+  }
+}

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useEffect, useRef } from "react"
+import classnames from "classnames"
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props"
+import { globalProps, globalInlineProps } from "../utilities/globalProps"
+import { DrawerContext } from "./context"
+import { useBreakpoint } from "./hooks/useBreakpoint"
+
+type DrawerProps = {
+  aria?: { [key: string]: string }
+  behavior?: "floating" | "push"
+  border?: "full" | "none" | "right" | "left"
+  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
+  children: React.ReactNode | React.ReactNode[] | string
+  className?: string
+  data?: { [key: string]: string }
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  id?: string
+  triggerId?: string
+  onClose?: () => void
+  opened: boolean
+  overlay: boolean
+  placement?: "left" | "right" | "top" | "bottom"
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full"
+  text?: string
+  withinElement?: boolean
+}
+
+const Drawer = (props: DrawerProps): React.ReactElement | null => {
+  const {
+    aria = {},
+    behavior = "floating",
+    border = "none",
+    breakpoint = "none",
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    size = "md",
+    children,
+    triggerId,
+    opened,
+    onClose,
+    overlay = true,
+    placement = "left",
+    withinElement = false,
+  } = props
+
+  const drawerRef = useRef<HTMLDivElement>(null)
+  const [menuButtonOpened, setMenuButtonOpened] = useState(false)
+  const [shouldRender, setShouldRender] = useState(false)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  const { isOpenBreakpointOpen, isUserClosed, setIsUserClosed } = useBreakpoint(
+    {
+      breakpoint: breakpoint,
+      triggerId,
+    }
+  )
+
+  const modalIsOpened =
+    (isOpenBreakpointOpen && !isUserClosed) || menuButtonOpened || opened
+
+  useEffect(() => {
+    if (withinElement) return;
+
+    const sizeMap: { [key: string]: string } = {
+      xl: "365px",
+      lg: "300px",
+      md: "250px",
+      sm: "200px",
+      xs: "64px",
+      full: "100%",
+    };
+    const body = document.querySelector("body");
+    if (modalIsOpened && behavior === "push" && body) {
+      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");
+    } else if (body) {
+      if (body.classList.contains("PBDrawer__Body--open")) {
+        body.classList.add("PBDrawer__Body--close");
+      }
+      body.style.cssText = "";
+      body.classList.remove("PBDrawer__Body--open");
+    }
+  }, [modalIsOpened]);
+
+  // Helper functions
+  const updateDrawerHeight = () => {
+    if (drawerRef.current) {
+      const height = drawerRef.current.scrollHeight;
+      drawerRef.current.style.setProperty('--drawer-height', `${height}px`);
+    }
+  }
+  
+  useEffect(() => {
+    if (modalIsOpened) {
+      setShouldRender(true)
+      if (withinElement) {
+        const timer = setTimeout(() => {
+          updateDrawerHeight()
+          setIsAnimating(true)
+        }, 10)
+        return () => clearTimeout(timer)
+      } else {
+        setIsAnimating(true)
+      }
+    } else {
+      setIsAnimating(false)
+      const timer = setTimeout(() => {
+        setShouldRender(false)
+      }, 250)
+      return () => clearTimeout(timer)
+    }
+  }, [modalIsOpened])
+
+
+
+  const handleMenuButtonClick = () => {
+    if (modalIsOpened) {
+      setMenuButtonOpened(false)
+      setIsUserClosed(true)
+    } else {
+      setMenuButtonOpened(true)
+      setIsUserClosed(false)
+    }
+  }
+
+  // Setup menu button click handler
+  useEffect(() => {
+    if (!triggerId) return;
+    
+    const menuButton = document.getElementById(triggerId)
+    if (menuButton) {
+      menuButton.addEventListener("click", handleMenuButtonClick)
+      return () => menuButton.removeEventListener("click", handleMenuButtonClick)
+    }
+  }, [modalIsOpened])
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const dynamicInlineProps = globalInlineProps(props)
+
+  const drawerClasses = classnames(
+    "pb_drawer",
+    buildCss("pb_drawer", size as string, placement as string),
+    {
+      "drawer_border-full": border === "full",
+      "drawer_border-right": border === "right",
+      "drawer_border-left": border === "left",
+      pb_drawer_within_element: withinElement,
+      pb_drawer_after_open: isAnimating,
+      pb_drawer_before_close: !isAnimating && shouldRender,
+    },
+    withinElement ? "shadow_none" : "shadow_deepest",
+    globalProps(props),
+    className
+  )
+
+  const overlayClasses = classnames(
+    `pb_drawer${overlay ? "_overlay" : "_no_overlay"}`,
+    `drawer_content_${placement}`,
+    !overlay && "no-background",
+    {
+      pb_drawer_overlay_after_open: isAnimating,
+      pb_drawer_overlay_before_close: !isAnimating && shouldRender,
+    }
+  )
+
+  const api = {
+    onClose: () => {
+      if (triggerId) {
+        setMenuButtonOpened(false)
+      }
+      setIsUserClosed(true)
+      if (onClose) {
+        onClose()
+      }
+    },
+  }
+
+  const drawerContent = (
+    <div
+        className={drawerClasses}
+        onClick={(e) => e.stopPropagation()}
+        ref={drawerRef}
+    >
+      {children}
+    </div>
+  )
+
+  // Step 5: Only render when shouldRender is true
+  if (!shouldRender) return null
+
+  return (
+    <DrawerContext.Provider value={api}>
+      {withinElement ? (
+        drawerContent
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classnames(buildCss("pb_drawer_wrapper"), className)}
+            style={dynamicInlineProps}
+        >
+          <div
+              className={overlayClasses}
+              id={id}
+              onClick={overlay ? api.onClose : undefined}
+          >
+            {drawerContent}
+          </div>
+        </div>
+      )}
+    </DrawerContext.Provider>
+  )
+}
+
+export default Drawer

data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const DrawerContext = React.createContext(null);

data/app/pb_kits/playbook/pb_drawer/context.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const noop = (): void => void 0
+
+type DrawerContextType = {
+  onClose: () => void
+}
+
+export const DrawerContext = React.createContext<DrawerContextType>({
+  onClose: noop,
+})

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-3", 
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+
+  return [opened, toggle]
+}
+
+const DrawerBehavior = () => {
+  const [drawerOpen, toggleDrawerOpen] = useDrawer()
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id='sm'
+            marginRight='md'
+            onClick={toggleDrawerOpen}
+        >
+          {"Push Behavior"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}      
+            onClose={toggleDrawerOpen}
+            opened={drawerOpen}
+            size={"lg"}
+        >
+          Test me (Push Behavior)
+        </Drawer>
+      </Flex>
+    </>
+  )
+}
+
+export default DrawerBehavior

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-12", 
+        overlay: false,
+        border: "right"
+    }) do  %>
+        Test me (Border Right)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-13", 
+        overlay: false,
+        border: "left"
+    }) do  %>
+        Test me (Border Left)
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-14", 
+        overlay: false,
+        border: "full"
+    }) do  %>
+        Test me (Border Full)
+    <% end %>
+<% end %>
+