@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.1

package/src/components/NumberInput/examples/NumberInput.md

@@ -1,7 +1,7 @@
 ---
 id: Number input
 section: components
-cssPrefix: pf-c-number-input
+cssPrefix: pf-v5-c-number-input
 propComponents: ['NumberInput']
 ---
 

package/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

@@ -18,7 +18,7 @@ export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropd
   <OverflowMenuContext.Consumer>
     {(value) =>
       (!isShared || value.isBelowBreakpoint) && (
-        <DropdownItem component="button" itemId={itemId} {...additionalProps}>
+        <DropdownItem component="button" value={itemId} {...additionalProps}>
           {children}
         </DropdownItem>
       )

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -1,7 +1,7 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-c-overflow-menu
+cssPrefix: pf-v5-c-overflow-menu
 propComponents:
   [
     'OverflowMenu',

package/src/components/Page/__tests__/PageSidebarBody.test.tsx

@@ -18,7 +18,7 @@ test('Renders with children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-page__sidebar-body by default', () => {
+test('Renders with class pf-v5-c-page__sidebar-body by default', () => {
   render(<PageSidebarBody>Test</PageSidebarBody>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-page__sidebar-body');

package/src/components/Page/examples/Page.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-c-page
+cssPrefix: pf-v5-c-page
 propComponents:
   [
     'Page',

package/src/components/Page/examples/page.css

@@ -1,3 +1,3 @@
-.pf-c-page__sidebar-body {
+.pf-v5-c-page__sidebar-body {
   color: var(--pf-v5-global--Color--light-100);
 }

package/src/components/Pagination/Navigation.tsx

@@ -113,10 +113,23 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     lastPage: number,
     onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
   ): void {
+    const allowedKeys = [
+      'Tab',
+      'Backspace',
+      'Delete',
+      'ArrowLeft',
+      'ArrowRight',
+      'Home',
+      'End',
+      'ArrowUp',
+      'ArrowDown'
+    ];
     if (event.key === KeyTypes.Enter) {
       const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
       onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
       this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
+    } else if (!/^\d*$/.test(event.key) && !allowedKeys.includes(event.key)) {
+      event.preventDefault();
     }
   }
 

package/src/components/Pagination/Pagination.tsx

@@ -210,8 +210,8 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
     ofWord: 'of'
   },
   firstPage = 1,
-  page: pageProp = 0,
-  offset = 0,
+  page: pageProp = 1,
+  offset = null,
   isLastFullPageShown = false,
   itemsStart = null,
   itemsEnd = null,
@@ -245,11 +245,8 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
 
   let page = pageProp;
-  if (!page && offset) {
-    page = Math.ceil(offset / perPage);
-  }
-  if (page === 0 && !itemCount) {
-    page = 1;
+  if (offset !== null) {
+    page = Math.max(Math.ceil(offset / perPage), 1);
   }
 
   const lastPage = getLastPage();

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -177,9 +177,19 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       variant="plainText"
       aria-haspopup="listbox"
     >
-      {typeof toggleTemplate === 'string' ? (
-        fillTemplate(toggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })
-      ) : (
+      {toggleTemplate &&
+        typeof toggleTemplate === 'string' &&
+        fillTemplate(toggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })}
+      {toggleTemplate &&
+        typeof toggleTemplate !== 'string' &&
+        (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement)({
+          firstIndex,
+          lastIndex,
+          ofWord,
+          itemCount,
+          itemsTitle
+        })}
+      {!toggleTemplate && (
         <ToggleTemplate
           firstIndex={firstIndex}
           lastIndex={lastIndex}

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

@@ -29,7 +29,7 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}
-          </b>{' '}
+          </b>Custom toggle template
           of<b>{itemCount}</b> {itemsTitle}
         </React.Fragment>
       )}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
         <b>
           0 - 0
         </b>
-         of 
+        Custom toggle template of
         <b>
           0
         </b>

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

@@ -1159,7 +1159,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     <div
       class="pf-v5-c-pagination__total-items"
     >
-      -9 - 10 - 40 - 
+      1 - 10 - 40 - 
     </div>
     <div>
       <button
@@ -1172,7 +1172,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         <span
           class="pf-v5-c-menu-toggle__text"
         >
-          -9 - 10 - 40 - 
+          1 - 10 - 40 - 
         </span>
         <span
           class="pf-v5-c-menu-toggle__controls"
@@ -1341,7 +1341,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -1361,7 +1361,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -1536,7 +1536,7 @@ exports[`Pagination component render custom start end 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -1729,7 +1729,7 @@ exports[`Pagination component render empty per page options 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -2078,7 +2078,7 @@ exports[`Pagination component render limited number of pages 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -19 - 20
+        1 - 20
       </b>
        of 
       <b>
@@ -2098,7 +2098,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -19 - 20
+            1 - 20
           </b>
            of 
           <b>
@@ -2284,7 +2284,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -2467,7 +2467,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -2642,7 +2642,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -2662,7 +2662,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -2767,7 +2767,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -2788,7 +2788,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -2966,7 +2966,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -2986,7 +2986,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -3161,7 +3161,7 @@ exports[`Pagination component render should render correctly top 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -3181,7 +3181,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -3356,7 +3356,7 @@ exports[`Pagination component render titles 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -3376,7 +3376,7 @@ exports[`Pagination component render titles 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>
@@ -3551,7 +3551,7 @@ exports[`Pagination component render up drop direction 1`] = `
       class="pf-v5-c-pagination__total-items"
     >
       <b>
-        -9 - 10
+        1 - 10
       </b>
        of 
       <b>
@@ -3571,7 +3571,7 @@ exports[`Pagination component render up drop direction 1`] = `
           class="pf-v5-c-menu-toggle__text"
         >
           <b>
-            -9 - 10
+            1 - 10
           </b>
            of 
           <b>

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

@@ -20,12 +20,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel', () => {
+test('Renders with the class pf-v5-c-panel', () => {
   render(<Panel>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel');
 });
 
-test('Renders with only the class pf-c-panel by default', () => {
+test('Renders with only the class pf-v5-c-panel by default', () => {
   render(<Panel>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel', { exact: true });
 });

package/src/components/Panel/__tests__/PanelFooter.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__footer', () => {
+test('Renders with the class pf-v5-c-panel__footer', () => {
   render(<PanelFooter>Test</PanelFooter>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer');
 });
 
-test('Renders with only the class pf-c-panel__footer by default', () => {
+test('Renders with only the class pf-v5-c-panel__footer by default', () => {
   render(<PanelFooter>Test</PanelFooter>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer', { exact: true });
 });

package/src/components/Panel/__tests__/PanelHeader.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__header', () => {
+test('Renders with the class pf-v5-c-panel__header', () => {
   render(<PanelHeader>Test</PanelHeader>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header');
 });
 
-test('Renders with only the class pf-c-panel__header by default', () => {
+test('Renders with only the class pf-v5-c-panel__header by default', () => {
   render(<PanelHeader>Test</PanelHeader>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header', { exact: true });
 });

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__main', () => {
+test('Renders with the class pf-v5-c-panel__main', () => {
   render(<PanelMain>Test</PanelMain>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main');
 });
 
-test('Renders with only the class pf-c-panel__main by default', () => {
+test('Renders with only the class pf-v5-c-panel__main by default', () => {
   render(<PanelMain>Test</PanelMain>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main', { exact: true });
 });

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__main-body', () => {
+test('Renders with the class pf-v5-c-panel__main-body', () => {
   render(<PanelMainBody>Test</PanelMainBody>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body');
 });
 
-test('Renders with only the class pf-c-panel__main-body by default', () => {
+test('Renders with only the class pf-v5-c-panel__main-body by default', () => {
   render(<PanelMainBody>Test</PanelMainBody>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body', { exact: true });
 });

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-c-panel
+cssPrefix: pf-v5-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/examples/Popover.md

@@ -1,7 +1,7 @@
 ---
 id: Popover
 section: components
-cssPrefix: pf-c-popover
+cssPrefix: pf-v5-c-popover
 propComponents: ['Popover']
 ---
 

package/src/components/Progress/Progress.tsx

@@ -42,7 +42,7 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/ProgressContainer.tsx

@@ -54,7 +54,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -17,7 +17,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');

package/src/components/Progress/examples/Progress.md

@@ -1,7 +1,7 @@
 ---
 id: Progress
 section: components
-cssPrefix: pf-c-progress
+cssPrefix: pf-v5-c-progress
 propComponents: ['Progress']
 ---
 
@@ -76,5 +76,5 @@ propComponents: ['Progress']
 ```
 
 ### Helper text
-```ts file="./ProgressHelperText.tsx" isBeta
+```ts file="./ProgressHelperText.tsx"
 ```

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -23,7 +23,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress-stepper__step on the containing li element', () => {
+test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
 });
@@ -77,7 +77,7 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-c-progress-stepper__step-icon', () => {
+test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
   expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
 });
@@ -112,12 +112,12 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-c-progress-stepper__step-description', () => {
+test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
   expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
 });
 
-test('Renders children inside class pf-c-progress-stepper__step-title', () => {
+test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
 });

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-progress-stepper by default', () => {
+test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
 });
 
-test('Renders with class name pf-c-progress-stepper', () => {
+test('Renders with class name pf-v5-c-progress-stepper', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
 });

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,9 +1,8 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-c-progress-stepper
+cssPrefix: pf-v5-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
-beta: true
 ---
 
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';

package/src/components/Radio/Radio.tsx

@@ -7,8 +7,12 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
     OUIAProps {
-  /** Additional classes added to the radio. */
+  /** Additional classes added to the radio wrapper.  This will be a div element if
+   * isLabelWrapped is true, otherwise this will be a label element.
+   */
   className?: string;
+  /** Additional classed added to the radio input */
+  inputClassName?: string;
   /** Id of the radio. */
   id: string;
   /** Flag to show if the radio label is wrapped on small screen. */
@@ -70,6 +74,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
       'aria-label': ariaLabel,
       checked,
       className,
+      inputClassName,
       defaultChecked,
       isLabelWrapped,
       isLabelBeforeButton,
@@ -93,7 +98,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
     const inputRendered = (
       <input
         {...props}
-        className={css(styles.radioInput)}
+        className={css(styles.radioInput, inputClassName)}
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-c-radio
+cssPrefix: pf-v5-c-radio
 propComponents: ['Radio']
 ouia: true
 ---