diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2fb0d610ae..a7ed80876e8 100644
--- a/CHANGELOG.md
+++ b/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**
diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap
index 79052cb1b7d..828e8f61e91 100644
--- a/src/components/description_list/__snapshots__/description_list.test.tsx.snap
+++ b/src/components/description_list/__snapshots__/description_list.test.tsx.snap
@@ -1,5 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[` 1`] = `
+
+ -
+ Title 1
+
+ -
+ Description 1
+
+ -
+
+ Title 2
+
+
+ -
+
+ Description 2
+
+
+ -
+ Title 3
+
+ -
+ Description 3
+
+
+`;
+
exports[`EuiDescriptionList is rendered 1`] = `
`;
-exports[`EuiDescriptionList props listItems is rendered as strings and elements 1`] = `
+exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
@@ -38,7 +79,9 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
Title 1
-
Description 1
@@ -50,7 +93,9 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
-
Description 2
@@ -61,6 +106,55 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
>
Title 3
+ -
+ Description 3
+
+
+`;
+
+exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
+
+ -
+ Title 1
+
+ -
+ Description 1
+
+ -
+
+ Title 2
+
+
+ -
+
+ Description 2
+
+
+ -
+ Title 3
+
-
diff --git a/src/components/description_list/description_list.test.tsx b/src/components/description_list/description_list.test.tsx
index 61e6ab1d4c6..e0365eb3343 100644
--- a/src/components/description_list/description_list.test.tsx
+++ b/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: Title 2,
+ description:
Description 2,
+ },
+ {
+ 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: Title 2,
- description: Description 2,
- },
- {
- title: 'Title 3',
- description: 'Description 3',
- },
- ];
-
- const component = render(
-
- listItems will render instead of this content
-
- );
+ const component = render(
+
+ listItems will render instead of this content
+
+ );
- expect(component).toMatchSnapshot();
+ expect(component).toMatchSnapshot();
+
+ describe('titleProps', () => {
+ test('is rendered', () => {
+ const component = render(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+ });
+
+ describe('descriptionProps', () => {
+ test('is rendered', () => {
+ const component = render(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
});
});
diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx
index 7808f4bd7e6..30c4599f8ea 100644
--- a/src/components/description_list/description_list.tsx
+++ b/src/components/description_list/description_list.tsx
@@ -43,11 +43,11 @@ export interface EuiDescriptionListProps {
/**
* Props object to be passed to `EuiDescriptionListTitle`
*/
- titleProps?: HTMLAttributes;
+ titleProps?: HTMLAttributes & CommonProps;
/**
* Props object to be passed to `EuiDescriptionListDescription`
*/
- descriptionProps?: HTMLAttributes;
+ descriptionProps?: HTMLAttributes & CommonProps;
}
const typesToClassNameMap = {