@patternfly/react-core 6.6.1-prerelease.0 → 6.6.1-prerelease.2

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -33,6 +33,8 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -152,6 +154,8 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -268,6 +272,8 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -386,6 +392,8 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -504,6 +512,8 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       </div>
       <div
         class="pf-v6-c-progress pf-m-warning"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -639,6 +649,8 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -757,6 +769,8 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -873,6 +887,8 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div

package/src/components/Popover/Popover.tsx

@@ -11,9 +11,8 @@ import { PopoverCloseButton } from './PopoverCloseButton';
 import { PopoverArrow } from './PopoverArrow';
 import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidth';
 import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
-import { FocusTrap } from '../../helpers';
+import { FocusTrap, useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
-import { useSSRSafeId } from '../../helpers';
 
 export enum PopoverPosition {
   auto = 'auto',
@@ -35,7 +34,7 @@ export enum PopoverPosition {
  * that has a property specifically for passing in popover properties.
  */
 
-export interface PopoverProps {
+export interface PopoverProps extends OUIAProps {
   /** Text announced by screen reader when alert severity variant is set to indicate
    * severity level.
    */
@@ -213,6 +212,10 @@ export interface PopoverProps {
   withFocusTrap?: boolean;
   /** The z-index of the popover. */
   zIndex?: number;
+  /** 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;
 }
 
 const alertStyle = {
@@ -274,12 +277,15 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   hasNoPadding = false,
   hasAutoWidth = false,
   elementToFocus,
+  ouiaId,
+  ouiaSafe = true,
   ...rest
 }: PopoverProps) => {
   // could make this a prop in the future (true | false | 'toggle')
   // const hideOnClick = true;
   const generatedId = useSSRSafeId();
   const uniqueId = id || generatedId;
+  const ouiaProps = useOUIAProps(Popover.displayName, ouiaId, ouiaSafe);
   const triggerManually = isVisible !== null;
   const [visible, setVisible] = useState(false);
   const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
@@ -475,6 +481,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         maxWidth: hasCustomMaxWidth ? maxWidth : null
       }}
       {...rest}
+      {...ouiaProps}
     >
       <PopoverArrow />
       <PopoverContent>

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

@@ -1,5 +1,5 @@
 import { StrictMode } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Popover, PopoverPosition } from '../Popover';
 
 test('popover renders close-button, header and body', () => {
@@ -9,6 +9,7 @@ test('popover renders close-button, header and body', () => {
       position="top"
       isVisible
       hideOnOutsideClick
+      ouiaId="ouia-id"
       headerContent={<div>Popover Header</div>}
       bodyContent={
         <div>
@@ -114,3 +115,45 @@ test('popover renders in strict mode', () => {
   expect(consoleError).not.toHaveBeenCalled();
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders with custom ouiaId', () => {
+  render(
+    <Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(
+    <Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-type', 'PF6/Popover');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(
+    <Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(
+    <Popover
+      isVisible
+      ouiaId="test-id"
+      ouiaSafe={false}
+      headerContent={<div>Popover Header</div>}
+      bodyContent={<div>Popover body</div>}
+    >
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'false');
+});

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { ProgressContainer, ProgressMeasureLocation } from './ProgressContainer';
 import { AriaProps } from './ProgressBar';
-import { GenerateId } from '../../helpers';
+import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
 
 export enum ProgressSize {
   sm = 'sm',
@@ -11,7 +11,7 @@ export enum ProgressSize {
   lg = 'lg'
 }
 
-export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'> {
+export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'>, OUIAProps {
   /** Classname for progress component. */
   className?: string;
   /** Size variant of progress. */
@@ -50,6 +50,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   helperText?: React.ReactNode;
   /** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
   hideStatusIcon?: boolean;
+  /** 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;
 }
 
 class Progress extends Component<ProgressProps> {
@@ -70,7 +74,8 @@ class Progress extends Component<ProgressProps> {
     tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
     'aria-label': null as string,
     'aria-labelledby': null as string,
-    'aria-describedby': null as string
+    'aria-describedby': null as string,
+    ouiaSafe: true
   };
 
   render() {
@@ -94,6 +99,8 @@ class Progress extends Component<ProgressProps> {
       'aria-describedby': ariaDescribedBy,
       helperText,
       hideStatusIcon,
+      ouiaId,
+      ouiaSafe,
       ...props
     } = this.props;
 
@@ -147,6 +154,7 @@ class Progress extends Component<ProgressProps> {
                 className
               )}
               id={id}
+              {...getOUIAProps(Progress.displayName, ouiaId, ouiaSafe)}
             >
               <ProgressContainer
                 parentId={id}

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

@@ -3,7 +3,7 @@ import { Progress, ProgressSize } from '../Progress';
 import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';
 
 test('Simple progress', () => {
-  const { asFragment } = render(<Progress value={33} id="progress-simple-example" />);
+  const { asFragment } = render(<Progress value={33} id="progress-simple-example" ouiaId="ouia-id" />);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -109,6 +109,26 @@ test('Renders passed helper text', () => {
   expect(screen.getByText('Test helper text')).toBeVisible();
 });
 
+test('Renders with custom ouiaId', () => {
+  render(<Progress value={33} id="progress-ouia-id" ouiaId="test-id" title="Test" />);
+  expect(document.getElementById('progress-ouia-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(<Progress value={33} id="progress-ouia-type" ouiaId="test-id" title="Test" />);
+  expect(document.getElementById('progress-ouia-type')).toHaveAttribute('data-ouia-component-type', 'PF6/Progress');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(<Progress value={33} id="progress-ouia-safe" ouiaId="test-id" title="Test" />);
+  expect(document.getElementById('progress-ouia-safe')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(<Progress value={33} id="progress-ouia-unsafe" ouiaId="test-id" ouiaSafe={false} title="Test" />);
+  expect(document.getElementById('progress-ouia-unsafe')).toHaveAttribute('data-ouia-safe', 'false');
+});
+
 describe('hideStatusIcon prop behavior', () => {
   test('shows status icon by default when hideStatusIcon is not set', () => {
     render(<Progress id="default-status-icon-test" value={100} variant="success" />);

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

@@ -4,6 +4,8 @@ exports[`Progress measure location inside 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="inside-progress"
   >
     <div
@@ -36,6 +38,8 @@ exports[`Progress measure location inside and small should render large 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="large-progress"
   >
     <div
@@ -68,6 +72,8 @@ exports[`Progress measure location none 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="none-progress"
   >
     <div
@@ -94,6 +100,8 @@ exports[`Progress measure location outside 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-outside pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="outside-progress"
   >
     <div
@@ -130,6 +138,8 @@ exports[`Progress measure location top 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="top-progress"
   >
     <div
@@ -166,6 +176,8 @@ exports[`Progress size lg 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-lg pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="lg-progress"
   >
     <div
@@ -202,6 +214,8 @@ exports[`Progress size md 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="md-progress"
   >
     <div
@@ -238,6 +252,8 @@ exports[`Progress size sm 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-sm pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="sm-progress"
   >
     <div
@@ -274,6 +290,8 @@ exports[`Progress variant danger 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-danger pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="danger-progress"
   >
     <div
@@ -327,6 +345,8 @@ exports[`Progress variant success 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-success pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="success-progress"
   >
     <div
@@ -380,6 +400,8 @@ exports[`Progress variant warning 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-warning pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="warning-progress"
   >
     <div
@@ -433,6 +455,8 @@ exports[`Progress with aria-valuetext 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="progress-aria-valuetext"
   >
     <div
@@ -470,6 +494,9 @@ exports[`Simple progress 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="progress-simple-example"
   >
     <div
@@ -506,6 +533,8 @@ exports[`additional label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="additional-label"
   >
     <div
@@ -542,6 +571,8 @@ exports[`no value specified 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="no-value"
   >
     <div
@@ -578,6 +609,8 @@ exports[`value higher than maxValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="higher-max-value"
   >
     <div
@@ -614,6 +647,8 @@ exports[`value lower than minValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="lower-min-value"
   >
     <div
@@ -650,6 +685,8 @@ exports[`value scaled between minValue and maxValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="scaled-range-value"
   >
     <div
@@ -686,6 +723,8 @@ exports[`value scaled with maxValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="scaled-max-value"
   >
     <div
@@ -722,6 +761,8 @@ exports[`value scaled with minValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="scaled-min-value"
   >
     <div

package/src/components/Slider/Slider.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipProps } from '../Tooltip';
 import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
 import { getLanguageDirection } from '../../helpers/util';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -29,7 +30,7 @@ export type SliderOnChangeEvent =
   | React.FocusEvent<HTMLInputElement>;
 
 /** The main slider component. */
-export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
    * to snap to the closest value.
    */
@@ -93,6 +94,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   thumbAriaValueText?: string;
   /** Current value of the slider.  */
   value?: number;
+  /** 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;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -126,8 +131,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   showBoundaries = true,
   'aria-describedby': ariaDescribedby,
   'aria-labelledby': ariaLabelledby,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: SliderProps) => {
+  const ouiaProps = useOUIAProps(Slider.displayName, ouiaId, ouiaSafe);
   const sliderRailRef = useRef<HTMLDivElement>(undefined);
   const thumbRef = useRef<HTMLDivElement>(undefined);
 
@@ -457,6 +465,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       className={css(styles.slider, className, isDisabled && styles.modifiers.disabled)}
       style={{ ...style, ...inputStyle }}
       {...props}
+      {...ouiaProps}
     >
       {(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
       <div className={css(styles.sliderMain)}>

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

@@ -5,7 +5,7 @@ import { Button } from '../../Button';
 
 describe('slider', () => {
   test('renders continuous slider', () => {
-    const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} />);
+    const { asFragment } = render(<Slider value={50} isInputVisible inputValue={50} ouiaId="ouia-id" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -91,6 +91,26 @@ describe('slider', () => {
   });
 });
 
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/Slider');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(<Slider value={50} ouiaId="test-id" ouiaSafe={false} />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});
+
 test('renders slider with aria-labelledby', () => {
   render(
     <>

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

@@ -4,6 +4,9 @@ exports[`slider renders continuous slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -62,7 +65,7 @@ exports[`slider renders continuous slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -78,6 +81,9 @@ exports[`slider renders continuous slider with custom steps 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:r7:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -141,6 +147,9 @@ exports[`slider renders disabled slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider pf-m-disabled"
+    data-ouia-component-id="OUIA-Generated-Slider-:rh:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -198,6 +207,9 @@ exports[`slider renders discrete slider 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:r3:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 40%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -256,7 +268,7 @@ exports[`slider renders discrete slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -272,6 +284,9 @@ exports[`slider renders discrete slider with custom steps 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:r6:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -364,6 +379,9 @@ exports[`slider renders slider with input 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:r8:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -428,7 +446,7 @@ exports[`slider renders slider with input 1`] = `
             <input
               aria-invalid="false"
               aria-label="Slider value input"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:ra:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               type="number"
@@ -455,6 +473,9 @@ exports[`slider renders slider with input above thumb 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:rb:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 2;"
   >
     <div
@@ -518,7 +539,7 @@ exports[`slider renders slider with input above thumb 1`] = `
               <input
                 aria-invalid="false"
                 aria-label="Slider value input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:rd:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 type="number"
@@ -546,6 +567,9 @@ exports[`slider renders slider with input actions 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:re:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div
@@ -554,7 +578,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Minus"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -613,7 +637,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Plus"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rg:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -627,6 +651,9 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-slider"
+    data-ouia-component-id="OUIA-Generated-Slider-:ri:"
+    data-ouia-component-type="PF6/Slider"
+    data-ouia-safe="true"
     style="--pf-v6-c-slider--value: 50%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
   >
     <div

package/src/demos/DashboardHeader.tsx

@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.read}
+                    variant={NotificationBadgeVariant.plain}
                     onClick={() => {}}
                   />
                 </ToolbarItem>