@patternfly/react-core 4.203.0 → 4.204.0

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

@@ -30,6 +30,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
@@ -242,6 +243,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
@@ -454,6 +456,7 @@ exports[`Pagination component render custom start end 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
@@ -835,6 +838,7 @@ exports[`Pagination component render last page 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
@@ -1047,6 +1051,7 @@ exports[`Pagination component render limited number of pages 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
@@ -1250,6 +1255,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
@@ -1450,6 +1456,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
@@ -1618,6 +1625,215 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 </DocumentFragment>
 `;
 
+exports[`Pagination component render should render correctly button variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-pagination"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-17"
+    data-ouia-component-type="PF4/Pagination"
+    data-ouia-safe="true"
+    id="pagination-options-menu-18"
+    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+  >
+    <div
+      class="pf-c-pagination__total-items"
+    >
+      <b>
+        -9 - 10
+      </b>
+       of 
+      <b>
+        20
+      </b>
+       
+    </div>
+    <div
+      class="pf-c-options-menu"
+      data-ouia-component-type="PF4/PaginationOptionsMenu"
+      data-ouia-safe="true"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label=""
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-17"
+        type="button"
+      >
+        <span
+          class="pf-c-options-menu__toggle-text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-c-options-menu__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <nav
+      aria-label="Pagination"
+      class="pf-c-pagination__nav"
+    >
+      <div
+        class="pf-c-pagination__nav-control pf-m-first"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to first page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="first"
+          data-ouia-component-id="OUIA-Generated-Button-plain-71"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to previous page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="previous"
+          data-ouia-component-id="OUIA-Generated-Button-plain-72"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-page-select"
+      >
+        <input
+          aria-label="Current page"
+          class="pf-c-form-control"
+          max="2"
+          min="1"
+          type="number"
+          value="1"
+        />
+        <span
+          aria-hidden="true"
+        >
+          of 2
+        </span>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to next page"
+          class="pf-c-button pf-m-plain"
+          data-action="next"
+          data-ouia-component-id="OUIA-Generated-Button-plain-73"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control pf-m-last"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to last page"
+          class="pf-c-button pf-m-plain"
+          data-action="last"
+          data-ouia-component-id="OUIA-Generated-Button-plain-74"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+    </nav>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
@@ -1662,6 +1878,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
@@ -1800,6 +2017,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
@@ -2016,6 +2234,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
@@ -2228,6 +2447,7 @@ exports[`Pagination component render should render correctly top 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
@@ -2440,6 +2660,7 @@ exports[`Pagination component render titles 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
@@ -2652,6 +2873,7 @@ exports[`Pagination component render up drop direction 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
@@ -2864,6 +3086,7 @@ exports[`Pagination component render zero results 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"

package/src/components/Pagination/examples/Pagination.md

@@ -38,6 +38,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -77,6 +78,7 @@ class PaginationBottom extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={333}
         widgetId="pagination-options-menu-bottom"
         perPage={this.state.perPage}
@@ -89,6 +91,7 @@ class PaginationBottom extends React.Component {
   }
 }
 ```
+
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
@@ -106,6 +109,7 @@ PaginationIndeterminate = () => {
 
   return (
     <Pagination
+      perPageComponent="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>
@@ -122,7 +126,7 @@ PaginationIndeterminate = () => {
       onPerPageSelect={onPerPageSelect}
     />
   );
-}
+};
 ```
 
 ### Disabled
@@ -155,6 +159,7 @@ class PaginationDisabled extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -198,6 +203,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={0}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -240,6 +246,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={15}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -282,6 +289,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -335,6 +343,7 @@ class PaginationSticky extends React.Component {
         {this.state.isTopSticky && (
           <React.Fragment>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
@@ -368,6 +377,7 @@ class PaginationSticky extends React.Component {
               ))}
             </Gallery>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -22,13 +22,11 @@ export interface ProgressStepProps
   description?: string;
   /** ID of the title of the progress step. */
   titleId?: string;
-  /** Popover for a progress step. */
-  popover?: React.ReactNode;
-  /** @hide Forwarded reference to title container */
-  innerRef?: React.Ref<any>;
   /** Accessible label for the progress step. Should communicate all information being communicated by the progress
    * step's icon, including the variant and the completed status. */
   'aria-label'?: string;
+  /** Forwards the step ref to rendered function.  Use this prop to add a popover to the step.*/
+  popoverRender?: (stepRef: React.RefObject<any>) => React.ReactNode;
 }
 
 const variantIcons = {
@@ -49,7 +47,7 @@ const variantStyle = {
   danger: styles.modifiers.danger
 };
 
-const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
+export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
   children,
   className,
   variant,
@@ -57,13 +55,13 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   description,
   icon,
   titleId,
-  popover,
-  innerRef,
   'aria-label': ariaLabel,
+  popoverRender,
   ...props
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
-  const Component = popover !== undefined ? 'span' : 'div';
+  const Component = popoverRender !== undefined ? 'span' : 'div';
+  const stepRef = React.useRef();
 
   if (props.id === undefined || titleId === undefined) {
     /* eslint-disable no-console */
@@ -89,14 +87,14 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
       </div>
       <div className={css(styles.progressStepperStepMain)}>
         <Component
-          className={css(styles.progressStepperStepTitle, popover && styles.modifiers.helpText)}
+          className={css(styles.progressStepperStepTitle, popoverRender && styles.modifiers.helpText)}
           id={titleId}
-          ref={innerRef}
-          {...(popover && { tabIndex: 0, role: 'button', type: 'button' })}
+          ref={stepRef}
+          {...(popoverRender && { tabIndex: 0, role: 'button', type: 'button' })}
           {...(props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })}
         >
           {children}
-          {popover}
+          {popoverRender && popoverRender(stepRef)}
         </Component>
         {description && <div className={css(styles.progressStepperStepDescription)}>{description}</div>}
       </div>
@@ -104,7 +102,4 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   );
 };
 
-export const ProgressStep = React.forwardRef((props: ProgressStepProps, ref: React.Ref<HTMLSpanElement>) => (
-  <ProgressStepBase innerRef={ref} {...props} />
-));
 ProgressStep.displayName = 'ProgressStep';

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

@@ -87,7 +87,7 @@ describe('ProgressStep', () => {
   });
 
   test('renders help text styling', () => {
-    const view = render(<ProgressStep popover={<div></div>}>Title</ProgressStep>);
+    const view = render(<ProgressStep popoverRender={({ stepRef }) => (<div></div>)}>Title</ProgressStep>);
     expect(view.container).toMatchSnapshot();
   });
 

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

@@ -331,17 +331,13 @@ import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 
 ### With help popover
 
-To add a popover to a progress step, set the `popover` and `ref` properties on the `ProgressStep` component and the `reference` property on the `Popover` component.
+To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
 
 ```js
 import React from 'react';
 import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
 
 PopoverProgressStep = () => {
-  const firstStepRef = React.useRef();
-  const secondStepRef = React.useRef();
-  const thirdStepRef = React.useRef();
-
   return (
     <ProgressStepper>
       <ProgressStep
@@ -349,55 +345,52 @@ PopoverProgressStep = () => {
         id="popover-step1"
         titleId="popover-step1-title"
         aria-label="completed step with popover, step with success"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="First step help"
             headerContent={<div>First step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={firstStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={firstStepRef}
+           )}
       >
-        First Step
+        First step
       </ProgressStep>
       <ProgressStep
         variant="danger"
         id="popover-step2"
         titleId="popover-step2-title"
         aria-label="completed step with popover, step with danger"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="Second step help"
             headerContent={<div>Second step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={secondStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={secondStepRef}
+        )}
       >
-        Second Step
+        Second step
       </ProgressStep>
       <ProgressStep
         variant="info"
         id="popover-step3"
         titleId="popover-step3-title"
         aria-label="step with popover"
-        popover={
+        popoverRender={(stepRef) => (
           <Popover
             aria-label="Third step help"
             headerContent={<div>Third step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={thirdStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
+        )}
         isCurrent
-        ref={thirdStepRef}
       >
-        Third Step
+        Third step
       </ProgressStep>
       <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
         Fourth step

package/src/components/Switch/Switch.tsx

@@ -10,19 +10,21 @@ export interface SwitchProps
     OUIAProps {
   /** id for the label. */
   id?: string;
-  /** Additional classes added to the Switch */
+  /** Additional classes added to the switch */
   className?: string;
   /** Text value for the label when on */
   label?: React.ReactNode;
   /** Text value for the label when off */
   labelOff?: React.ReactNode;
-  /** Flag to show if the Switch is checked. */
+  /** Flag to show if the switch is checked. */
   isChecked?: boolean;
-  /** Flag to show if the Switch is disabled. */
+  /** Flag to show if the switch has a check icon. */
+  hasCheckIcon?: boolean;
+  /** Flag to show if the switch is disabled. */
   isDisabled?: boolean;
-  /** A callback for when the Switch selection changes. (isChecked, event) => {} */
+  /** A callback for when the switch selection changes. (isChecked, event) => {} */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Adds accessible text to the Switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
+  /** Adds accessible text to the switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
   'aria-label'?: string;
   /** Flag to reverse the layout of toggle and label (toggle on right). */
   isReversed?: boolean;
@@ -61,6 +63,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
       label,
       labelOff,
       isChecked,
+      hasCheckIcon,
       isDisabled,
       onChange,
       isReversed,
@@ -96,6 +99,11 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             >
               {label}
             </span>
+            {hasCheckIcon && (
+              <div className={css(styles.switchToggleIcon)} aria-hidden="true">
+                <CheckIcon noVerticalAlign />
+              </div>
+            )}
             <span
               className={css(styles.switchLabel, styles.modifiers.off)}
               id={isAriaLabelledBy ? `${this.id}-off` : null}