From 82b22e868035143db62a507c5276526a66c6fe6d Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 30 Aug 2022 14:30:35 -0700 Subject: [PATCH 1/4] [EuiPageSection] Default to `section` tag, allow overriding `component` tag - for layouts that need a div, aside, etc. --- src/components/page/page_section/page_section.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/page/page_section/page_section.tsx b/src/components/page/page_section/page_section.tsx index 6820d71dc37..25cf363d648 100644 --- a/src/components/page/page_section/page_section.tsx +++ b/src/components/page/page_section/page_section.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { FunctionComponent, ComponentType, HTMLAttributes } from 'react'; import { CommonProps } from '../../common'; import { @@ -53,7 +53,11 @@ export type EuiPageSectionProps = CommonProps & * Passed down to the div wrapper of the section contents */ contentProps?: HTMLAttributes; - } & Omit, 'color'>; + /** + * Sets which HTML element to render. + */ + component?: keyof JSX.IntrinsicElements | ComponentType; + } & Omit, 'color'>; export const EuiPageSection: FunctionComponent = ({ children, @@ -64,6 +68,7 @@ export const EuiPageSection: FunctionComponent = ({ color = 'transparent', grow = false, contentProps, + component: Component = 'section', ...rest }) => { // Set max-width as a style prop @@ -98,10 +103,10 @@ export const EuiPageSection: FunctionComponent = ({ ]; return ( -
+
{children}
-
+ ); }; From a8b37fa341fa9374e41bdeb7a55b5abf5442aa1b Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 30 Aug 2022 14:35:46 -0700 Subject: [PATCH 2/4] Add `component` unit tests --- .../__snapshots__/page_section.test.tsx.snap | 26 +++++++++++++++++++ .../page/page_section/page_section.test.tsx | 12 +++++++++ 2 files changed, 38 insertions(+) diff --git a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap index 0d64660c611..c118663bdd5 100644 --- a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap +++ b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap @@ -132,6 +132,32 @@ exports[`EuiPageSection props color warning is rendered 1`] = ` `; +exports[`EuiPageSection props component 1`] = ` +
+
+
+
+
+
+
+ +
+`; + exports[`EuiPageSection props contentProps are passed down 1`] = `
{ }); describe('props', () => { + test('component', () => { + const component = render( +
+ + + +
+ ); + + expect(component).toMatchSnapshot(); + }); + describe('restrictWidth', () => { test('can be true', () => { const component = render(); From 99771836544cdc49c9119270d3c950ef7b520160 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 30 Aug 2022 14:30:41 -0700 Subject: [PATCH 3/4] Update snapshots --- .../__snapshots__/page_section.test.tsx.snap | 92 +++++++++---------- .../page_bottom_bar.test.tsx.snap | 40 ++++---- .../page_empty_prompt.test.tsx.snap | 64 ++++++------- 3 files changed, 98 insertions(+), 98 deletions(-) diff --git a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap index c118663bdd5..1674296f483 100644 --- a/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap +++ b/src/components/page/page_section/__snapshots__/page_section.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiPageSection is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props alignment center is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props alignment horizontalCenter is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props alignment top is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props bottomBorder can be true 1`] = ` -
-
+ `; exports[`EuiPageSection props color accent is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color danger is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color plain is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color primary is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color subdued is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color success is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color transparent is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props color warning is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props component 1`] = ` @@ -159,7 +159,7 @@ exports[`EuiPageSection props component 1`] = ` `; exports[`EuiPageSection props contentProps are passed down 1`] = ` -
-
+ `; exports[`EuiPageSection props grow can be true 1`] = ` -
-
+ `; exports[`EuiPageSection props paddingSize l is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props paddingSize m is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props paddingSize none is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props paddingSize s is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props paddingSize xl is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props paddingSize xs is rendered 1`] = ` -
-
+ `; exports[`EuiPageSection props restrictWidth can be custom 1`] = ` -
-
+ `; exports[`EuiPageSection props restrictWidth can be true 1`] = ` -
-
+ `; diff --git a/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap b/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap index 99e4beda8ad..c58aec95351 100644 --- a/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap +++ b/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap @@ -13,13 +13,13 @@ Array [ > Page level controls -
-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

Page level controls -

-
+ ,

-
+ `; exports[`_EuiPageEmptyPrompt EuiPageSectionProps is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt paddingSize l is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt paddingSize m is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt paddingSize none is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt paddingSize s is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt paddingSize xl is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt paddingSize xs is rendered 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt panelled is false and color is defined, then the prompt inherits the color 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt panelled is false and color is not defined, then the prompt is plain 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt panelled is true and color is defined, then the prompt inherits the color 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt panelled is true and color is not defined, then the prompt is subdued 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt restrict width can be set to a custom number 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt restrict width can be set to a custom value and measurement 1`] = ` -
-
+ `; exports[`_EuiPageEmptyPrompt restrict width can be set to a default 1`] = ` -
-
+ `; From ff09df9ae0c24786207c0c16c18d84d7f810c5db Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 30 Aug 2022 14:39:47 -0700 Subject: [PATCH 4/4] changelog --- upcoming_changelogs/6192.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/6192.md diff --git a/upcoming_changelogs/6192.md b/upcoming_changelogs/6192.md new file mode 100644 index 00000000000..1edae66f006 --- /dev/null +++ b/upcoming_changelogs/6192.md @@ -0,0 +1 @@ +- Added a new `component` prop to `EuiPageSection`, allowing overriding of the default `section` tag