playbook_ui 15.3.0.pre.alpha.play199912019 → 15.3.0.pre.alpha.play202412165

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_nav/_item.tsx

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

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

@@ -45,16 +45,18 @@
 
   [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;
@@ -65,8 +67,8 @@
   }
 
   .pb_nav_list_kit_item_active.pb_nav_list_item_link {
-      position: relative;
-      z-index: 2;
+    position: relative;
+    z-index: 2;
   }
 
   &.dark {
@@ -75,3 +77,26 @@
     }
   }
 }
+
+// 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;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -5,6 +5,8 @@ import Nav from './_nav'
 import NavItem from './_item'
 
 const navTestId = 'nav'
+const navDisabledTestId = 'nav-disabled'
+const itemDisabledTestId = 'item-disabled'
 const itemTestId = 'item'
 const activeTestBorderlessId = 'activeborderless'
 const activeTestBorderId = 'active'
@@ -105,3 +107,193 @@ test('should have a left icon', () => {
     const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
     expect(icon).toBeInTheDocument()
 })
+
+test('should apply disabled class when disabled (horizontal nav)', () => {
+    [
+     "default",
+     "subtle",
+     "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveClass('pb_nav_item_disabled')
+    })
+})
+
+test('should set aria-disabled when disabled (horizontal nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(item).toHaveAttribute('aria-disabled', 'true')
+    })
+})
+
+test('should set tabIndex to -1 when disabled (horizontal nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveAttribute('tabIndex', '-1')
+    })
+})
+
+test('should prevent onClick when disabled', () => {
+    const handleClick = jest.fn()
+    render(
+        <NavItem
+            data={{ testid: 'disabled-click-item' }}
+            disabled
+            link="#"
+            onClick={handleClick}
+            text="Disabled Item"
+        />
+    )
+    const kit = screen.getByTestId('disabled-click-item')
+    kit.click()
+    expect(handleClick).not.toHaveBeenCalled()
+})
+
+test('should apply disabled class when disabled (vertical nav)', () => {
+    [
+     "default",
+     "subtle",
+     "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveClass('pb_nav_item_disabled')
+    })
+})
+
+test('should set aria-disabled when disabled (vertical nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(item).toHaveAttribute('aria-disabled', 'true')
+    })
+})
+
+test('should set tabIndex to -1 when disabled (vertical nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveAttribute('tabIndex', '-1')
+    })
+})

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

@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
         @media (hover: hover) {
-          &:hover {
+          &:hover:not(.pb_nav_item_disabled) {
             background-color: rgba($primary, 0.03);
             [class*="_icon"] {
               color: $primary;

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+
+const HorizontalNavDisabled = (props) => {
+  return (
+    <>
+    <Caption marginBottom="sm">Default Variant</Caption>
+    <Nav
+        link="#"
+        orientation="horizontal"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          disabled
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Subtle Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="subtle"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Bold Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="bold"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+    </>
+  )
+}
+
+export default HorizontalNavDisabled

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

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: { justify: "between" }) do %>
+  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+    <%= pb_rails("nav") do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "bold"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+  
+<% end %>