@patternfly/react-core 4.252.2 → 4.253.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.252.2",
+  "version": "4.253.1",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "5e61ce3e4bc89c664c84c7b2b3608fc40c900c3e"
+  "gitHead": "ef07e5bd27b1048e5f63b88a822ef3357e8c8e3e"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -9,6 +9,7 @@ import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { ClipboardCopyButton } from './ClipboardCopyButton';
 import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
+import { getOUIAProps, OUIAProps } from '../../helpers';
 
 export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
   const clipboard = event.currentTarget.parentElement;
@@ -32,7 +33,7 @@ export interface ClipboardCopyState {
   copied: boolean;
 }
 
-export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes added to the clipboard copy container. */
   className?: string;
   /** Tooltip message to display when hover the copy button */
@@ -86,6 +87,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   children: React.ReactNode;
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopyState> {
@@ -118,7 +123,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     onChange: (): any => undefined,
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
-    additionalActions: null
+    additionalActions: null,
+    ouiaSafe: true
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -168,6 +174,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       position,
       className,
       additionalActions,
+      ouiaId,
+      ouiaSafe,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -183,6 +191,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
           className
         )}
         {...divProps}
+        {...getOUIAProps(ClipboardCopy.displayName, ouiaId, ouiaSafe)}
       >
         {variant === 'inline-compact' && (
           <GenerateId prefix="">

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -4,6 +4,8 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-clipboard-copy string"
+    data-ouia-component-type="PF4/ClipboardCopy"
+    data-ouia-safe="true"
   >
     <div
       class="pf-c-clipboard-copy__group"

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -3,6 +3,7 @@ id: Clipboard copy
 section: components
 cssPrefix: pf-c-copyclipboard
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
+ouia: true
 ---
 
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';

package/src/components/Slider/Slider.tsx

@@ -416,9 +416,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             {buildSteps()}
           </div>
         )}
-        {isInputVisible && inputPosition === 'aboveThumb' && (
-          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
-        )}
         {hasTooltipOverThumb ? (
           <Tooltip entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
@@ -426,6 +423,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         ) : (
           thumbComponent
         )}
+        {isInputVisible && inputPosition === 'aboveThumb' && (
+          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
+        )}
       </div>
       {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
       {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -475,6 +475,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
+      <div
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
       <div
         class="pf-c-slider__value pf-m-floating"
       >
@@ -498,17 +509,6 @@ exports[`slider renders slider with input above thumb 1`] = `
           </span>
         </div>
       </div>
-      <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
     </div>
   </div>
 </DocumentFragment>

package/src/components/Wizard/WizardNav.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends OUIAProps {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the nav element */
@@ -20,8 +21,12 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isOpen = false,
-  returnList = false
+  returnList = false,
+  ouiaId,
+  ouiaSafe = true
 }: WizardNavProps) => {
+  const ouiaProps = useOUIAProps(WizardNav.displayName, ouiaId, ouiaSafe);
+
   const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
 
   if (returnList) {
@@ -33,6 +38,7 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
       className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...ouiaProps}
     >
       <ol className={css(styles.wizardNavList)}>{children}</ol>
     </nav>

package/src/components/Wizard/WizardNavItem.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface WizardNavItemProps {
+export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the nav item */
@@ -37,8 +38,11 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   href = null,
   isExpandable = false,
   id,
+  ouiaId,
+  ouiaSafe = true,
   ...rest
 }: WizardNavItemProps) => {
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
   const NavItemComponent = navItemComponent;
 
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -82,6 +86,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
+        {...ouiaProps}
       >
         {isExpandable ? (
           <>

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap

@@ -6,6 +6,9 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
     aria-label="string"
     aria-labelledby="string"
     class="pf-c-wizard__nav"
+    data-ouia-component-id="OUIA-Generated-WizardNav-1"
+    data-ouia-component-type="PF4/WizardNav"
+    data-ouia-safe="true"
   >
     <ol
       class="pf-c-wizard__nav-list"

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -8,6 +8,9 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
     <button
       aria-current="false"
       class="pf-c-wizard__nav-link"
+      data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+      data-ouia-component-type="PF4/WizardNavItem"
+      data-ouia-safe="true"
     />
     ReactNode
   </li>

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

@@ -94,6 +94,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-1"
           class="pf-c-wizard__nav"
+          data-ouia-component-id="OUIA-Generated-WizardNav-3"
+          data-ouia-component-type="PF4/WizardNav"
+          data-ouia-safe="true"
         >
           <ol
             class="pf-c-wizard__nav-list"
@@ -104,6 +107,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-7"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 A
               </button>
@@ -115,6 +121,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 aria-current="false"
                 aria-expanded="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-8"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 <span
                   class="pf-c-wizard__nav-link-text"
@@ -152,6 +161,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-9"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                   >
                     B-1
                   </button>
@@ -162,6 +174,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-10"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                   >
                     B-2
                   </button>
@@ -174,6 +189,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-11"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 C
               </button>
@@ -184,6 +202,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-12"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 D
               </button>
@@ -341,6 +362,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-0"
           class="pf-c-wizard__nav"
+          data-ouia-component-id="OUIA-Generated-WizardNav-1"
+          data-ouia-component-type="PF4/WizardNav"
+          data-ouia-safe="true"
         >
           <ol
             class="pf-c-wizard__nav-list"
@@ -351,6 +375,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-A"
               >
                 A
@@ -362,6 +389,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-2"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-B"
               >
                 B
@@ -375,6 +405,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-3"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                     id="step-B-1"
                   >
                     B-1
@@ -386,6 +419,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-c-wizard__nav-link"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-4"
+                    data-ouia-component-type="PF4/WizardNavItem"
+                    data-ouia-safe="true"
                     id="step-B-2"
                   >
                     B-2
@@ -399,6 +435,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-5"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-C"
               >
                 C
@@ -410,6 +449,9 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-c-wizard__nav-link"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-6"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
                 id="step-D"
               >
                 D
@@ -525,6 +567,9 @@ exports[`Wizard bare wiz 1`] = `
       >
         <nav
           class="pf-c-wizard__nav"
+          data-ouia-component-id="OUIA-Generated-WizardNav-5"
+          data-ouia-component-type="PF4/WizardNav"
+          data-ouia-safe="true"
         >
           <ol
             class="pf-c-wizard__nav-list"
@@ -535,6 +580,9 @@ exports[`Wizard bare wiz 1`] = `
               <button
                 aria-current="step"
                 class="pf-c-wizard__nav-link pf-m-current"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
+                data-ouia-component-type="PF4/WizardNavItem"
+                data-ouia-safe="true"
               >
                 A
               </button>

package/src/components/Wizard/examples/Wizard.md

@@ -4,6 +4,7 @@ section: components
 cssPrefix: pf-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
+ouia: true
 ---
 
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
@@ -812,10 +813,10 @@ class GetCurrentStepWizard extends React.Component {
       step: 1
     };
     this.onCurrentStepChanged = ({ id }) => {
-        this.setState({
-            step: id
-        });
-    }
+      this.setState({
+        step: id
+      });
+    };
     this.closeWizard = () => {
       console.log('close wizard');
     };