From 44591d1f3c0057fa3825d22fde7ee6dbdf756e6e Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 29 Sep 2021 16:47:44 -0400 Subject: [PATCH 1/6] [EuiTour] Made `subtitle` optional and fixed footer background --- .../tour/__snapshots__/tour_step.test.tsx.snap | 16 ++++++++++++++++ src/components/tour/_tour.scss | 12 +++--------- src/components/tour/tour_step.test.tsx | 17 ++++++++++++++++- src/components/tour/tour_step.tsx | 10 ++++++---- 4 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index d1434a1e928..b04e05a0388 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -16,6 +16,22 @@ exports[`EuiTourStep can be closed 1`] = ` `; +exports[`EuiTourStep can have subtitle 1`] = ` +
+
+ + Test + +
+
+`; + exports[`EuiTourStep can override the footer action 1`] = `
{ expect(component).toMatchSnapshot(); }); + test('can have subtitle', () => { + const component = render( + + Test + + ); + + expect(component).toMatchSnapshot(); + }); + test('can be closed', () => { const component = render( = ({ {...rest} > - -

{subtitle}

- + {subtitle && ( + +

{subtitle}

+ + )}

{title}

 From 6219bc16c4f64ef1153889e737c311bdce9a9c6f Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 29 Sep 2021 17:06:14 -0400 Subject: [PATCH 2/6] [Breaking] Removes boolean as an option for `minWidth` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit And instead maps directly to `CSSProperties[‘minWidth’]` and applies it directly to `panelStyle`. Also adds `maxWidth` option. --- src/components/tour/_tour.scss | 9 +++++---- src/components/tour/tour_step.tsx | 31 +++++++++++++------------------ 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/tour/_tour.scss b/src/components/tour/_tour.scss index 57c7def3c33..800f1b28e94 100644 --- a/src/components/tour/_tour.scss +++ b/src/components/tour/_tour.scss @@ -1,11 +1,12 @@ -.euiTour--minWidth-default { - min-width: $euiSizeL * 10; -} - .euiTourHeader { border-bottom: none; // Overriding default `EuiPopoverTitle` styles margin-bottom: $euiSizeS !important; // sass-lint:disable-line no-important + + .euiTourHeader__title { // nested for additional specificity to override EuiTitle styles + // Removes extra margin applied to siblint EuiTitle's + margin-top: 0; + } } .euiTourHeader__subtitle { diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 71bc2fb80b6..a1e0f8b644e 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -55,13 +55,14 @@ export interface EuiTourStepProps isStepOpen?: boolean; /** - * Sets the min-width of the tour popover, - * set to `true` to use the default size, - * set to `false` to not restrict the width, - * set to a number for a custom width in px, - * set to a string for a custom width in custom measurement. + * Change the default max width of the popover panel */ - minWidth?: boolean | number | string; + minWidth?: CSSProperties['maxWidth']; + + /** + * Change the default max width of the popover panel + */ + maxWidth?: CSSProperties['maxWidth']; /** * Function to call for 'Skip tour' and 'End tour' actions @@ -111,7 +112,8 @@ export const EuiTourStep: FunctionComponent = ({ closePopover = () => {}, content, isStepOpen = false, - minWidth = true, + minWidth = 300, + maxWidth = 600, onFinish, step = 1, stepsTotal, @@ -128,17 +130,10 @@ export const EuiTourStep: FunctionComponent = ({ 'EuiTourStep `step` should 1-based indexing. Please update to eliminate 0 indexes.' ); } - let newStyle; - - let widthClassName; - if (minWidth === true) { - widthClassName = 'euiTour--minWidth-default'; - } else if (minWidth !== false) { - const value = typeof minWidth === 'number' ? `${minWidth}px` : minWidth; - newStyle = { ...style, minWidth: value }; - } - const classes = classNames('euiTour', widthClassName, className); + const newStyle: CSSProperties = { ...style, maxWidth, minWidth }; + + const classes = classNames('euiTour', className); const finishButtonProps: EuiButtonEmptyProps = { color: 'text', @@ -208,7 +203,7 @@ export const EuiTourStep: FunctionComponent = ({ isOpen={isStepOpen} ownFocus={false} panelClassName={classes} - panelStyle={newStyle || style} + panelStyle={newStyle} offset={hasBeacon ? 10 : 0} aria-labelledby={titleId} arrowChildren={hasBeacon && } From e834110f26f14c95233b2fd343976833d4371160 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 29 Sep 2021 17:09:43 -0400 Subject: [PATCH 3/6] Fix heading levels --- src-docs/src/views/tour/step.js | 2 +- src/components/tour/tour_step.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/tour/step.js b/src-docs/src/views/tour/step.js index faf5c0d52cb..deed9fa7880 100644 --- a/src-docs/src/views/tour/step.js +++ b/src-docs/src/views/tour/step.js @@ -23,7 +23,7 @@ export default () => { step={1} stepsTotal={1} title="Title of the current step" - subtitle="Title of the full tour" + subtitle="Title of the full tour (optional)" anchorPosition="rightUp" > diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index a1e0f8b644e..7f9d88e7192 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -212,11 +212,11 @@ export const EuiTourStep: FunctionComponent = ({ {subtitle && ( -

{subtitle}

+

{subtitle}

 )} -

{title}

+

{title}
{content}
From bb1ba44ab945663d62d944eae12594f5ca86915e Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 29 Sep 2021 17:19:29 -0400 Subject: [PATCH 4/6] More tests --- .../tour/__snapshots__/tour_step.test.tsx.snap | 2 +- src/components/tour/tour_step.test.tsx | 10 ++++++++-- src/components/tour/tour_step.tsx | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index b04e05a0388..f310646a4dd 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -48,7 +48,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
`; -exports[`EuiTourStep can set a minWidth 1`] = ` +exports[`EuiTourStep can set a minWidth and maxWidth 1`] = `
{ expect(component).toMatchSnapshot(); }); - test('can set a minWidth', () => { + test('can set a minWidth and maxWidth', () => { const component = render( - + Test ); diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 7f9d88e7192..36da7b043b0 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -55,7 +55,7 @@ export interface EuiTourStepProps isStepOpen?: boolean; /** - * Change the default max width of the popover panel + * Change the default min width of the popover panel */ minWidth?: CSSProperties['maxWidth']; From f15a6e3ae611a36a724f224d8f523f3cc9821f0c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 29 Sep 2021 17:25:08 -0400 Subject: [PATCH 5/6] cl --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de557caa998..3a593fac7ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `38.2.0`. +- Added `maxWidth` prop to `EuiTour`, made `subtitle` optional, and fixed heading levels and footer background ([#5225](https://github.com/elastic/eui/pull/5225)) + +**Breaking changes** + +- Removed `boolean` from `EuiTour`'s `minWidth` type ([#5225](https://github.com/elastic/eui/pull/5225)) ## [`38.2.0`](https://github.com/elastic/eui/tree/v38.2.0) From 174da74d211c767638d835ace675aa86d8bae48e Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 30 Sep 2021 15:40:51 -0400 Subject: [PATCH 6/6] Better tests and switching to `h2` when no `subtitle` --- .../__snapshots__/tour_step.test.tsx.snap | 410 +++++++++++++++++- src/components/tour/tour_step.test.tsx | 39 +- src/components/tour/tour_step.tsx | 4 +- 3 files changed, 427 insertions(+), 26 deletions(-) diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index f310646a4dd..e6c9f201278 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -16,9 +16,9 @@ exports[`EuiTourStep can be closed 1`] = `
`; -exports[`EuiTourStep can have subtitle 1`] = ` +exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
@@ -29,12 +29,93 @@ exports[`EuiTourStep can have subtitle 1`] = ` Test
+
+
+
+ +
`; -exports[`EuiTourStep can override the footer action 1`] = ` +exports[`EuiTourStep can have subtitle 1`] = `
@@ -45,12 +126,98 @@ exports[`EuiTourStep can override the footer action 1`] = ` Test
+
+
+
+ +
`; -exports[`EuiTourStep can set a minWidth and maxWidth 1`] = ` +exports[`EuiTourStep can override the footer action 1`] = `
@@ -61,12 +228,82 @@ exports[`EuiTourStep can set a minWidth and maxWidth 1`] = ` Test
+
+
+
+ +
`; exports[`EuiTourStep can turn off the beacon 1`] = `
@@ -77,12 +314,88 @@ exports[`EuiTourStep can turn off the beacon 1`] = ` Test
+
+
+
+ +
`; exports[`EuiTourStep is rendered 1`] = `
@@ -93,5 +406,86 @@ exports[`EuiTourStep is rendered 1`] = ` Test
+
+
+
+ +
`; diff --git a/src/components/tour/tour_step.test.tsx b/src/components/tour/tour_step.test.tsx index 766c91df8c8..ad24f2ff247 100644 --- a/src/components/tour/tour_step.test.tsx +++ b/src/components/tour/tour_step.test.tsx @@ -7,11 +7,15 @@ */ import React from 'react'; -import { render } from 'enzyme'; +import { mount } from 'enzyme'; import { requiredProps } from '../../test/required_props'; import { EuiTourStep } from './tour_step'; +jest.mock('../portal', () => ({ + EuiPortal: ({ children }: any) => children, +})); + const steps = [ { step: 1, @@ -27,33 +31,33 @@ const config = { describe('EuiTourStep', () => { test('is rendered', () => { - const component = render( - + const component = mount( + Test ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('can have subtitle', () => { - const component = render( + const component = mount( Test ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('can be closed', () => { - const component = render( + const component = mount( { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); - test('can set a minWidth and maxWidth', () => { - const component = render( + test('can change the minWidth and maxWidth', () => { + const component = mount( Test ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('can override the footer action', () => { - const component = render( + const component = mount( {}}>Test} {...requiredProps} > @@ -95,14 +101,15 @@ describe('EuiTourStep', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('can turn off the beacon', () => { - const component = render( + const component = mount( @@ -110,6 +117,6 @@ describe('EuiTourStep', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); }); diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx index 36da7b043b0..24887e09ed9 100644 --- a/src/components/tour/tour_step.tsx +++ b/src/components/tour/tour_step.tsx @@ -57,7 +57,7 @@ export interface EuiTourStepProps /** * Change the default min width of the popover panel */ - minWidth?: CSSProperties['maxWidth']; + minWidth?: CSSProperties['minWidth']; /** * Change the default max width of the popover panel @@ -216,7 +216,7 @@ export const EuiTourStep: FunctionComponent = ({ )} -

{title}

+ {subtitle ?

{title}

:

{title}

}
{content}