chore(DescriptionList): Include OUIAProps for DescriptionList (#12595)

Add OUIA attribute support to DescriptionList for better test automation.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mshriver

packages/react-core/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 } from '../../helpers';
+import { formatBreakpointMods, useOUIAProps, OUIAProps } 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'> {
+export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'>, OUIAProps {
   /** Anything that can be rendered inside of the list */
   children?: React.ReactNode;
   /** Additional classes added to the list */
@@ -71,6 +71,10 @@ 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) => {
@@ -99,8 +103,11 @@ 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,
@@ -139,6 +146,7 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       )}
       style={style}
       {...props}
+      {...ouiaProps}
     >
       {children}
     </dl>

packages/react-core/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 />);
+  const { asFragment } = render(<DescriptionList ouiaId="ouia-id" />);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -155,3 +155,23 @@ 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');
+});

packages/react-core/src/components/DescriptionList/__tests__/__snapshots__/DescriptionList.test.tsx.snap

@@ -4,6 +4,9 @@ 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>
 `;

packages/react-core/src/helpers/OUIA/OUIA.md

@@ -56,6 +56,7 @@ component.
 * [Chip](/components/chip)
 * [ClipboardCopy](/components/clipboard-copy)
 * [Content](/components/content)
+* [DescriptionList](/components/description-list)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [ExpandableSection](/components/expandable-section)