playbook_ui 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27244 → 14.17.0.pre.alpha.PLAY2035dialogkitturbocustomprop7297

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

@@ -10,6 +10,81 @@ export default class PbDialog extends PbEnhancedElement {
   connect() {
     window.addEventListener("DOMContentLoaded", () => this.setupDialog())
     window.addEventListener("turbo:frame-load", () => this.setupDialog())
+
+    // Code for custom_event_type setup (can take multiple events in a string separated by commas)
+    const customEventTypeString = this.element.dataset.customEventType
+    if (customEventTypeString && !this.element.hasAttribute("data-custom-event-handled")) {
+      this.customEventTypes = customEventTypeString.split(",").map(e => e.trim()).filter(Boolean)
+      this.customEventTypes.forEach(eventType => {
+        window.addEventListener(eventType, this.handleCustomEvent)
+      })
+
+      this.element.setAttribute("data-custom-event-handled", "true")
+    }
+  }
+
+  disconnect() {
+    if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
+      this.customEventTypes.forEach(eventType => {
+        window.removeEventListener(eventType, this.handleCustomEvent)
+      })
+    }
+  }
+
+  handleCustomEvent = (event) => {
+    const dialogId = event.detail?.dialogId || this.element.querySelector("dialog")?.id
+    const dialog = dialogId && document.getElementById(dialogId)
+  
+    if (!dialog) {
+      console.warn(`[PbDialog] Could not find dialog with ID '${dialogId}'`)
+      return
+    }
+  
+    this.setupDialog()
+  
+    const action = event.detail?.action || 'open'
+  
+    // Known Actions - four "standard" dialog actions that felt like things devs might want to do
+    const knownActions = ['open', 'close', 'clickConfirm', 'clickCancel'];
+  
+    if (knownActions.includes(action)) {
+      switch (action) {
+        case 'open':
+          if (!dialog.open) dialog.showModal()
+          break
+        case 'close':
+          if (dialog.open) dialog.close(event.detail?.returnValue)
+          break
+        case 'clickConfirm':
+          this.triggerButtonClick(dialog, event, 'confirm')
+          break
+        case 'clickCancel':
+          this.triggerButtonClick(dialog, event, 'cancel')
+          break
+      }
+    } 
+    // Custom Actions - flexible for Turbo or other integration
+    else if (typeof event.detail?.customAction === 'function') {
+      event.detail.customAction({ dialog, event })
+    } else if (window.pbDialogActions?.[action]) {
+      // Can register custom actions globally
+      window.pbDialogActions[action]({ dialog, event })
+    } else {
+      console.warn(`[PbDialog] Unknown action: ${action}`)
+    }
+  }
+
+  triggerButtonClick(dialog, event, type) {
+    const buttonId = event.detail?.[`${type}ButtonId`] || 
+                     dialog.closest('[data-pb-dialog-wrapper]')?.dataset[`${type}ButtonId`]
+    const button = buttonId ? document.getElementById(buttonId) : 
+                  dialog.querySelector(`[data-${type}-button]`)
+  
+    if (button) {
+      button.click()
+    } else {
+      console.warn(`[PbDialog] Could not find ${type} button for dialog`)
+    }
   }
 
   setupDialog() {
@@ -18,7 +93,7 @@ export default class PbDialog extends PbEnhancedElement {
     const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
     const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-    if (loadingButton) {
+    if (loadingButton && !loadingButton.dataset.listenerAttached) {
       loadingButton.addEventListener("click", function () {
         const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
         const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
@@ -35,27 +110,42 @@ export default class PbDialog extends PbEnhancedElement {
         okayLoadingButton.className = newClass;
         if (cancelButton) cancelButton.className = newCancelClass;
       });
+    
+      // Prevent multiple registrations
+      loadingButton.dataset.listenerAttached = "true";
     }
-
+    
     openTrigger.forEach((open) => {
-      open.addEventListener("click", () => {
-        var openTriggerData = open.dataset.openDialog;
-        var targetDialog = document.getElementById(openTriggerData)
-        if (targetDialog.open) return;
-        targetDialog.showModal();
-      });
+      const originalClickHandler = open._openDialogClickHandler
+      if (originalClickHandler) open.removeEventListener("click", originalClickHandler)
+
+      open._openDialogClickHandler = () => {
+        const openTriggerData = open.dataset.openDialog;
+        const targetDialogOpen = document.getElementById(openTriggerData)
+        if (targetDialogOpen && !targetDialogOpen.open) targetDialogOpen.showModal()
+      };
+
+      open.addEventListener("click", open._openDialogClickHandler)
     });
 
     closeTrigger.forEach((close) => {
-      close.addEventListener("click", () => {
-        var closeTriggerData = close.dataset.closeDialog;
-        document.getElementById(closeTriggerData).close();
-      });
+      const originalClickHandler = close._closeDialogClickHandler
+      if (originalClickHandler) close.removeEventListener("click", originalClickHandler)
+
+      close._closeDialogClickHandler = () => {
+        const closeTriggerData = close.dataset.closeDialog;
+        const targetDialogClose = document.getElementById(closeTriggerData)
+        if (targetDialogClose) targetDialogClose.close();
+      };
+
+      close.addEventListener("click", close._closeDialogClickHandler)
     });
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      dialogElement.addEventListener("mousedown", (event) => {
+      const originalMousedownHandler = dialogElement._outsideClickHandler
+      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
+      dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
@@ -69,7 +159,9 @@ export default class PbDialog extends PbEnhancedElement {
           dialogElement.close()
           event.stopPropagation()
         }
-      })
+      }
+
+      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -85,8 +85,16 @@
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-width: 0;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }   
   }
 
   & > [class^=pb_phone_number_input]:not(:first-child) {
@@ -107,8 +115,16 @@
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right: none;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }  
   }
 
   &[class*=rails] > [class^=pb_date_picker_kit] {

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,5 +1,4 @@
-<div>
-
+<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
@@ -17,8 +16,6 @@
       ]
     }) %>
   <% end %>
-  <br>
-  <br>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("select", props: {
         blank_selection: "Phone",
@@ -32,4 +29,17 @@
         id: "phone"
     }) %>
   <% end %>
-</div>
+  <%= pb_rails("form_group") do %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone2"
+      }) %>
+      <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -4,6 +4,7 @@ import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
+import Flex from '../../pb_flex/_flex'
 
 const FormGroupSelect = (props) => {
   const options = [
@@ -25,7 +26,10 @@ const FormGroupSelect = (props) => {
   ]
 
   return (
-    <div>
+    <Flex 
+        orientation="column" 
+        rowGap="md"
+    >
       <FormGroup>
         <TextInput
             placeholder="Enter Artist Name"
@@ -37,18 +41,29 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
-      <br />
-      <br />
       <FormGroup>
         <Select
             blankSelection="Phone"
             options={phoneOptions}
-            />
+            {...props}
+        />
         <PhoneNumberInput
             id='default'
+            {...props}
         />
     </FormGroup>
-    </div>
+    <FormGroup>
+      <PhoneNumberInput
+          id='default-2'
+          {...props}
+      />
+      <Select
+          blankSelection="Phone"
+          options={phoneOptions}
+          {...props}
+      />
+    </FormGroup>
+    </Flex>
   )
 }
 

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

@@ -18,34 +18,39 @@ $overlay_colors: (
   card_dark: $card_dark,
   bg_dark: $bg_dark,
   bg_light: $bg_light,
+  black: $black,
+  white: $white,
+  success: $success,
+  error: $error
 );
 
-@mixin overlay($direction, $size, $color) {
+@mixin overlay($direction, $size, $color, $apply_gradient: true) {
   display: block;
   position: absolute;
   pointer-events: none;
   z-index: 1;
   content: "";
 
-  @if $direction == "left" {
-    inset: 0 auto 0 0;
-    background: linear-gradient(to right, $color 0%, transparent 100%);
-    width: $size;
-  }
-  @if $direction == "right" {
-    inset: 0 0 0 auto;
-    background: linear-gradient(to left, $color 0%, transparent 100%);
-    width: $size;
-  }
-  @if $direction == "top" {
-    inset: 0 0 auto 0;
-    background: linear-gradient(to bottom, $color 0%, transparent 100%);
-    height: $size;
-  }
-  @if $direction == "bottom" {
-    inset: auto 0 0 0;
-    background: linear-gradient(to top, $color 0%, transparent 100%);
-    height: $size;
+  @if $apply_gradient {
+    @if $direction == "left" {
+      inset: 0 auto 0 0;
+      background: linear-gradient(to right, $color 0%, transparent 100%);
+      width: $size;
+    } @else if $direction == "right" {
+      inset: 0 0 0 auto;
+      background: linear-gradient(to left, $color 0%, transparent 100%);
+      width: $size;
+    } @else if $direction == "top" {
+      inset: 0 0 auto 0;
+      background: linear-gradient(to bottom, $color 0%, transparent 100%);
+      height: $size;
+    } @else if $direction == "bottom" {
+      inset: auto 0 0 0;
+      background: linear-gradient(to top, $color 0%, transparent 100%);
+      height: $size;
+    }
+  } @else {
+    background: $color;
   }
 }
 
@@ -69,7 +74,7 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
-  
+
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
@@ -77,9 +82,31 @@ $overlay_colors: (
       &::-webkit-scrollbar {
         display: none !important;
       }
-      
+
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
     }
   }
+
+  &.no_gradient {
+    @each $color_name, $color in $overlay_colors {
+      .overlay_#{$color_name} {
+        @each $name, $size in $overlay_sizes {
+          @each $position in $overlay_positions {
+            &_#{$position}_#{$name} {
+              @include overlay($position, $size, $color, false);
+            }
+          }
+        }
+      }
+    }
+
+    @each $key, $value in $opacity {
+      &.#{$key} {
+        [class^=overlay] {
+          opacity: $value;
+        }
+      }
+    }
+  }
 }

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

@@ -7,7 +7,7 @@ import OverlayToken from './subcomponents/_overlay_token'
 
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     dynamic?: boolean,
     position: string,
     size: string,
@@ -18,14 +18,16 @@ type OverlayProps = {
     aria?: { [key: string]: string },
     className?: string,
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     data?: { [key: string]: string },
     dynamic?: false,
+    gradient?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
+    opacity: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
     scrollBarNone?: boolean,
-    
+
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -36,15 +38,24 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = false,
+        gradient = true,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
+        opacity,
         scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(
+        buildCss('pb_overlay'),
+        { 'overlay-hide-scrollbar': scrollBarNone },
+        globalProps(props),
+        gradient === false ? 'no_gradient' : '',
+        opacity,
+        className
+    )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+
+const OverlayColor = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            color="black"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="black"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+
+export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md

@@ -0,0 +1,3 @@
+The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
+
+NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +1 @@
-Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
-
-The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
-
-The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 
+Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+
+const OverlayGradientOpacity = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_2"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_8"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+
+export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md

@@ -0,0 +1 @@
+By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Table from '../../pb_table/_table'
+
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+
+const OverlayLayout = () => (
+    <>
+        <Overlay layout={{ y: "xl" }}>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayLayout

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -0,0 +1,5 @@
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
+
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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

@@ -1,6 +1,9 @@
 examples:
   react:
   - overlay_default: Default
+  - overlay_gradient_opacity: Gradient & Opacity
+  - overlay_color: Color
+  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

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

@@ -1,4 +1,7 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
+export { default as OverlayColor } from './_overlay_color.jsx'
+export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -71,8 +71,46 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
       data: { testid: testId },
       scrollBarNone: true
     }
-  
+
     render(<Overlay {...props} />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('overlay-hide-scrollbar')
 })
+
+test('should have no_gradient class if gradient prop is false', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        gradient: false
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('no_gradient')
+})
+
+test('should not have no_gradient class if gradient is not passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toHaveClass('no_gradient')
+})
+
+test('should have the correct opacity class if opacity prop is passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        opacity: "opacity_5"
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('opacity_5')
+})