[EuiDescriptionList] titleProps and descriptionProps extends CommonProps

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845))
+- Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166))
 
 **Bug fixes**
 

src/components/description_list/__snapshots__/description_list.test.tsx.snap

@@ -1,5 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[` 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row"
+>
+  <dt
+    class="euiDescriptionList__title"
+  >
+    Title 1
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    Description 1
+  </dd>
+  <dt
+    class="euiDescriptionList__title"
+  >
+    <em>
+      Title 2
+    </em>
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    <code>
+      Description 2
+    </code>
+  </dd>
+  <dt
+    class="euiDescriptionList__title"
+  >
+    Title 3
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    Description 3
+  </dd>
+</dl>
+`;
+
 exports[`EuiDescriptionList is rendered 1`] = `
 <dl
   aria-label="aria-label"
@@ -28,7 +69,7 @@ exports[`EuiDescriptionList props compressed is rendered 1`] = `
 />
 `;
 
-exports[`EuiDescriptionList props listItems is rendered as strings and elements 1`] = `
+exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
 <dl
   class="euiDescriptionList euiDescriptionList--row"
 >
@@ -38,7 +79,9 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
     Title 1
   </dt>
   <dd
-    class="euiDescriptionList__description"
+    aria-label="aria-label"
+    class="euiDescriptionList__description testClass1 testClass2"
+    data-test-subj="test subject string"
   >
     Description 1
   </dd>
@@ -50,7 +93,9 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
     </em>
   </dt>
   <dd
-    class="euiDescriptionList__description"
+    aria-label="aria-label"
+    class="euiDescriptionList__description testClass1 testClass2"
+    data-test-subj="test subject string"
   >
     <code>
       Description 2
@@ -61,6 +106,55 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
   >
     Title 3
   </dt>
+  <dd
+    aria-label="aria-label"
+    class="euiDescriptionList__description testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Description 3
+  </dd>
+</dl>
+`;
+
+exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row"
+>
+  <dt
+    aria-label="aria-label"
+    class="euiDescriptionList__title testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Title 1
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    Description 1
+  </dd>
+  <dt
+    aria-label="aria-label"
+    class="euiDescriptionList__title testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    <em>
+      Title 2
+    </em>
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    <code>
+      Description 2
+    </code>
+  </dd>
+  <dt
+    aria-label="aria-label"
+    class="euiDescriptionList__title testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Title 3
+  </dt>
   <dd
     class="euiDescriptionList__description"
   >

src/components/description_list/description_list.test.tsx

@@ -21,31 +21,54 @@ describe('EuiDescriptionList', () => {
     expect(component).toMatchSnapshot();
   });
 
+  const listItems = [
+    {
+      title: 'Title 1',
+      description: 'Description 1',
+    },
+    {
+      title: <em>Title 2</em>,
+      description: <code>Description 2</code>,
+    },
+    {
+      title: 'Title 3',
+      description: 'Description 3',
+    },
+  ];
   describe('props', () => {
     describe('listItems', () => {
-      test('is rendered as strings and elements', () => {
-        const listItems = [
-          {
-            title: 'Title 1',
-            description: 'Description 1',
-          },
-          {
-            title: <em>Title 2</em>,
-            description: <code>Description 2</code>,
-          },
-          {
-            title: 'Title 3',
-            description: 'Description 3',
-          },
-        ];
-
-        const component = render(
-          <EuiDescriptionList listItems={listItems}>
-            listItems will render instead of this content
-          </EuiDescriptionList>
-        );
+      const component = render(
+        <EuiDescriptionList listItems={listItems}>
+          listItems will render instead of this content
+        </EuiDescriptionList>
+      );
 
-        expect(component).toMatchSnapshot();
+      expect(component).toMatchSnapshot();
+
+      describe('titleProps', () => {
+        test('is rendered', () => {
+          const component = render(
+            <EuiDescriptionList
+              listItems={listItems}
+              titleProps={requiredProps}
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+
+      describe('descriptionProps', () => {
+        test('is rendered', () => {
+          const component = render(
+            <EuiDescriptionList
+              listItems={listItems}
+              descriptionProps={requiredProps}
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
       });
     });
 

src/components/description_list/description_list.tsx

@@ -43,11 +43,11 @@ export interface EuiDescriptionListProps {
   /**
    * Props object to be passed to `EuiDescriptionListTitle`
    */
-  titleProps?: HTMLAttributes<HTMLElement>;
+  titleProps?: HTMLAttributes<HTMLElement> & CommonProps;
   /**
    * Props object to be passed to `EuiDescriptionListDescription`
    */
-  descriptionProps?: HTMLAttributes<HTMLElement>;
+  descriptionProps?: HTMLAttributes<HTMLElement> & CommonProps;
 }
 
 const typesToClassNameMap = {