playbook_ui 14.25.0.pre.alpha.PLAY2426textfieldaccessibility9859 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2aeef5b510c526f3272e809ba9f1d0519b39056bbce89e619bda775f561099ef
-  data.tar.gz: 39ee4b7ec7ffcc1def8e722a12c9709b7f0955654a9119625e9e664befd358b9
+  metadata.gz: 0ee315a459262d17524d4034ee8ee267a36cb55a6bff5ab517eded1823079b82
+  data.tar.gz: 214124df5701381babad6d1c668e2d821852a12ea69e76c654b80142005b86ef
 SHA512:
-  metadata.gz: 9fac5809126c0bf3830608611c3bda36a159b0a14ca174ef3b4b960d065ad95f8a7656c9ca56aaf194c27e71af543e82d5196528ec4b06fa67a86e68a1a08138
-  data.tar.gz: 8c33f0daa6f8b4de9226e40724e7b681f4212d3da062f3e0fb46ed1cdf490d716569db100354f9444ceedc796677609a83414fc72a28c44cae3dbb938d0885d9
+  metadata.gz: c809a3b70d4575e569eb8651e363753b1ddf1d8b655158d1c0028eeee1510007c2c029d4e425571b9dd27258573f07344b2b8bb4880cf0a1a48e98cdfdf8010a
+  data.tar.gz: c36c53928fcc035ce43a88d6f3523b71895d49eae26ab8231984df5517a18724fa9801c0e130f20f31545e31c2ba3d666080b74ba7f53c73d1af83487aa77bad

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_form/docs/_form_form_with.html.erb

@@ -91,7 +91,6 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -16,6 +16,7 @@ type LoadingInlineProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
+  variant?: "dotted" | "solid" ,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -28,6 +29,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     htmlOptions = {},
     id,
     text = ' Loading',
+    variant = 'dotted',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -54,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon="spinner"
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -8,10 +8,21 @@ module Playbook
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[dotted solid],
+                     default: "dotted"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)
       end
+
+      def spinner_icon
+        if variant == "dotted"
+          "spinner"
+        elsif variant == "solid"
+          "spinner-solid"
+        end
+      end
     end
   end
 end