playbook_ui 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27240 → 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_layout/_layout.scss

@@ -228,7 +228,9 @@ $bracket-border-width: 4px;
 
     .layout_participant,
     .layout_participant_winner,
-    .layout_participant_self {
+    .layout_participant_self,
+    .layout_participant_winner_self,
+    .layout_participant_winner_self_last {
       height: 60px;
     }
 

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -6,85 +6,85 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const teamData = {
   eagles: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8e/Philadelphia_Eagles_logo.svg/1920px-Philadelphia_Eagles_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
     name:"Eagles",
     rank:"#1 NFC East",
     territory:"PHI",
   },
   packers: {
-    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Green_Bay_Packers_logo.svg/1920px-Green_Bay_Packers_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Packers",
     rank:"#3 NFC North",
     territory:"GB",
   },
   vikings: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/48/Minnesota_Vikings_logo.svg/1024px-Minnesota_Vikings_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
     name:"Vikings",
     rank:"#2 NFC North",
     territory:"MIN",
   },
   rams: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Los_Angeles_Rams_logo.svg/1920px-Los_Angeles_Rams_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Rams",
     rank:"#1 NFC West",
     territory:"LAR",
   },
   lions: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Detroit_Lions_logo.svg/1920px-Detroit_Lions_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Lions",
     rank:"#1 NFC North",
     territory:"DET",
   },
   commanders: {
-    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Washington_Commanders_logo.svg/2560px-Washington_Commanders_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Commanders",
     rank:"#2 NFC East",
     territory:"WAS",
   },
   buccaneers: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Tampa_Bay_Buccaneers_logo.svg/1920px-Tampa_Bay_Buccaneers_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Buccaneers",
     rank:"#1 NFC South",
     territory:"TB",
   },
   chiefs: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/Kansas_City_Chiefs_logo.svg/2560px-Kansas_City_Chiefs_logo.svg.png",
+    avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
     name:"Chiefs",
     rank:"#1 AFC West",
     territory:"KC",
   },
   chargers: {
-    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Los_Angeles_Chargers_logo.svg/2560px-Los_Angeles_Chargers_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Chargers",
     rank:"#2 AFC West",
     territory:"LAC",
   },
   texans: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Houston_Texans_logo.svg/1280px-Houston_Texans_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Texans",
     rank:"#1 AFC South",
     territory:"HOU",
   },
   broncos: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/44/Denver_Broncos_logo.svg/2560px-Denver_Broncos_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Broncos",
     rank:"#3 AFC West",
     territory:"DEN",
   },
   bills: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/77/Buffalo_Bills_logo.svg/1920px-Buffalo_Bills_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     name:"Bills",
     rank:"#1 AFC East",
     territory:"BUF",
   },
   steelers: {
-    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Pittsburgh_Steelers_logo.svg/1280px-Pittsburgh_Steelers_logo.svg.png",
+    avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
     name:"Steelers",
     rank:"#2 AFC North",
     territory:"PIT",
   },
   ravens: {
-    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/1/16/Baltimore_Ravens_logo.svg/2560px-Baltimore_Ravens_logo.svg.png",
+    avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
     name:"Ravens",
     rank:"#1 AFC North",
     territory:"BAL",

data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx

@@ -41,11 +41,14 @@ const Game = (props: LayoutGameProps) => {
   if (numberOfChildren === 2) {
     const [firstChildWithoutProps, secondChildWithoutProps] = React.Children.toArray(children)
 
-    const firstChild = React.cloneElement(firstChildWithoutProps, { hasLastWinnerAndSelf })
-    const secondChild = React.cloneElement(secondChildWithoutProps, { hasLastWinnerAndSelf })
+    const firstChild = React.isValidElement(firstChildWithoutProps) ? React.cloneElement(firstChildWithoutProps, { hasLastWinnerAndSelf }) : firstChildWithoutProps
+    const secondChild = React.isValidElement(secondChildWithoutProps) ? React.cloneElement(secondChildWithoutProps, { hasLastWinnerAndSelf }) : secondChildWithoutProps
 
     if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
-      if ('winner' in firstChild.props || 'winner' in secondChild.props) {
+      if (
+        firstChild?.props && typeof firstChild.props === 'object' && 'winner' in firstChild.props ||
+        secondChild?.props && typeof secondChild.props === 'object' && 'winner' in secondChild.props
+      ) {
         hasWinner = true
       }
       return (

data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx

@@ -43,7 +43,12 @@ export const Participant = (props: LayoutParticipantProps) => {
         />
         <Body flexGrow={1}>
           <Flex justify="between">
-            <Body color={winner && !isLastWinnerAndSelf ? "success" : "default"}>{winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}</Body>
+            <Body
+                color={winner && !isLastWinnerAndSelf ? "success" : "default"}
+                truncate={1}
+            >
+              {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
+            </Body>
             <Body
                 color={winner && !isLastWinnerAndSelf ? "success" : "light"}
                 display="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.