playbook_ui 14.8.0 → 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806

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

@@ -7,7 +7,7 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
 
@@ -15,20 +15,22 @@ type DrawerProps = {
   aria?: { [key: string]: string };
   behavior?: "floating" | "push";
   border?: "full" | "none" | "right" | "left";
-  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  openBreakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  closeBreakpoint?: "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;
-  trigger?: string;
+  withinElement?: boolean;
 };
 
 const Drawer = (props: DrawerProps): React.ReactElement => {
@@ -36,19 +38,21 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     aria = {},
     behavior = "floating",
     border = "none",
-    breakpoint = "none",
+    openBreakpoint = "none",
+    closeBreakpoint = "none",
     className,
     data = {},
     htmlOptions = {},
     id,
     size = "md",
     children,
-    fullHeight = false,
+    fullHeight = true,
+    menuButtonID,
     opened,
     onClose,
     overlay = true,
     placement = "left",
-    trigger,
+    withinElement = false,
   } = props;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -80,6 +84,7 @@ 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",
@@ -100,10 +105,11 @@ 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["breakpoint"], number> = {
+  const breakpointWidths: Record<DrawerProps["openBreakpoint"], number> = {
     none: 0,
     xs: 575,
     sm: 768,
@@ -112,20 +118,30 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     xl: 1400,
   };
 
-  // State to manage opening the drawer based on breakpoint
-  const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
+  const breakpointValues = { 
+    none: 0,
+    xs: 575,
+    sm: 768,
+    md: 992,
+    lg: 1200,
+    xl: 1400,
+  }
+
+  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false);
+  const [isUserClosed, setIsUserClosed] = useState(false);
 
   useEffect(() => {
-    if (breakpoint === "none") return;
+    if (openBreakpoint === "none") return;
 
     const handleResize = () => {
       const width = window.innerWidth;
-      const breakpointWidth = breakpointWidths[breakpoint];
+      const openBreakpointWidth = breakpointWidths[openBreakpoint];
 
-      if (width <= breakpointWidth) {
-        setIsBreakpointOpen(true);
+      if (width <= openBreakpointWidth) {
+        setIsOpenBreakpointOpen(true);
       } else {
-        setIsBreakpointOpen(false);
+        setIsOpenBreakpointOpen(false);
+        setIsUserClosed(false); // Reset when the breakpoint condition changes
       }
     };
 
@@ -137,9 +153,53 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [breakpoint]);
+  }, [openBreakpoint]);
+
+  useEffect(() => {
+    if (closeBreakpoint === "none") return;
 
-  const modalIsOpened = trigger ? triggerOpened : opened || isBreakpointOpen;
+   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 [animationState, setAnimationState] = useState("");
 
@@ -150,13 +210,15 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       setAnimationState("beforeClose");
       setTimeout(() => {
         setAnimationState("");
-      }, 200); // closeTimeoutMS
+      }, 200); 
     }
   }, [modalIsOpened]);
 
   const isModalVisible = modalIsOpened || animationState === "beforeClose";
 
   useEffect(() => {
+    if (withinElement) return;
+
     const sizeMap: Record<DrawerProps["size"], string> = {
       xl: "365px",
       lg: "300px",
@@ -165,7 +227,6 @@ 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;`;
@@ -181,45 +242,98 @@ 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]);
+  }, [modalIsOpened, behavior, placement, size, withinElement]);
 
   const api = {
-    onClose: trigger
-      ? function () {
-          setTriggerOpened(false);
-        }
-      : onClose,
+    onClose: () => {
+      if (menuButtonID) {
+        setMenuButtonOpened(false);
+      }
+      setIsUserClosed(true);
+      if (onClose) {
+        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}>
-      <div
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-      >
+      {withinElement ? (
+        isModalVisible && (
+          <div
+              {...ariaProps}
+              {...dataProps}
+              {...htmlProps}
+              style={dynamicInlineProps}
+              className={classnames(drawerClassNames.base, {
+              [drawerClassNames.afterOpen]:
+                animationState === "afterOpen",
+              [drawerClassNames.beforeClose]:
+                animationState === "beforeClose",
+            })}
+              id={id}
+              onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
+        )
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            style={dynamicInlineProps}
+        >
           {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 ? onClose : undefined}
+                onClick={overlay ? api.onClose : undefined}
             >
-            <div
-                className={classnames(drawerClassNames.base, {
-              [drawerClassNames.afterOpen]: animationState === "afterOpen",
-              [drawerClassNames.beforeClose]: animationState === "beforeClose",
-            })}
-                onClick={(e) => e.stopPropagation()}
-            >
-            {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/_drawer_menu.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Button, Drawer, Icon, Title } from "playbook-ui";
+
+const DrawerMenu = () => {
+
+  return (
+    <>
+      <Button id="menuButton"
+          padding="sm"
+      >
+        <Icon icon="bars"
+            size="3x"
+        />
+      </Button>
+      <Drawer
+          behavior="push"
+          closeBreakpoint="md"
+          menuButtonID="menuButton"
+          overlay={false}
+          placement="left"
+          size="lg"
+          withinElement
+      >
+        <Title paddingBottom="md">A really neat menu</Title>
+        <Button text="This Button does nothing" />
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerMenu;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md

@@ -0,0 +1,6 @@
+Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
+
+Set a menu button with  the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
+
+Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
+

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,3 +3,4 @@ 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,6 +53,7 @@
     }
 
     .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,7 +3,6 @@
     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,10 +7,6 @@ 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,9 +18,19 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
   const otherChildren: React.ReactChild[] = [];
 
   React.Children.forEach(children, (child) => {
-    if (child && (child as ReactElement).type === DropdownTrigger) {
+    const element = child as ReactElement;
+    const childType = element?.type;
+    const childDisplayName = (childType as any)?.displayName || (childType as any)?.name;
+
+    if (
+      childType === DropdownTrigger ||
+      childDisplayName === "DropdownTrigger"
+    ) {
       trigger = child;
-    } else if (child && (child as ReactElement).type === DropdownContainer) {
+    } else if (
+      childType === DropdownContainer ||
+      childDisplayName === "DropdownContainer"
+    ) {
       container = child;
     } else {
       otherChildren.push(child);
@@ -30,6 +40,7 @@ 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_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, 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_user]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_typeahead]').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, props: { label: true } %>
+  <%= form.text_field :example_text_field_loading, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -22,23 +22,74 @@
 %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= 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.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.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, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating_validation, 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 } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type ImageType = {
@@ -41,6 +41,7 @@ const Image = (props: ImageType): React.ReactElement => {
     globalProps(props),
     className
   )
+  const dynamicInlineProps = globalInlineProps(props)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -56,6 +57,7 @@ const Image = (props: ImageType): React.ReactElement => {
         id={id}
         onError={onError}
         src={url}
+        style={dynamicInlineProps}
     />
   )
 }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -19,7 +19,7 @@ type LayoutPropTypes = {
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
   layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
-}
+} & GlobalProps
 
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -159,6 +159,8 @@ const Layout = (props: LayoutPropTypes) => {
   const filteredProps = {...props}
   delete filteredProps?.position
 
+  const dynamicInlineProps = globalInlineProps(props)
+
   return (
     <div
         {...ariaProps}
@@ -171,7 +173,8 @@ const Layout = (props: LayoutPropTypes) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
-      )}
+        )}
+        style={dynamicInlineProps}
     >
       {subComponentTags('Side')}
       {nonSideChildren}

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import OverlayPercentage from './subcomponents/_overlay_percentage'
 import OverlayToken from './subcomponents/_overlay_token'
 
@@ -39,6 +39,7 @@ const Overlay = (props: OverlayProps) => {
     const dataProps = buildDataProps(data)
     const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
+    const dynamicInlineProps = globalInlineProps(props)
 
     const getPosition = () => {
         return Object.keys(layout)[0]
@@ -57,6 +58,7 @@ const Overlay = (props: OverlayProps) => {
             {...htmlProps}
             className={classes}
             id={id}
+            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
 
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-};
+} & GlobalProps;
 
 const Pagination = ( props: PaginationProps) => {
   const {