From 4cbd5660fb1e48df7bf104974a5a4b34373a1df9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Jan 2023 13:54:31 -0800 Subject: [PATCH 1/5] Use a `component` prop for EuiModalHeaderTitle tag wrapper instead of trying to detect child types - this is because Kibana's `` component (which only outputs a string) is incorrectly not getting styles applied to it --- src/components/modal/modal_header_title.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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} ); }; From 5b29f945153f6199897b13d289e99ca9c54650ca Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Jan 2023 13:59:14 -0800 Subject: [PATCH 2/5] Add prop unit tests + convert tests to RTL while we're here --- .../__snapshots__/modal_header_title.test.tsx.snap | 8 ++++++++ src/components/modal/modal_header_title.test.tsx | 13 ++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) 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`] = `

{ 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(); }); }); From f226fa646c7e3371ec4a80e9b14fbb966582fea9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Jan 2023 14:22:34 -0800 Subject: [PATCH 3/5] Allow `EuiConfirmModal`s to override title component tag as well if necessary --- src/components/modal/confirm_modal.test.tsx | 18 +++++++++++++++++- src/components/modal/confirm_modal.tsx | 13 +++++++++++-- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/modal/confirm_modal.test.tsx b/src/components/modal/confirm_modal.test.tsx index 9f420725d61..1447defabcf 100644 --- a/src/components/modal/confirm_modal.test.tsx +++ b/src/components/modal/confirm_modal.test.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { mount } from 'enzyme'; +import { render } from '../../test/rtl'; import { findTestSubject, @@ -33,7 +34,10 @@ beforeEach(() => { 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} From c0afac99ba6bedf3dc495a42d1654c92be88e74d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Jan 2023 14:31:52 -0800 Subject: [PATCH 4/5] Changelog --- upcoming_changelogs/6530.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming_changelogs/6530.md diff --git a/upcoming_changelogs/6530.md b/upcoming_changelogs/6530.md new file mode 100644 index 00000000000..75095f7dfa4 --- /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 (vs. attempting to conditionally detect whether its children are raw strings or not). If an h1 tag is not desired, a more generic `div` can be passed via the new `component` prop. From 46bd3619b6650bbe78d1c75f8559edfadd087b7c Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Jan 2023 14:40:56 -0800 Subject: [PATCH 5/5] tweak changelog copy a bit more --- upcoming_changelogs/6530.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming_changelogs/6530.md b/upcoming_changelogs/6530.md index 75095f7dfa4..2b17e14c489 100644 --- a/upcoming_changelogs/6530.md +++ b/upcoming_changelogs/6530.md @@ -3,4 +3,4 @@ **Breaking changes** -- `EuiModalHeaderTitle` now **always** wraps its children in a `h1` tag (vs. attempting to conditionally detect whether its children are raw strings or not). If an h1 tag is not desired, a more generic `div` can be passed via the new `component` prop. +- `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.