playbook_ui 15.4.0.pre.alpha.testingseparation12413 → 15.4.0.pre.rc.0

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

@@ -2,7 +2,6 @@ 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,
@@ -29,28 +28,22 @@ 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(htmlOptionsWithoutStyle)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
 
   return (
     <div
@@ -73,4 +66,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,7 +15,6 @@ 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,27 +22,12 @@ 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) {
@@ -60,58 +45,40 @@ 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)
-    kitElement.classList.add('error')
+    parentElement.closest(KIT_SELECTOR).classList.add('error')
 
-    // Only add error message if it's NOT a phone number input
-    if (!isPhoneNumberInput) {
-      // set the error message element
-      const errorMessageContainer = this.errorMessageContainer
+    // 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
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-    // Remove error class from kit element
-    if (kitElement) kitElement.classList.remove('error')
-    // Remove error message from parent element
+    parentElement.closest(KIT_SELECTOR).classList.remove('error')
     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) | ((event: any) => void) | any},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   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/global_props/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/visual_guidelines/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/global_props/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/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import FormPill from '../_form_pill'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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/tokens/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/visual_guidelines/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` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

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

@@ -3,41 +3,48 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"royal"
+                                          variant:"blue"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"purple"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"teal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"red"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupiter",
+                                          text: "Jupitar",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"yellow"
+                                          variant:"red"
  }) %>
  <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>
@@ -46,4 +53,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="royal"
+          variant="blue"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="purple"
+          variant="royal"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="teal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="red"
+          variant="teal"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupiter"
+          text="Jupitar"
           unit="AU"
           value={5.203}
-          variant="yellow"
+          variant="red"
           {...props}
       />
       <br />
@@ -54,6 +54,15 @@ 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/global_props/max_width" target="_blank">visual guidelines.</a>
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LoadingInline from '../_loading_inline'
+import { LoadingInline } from 'playbook-ui'
 
 const LoadingInlineVariant = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -43,7 +43,6 @@ type NavItemProps = {
   marginLeft?: Spacing;
   marginX?: Spacing;
   marginY?: Spacing;
-  disabled?: boolean;
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
@@ -90,7 +89,6 @@ const NavItem = (props: NavItemProps) => {
     marginLeft,
     marginX,
     marginY,
-    disabled = false,
   } = props;
 
   const spacingMarginProps = {
@@ -142,12 +140,11 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link && !disabled
+  const isLink = !!link
   const Tag = isLink ? "a" : "div"
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
-  const disabledClass = disabled ? "pb_nav_item_disabled" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
@@ -180,7 +177,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     fontWeightClass,
     tagClasses,
     collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
-    disabledClass,
     className
   );
 
@@ -206,21 +202,12 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
+    if (!isLink && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault()
       onClick?.()
     }
   }
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (disabled) {
-      e.preventDefault()
-      e.stopPropagation()
-      return
-    }
-    onClick?.()
-  }
-
   return (
     <>
       {collapsible ? (
@@ -288,14 +275,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
-            aria-disabled={disabled}
             className={classes}
             href={isLink ? link : undefined}
             id={id}
-            onClick={handleClick}
+            onClick={onClick}
             onKeyDown={!isLink ? handleKeyDown : undefined}
             role={!isLink ? "button" : undefined}
-            tabIndex={disabled ? -1 : (!isLink ? 0 : undefined)}
+            tabIndex={!isLink ? 0 : undefined}
             target={isLink ? target : undefined}
         >
           {imageUrl && (

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -45,18 +45,16 @@
 
   [class*="pb_nav_list_kit_item"],
   [class*="pb_nav_list_item"] {
-    &:hover {
-      cursor: pointer;
-    }
+    &:hover { cursor: pointer; }
   }
 }
 
 .pb_nav_extended_underline {
   position: relative;
-
+  
   // Add full-width border using pseudo-element so as not to break the active item border
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: 0;
     left: 0;
@@ -67,8 +65,8 @@
   }
 
   .pb_nav_list_kit_item_active.pb_nav_list_item_link {
-    position: relative;
-    z-index: 2;
+      position: relative;
+      z-index: 2;
   }
 
   &.dark {
@@ -77,26 +75,3 @@
     }
   }
 }
-
-// Disabled scss
-.pb_nav_item_disabled {
-  cursor: not-allowed !important;
-  .pb_nav_list_item_text, 
-  .pb_nav_list_item_icon_left,
-  .pb_nav_list_item_icon_right,
-  .pb_nav_list_item_icon_section {
-    color: $text_lt_lighter !important;
-    cursor: not-allowed !important;
-  }
-  @media (hover: hover) {
-    &:hover {
-      background-color: unset !important;
-      color: $text_lt_lighter !important;
-      .pb_nav_list_item_text,
-      .pb_nav_list_item_icon_left,
-      .pb_nav_list_item_icon_right {
-        color: $text_lt_lighter !important;
-      }
-    }
-  }
-}