playbook_ui 15.5.0.pre.alpha.play250612607 → 15.5.0.pre.alpha.play260612706

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b5ffde9745ceb25129d5ef341dd3dda350a7cc52f0db4be00ffd873e90912a4
-  data.tar.gz: 4ba6f0e94b76a8b45bc12853f81c160dc54f31e4d671292e7c447df040bdc17c
+  metadata.gz: 68e50dc389b41862430cc0615991fb9e83f733981412aeb7ce348cc851f19325
+  data.tar.gz: a59b600809d8eac2c4d1718c904196de1879fd1c4307433734fd90e77a27d48c
 SHA512:
-  metadata.gz: 32d276f58d1ac23aa1a37911eac0142b1e0f1d4b959a51edbf14e3a6c8aad19ec3875e28cc5828372f07853c4d3ae6e27c320e5ea7a957e79032b19026b97a60
-  data.tar.gz: 47f2381f3a46b5c8b0c5bc80080ca2ed7268c706a8cd27f592fa1ebe61587d67b3d72d06a3afabf89449b43a12e0ebc7db8de08ca8108fa5f37535d2f3589711
+  metadata.gz: 512a1c1bc6effa4642eaa6c75f95e0403ecd1f6c33bb87bb8cb2270f9758b6f1d2f103b96180dc4303d74991a176820ba351521fa677c288e0df7d838517b380
+  data.tar.gz: 6a9959a608a5aae7a45bb4f98afb1e54feca7a1b6fe5a8a70a2fa4edb60f31e01c27bba37dbfc0feabd41dc7370b23be6152ab43f1e2579e1d0863fc3bf2dc08

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(props.backgroundSize),
-        backgroundPosition: getResponsiveValue(props.backgroundPosition),
-        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
-        backgroundColor: getResponsiveValue(props.backgroundColor),
-        imageUrl: getResponsiveValue(props.imageUrl),
+        backgroundSize: getResponsiveValue(backgroundSize),
+        backgroundPosition: getResponsiveValue(backgroundPosition),
+        backgroundRepeat: getResponsiveValue(backgroundRepeat),
+        backgroundColor: getResponsiveValue(backgroundColor),
+        imageUrl: getResponsiveValue(imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [props]);
+  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,7 +4,6 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
-  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -42,3 +41,8 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
+
+test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
+  const kit = renderKit(Background, props);
+  expect(kit).toHaveClass('pb_background_color_light');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+<%= pb_rails("background", props: { padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,7 +3,6 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
-      backgroundColor="light"
       padding="xl"
       {...props}
   />

data/app/pb_kits/playbook/pb_background/docs/_background_light.md

@@ -0,0 +1 @@
+By default, the Background kit sets background color to 'light' as seen here. 

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,3 +1,24 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ]
+%>
+
+
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -10,6 +31,16 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
+        <%= pb_rails("typeahead", props: {
+        id: "typeahead-default",
+        placeholder: "Select one...",
+        options: options,
+        name: :foo,
+        margin_top: "sm",
+        is_multi: false
+      })
+%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -143,25 +143,30 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalMousedownHandler = dialogElement._outsideClickHandler
-      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
+      const originalClickHandler = dialogElement._outsideClickHandler
+      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
+      
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        const dialogModal = event.target.getBoundingClientRect()
-        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-          event.clientX > dialogModal.right ||
-          event.clientY < dialogModal.top ||
-          event.clientY > dialogModal.bottom
-
-        if (clickedOutsideDialogModal) {
+        // Get the dialog's bounding box (the actual content area)
+        const rect = dialogElement.getBoundingClientRect()
+        const clickedInDialog = (
+          event.clientX >= rect.left &&
+          event.clientX <= rect.right &&
+          event.clientY >= rect.top &&
+          event.clientY <= rect.bottom
+        )
+
+        // Only close if clicked outside the dialog content (on the backdrop)
+        if (!clickedInDialog) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -7,18 +7,29 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
+  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
-  const { selectProps, clearValue } = props
+const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
+  const { selectProps, clearValue, innerProps } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, [clearValue, selectProps.id])
 
+  // To stop this from bubbling up when inside a dialog or other modal
+  const handleMouseDown = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    innerProps?.onMouseDown?.(event)
+  }
+
   return (
     <components.ClearIndicator
         className="clear_indicator"
         {...props}
+        innerProps={{
+          ...innerProps,
+          onMouseDown: handleMouseDown,
+        }}
     />
   )
 }