Fixes : #2925 Now euiTitle renders classes of children too (#2926)

* added child class to wraper * added test suite * Update src/components/title/title.test.tsx Co-Authored-By: Greg Thompson <[email protected]> * Update CHANGELOG.md Co-Authored-By: Caroline Horn <[email protected]> * Updated SnapShots Co-authored-by: Greg Thompson <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
elastic · Feb 26, 2020 · dc199cf · dc199cf
1 parent 2427d35
commit dc199cf
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@
 
 **Bug fixes**
 
+- Fixed `EuiTitle` not rendering child classes ([#2926](https://github.com/elastic/eui/pull/2926))
 - Fixed building dev & docs on Windows ([#2847](https://github.com/elastic/eui/pull/2847))
 - Fixed screen reader discovery issues with `EuiBottomBar` and `EuiControlBar` ([#2861](https://github.com/elastic/eui/pull/2861))
 - Fixed a bug in `EuiDataGrid` causing the first cell to autofocus if interactive ([#2872](https://github.com/elastic/eui/pull/2872))

diff --git a/src/components/title/__snapshots__/title.test.tsx.snap b/src/components/title/__snapshots__/title.test.tsx.snap
@@ -9,3 +9,13 @@ exports[`EuiTitle is rendered 1`] = `
   Title
 </h1>
 `;
+
+exports[`EuiTitle renders children element className 1`] = `
+<h1
+  aria-label="aria-label"
+  class="euiTitle euiTitle--medium testClass1 testClass2 test"
+  data-test-subj="test subject string"
+>
+  Title
+</h1>
+`;
diff --git a/src/components/title/title.test.tsx b/src/components/title/title.test.tsx
@@ -14,4 +14,14 @@ describe('EuiTitle', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('renders children element className', () => {
+    const component = render(
+      <EuiTitle {...requiredProps}>
+        <h1 className="test">Title</h1>
+      </EuiTitle>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/title/title.tsx b/src/components/title/title.tsx
@@ -39,7 +39,8 @@ export const EuiTitle: FunctionComponent<EuiTitleProps> = ({
     'euiTitle',
     titleSizeToClassNameMap[size],
     textTransform ? textTransformToClassNameMap[textTransform] : undefined,
-    className
+    className,
+    children.props.className
   );
 
   const props = {