playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2413togglefocusstate9789

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

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

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 import { getAllIcons } from "../utilities/icons/allicons"
+import { camelToSnakeCase } from '../utilities/text'
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -114,6 +115,20 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+  // Convert cursor prop to CSS-style format to apply to input tag below
+  const getCursorStyle = (cursor?: string): string => {
+    // If input is disabled, always use 'not-allowed'
+    if (disableInput) return 'not-allowed'
+
+    // If cursor prop is provided, convert it to styling format
+    if (cursor) {
+      return camelToSnakeCase(cursor).replace(/_/g, '-')
+    }
+
+    // Default to 'pointer'
+    return 'pointer'
+  }
+
   useEffect(() => {
     datePickerHelper({
       allowInput,
@@ -149,6 +164,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)
+
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
@@ -163,6 +179,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     error ? 'error' : null,
     className
   )
+
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -176,6 +193,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     }
     return base
   }
+
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
@@ -206,6 +224,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   name={name}
                   onChange={inputOnChange}
                   placeholder={placeholder}
+                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
                   value={inputValue}
               />
 

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -10,6 +10,7 @@
       <%= pb_rails("text_input", props: {
         aria: object.input_aria,
         autocomplete: false,
+        cursor: object.cursor,
         dark: object.dark,
         data: object.input_data,
         disabled: object.disable_input,

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -284,6 +284,9 @@ export default class PbDropdown extends PbEnhancedElement {
           this.adjustDropdownHeight();
         }
       });
+      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(this.selectedOptions)
+        .map((opt) => JSON.parse(opt).id)
+        .join(",");
     } else {
       options.forEach((option) => {
         option.classList.remove("pb_dropdown_option_selected");

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -52,7 +52,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   } = props;
 
   const returnedIcon = icon || iconMap[status]
-  const iconClass = icon ? "custom_icon" : ""
+  const iconClass = icon && icon !== "none" ? "custom_icon" : ""
 
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
@@ -92,7 +92,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && (
+          {returnedIcon && icon !== "none" && (
             <Icon
                 className="pb_icon"
                 fixedWidth

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

@@ -0,0 +1,22 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  icon: "none",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  icon: "none"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  icon: "none"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastNoIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="none"
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastNoIcon

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

@@ -0,0 +1 @@
+Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

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

@@ -8,6 +8,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -17,6 +18,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,7 @@
 <%= pb_content_tag do %>
+    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-
+    <% end %>
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? ? " custom_icon" : ""
+        icon.present? && icon != "none" ? " custom_icon" : ""
       end
 
       def classname

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -56,6 +56,12 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
+test("renders no icon when icon prop is 'none'", () => {
+    const { container } = render(<FixedConfirmationToast icon="none" />);
+    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
+    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
+});
+
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
     expect(container.querySelector('._multi_line')).toBeInTheDocument();

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

@@ -4,6 +4,9 @@ import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
+type SizeType = Sizes | "none"
+type SizeResponsiveType = { [key: string]: SizeType }
+
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
@@ -18,9 +21,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: Sizes | "none",
-  rowGap?: Sizes| "none",
-  columnGap?: Sizes| "none",
+  gap?: SizeType | SizeResponsiveType,
+  rowGap?: SizeType | SizeResponsiveType,
+  columnGap?: SizeType | SizeResponsiveType,
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
@@ -53,9 +56,9 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
-  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
+  const gapClass = (gap !== 'none' && typeof gap === 'object') ? `gap_${gap}` : ''
+  const rowGapClass = (rowGap !== 'none' && typeof rowGap === 'object') ? `rowGap_${rowGap}` : ''
+  const columnGapClass = (columnGap !== 'none' && typeof columnGap === 'object') ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,3 +31,14 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
+   <% 40.times do |i| %>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -13,6 +14,8 @@ const FlexGap = (props) => {
 
   return (
     <>
+      <Title size={4}>Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -27,8 +30,10 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br />
+      <br /><br />
 
+      <Title size={4}>Column Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -48,6 +53,9 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br /><br />
+
+      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -69,6 +77,23 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br /><br />
+      <Title size={4}>Responsive</Title>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
+
+Setting the `row_gap` prop creates space between rows in a flex container.
+
+Setting the `column_gap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -24,17 +24,11 @@ module Playbook
                      default: "none",
                      deprecated: true
 
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xxs xs sm md lg xl none],
-                 default: "none"
+      prop :gap
 
-      prop :row_gap, type: Playbook::Props::Enum,
-                     values: %w[xxs xs sm md lg xl none],
-                     default: "none"
+      prop :row_gap
 
-      prop :column_gap, type: Playbook::Props::Enum,
-                        values: %w[xxs xs sm md lg xl none],
-                        default: "none"
+      prop :column_gap
 
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
@@ -133,7 +127,7 @@ module Playbook
       end
 
       def gap_class
-        if gap == "none"
+        if gap == "none" || gap.nil? || gap.is_a?(Hash)
           nil
         else
           "gap_#{gap}"
@@ -141,7 +135,7 @@ module Playbook
       end
 
       def row_gap_class
-        if row_gap == "none"
+        if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
           nil
         else
           "rowGap_#{row_gap}"
@@ -149,7 +143,7 @@ module Playbook
       end
 
       def column_gap_class
-        if column_gap == "none"
+        if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
           nil
         else
           "columnGap_#{column_gap}"

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -242,4 +242,8 @@ svg {
       animation: fa-spin 1s infinite linear;
     }
   }
+
+  &.dark {
+    color: white;
+  }
 }

data/app/pb_kits/playbook/pb_pagination/_pagination.test.jsx

@@ -0,0 +1,212 @@
+import React from 'react'
+import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
+import Pagination from './_pagination'
+
+const defaultProps = {
+  data: { testid: 'pagination-test' },
+  total: 10,
+  current: 1,
+  range: 5,
+}
+
+describe('Pagination Component', () => {
+  test('returns namespaced class name', () => {
+    const kit = renderKit(Pagination, defaultProps)
+    expect(kit).toBeInTheDocument()
+    expect(kit).toHaveClass('pb_paginate')
+  })
+
+  it("should be accessible", async () => {
+    ensureAccessible(Pagination, defaultProps)
+  })
+
+  test('renders with default props', () => {
+    render(<Pagination {...defaultProps} />)
+    
+    const pagination = screen.getByTestId('pagination-test')
+    expect(pagination).toBeInTheDocument()
+    expect(pagination).toHaveClass('pb_paginate')
+  })
+
+  test('renders pagination buttons correctly', () => {
+    render(<Pagination {...defaultProps} />)
+    
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+    expect(screen.getByText('4')).toBeInTheDocument()
+    expect(screen.getByText('5')).toBeInTheDocument()
+    
+    // Check for navigation arrows by looking for the li elements with specific classes
+    const leftArrow = document.querySelector('.pagination-left')
+    const rightArrow = document.querySelector('.pagination-right')
+    expect(leftArrow).toBeInTheDocument()
+    expect(rightArrow).toBeInTheDocument()
+  })
+
+  test('highlights current page as active', () => {
+    render(<Pagination {...defaultProps}
+        current={3} 
+           />)
+    
+    const activePage = screen.getByText('3')
+    expect(activePage).toHaveClass('active')
+  })
+
+  test('calls onChange when page is clicked', () => {
+    const mockOnChange = jest.fn()
+    render(<Pagination {...defaultProps} 
+        onChange={mockOnChange}
+           />)
+    
+    const pageButton = screen.getByText('3')
+    fireEvent.click(pageButton)
+    
+    expect(mockOnChange).toHaveBeenCalledWith(3)
+  })
+
+  test('disables left arrow on first page', () => {
+    render(<Pagination {...defaultProps}
+        current={1}
+           />)
+    
+    const leftArrow = document.querySelector('.pagination-left')
+    expect(leftArrow).toHaveClass('disabled')
+  })
+
+  test('disables right arrow on last page', () => {
+    render(<Pagination {...defaultProps}
+        current={10}
+           />)
+    
+    const rightArrow = document.querySelector('.pagination-right')
+    expect(rightArrow).toHaveClass('disabled')
+  })
+
+  test('does not render when total is 1 or less', () => {
+    const { container } = render(<Pagination {...defaultProps} 
+        total={1}
+                                 />)
+    
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('renders with custom className', () => {
+    render(<Pagination {...defaultProps}
+        className="custom-class" 
+           />)
+    
+    const pagination = screen.getByTestId('pagination-test')
+    expect(pagination).toHaveClass('custom-class')
+  })
+
+  test('renders with custom id', () => {
+    render(<Pagination {...defaultProps}
+        id="custom-id" 
+           />)
+    
+    const pagination = screen.getByTestId('pagination-test')
+    expect(pagination).toHaveAttribute('id', 'custom-id')
+  })
+
+  test('renders with custom range', () => {
+    render(<Pagination {...defaultProps}
+        range={3} 
+           />)
+    
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+    expect(screen.getByText('9')).toBeInTheDocument()
+    expect(screen.getByText('10')).toBeInTheDocument()
+  })
+
+  test('handles large number of pages correctly', () => {
+    render(<Pagination {...defaultProps}
+        current={50}
+        range={5}
+        total={100}
+           />)
+
+    const pagination = screen.getByTestId('pagination-test')
+    expect(pagination).toBeInTheDocument()
+    expect(pagination).toHaveClass('pb_paginate')
+
+    
+    expect(screen.getByText('48')).toBeInTheDocument()
+    expect(screen.getByText('49')).toBeInTheDocument()
+    expect(screen.getByText('50')).toBeInTheDocument()
+    expect(screen.getByText('51')).toBeInTheDocument()
+    expect(screen.getByText('52')).toBeInTheDocument()
+  })
+
+  test('syncs with external current prop changes', () => {
+    const { rerender } = render(<Pagination {...defaultProps} 
+        current={1}
+                                />)
+    
+    expect(screen.getByText('1')).toHaveClass('active')
+    
+    rerender(<Pagination {...defaultProps} 
+        current={3} 
+             />)
+    
+    expect(screen.getByText('3')).toHaveClass('active')
+    expect(screen.getByText('1')).not.toHaveClass('active')
+  })
+
+  test('validates current prop is within valid range', () => {
+    const { rerender } = render(<Pagination {...defaultProps} 
+        current={1} 
+                                />)
+    
+    rerender(<Pagination {...defaultProps} 
+        current={0} 
+            />)
+    
+    expect(screen.getByText('1')).toHaveClass('active')
+    
+    rerender(<Pagination {...defaultProps} 
+        current={15}
+             />)
+    
+    expect(screen.getByText('1')).toHaveClass('active')
+  })
+
+  test('handles htmlOptions props', () => {
+    const htmlOptions = { 'data-test': 'test-value' }
+    render(<Pagination {...defaultProps}
+        htmlOptions={htmlOptions}
+           />)
+    
+    const pagination = screen.getByTestId('pagination-test')
+    expect(pagination).toHaveAttribute('data-test', 'test-value')
+  })
+
+  test('renders first and last page buttons when range is small', () => {
+    render(<Pagination {...defaultProps}
+        current={10}
+        range={3}
+        total={20}
+           />)
+    
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('20')).toBeInTheDocument()
+    
+    expect(screen.getByText('9')).toBeInTheDocument()
+    expect(screen.getByText('10')).toBeInTheDocument()
+    expect(screen.getByText('11')).toBeInTheDocument()
+  })
+
+  test('renders second and second-to-last page buttons when needed', () => {
+    render(<Pagination {...defaultProps} 
+        current={10}
+        range={3}
+        total={20}
+           />)
+    
+    expect(screen.getByText('2')).toBeInTheDocument()
+    
+    expect(screen.getByText('19')).toBeInTheDocument()
+  })
+})