playbook_ui 14.23.0 → 14.24.0.pre.alpha.PLAY1984responsivegapprops9652

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()
+  })
+}) 

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -123,6 +123,13 @@ const Pagination = ( props: PaginationProps) => {
     
     return buttons;
   };
+
+  // Sync internal state with external current prop
+  useEffect(() => {
+    if (current >= 1 && current <= total) {
+      setCurrentPage(current);
+    }
+  }, [current, total]);
   
 
   const ariaProps = buildAriaProps(aria)
@@ -134,6 +141,10 @@ const Pagination = ( props: PaginationProps) => {
     className
   )
 
+  if (total <= 1) {
+    return null;
+  }
+
   return (
     <div 
         {...ariaProps}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md

@@ -3,4 +3,6 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+
+Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -1 +1,3 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+
+Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+import Pagination from '../../pb_pagination/_pagination'
+import Select from '../../pb_select/_select'
+import Table from '../../pb_table/_table'
+
+import { data } from "./data";
+
+const PaginationExternalControl = (props) => {
+  const [totalItems, setTotalItems] = useState(20);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const limitedData = data.slice(0, totalItems);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
+
+  const handleTotalItemsChange = (event) => {
+    const value = Number(event.target.value);
+    setTotalItems(value);
+    setCurrentPage(1);
+  };
+
+  const handleItemsPerPageChange = (event) => {
+    const value = Number(event.target.value);
+    setItemsPerPage(value);
+    setCurrentPage(1);
+  };
+
+  return (
+    <>
+        <Flex gap="sm">
+            <Select
+                label="Total Items"
+                onChange={handleTotalItemsChange}
+                options={[
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" },
+                    { value: "20", text: "20" }
+                ]}
+                size="sm"
+                value={String(totalItems)}
+                {...props}
+            />
+
+            <Select
+                label="Items per Page"
+                onChange={handleItemsPerPageChange}
+                options={[
+                    { value: "3", text: "3" },
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" }
+                ]}
+                size="sm"
+                value={String(itemsPerPage)}
+                {...props}
+            />
+        </Flex>
+
+        <Pagination
+            current={currentPage}
+            key={`pagination-top-${currentPage}`}
+            marginBottom="xs"
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+        <Table 
+            marginBottom="xs"
+            responsive="none" 
+            size="sm" 
+            {...props}
+        >
+            <Table.Head>
+            <Table.Row>
+                <Table.Header>{"Column 1"}</Table.Header>
+                <Table.Header>{"Column 2"}</Table.Header>
+                <Table.Header>{"Column 3"}</Table.Header>
+                <Table.Header>{"Column 4"}</Table.Header>
+                <Table.Header>{"Column 5"}</Table.Header>
+            </Table.Row>
+            </Table.Head>
+            <Table.Body>
+            {paginatedItems.map((row, index) => (
+                <Table.Row key={index}>
+                {row.map((cell, cellIndex) => (
+                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+                ))}
+                </Table.Row>
+            ))}
+            </Table.Body>
+        </Table>
+        <Pagination
+            current={currentPage}
+            key={`pagination-bottom-${currentPage}`}
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+    </>
+  )
+}
+
+export default PaginationExternalControl 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md

@@ -0,0 +1,3 @@
+The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
+
+In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.

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

@@ -6,3 +6,4 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
+  - pagination_external_control: External Control

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

@@ -1,2 +1,3 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
+export { default as PaginationExternalControl } from './_pagination_external_control.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -38,6 +38,7 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
+  strictMode?: boolean,
   countrySearch?: boolean,
 }
 
@@ -94,6 +95,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
+    strictMode = false,
     countrySearch = false,
   } = props
 
@@ -195,13 +197,22 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateMissingAreaCode = (itiInit: any) => {
-    if (!required || !itiInit) return
+    if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
       showFormattedError('missing area code')
       return true
     }
   }
 
+  const validateRepeatCountryCode = (itiInit: any) => {
+    if (!itiInit) return
+    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
+    if (unformatNumber(inputValue).startsWith(countryDialCode)) {
+      return showFormattedError('repeat country code')
+    }
+  }
+
+
   const validateErrors = () => {
     if (!hasTyped && !error) return
 
@@ -211,6 +222,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateTooShortNumber(itiRef.current)) return
     if (validateUnhandledError(itiRef.current)) return
     if (validateMissingAreaCode(itiRef.current)) return
+    if (validateRepeatCountryCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -256,6 +268,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
+      strictMode: strictMode,
       hiddenInput: hiddenInputs ? () => ({
         phone: `${name}_full`,
         country: `${name}_country_code`,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+}) %>
+
+<%= pb_rails("body", props: { text: "With format_as_you_type" }) %>
+
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+    format_as_you_type: true,
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputStrictMode = (props) => {
+
+    return (
+        <>
+            <PhoneNumberInput
+                id="strict"
+                strictMode
+                {...props}
+            />
+            <Body>With formatAsYouType</Body>
+            <PhoneNumberInput
+                formatAsYouType
+                id="strict"
+                strictMode
+                {...props}
+            />
+        </>
+    );
+};
+
+export default PhoneNumberInputStrictMode;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md

@@ -0,0 +1,3 @@
+Ignore any irrelevant characters and cap the length at the maximum valid number length.
+
+This can be combined with `format_as_you_type` / `formatAsYouType`. 

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

@@ -10,6 +10,7 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
+  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
 
   rails:
@@ -20,5 +21,6 @@ examples:
   - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
+  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search

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

@@ -7,4 +7,5 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
+export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,6 +25,8 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
+      prop :strict_mode, type: Playbook::Props::Boolean,
+                         default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
       prop :country_search, type: Playbook::Props::Boolean,
@@ -41,6 +43,7 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
+          strictMode: strict_mode,
           hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,7 +24,9 @@ module Playbook
       prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
-        classname + inline_class + compact_class + show_arrow_class
+        ([classname] + [inline_class, compact_class, show_arrow_class])
+          .reject(&:empty?)
+          .join(" ")
       end
 
       def all_attributes
@@ -44,7 +46,7 @@ module Playbook
       end
 
       def inline_class
-        inline ? " inline " : " "
+        inline ? "inline" : ""
       end
 
       def compact_class

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -19,6 +19,7 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
+                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -7,7 +7,7 @@
     thead tr:not(:first-child) th {
       border-right: 1px solid $border_light !important;
     }
-    
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -15,5 +15,53 @@
         }
       }
     }
+
+    // Firefox-specific fix for sticky elements
+    @-moz-document url-prefix() {
+      // Target sticky headers
+      &.sticky-header {
+        th:not(:last-child) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+
+        .pb_advanced_table_body {
+          .pinned-row {
+            td:not(:first-child):not(:last-child) {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 $border_light !important;
+            }
+          }
+        }
+      }
+
+      // Target sticky left columns
+      &.sticky-left-column {
+        td[style="left"], th[style="left"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Target sticky right columns
+      &.sticky-right-column {
+        td[style="right"], th[style="right"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Handle hover states in Firefox
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            &[style="left"], &[style="right"] {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
+            }
+          }
+        }
+      }
+    }
   }
 }

data/app/pb_kits/playbook/utilities/_gap.scss

@@ -1,29 +1,17 @@
 @import "spacing";
 
-.gap_none {
-  gap: 0;
-}
+$gap_values: (
+  none: 0,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
 
-.gap_xxs {
-  gap: $space_xxs;
-}
+@include global_props_responsive_css($gap_values, 'gap', 'gap');
 
-.gap_xs {
-  gap: $space_xs;
-}
+@include global_props_responsive_css($gap_values, 'column_gap', 'column-gap');
 
-.gap_sm {
-  gap: $space_sm;
-}
-
-.gap_md {
-  gap: $space_md;
-}
-
-.gap_lg {
-  gap: $space_lg;
-}
-
-.gap_xl {
-  gap: $space_xl;
-}
+@include global_props_responsive_css($gap_values, 'row_gap', 'row-gap');

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,6 +27,8 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
+  "rowGap",
+  "columnGap",
   "gap",
   "maxWidth",
   "minWidth",