diff --git a/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap b/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
index e2e140b8fd7..eabac1765d1 100644
--- a/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
@@ -1,5 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`EuiModalHeaderTitle component 1`] = `
+
+`;
+
exports[`EuiModalHeaderTitle is rendered 1`] = `
{
describe('EuiConfirmModal', () => {
shouldRenderCustomStyles(
- {}}>children
+ {}}>
+ children
+ ,
+ { childProps: ['titleProps'] }
);
test('renders EuiConfirmModal', () => {
@@ -196,4 +200,16 @@ describe('EuiConfirmModal', () => {
});
});
});
+
+ test('titleProps', () => {
+ const { baseElement } = render(
+ {}}
+ />
+ );
+ const title = baseElement.querySelector('.titlePropsTest');
+ expect(title?.tagName.toLowerCase()).toEqual('div');
+ });
});
diff --git a/src/components/modal/confirm_modal.tsx b/src/components/modal/confirm_modal.tsx
index bfca07a31cf..a322c7a4cc4 100644
--- a/src/components/modal/confirm_modal.tsx
+++ b/src/components/modal/confirm_modal.tsx
@@ -8,6 +8,7 @@
import React, {
FunctionComponent,
+ ComponentProps,
ReactNode,
useEffect,
useState,
@@ -17,7 +18,10 @@ import classnames from 'classnames';
import { EuiModal, EuiModalProps } from './modal';
import { EuiModalFooter } from './modal_footer';
import { EuiModalHeader } from './modal_header';
-import { EuiModalHeaderTitle } from './modal_header_title';
+import {
+ EuiModalHeaderTitle,
+ EuiModalHeaderTitleProps,
+} from './modal_header_title';
import { EuiModalBody } from './modal_body';
import { useEuiTheme } from '../../services';
@@ -34,6 +38,7 @@ export interface EuiConfirmModalProps
*/
children?: ReactNode;
title?: ReactNode;
+ titleProps?: ComponentProps;
cancelButtonText?: ReactNode;
confirmButtonText?: ReactNode;
onCancel: (
@@ -71,6 +76,7 @@ export const CANCEL_BUTTON = 'cancel';
export const EuiConfirmModal: FunctionComponent = ({
children,
title,
+ titleProps,
onCancel,
onConfirm,
cancelButtonText,
@@ -118,7 +124,10 @@ export const EuiConfirmModal: FunctionComponent = ({
if (title) {
modalTitle = (
-
+
{title}
diff --git a/src/components/modal/modal_header_title.test.tsx b/src/components/modal/modal_header_title.test.tsx
index 9ca267edd7a..dd0fd22c134 100644
--- a/src/components/modal/modal_header_title.test.tsx
+++ b/src/components/modal/modal_header_title.test.tsx
@@ -7,7 +7,7 @@
*/
import React from 'react';
-import { render } from 'enzyme';
+import { render } from '../../test/rtl';
import { requiredProps } from '../../test/required_props';
import { shouldRenderCustomStyles } from '../../test/internal';
@@ -17,9 +17,16 @@ describe('EuiModalHeaderTitle', () => {
shouldRenderCustomStyles(children);
test('is rendered', () => {
- const component = (
+ const { container } = render(
children
);
- expect(render(component)).toMatchSnapshot();
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ test('component', () => {
+ const { container } = render(
+ children
+ );
+ expect(container.firstChild).toMatchSnapshot();
});
});
diff --git a/src/components/modal/modal_header_title.tsx b/src/components/modal/modal_header_title.tsx
index 79815cf2ba1..842192abad8 100644
--- a/src/components/modal/modal_header_title.tsx
+++ b/src/components/modal/modal_header_title.tsx
@@ -6,26 +6,34 @@
* Side Public License, v 1.
*/
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, ElementType } from 'react';
import classnames from 'classnames';
import { CommonProps } from '../common';
import { EuiTitle } from '../title';
export type EuiModalHeaderTitleProps = FunctionComponent<
- HTMLAttributes & CommonProps
+ HTMLAttributes &
+ CommonProps & {
+ /**
+ * The tag to render
+ * @default h1
+ */
+ component?: ElementType;
+ }
>;
export const EuiModalHeaderTitle: EuiModalHeaderTitleProps = ({
className,
children,
+ component: Component = 'h1',
...rest
}) => {
const classes = classnames('euiModalHeader__title', className);
return (
- {React.isValidElement(children) ? children : {children}
}
+ {children}
);
};
diff --git a/upcoming_changelogs/6530.md b/upcoming_changelogs/6530.md
new file mode 100644
index 00000000000..2b17e14c489
--- /dev/null
+++ b/upcoming_changelogs/6530.md
@@ -0,0 +1,6 @@
+- Added the `component` prop to `EuiModalHeaderTitle`, which allows overriding the default `h1` tag
+- Added the `titleProps` prop to `EuiConfirmModal`, which allows overriding the default `h1` tag
+
+**Breaking changes**
+
+- `EuiModalHeaderTitle` now **always** wraps its children in a `h1` tag (previously attempted to conditionally detect whether its children were raw strings or not). To change this tag type to, e.g. a more generic `div`, use the new `component` prop.