playbook_ui 15.3.0.pre.alpha.PLAY260211779 → 15.3.0.pre.alpha.play2464flexitemcantusehtmloptions12226

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,7 +24,6 @@
   horizontal: "center"
 }) %>
 
-
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -35,6 +34,15 @@
     })
   }
 
+  // Hide toasts immediately
+  hideMultiToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hideMultiToasts)
+  document.addEventListener('DOMContentLoaded', hideMultiToasts)
+  document.addEventListener('turbolinks:load', hideMultiToasts)
+  document.addEventListener('turbo:load', hideMultiToasts)
+
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -46,10 +54,3 @@
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-long, #toast-short {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,27 +69,28 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hideToasts = () => {
+  const hidePositionToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
+  // Hide toasts immediately
+  hidePositionToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hidePositionToasts)
+  document.addEventListener('DOMContentLoaded', hidePositionToasts)
+  document.addEventListener('turbolinks:load', hidePositionToasts)
+  document.addEventListener('turbo:load', hidePositionToasts)
+
   buttons.forEach((button) => {
     button.onclick = () => {
-      hideToasts()
+      hidePositionToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
-
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -28,22 +29,28 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
+  
   const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
   const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
   const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
   const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
   const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
-  const fixedStyle =
-    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const fixedStyle = fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
   const dynamicInlineProps = globalInlineProps(props)
+
+// Extract style from htmlOptions and remove it
+  const { style: htmlStyle, ...htmlOptionsWithoutStyle } = htmlOptions
+  const htmlStyleObj = htmlStyle && typeof htmlStyle === 'object' ? htmlStyle : {}
+  
+  // Merge all styles
   const combinedStyles = {
+    ...htmlStyleObj,
     ...fixedStyle,
     ...dynamicInlineProps
   }
 
-  const htmlProps = buildHtmlProps(htmlOptions)
-
+  const htmlProps = buildHtmlProps(htmlOptionsWithoutStyle)
 
   return (
     <div
@@ -66,4 +73,4 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   )
 }
 
-export default FlexItem
+export default FlexItem

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -15,6 +15,7 @@ const FlexItemExample = (props) => {
         <FlexItem
             displayFlex
             gap="xs"
+            htmlOptions={{style: {padding:"2px"}}}
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -8,13 +8,13 @@ const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 // Validation selectors
 const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
 const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
+const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
 
 const FIELD_EVENTS = [
   'change',
   'valid',
   'invalid',
 ]
-
 class PbFormValidation extends PbEnhancedElement {
   static get selector() {
     return FORM_SELECTOR
@@ -22,12 +22,27 @@ class PbFormValidation extends PbEnhancedElement {
 
   connect() {
     this.formValidationFields.forEach((field) => {
+      // Skip phone number inputs - they handle their own validation
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
+
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
         }, 250), false)
       })
     })
+
+    // Add event listener to check for phone number validation errors
+    this.element.addEventListener('submit', (event) => {
+      // Use setTimeout to ensure React state updates have completed
+      setTimeout(() => {
+        if (this.hasPhoneNumberValidationErrors()) {
+          event.preventDefault()
+          return false
+        }
+      }, 0)
+    })
   }
 
   validateFormField(event) {
@@ -45,40 +60,58 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+
+    // FIX: Add null check for kitElement
+    if (!kitElement) return
+
+    // Check if this is a phone number input
+    const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
 
     // ensure clean error message state
     this.clearError(target)
-    parentElement.closest(KIT_SELECTOR).classList.add('error')
+    kitElement.classList.add('error')
 
-    // set the error message element
-    const errorMessageContainer = this.errorMessageContainer
+    // Only add error message if it's NOT a phone number input
+    if (!isPhoneNumberInput) {
+      // set the error message element
+      const errorMessageContainer = this.errorMessageContainer
 
-    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
 
-    errorMessageContainer.innerHTML = target.validationMessage
+      errorMessageContainer.innerHTML = target.validationMessage
 
-    // add the error message element to the dom tree
-    parentElement.appendChild(errorMessageContainer)
+      // add the error message element to the dom tree
+      parentElement.appendChild(errorMessageContainer)
+    }
   }
 
   clearError(target) {
     const { parentElement } = target
-    parentElement.closest(KIT_SELECTOR).classList.remove('error')
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+    // Remove error class from kit element
+    if (kitElement) kitElement.classList.remove('error')
+    // Remove error message from parent element
     const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  // Check if there are phone number input errors
+  hasPhoneNumberValidationErrors() {
+    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
+    return phoneNumberErrors.length > 0
+  }
+
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')
     errorContainer.classList.add(kitClassName)
     return errorContainer
   }
-
   get formValidationFields() {
     return this._formValidationFields =
       this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -9,7 +9,7 @@ import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
   id?: string,
   text: string,
   name?: string,

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -1,3 +1,3 @@
-For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
 
 __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -1 +1 @@
-Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -1 +1 @@
-Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -3,48 +3,41 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"blue"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"royal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"purple"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"teal"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupitar",
+                                          text: "Jupiter",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"red"
+                                          variant:"yellow"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                           text: "Saturn",
                                           unit: "AU",
                                           value: 9.539,
-                                          variant:"yellow"
- }) %>
- <br>
- <%= pb_rails("icon_stat_value", props: { icon: "globe",
-                                          text: "Uranus",
-                                          unit: "AU",
-                                          value: 19.18,
                                           variant:"green"
  }) %>
  <br>
@@ -53,4 +46,4 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"orange"
- }) %>
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -9,7 +9,7 @@ const IconStatValueColor = (props) => {
           text="Mercury"
           unit="AU"
           value={0.39}
-          variant="blue"
+          variant="royal"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="royal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="purple"
+          variant="teal"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="teal"
+          variant="red"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupitar"
+          text="Jupiter"
           unit="AU"
           value={5.203}
-          variant="red"
+          variant="yellow"
           {...props}
       />
       <br />
@@ -54,15 +54,6 @@ const IconStatValueColor = (props) => {
           text="Saturn"
           unit="AU"
           value={9.539}
-          variant="yellow"
-          {...props}
-      />
-      <br />
-      <IconStatValue
-          icon="globe"
-          text="Uranus"
-          unit="AU"
-          value={19.18}
           variant="green"
           {...props}
       />

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -1 +1 @@
-Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

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

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 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).
+The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).