playbook_ui 14.9.0.pre.alpha.play1742globalheightfixes4766 → 14.9.0.pre.rc.0

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

@@ -9,7 +9,6 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
-  - currency_negative: Negative
   
   react:
   - currency_variants: Variants
@@ -20,7 +19,6 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
-  - currency_negative: Negative
 
   swift:
   - currency_size_swift: Size

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

@@ -6,4 +6,3 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'

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

@@ -88,7 +88,6 @@ body.PBDrawer__Body--close {
 }
 
 .pb_drawer.pb_drawer_after_open {
-  pointer-events: auto;
   transform: translate3d(0, 0, 0);
 }
 

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

@@ -7,7 +7,7 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
 
@@ -15,22 +15,20 @@ type DrawerProps = {
   aria?: { [key: string]: string };
   behavior?: "floating" | "push";
   border?: "full" | "none" | "right" | "left";
-  openBreakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-  closeBreakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  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;
   fullHeight?: boolean;
-  menuButtonID?: string;
   onClose?: () => void;
   opened: boolean;
   overlay: boolean;
   placement?: "left" | "right";
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   text?: string;
-  withinElement?: boolean;
+  trigger?: string;
 };
 
 const Drawer = (props: DrawerProps): React.ReactElement => {
@@ -38,21 +36,19 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     aria = {},
     behavior = "floating",
     border = "none",
-    openBreakpoint = "none",
-    closeBreakpoint = "none",
+    breakpoint = "none",
     className,
     data = {},
     htmlOptions = {},
     id,
     size = "md",
     children,
-    fullHeight = true,
-    menuButtonID,
+    fullHeight = false,
     opened,
     onClose,
     overlay = true,
     placement = "left",
-    withinElement = false,
+    trigger,
   } = props;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -84,7 +80,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
         drawer_border_full: border === "full",
         drawer_border_right: border === "right",
         drawer_border_left: border === "left",
-        pb_drawer_within_element: withinElement,
       }
     )} ${globalPropsString}`,
     afterOpen: "pb_drawer_after_open",
@@ -105,11 +100,10 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   };
 
   const classes = classnames(buildCss("pb_drawer_wrapper"), className);
-  const dynamicInlineProps = globalInlineProps(props)
-  const [menuButtonOpened, setMenuButtonOpened] = useState(false);
+
   const [triggerOpened, setTriggerOpened] = useState(false);
 
-  const breakpointWidths: Record<DrawerProps["openBreakpoint"], number> = {
+  const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
     none: 0,
     xs: 575,
     sm: 768,
@@ -118,30 +112,20 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     xl: 1400,
   };
 
-  const breakpointValues = { 
-    none: 0,
-    xs: 575,
-    sm: 768,
-    md: 992,
-    lg: 1200,
-    xl: 1400,
-  }
-
-  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false);
-  const [isUserClosed, setIsUserClosed] = useState(false);
+  // State to manage opening the drawer based on breakpoint
+  const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
 
   useEffect(() => {
-    if (openBreakpoint === "none") return;
+    if (breakpoint === "none") return;
 
     const handleResize = () => {
       const width = window.innerWidth;
-      const openBreakpointWidth = breakpointWidths[openBreakpoint];
+      const breakpointWidth = breakpointWidths[breakpoint];
 
-      if (width <= openBreakpointWidth) {
-        setIsOpenBreakpointOpen(true);
+      if (width <= breakpointWidth) {
+        setIsBreakpointOpen(true);
       } else {
-        setIsOpenBreakpointOpen(false);
-        setIsUserClosed(false); // Reset when the breakpoint condition changes
+        setIsBreakpointOpen(false);
       }
     };
 
@@ -153,53 +137,9 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [openBreakpoint]);
-
-  useEffect(() => {
-    if (closeBreakpoint === "none") return;
+  }, [breakpoint]);
 
-   const handleResize = () => { 
-    const width = window.innerWidth;
-    if (width >= breakpointValues[closeBreakpoint]) {
-      setIsOpenBreakpointOpen(true);
-    } else {
-      setIsOpenBreakpointOpen(false);
-    }
-    }
-
-    window.addEventListener("resize", handleResize);
-
-    handleResize();
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-    
-  }, [closeBreakpoint]);
-
-  //hide menu button if breakpoint opens the drawer  
-  useEffect(() => {
-    if (menuButtonID) {
-      const menuButton = document.getElementById(menuButtonID);
-      if (menuButton) {
-        if (isOpenBreakpointOpen) {
-          menuButton.style.display = 'none';
-        } else {
-          menuButton.style.display = '';
-        }
-      }
-    }
-  }, [menuButtonID, isOpenBreakpointOpen]);
-
-  // Reset isUserClosed when isBreakpointOpen changes
-  useEffect(() => {
-    if (isOpenBreakpointOpen) {
-      setIsUserClosed(false);
-    }
-  }, [isOpenBreakpointOpen]);
-
-  const modalIsOpened =
-    (isOpenBreakpointOpen && !isUserClosed) || menuButtonOpened || opened;
+  const modalIsOpened = trigger ? triggerOpened : opened || isBreakpointOpen;
 
   const [animationState, setAnimationState] = useState("");
 
@@ -210,15 +150,13 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       setAnimationState("beforeClose");
       setTimeout(() => {
         setAnimationState("");
-      }, 200); 
+      }, 200); // closeTimeoutMS
     }
   }, [modalIsOpened]);
 
   const isModalVisible = modalIsOpened || animationState === "beforeClose";
 
   useEffect(() => {
-    if (withinElement) return;
-
     const sizeMap: Record<DrawerProps["size"], string> = {
       xl: "365px",
       lg: "300px",
@@ -227,6 +165,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       xs: "64px",
     };
     const body = document.querySelector("body");
+
     if (modalIsOpened && behavior === "push" && body) {
       if (placement === "left") {
         body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
@@ -242,98 +181,45 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       body.style.cssText = ""; // Clear the styles when modal is closed or behavior is not 'push'
       body.classList.remove("PBDrawer__Body--open");
     }
-  }, [modalIsOpened, behavior, placement, size, withinElement]);
+  }, [modalIsOpened, behavior, placement, size]);
 
   const api = {
-    onClose: () => {
-      if (menuButtonID) {
-        setMenuButtonOpened(false);
-      }
-      setIsUserClosed(true);
-      if (onClose) {
-        onClose();
-      }
-    },
+    onClose: trigger
+      ? function () {
+          setTriggerOpened(false);
+        }
+      : onClose,
   };
 
-  useEffect(() => {
-    if (menuButtonID) {
-      const menuButton = document.getElementById(menuButtonID);
-      if (menuButton) {
-        const handleMenuButtonClick = () => {
-          if (modalIsOpened) {
-            // Drawer is open, close it
-            setMenuButtonOpened(false);
-            setIsUserClosed(true);
-          } else {
-            // Drawer is closed, open it
-            setMenuButtonOpened(true);
-            setIsUserClosed(false);
-          }
-        };
-        menuButton.addEventListener("click", handleMenuButtonClick);
-        return () => {
-          menuButton.removeEventListener("click", handleMenuButtonClick);
-        };
-      }
-    }
-  }, [menuButtonID, modalIsOpened]);
-
   return (
     <DialogContext.Provider value={api}>
-      {withinElement ? (
-        isModalVisible && (
-          <div
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classnames(drawerClassNames.base, {
-              [drawerClassNames.afterOpen]:
-                animationState === "afterOpen",
-              [drawerClassNames.beforeClose]:
-                animationState === "beforeClose",
-            })}
-              id={id}
-              onClick={(e) => e.stopPropagation()}
-              style={dynamicInlineProps}
-          >
-            {children}
-          </div>
-        )
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-        >
+      <div
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+      >
           {isModalVisible && (
             <div
                 className={classnames(overlayClassNames.base, {
-                [overlayClassNames.afterOpen]:
-                  animationState === "afterOpen",
-                [overlayClassNames.beforeClose]:
-                  animationState === "beforeClose",
-              })}
+              [overlayClassNames.afterOpen]: animationState === "afterOpen",
+              [overlayClassNames.beforeClose]: animationState === "beforeClose",
+            })}
                 id={id}
-                onClick={overlay ? api.onClose : undefined}
+                onClick={overlay ? onClose : undefined}
             >
-              <div
-                  className={classnames(drawerClassNames.base, {
-                  [drawerClassNames.afterOpen]:
-                    animationState === "afterOpen",
-                  [drawerClassNames.beforeClose]:
-                    animationState === "beforeClose",
-                })}
-                  onClick={(e) => e.stopPropagation()}
-                  style={dynamicInlineProps}
-              >
-                {children}
-              </div>
+            <div
+                className={classnames(drawerClassNames.base, {
+              [drawerClassNames.afterOpen]: animationState === "afterOpen",
+              [drawerClassNames.beforeClose]: animationState === "beforeClose",
+            })}
+                onClick={(e) => e.stopPropagation()}
+            >
+            {children}
+            </div>
             </div>
           )}
-        </div>
-      )}
+          </div>
     </DialogContext.Provider>
   );
 };

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

@@ -6,7 +6,7 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_menu: Menu Behavior 
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 
+  - drawer_breakpoints: Open on Breakpoints 

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

@@ -3,4 +3,3 @@ export { default as DrawerSizes } from './_drawer_sizes.jsx'
 export { default as DrawerOverlay } from './_drawer_overlay.jsx'
 export { default as DrawerBorders } from './_drawer_borders.jsx'
 export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
-export { default as DrawerMenu } from './_drawer_menu.jsx'

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

@@ -53,7 +53,6 @@
     }
 
     .pb_dropdown_container {
-      position: absolute;
       background-color: $white;
       overflow: hidden;
       box-shadow: $shadow_deep;

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -3,6 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id,
+    style: object.container_style,
     **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %> 

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -7,6 +7,10 @@ module Playbook
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end
 
+      def container_style
+        "position: absolute"
+      end
+
       def data
         Hash(prop(:data)).merge(dropdown_container: true)
       end

data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx

@@ -18,19 +18,9 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
   const otherChildren: React.ReactChild[] = [];
 
   React.Children.forEach(children, (child) => {
-    const element = child as ReactElement;
-    const childType = element?.type;
-    const childDisplayName = (childType as any)?.displayName || (childType as any)?.name;
-
-    if (
-      childType === DropdownTrigger ||
-      childDisplayName === "DropdownTrigger"
-    ) {
+    if (child && (child as ReactElement).type === DropdownTrigger) {
       trigger = child;
-    } else if (
-      childType === DropdownContainer ||
-      childDisplayName === "DropdownContainer"
-    ) {
+    } else if (child && (child as ReactElement).type === DropdownContainer) {
       container = child;
     } else {
       otherChildren.push(child);
@@ -40,7 +30,6 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
   return { trigger, container, otherChildren };
 };
 
-
 export const prepareSubcomponents = ({
   children,
   hasTriggerSubcomponent,

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

@@ -23,7 +23,7 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
     const selectedUserData = JSON.parse(selectedUserJSON)
 
     // set the input field's value
-    event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
 
     // log the selected option's dataset
     console.log('The selected user data:')

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

@@ -1,5 +1,5 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field_loading, props: { label: true } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -22,74 +22,23 @@
 %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
-  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
-  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
-  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
-  <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
-  <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
-  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
-  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
+  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
-
-<!-- form.typeahead user results example template -->
-<template data-typeahead-example-result-option>
-  <%= pb_rails("user", props: {
-    name: tag(:slot, name: "name"),
-    orientation: "horizontal",
-    align: "left",
-    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
-    }) %>
-</template>
-
-<!-- form.typeahead JS example implementation -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
-
-    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
-      .then(response => response.json())
-      .then((result) => {
-        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
-
-        event.detail.setResults((result.items || []).map((user) => {
-          const wrapper = resultOptionTemplate.content.cloneNode(true)
-          wrapper.children[0].dataset.user = JSON.stringify(user)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
-  })
-
-
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExample2) return
-
-    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
-    const selectedUserData = JSON.parse(selectedUserJSON)
-
-    // set the input field's value
-    event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
-
-    // log the selected option's dataset
-    console.log('The selected user data:')
-    console.dir(selectedUserData)
-
-    // do even more with the data later - TBD
-    event.target.dataset.user = selectedUserJSON
-  })
-<% end %>

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type ImageType = {
@@ -41,7 +41,6 @@ const Image = (props: ImageType): React.ReactElement => {
     globalProps(props),
     className
   )
-  const dynamicInlineProps = globalInlineProps(props)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -57,7 +56,6 @@ const Image = (props: ImageType): React.ReactElement => {
         id={id}
         onError={onError}
         src={url}
-        style={dynamicInlineProps}
     />
   )
 }