@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

package/src/components/DescriptionList/DescriptionList.tsx

@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
-import { formatBreakpointMods, useOUIAProps, OUIAProps } from '../../helpers';
+import { formatBreakpointMods } from '../../helpers';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
 import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
 import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
@@ -13,7 +13,7 @@ export interface BreakpointModifiers {
   '2xl'?: string;
 }
 
-export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'>, OUIAProps {
+export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'> {
   /** Anything that can be rendered inside of the list */
   children?: React.ReactNode;
   /** Additional classes added to the list */
@@ -71,10 +71,6 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
-  /** 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 setBreakpointModifiers = (prefix: string, modifiers: BreakpointModifiers) => {
@@ -103,11 +99,8 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   horizontalTermWidthModifier,
   orientation,
   style,
-  ouiaId,
-  ouiaSafe = true,
   ...props
 }: DescriptionListProps) => {
-  const ouiaProps = useOUIAProps(DescriptionList.displayName, ouiaId, ouiaSafe);
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
@@ -146,7 +139,6 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       )}
       style={style}
       {...props}
-      {...ouiaProps}
     >
       {children}
     </dl>

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

@@ -4,7 +4,7 @@ import { DescriptionList } from '../DescriptionList';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 
 test('Renders to match snapshot', () => {
-  const { asFragment } = render(<DescriptionList ouiaId="ouia-id" />);
+  const { asFragment } = render(<DescriptionList />);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -155,23 +155,3 @@ test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () =
     `--${styles.descriptionList}--GridTemplateColumns--min: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-sm: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-md: 100px; --${styles.descriptionList}--GridTemplateColumns--min-on-lg: 150px; --${styles.descriptionList}--GridTemplateColumns--min-on-xl: 200px; --${styles.descriptionList}--GridTemplateColumns--min-on-2xl: 300px;`
   );
 });
-
-test('Renders with custom ouiaId', () => {
-  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
-  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-component-id', 'test-id');
-});
-
-test('Renders with expected ouia component type', () => {
-  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
-  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-component-type', 'PF6/DescriptionList');
-});
-
-test('Renders with ouiaSafe defaulting to true', () => {
-  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
-  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-safe', 'true');
-});
-
-test('Renders with ouiaSafe=false when specified', () => {
-  render(<DescriptionList aria-label="list" ouiaId="test-id" ouiaSafe={false} />);
-  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-safe', 'false');
-});

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

@@ -4,9 +4,6 @@ exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dl
     class="pf-v6-c-description-list"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/DescriptionList"
-    data-ouia-safe="true"
   />
 </DocumentFragment>
 `;

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -20,7 +20,7 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
-import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
 import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
@@ -29,79 +29,66 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Basic
 
 ```ts file='./DescriptionListBasic.tsx'
-
 ```
 
 ### Term help text
 
 ```ts file='./DescriptionListWithTermHelpText.tsx'
-
 ```
 
 ### Default 2 col
 
 ```ts file='./DescriptionListDefaultTwoCol.tsx'
-
 ```
 
 ### Default 3 col on lg
 
 ```ts file='./DescriptionListDefaultThreeColLg.tsx'
-
 ```
 
 ### Horizontal
 
 ```ts file='./DescriptionListHorizontal.tsx'
-
 ```
 
 ### Horizontal using custom term width modifier
 
 ```ts file='./DescriptionListHorizontalCustomTermWidth.tsx'
-
 ```
 
 ### Horizontal 2 col
 
 ```ts file='./DescriptionListHorizontalTwoCol.tsx'
-
 ```
 
 ### Horizontal 3 col on lg
 
 ```ts file='./DescriptionListHorizontalThreeColLg.tsx'
-
 ```
 
 ### Compact
 
 ```ts file='./DescriptionListCompact.tsx'
-
 ```
 
 ### Compact horizontal
 
 ```ts file='./DescriptionListCompactHorizontal.tsx'
-
 ```
 
 ### Fluid horizontal
 
 ```ts file='./DescriptionListFluidHorizontal.tsx'
-
 ```
 
 ### Column fill
 
 ```ts file='./DescriptionListColumnFill.tsx'
-
 ```
 
 ### Large display size
 
 ```ts file='./DescriptionListWithLargeDisplaySize.tsx'
-
 ```
 
 ## Responsive column definitions
@@ -109,19 +96,16 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Default responsive columns
 
 ```ts file='./DescriptionListDefaultResponsiveColumns.tsx'
-
 ```
 
 ### Horizontal responsive columns
 
 ```ts file='./DescriptionListHorizontalResponsiveColumns.tsx'
-
 ```
 
 ### Responsive horizontal, vertical group layout
 
 ```ts file='./DescriptionListResponsiveHoriVertGroup.tsx'
-
 ```
 
 ## Auto-column-width
@@ -129,13 +113,11 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Default auto column width
 
 ```ts file='./DescriptionListDefaultAutoColumn.tsx'
-
 ```
 
 ### Horizontal auto column width
 
 ```ts file='./DescriptionListHorizontalAutoColumn.tsx'
-
 ```
 
 ## Inline grid
@@ -143,7 +125,6 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Default inline grid
 
 ```ts file='./DescriptionListDefaultInlineGrid.tsx'
-
 ```
 
 ## Card variants
@@ -153,25 +134,21 @@ A [card component](/components/card) can be used in place of a description list
 ### Description list with card
 
 ```ts file='./DescriptionListWithCard.tsx'
-
 ```
 
 ### Description list with large display size and card
 
 ```ts file='./DescriptionListWithLargeDisplaySizeAndCard.tsx'
-
 ```
 
 ### Display size with card, three column on large breakpoint
 
 ```ts file='./DescriptionListDisplaySizeAndCardThreeColumn.tsx'
-
 ```
 
 ### Display size with card, horizontal, modified term width
 
 ```ts file='./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx'
-
 ```
 
 ## Auto fit
@@ -179,19 +156,16 @@ A [card component](/components/card) can be used in place of a description list
 ### Auto-fit basic
 
 ```ts file='./DescriptionListAutoFitBasic.tsx'
-
 ```
 
 ### Auto-fit, min width modified grid template columns
 
 ```ts file='./DescriptionListAutoFitMinWidthModified.tsx'
-
 ```
 
 ### Auto-fit, min width modified, responsive grid template columns
 
 ```ts file='./DescriptionListAutoFitMinWidthResponsive.tsx'
-
 ```
 
 ## With icons
@@ -199,5 +173,4 @@ A [card component](/components/card) can be used in place of a description list
 ### Icons on terms
 
 ```ts file='./DescriptionListIconsOnTerms.tsx'
-
 ```

package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx

@@ -8,7 +8,7 @@ import {
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
-import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
 import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
@@ -25,7 +25,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
       </DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>
-      <DescriptionListTerm icon={<RhUiKeyIcon />}>Labels</DescriptionListTerm>
+      <DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>

package/src/components/Drawer/Drawer.tsx

@@ -1,7 +1,6 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { useOUIAProps, OUIAProps } from '../../helpers';
 
 export enum DrawerColorVariant {
   default = 'default',
@@ -12,7 +11,7 @@ export enum DrawerColorVariant {
   noBackground = 'no-background'
 }
 
-export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
   /** Content rendered in the drawer panel */
@@ -29,10 +28,6 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
-  /** 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 interface DrawerContextProps {
@@ -64,11 +59,8 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isStatic = false,
   position = 'end',
   onExpand = () => {},
-  ouiaId,
-  ouiaSafe = true,
   ...props
 }: DrawerProps) => {
-  const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe);
   const drawerRef = useRef<HTMLDivElement>(undefined);
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
 
@@ -87,7 +79,6 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
         )}
         ref={drawerRef}
         {...props}
-        {...ouiaProps}
       >
         {children}
       </div>

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { Button, ButtonProps } from '../Button';
+import { Button } from '../Button';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,30 +10,16 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   onClose?: () => void;
   /** Accessible label for the drawer close button */
   'aria-label'?: string;
-  /** Additional properties spread to the close button */
-  buttonProps?: Omit<ButtonProps, 'onClick'>;
 }
 
 export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',
-  buttonProps,
   ...props
-}: DrawerCloseButtonProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { onClick: _onClick, ...restButtonProps } = (buttonProps ?? {}) as ButtonProps;
-
-  return (
-    <div className={css(styles.drawerClose, className)} {...props}>
-      <Button
-        variant="plain"
-        onClick={onClose}
-        aria-label={ariaLabel}
-        icon={<RhMicronsCloseIcon />}
-        {...restButtonProps}
-      />
-    </div>
-  );
-};
+}: DrawerCloseButtonProps) => (
+  <div className={css(styles.drawerClose, className)} {...props}>
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
+  </div>
+);
 DrawerCloseButton.displayName = 'DrawerCloseButton';

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -8,7 +8,6 @@ import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
 import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
 import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
-import { IS_INERT } from '../../helpers/inert';
 
 export interface DrawerPanelFocusTrapObject {
   /** Enables a focus trap on the drawer panel content. This will also automatically
@@ -409,7 +408,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
         ...((defaultSize || minSize || maxSize) && boundaryCssVars),
         ...style
       }}
-      {...(shouldCollapseSpace && { inert: IS_INERT })}
+      {...(shouldCollapseSpace && { inert: '' })}
       {...props}
       ref={panel}
     >

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

@@ -39,7 +39,7 @@ Object.values([
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
   test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
     const { asFragment } = render(
-      <Drawer isExpanded={isExpanded} ouiaId="ouia-id">
+      <Drawer isExpanded={isExpanded}>
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>
@@ -187,47 +187,3 @@ test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
 
   expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
 });
-
-test('Renders with custom ouiaId', () => {
-  render(
-    <Drawer data-testid="drawer" ouiaId="test-id">
-      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
-        <DrawerContentBody>content</DrawerContentBody>
-      </DrawerContent>
-    </Drawer>
-  );
-  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-id', 'test-id');
-});
-
-test('Renders with expected ouia component type', () => {
-  render(
-    <Drawer data-testid="drawer" ouiaId="test-id">
-      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
-        <DrawerContentBody>content</DrawerContentBody>
-      </DrawerContent>
-    </Drawer>
-  );
-  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-type', 'PF6/Drawer');
-});
-
-test('Renders with ouiaSafe defaulting to true', () => {
-  render(
-    <Drawer data-testid="drawer" ouiaId="test-id">
-      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
-        <DrawerContentBody>content</DrawerContentBody>
-      </DrawerContent>
-    </Drawer>
-  );
-  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'true');
-});
-
-test('Renders with ouiaSafe=false when specified', () => {
-  render(
-    <Drawer data-testid="drawer" ouiaId="test-id" ouiaSafe={false}>
-      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
-        <DrawerContentBody>content</DrawerContentBody>
-      </DrawerContent>
-    </Drawer>
-  );
-  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
-});

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

@@ -4,9 +4,6 @@ exports[`Drawer expands from bottom 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
-    data-ouia-component-id="OUIA-Generated-Drawer-:rd:"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -22,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:re:"
+        id="pf-drawer-panel-:r8:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -39,7 +36,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -80,9 +77,6 @@ exports[`Drawer has resizable callback and id 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
-    data-ouia-component-id="OUIA-Generated-Drawer-:rj:"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -134,7 +128,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -176,9 +170,6 @@ exports[`Drawer has resizable css and color variants 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
-    data-ouia-component-id="OUIA-Generated-Drawer-:rg:"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -194,11 +185,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="pf-drawer-panel-:rh:"
+        id="pf-drawer-panel-:ra:"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-:rh:"
+          aria-controls="pf-drawer-panel-:ra:"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -231,7 +222,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -273,9 +264,6 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -292,7 +280,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r4:"
+        id="pf-drawer-panel-:r2:"
         inert=""
       />
     </div>
@@ -304,9 +292,6 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -323,7 +308,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r9:"
+        id="pf-drawer-panel-:r5:"
         inert=""
       />
     </div>
@@ -335,9 +320,6 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -353,7 +335,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r1:"
+        id="pf-drawer-panel-:r0:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -370,7 +352,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -411,9 +393,6 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -429,7 +408,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:rb:"
+        id="pf-drawer-panel-:r6:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -446,7 +425,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -487,9 +466,6 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -505,7 +481,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r6:"
+        id="pf-drawer-panel-:r3:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -522,7 +498,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"