@patternfly/react-core 4.266.1 → 4.266.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.266.1",
+  "version": "4.266.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -77,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "e8e88bf93618d03c99fd94996f0e7db9de6400cd"
+  "gitHead": "08cb2ff73fe6b884d8a0688dc568a9837d435145"
 }

package/src/components/Pagination/Pagination.tsx

@@ -6,9 +6,9 @@ import { css } from '@patternfly/react-styles';
 import { fillTemplate } from '../../helpers';
 import { Navigation } from './Navigation';
 import { PaginationOptionsMenu } from './PaginationOptionsMenu';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId, PickOptional } from '../../helpers';
+import { formatBreakpointMods } from '../../helpers/util';
 import widthChars from '@patternfly/react-tokens/dist/esm/c_pagination__nav_page_select_c_form_control_width_chars';
-import { PickOptional } from '../../helpers';
 
 export enum PaginationVariant {
   bottom = 'bottom',
@@ -109,6 +109,17 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   dropDirection?: 'up' | 'down';
   /** Page to start at. */
   firstPage?: number;
+  /** @beta Flag indicating that pagination should use page insets. */
+  usePageInsets?: boolean;
+  /** @beta Insets at various breakpoints. */
+  inset?: {
+    default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
+    sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
+    md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
+    lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
+    xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
+    '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
+  };
   /** Flag indicating if pagination is compact. */
   isCompact?: boolean;
   /** Flag indicating if pagination is disabled. */
@@ -275,6 +286,8 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
       ouiaId,
       ouiaSafe,
       perPageComponent,
+      usePageInsets,
+      inset,
       ...props
     } = this.props;
     const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
@@ -313,6 +326,8 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
         className={css(
           styles.pagination,
           variant === PaginationVariant.bottom && styles.modifiers.bottom,
+          usePageInsets && styles.modifiers.pageInsets,
+          formatBreakpointMods(inset, styles),
           isCompact && styles.modifiers.compact,
           isStatic && styles.modifiers.static,
           isSticky && styles.modifiers.sticky,

package/src/components/Pagination/__tests__/Pagination.test.tsx

@@ -119,6 +119,11 @@ describe('Pagination', () => {
       rerender(<Pagination titles={{optionsToggle: "test label"}}  perPageComponent="button" itemCount={20} />);
       expect(screen.getByLabelText("test label")).toHaveAttribute("id", id);
     });
+
+    test('page insets', () => {
+      render(<Pagination data-testid="pagination-insets" usePageInsets />);
+      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
+    });
   });
 
   describe('API', () => {
@@ -327,5 +332,21 @@ describe('Pagination', () => {
         expect(onPerPage).not.toHaveBeenCalled();
       });
     });
+
+    Object.values(['insetNone', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl'] as [
+      'insetNone',
+      'insetSm',
+      'insetMd',
+      'insetLg',
+      'insetXl',
+      'inset2xl'
+    ]).forEach(inset => {
+      test(`verify ${inset} inset breakpoints`, () => {
+        const { asFragment } = render(
+          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Pagination>
+        );
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
   });
 });