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`] = ` +
+ children +
+`; + 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.