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) 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/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index d1434a1e928..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 override the footer action 1`] = ` +exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
@@ -29,12 +29,195 @@ exports[`EuiTourStep can override the footer action 1`] = ` Test
+
+
+
+ +
`; -exports[`EuiTourStep can set a minWidth 1`] = ` +exports[`EuiTourStep can have subtitle 1`] = `
+
+ + Test + +
+
+
+
+ +
+
+`; + +exports[`EuiTourStep can override the footer action 1`] = ` +
@@ -45,12 +228,82 @@ exports[`EuiTourStep can set a minWidth 1`] = ` Test
+
+
+
+ +
`; exports[`EuiTourStep can turn off the beacon 1`] = `
@@ -61,12 +314,88 @@ exports[`EuiTourStep can turn off the beacon 1`] = ` Test
+
+
+
+ +
`; exports[`EuiTourStep is rendered 1`] = `
@@ -77,5 +406,86 @@ exports[`EuiTourStep is rendered 1`] = ` Test
+
+
+
+ +
`; diff --git a/src/components/tour/_tour.scss b/src/components/tour/_tour.scss index ffb0c37bdda..800f1b28e94 100644 --- a/src/components/tour/_tour.scss +++ b/src/components/tour/_tour.scss @@ -1,26 +1,21 @@ -.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 { - color: $euiColorDarkShade; + color: $euiTextSubduedColor; } .euiTourFooter { - background-color: $euiColorLightestShade; - // Overriding default `EuiPopoverFooter` styles - margin-top: $euiSizeL !important; // sass-lint:disable-line no-important + background-color: $euiPageBackgroundColor; + border-radius: 0 0 $euiBorderRadius $euiBorderRadius; } .euiTour { diff --git a/src/components/tour/tour_step.test.tsx b/src/components/tour/tour_step.test.tsx index 609b7ee0e11..ad24f2ff247 100644 --- a/src/components/tour/tour_step.test.tsx +++ b/src/components/tour/tour_step.test.tsx @@ -7,15 +7,18 @@ */ 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, - subtitle: 'Step 1', content: 'You are here', }, ]; @@ -28,17 +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 = mount( + + Test + + ); + + 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', () => { - 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} > @@ -74,14 +101,15 @@ describe('EuiTourStep', () => { ); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('can turn off the beacon', () => { - const component = render( + const component = mount( @@ -89,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 7f8af4d7147..24887e09ed9 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 min width of the popover panel */ - minWidth?: boolean | number | string; + minWidth?: CSSProperties['minWidth']; + + /** + * Change the default max width of the popover panel + */ + maxWidth?: CSSProperties['maxWidth']; /** * Function to call for 'Skip tour' and 'End tour' actions @@ -86,7 +87,7 @@ export interface EuiTourStepProps /** * Smaller title text that appears atop each step in the tour. The subtitle gets wrapped in the appropriate heading level. */ - subtitle: ReactNode; + subtitle?: ReactNode; /** * Larger title text specific to this step. The title gets wrapped in the appropriate heading level. @@ -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,18 +203,20 @@ export const EuiTourStep: FunctionComponent = ({ isOpen={isStepOpen} ownFocus={false} panelClassName={classes} - panelStyle={newStyle || style} + panelStyle={newStyle} offset={hasBeacon ? 10 : 0} aria-labelledby={titleId} arrowChildren={hasBeacon && } {...rest} > - -

{subtitle}

- + {subtitle && ( + +

{subtitle}

+ + )} -

{title}

+ {subtitle ?

{title}

:

{title}

}
{content}