playbook_ui 14.25.0.pre.alpha.PLAY2425textinputaccessibility9851 → 14.25.0.pre.alpha.PLAY2448datepickerhideLabelbugreact9924

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a18cab80a751443ea1b44661e4802da46c9ff5bd75e9c933099473b9ff5eb5ef
-  data.tar.gz: a1cb5dd865edb50661317200fde43102a140e9448f922d2fc4960836262f770c
+  metadata.gz: 84d5cc641523d00d63997f981a3fc8c250d28c3186a84bb43d897d93c7758d2b
+  data.tar.gz: 408db4c5f5ee17a602562facef7ef532acd58f05303c72b8a5ecf487028bf1d7
 SHA512:
-  metadata.gz: 5272df4e04ab5636c8489e84b93c15625dddcfb95b57e3e93ec1adcfb3bf27e4e2c467da4805004b9e5433d50cddb9cc2a9df61e9579139caa68a3ff428f8843
-  data.tar.gz: 1bcb38c3598eeb85741072c48f67e39c99e77d3826c608089a6c4b3265dfc6bd1e7cd5f6c283ad72e3a3d000c5570af9f94440e7a2f95c1698012e94be5760c1
+  metadata.gz: 4e790c59d1967e429f4612db5984396ac2c7113c06f716ed71c4a4b6d8e26123494b4ddfdf090ca38744227d410c22ce40ad8d7ed2b3cb4a2525707c8e3fc1d6
+  data.tar.gz: 366c92fdc41b21c0475acd059ac527a44101bd58676ca9917b3fd048a82e4cd935453cddddc1535d1487d3d5967d9ddbc433503ac094f49528df2d9a867fe7af

data/app/pb_kits/playbook/pb_date/date.test.js

@@ -0,0 +1,506 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PbDate from './_date'
+import DateTime from '../pb_kit/dateTime'
+
+// Mock DateTime utility functions
+jest.mock('../pb_kit/dateTime', () => ({
+  toWeekday: jest.fn(),
+  toMonth: jest.fn(),
+  toDay: jest.fn(),
+  toYear: jest.fn(),
+}))
+
+// Set test date
+const TEST_DATE = new Date('2025-08-19T10:30:00Z') // Monday, August 19, 2025
+const CURRENT_YEAR = new Date().getFullYear()
+
+describe('PbDate Kit', () => {
+  beforeEach(() => {
+    // Reset mocks before each test
+    jest.clearAllMocks()
+
+    // Set up default mock returns
+    DateTime.toWeekday.mockReturnValue('Monday')
+    DateTime.toMonth.mockReturnValue('August')
+    DateTime.toDay.mockReturnValue('19')
+    DateTime.toYear.mockReturnValue(2025)
+
+    // Mock console.error to avoid noise in tests
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    console.error.mockRestore()
+  })
+
+  // Default Props
+  describe('Default Props', () => {
+    test('renders with minimal required props', () => {
+      const testId = 'pb-date-default'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toBeInTheDocument()
+      expect(kit).toHaveClass('pb_date_kit_left')
+    })
+
+    test('displays date in default format without day of week', () => {
+      // Mock current year to test hiding logic
+      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
+
+      const testId = 'pb-date-format'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('August 19')
+      expect(kit).not.toHaveTextContent('Monday')
+      expect(kit).not.toHaveTextContent(`, ${CURRENT_YEAR}`)
+    })
+
+    test('applies default CSS classes', () => {
+      const testId = 'pb-date-css'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass('pb_date_kit_left')
+    })
+  })
+
+  // Prop Variations
+  describe('Prop Variations', () => {
+    test('renders with showDayOfWeek enabled', () => {
+      const testId = 'pb-date-weekday'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showDayOfWeek
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('Monday')
+      expect(kit).toHaveTextContent('•')
+      expect(kit).toHaveTextContent('August 19')
+    })
+
+    test('renders with showCurrentYear enabled', () => {
+      const testId = 'pb-date-current-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showCurrentYear
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(', 2025')
+    })
+
+    test('renders with showIcon enabled for medium size', () => {
+      const testId = 'pb-date-icon-md'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showIcon
+            size="md"
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      const iconContainer = kit.querySelector('.pb_icon_kit_container')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    test('renders with showIcon enabled for small size', () => {
+      const testId = 'pb-date-icon-sm'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showIcon
+            size="sm"
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      const iconContainer = kit.querySelector('.pb_icon_kit_container')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    test('renders different sizes correctly', () => {
+      const sizes = ['sm', 'md', 'lg']
+
+      sizes.forEach(size => {
+        const testId = `pb-date-size-${size}`
+        render(
+          <PbDate
+              data={{ testid: testId }}
+              size={size}
+              value={TEST_DATE}
+          />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toBeInTheDocument()
+
+        expect(kit).toHaveTextContent('August 19')
+      })
+    })
+
+    test('renders different alignments correctly', () => {
+      const alignments = ['left', 'center', 'right']
+
+      alignments.forEach(alignment => {
+        const testId = `pb-date-align-${alignment}`
+        render(
+          <PbDate
+              alignment={alignment}
+              data={{ testid: testId }}
+              value={TEST_DATE}
+          />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass(`pb_date_kit_${alignment}`)
+      })
+    })
+
+    test('renders in dark mode', () => {
+      const testId = 'pb-date-dark'
+      render(
+        <PbDate
+            dark
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toBeInTheDocument()
+    })
+
+    test('renders in unstyled mode', () => {
+      const testId = 'pb-date-unstyled'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showDayOfWeek
+            showIcon
+            unstyled
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('Monday')
+      expect(kit).toHaveTextContent('•')
+      expect(kit).toHaveTextContent('August 19')
+
+      expect(kit.querySelector('.pb_title_kit')).not.toBeInTheDocument()
+      expect(kit.querySelector('.pb_caption_kit')).not.toBeInTheDocument()
+    })
+
+    test('applies custom className', () => {
+      const testId = 'pb-date-custom-class'
+      const customClass = 'my-custom-date-class'
+
+      render(
+        <PbDate
+            className={customClass}
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(customClass)
+    })
+
+    test('applies custom id', () => {
+      const customId = 'my-custom-date-id'
+
+      render(
+        <PbDate
+            id={customId}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = document.getElementById(customId)
+      expect(kit).toBeInTheDocument()
+      expect(kit).toHaveAttribute('id', customId)
+    })
+  })
+
+  // Year Display
+  describe('Year Display Logic', () => {
+    test('hides current year by default', () => {
+      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
+
+      const testId = 'pb-date-current-year-hidden'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).not.toHaveTextContent(`, ${CURRENT_YEAR}`)
+    })
+
+    test('shows current year when showCurrentYear is true', () => {
+      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
+
+      const testId = 'pb-date-force-current-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showCurrentYear
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(`, ${CURRENT_YEAR}`)
+    })
+
+    test('shows non-current year automatically', () => {
+      const pastYear = CURRENT_YEAR - 1
+      DateTime.toYear.mockReturnValue(pastYear)
+
+      const testId = 'pb-date-past-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(`, ${pastYear}`)
+    })
+
+    test('shows future year automatically', () => {
+      const futureYear = CURRENT_YEAR + 1
+      DateTime.toYear.mockReturnValue(futureYear)
+
+      const testId = 'pb-date-future-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(`, ${futureYear}`)
+    })
+  })
+
+  // Edge Cases
+  describe('Edge Cases', () => {
+    test('handles leap year date', () => {
+      const leapYearDate = new Date('2024-02-29T12:00:00Z')
+      DateTime.toMonth.mockReturnValue('February')
+      DateTime.toDay.mockReturnValue('29')
+      DateTime.toYear.mockReturnValue(2024)
+      DateTime.toWeekday.mockReturnValue('Thursday')
+
+      const testId = 'pb-date-leap-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={leapYearDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('February 29')
+    })
+
+    test('handles beginning of year', () => {
+      const newYearDate = new Date('2023-01-01T00:00:00Z')
+      DateTime.toMonth.mockReturnValue('January')
+      DateTime.toDay.mockReturnValue('1')
+      DateTime.toYear.mockReturnValue(2023)
+      DateTime.toWeekday.mockReturnValue('Sunday')
+
+      const testId = 'pb-date-new-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={newYearDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('January 1')
+    })
+
+    test('handles end of year', () => {
+      const endYearDate = new Date('2023-12-31T23:59:59Z')
+      DateTime.toMonth.mockReturnValue('December')
+      DateTime.toDay.mockReturnValue('31')
+      DateTime.toYear.mockReturnValue(2023)
+      DateTime.toWeekday.mockReturnValue('Sunday')
+
+      const testId = 'pb-date-end-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={endYearDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('December 31')
+    })
+
+    test('handles very old date', () => {
+      const oldDate = new Date('1900-01-01T00:00:00Z')
+      DateTime.toMonth.mockReturnValue('January')
+      DateTime.toDay.mockReturnValue('1')
+      DateTime.toYear.mockReturnValue(1900)
+      DateTime.toWeekday.mockReturnValue('Monday')
+
+      const testId = 'pb-date-old'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={oldDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('January 1')
+      expect(kit).toHaveTextContent(', 1900')
+    })
+
+    test('handles far future date', () => {
+      const futureDate = new Date('2099-12-31T23:59:59Z')
+      DateTime.toMonth.mockReturnValue('December')
+      DateTime.toDay.mockReturnValue('31')
+      DateTime.toYear.mockReturnValue(2099)
+      DateTime.toWeekday.mockReturnValue('Friday')
+
+      const testId = 'pb-date-future'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={futureDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('December 31')
+      expect(kit).toHaveTextContent(', 2099')
+    })
+  })
+
+  // Accessibility and HTML
+  describe('Accessibility and HTML Attributes', () => {
+    test('applies aria attributes correctly', () => {
+      const testId = 'pb-date-aria'
+      const ariaLabel = 'Custom date label'
+
+      render(
+        <PbDate
+            aria={{ label: ariaLabel }}
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveAttribute('aria-label', ariaLabel)
+    })
+
+    test('applies data attributes correctly', () => {
+      const testId = 'pb-date-data'
+      const customData = 'custom-value'
+
+      render(
+        <PbDate
+            data={{ testid: testId, custom: customData }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveAttribute('data-custom', customData)
+    })
+
+    test('applies HTML options correctly', () => {
+      const testId = 'pb-date-html'
+      const title = 'Custom title'
+
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            htmlOptions={{ title }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveAttribute('title', title)
+    })
+  })
+
+  // Componenet Integration
+  describe('Component Integration', () => {
+    test('calls DateTime utility functions correctly', () => {
+      render(
+        <PbDate value={TEST_DATE} />
+      )
+
+      expect(DateTime.toWeekday).toHaveBeenCalledWith(TEST_DATE)
+      expect(DateTime.toMonth).toHaveBeenCalledWith(TEST_DATE)
+      expect(DateTime.toDay).toHaveBeenCalledWith(TEST_DATE)
+      expect(DateTime.toYear).toHaveBeenCalledWith(TEST_DATE)
+    })
+
+    test('renders all components together correctly', () => {
+      const testId = 'pb-date-full-featured'
+      render(
+        <PbDate
+            alignment="center"
+            data={{ testid: testId }}
+            showDayOfWeek
+            showIcon
+            size="lg"
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass('pb_date_kit_center')
+      expect(kit).toHaveTextContent('Monday')
+      expect(kit).toHaveTextContent('•')
+      expect(kit).toHaveTextContent('August 19')
+
+      const iconContainer = kit.querySelector('.pb_icon_kit_container')
+      expect(iconContainer).toBeInTheDocument()
+    })
+  })
+})

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
           className="input_wrapper"
       >
 
-        <Caption
-            className="pb_date_picker_kit_label"
-            text={hideLabel ? null : label}
-        />
+        {!hideLabel && (
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
+        )}
           <>
             <div className="date_picker_input_wrapper">
               <input

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -2,7 +2,8 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
-`neutral`, `custom()` |
+| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
+| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -138,14 +138,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
-  const errorId = error ? `${id}-error` : undefined
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
-        aria-describedby={errorId}
-        aria-invalid={!!error}
         className="text_input"
         disabled={disabled}
         id={id}
@@ -203,20 +199,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && (
-        <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label" 
-              text={label} 
-          />
-        </label>
-      )}
+      {label &&
+        <Caption
+            className="pb_text_input_kit_label"
+            text={label}
+        />
+      }
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
-            aria={{ atomic: "true", live: "polite" }}
-            htmlOptions={{ role: "alert" }}
-            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,27 +9,23 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name",
-  id: "last-name"
+  placeholder: "Enter last name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number",
-    id: "phone"
+    placeholder: "Enter phone number"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address",
-    id: "email"
+    placeholder: "Enter email address"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code",
-    id: "zip"
+    placeholder: "Enter zip code"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
-          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,8 +1,6 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -17,7 +15,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -65,16 +65,10 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
 
-      def error_id
-        "#{id}-error" if error.present?
-      end
-
     private
 
       def all_input_options
         {
-          'aria-describedby': error.present? ? error_id : nil,
-          'aria-invalid': error.present?,
           autocomplete: autocomplete ? nil : "off",
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,