[EuiTour] Style and a11y fixes

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)
 

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"
       >
         <EuiText>

src/components/tour/__snapshots__/tour_step.test.tsx.snap

@@ -16,6 +16,22 @@ exports[`EuiTourStep can be closed 1`] = `
 </div>
 `;
 
+exports[`EuiTourStep can have subtitle 1`] = `
+<div
+  class="euiPopover euiPopover--anchorLeftUp"
+  data-test-subj="test subject string"
+  offset="10"
+>
+  <div
+    class="euiPopover__anchor"
+  >
+    <span>
+      Test
+    </span>
+  </div>
+</div>
+`;
+
 exports[`EuiTourStep can override the footer action 1`] = `
 <div
   class="euiPopover euiPopover--anchorLeftUp"
@@ -32,7 +48,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
 </div>
 `;
 
-exports[`EuiTourStep can set a minWidth 1`] = `
+exports[`EuiTourStep can set a minWidth and maxWidth 1`] = `
 <div
   class="euiPopover euiPopover--anchorLeftUp"
   data-test-subj="test subject string"

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 {

src/components/tour/tour_step.test.tsx

@@ -15,7 +15,6 @@ import { EuiTourStep } from './tour_step';
 const steps = [
   {
     step: 1,
-    subtitle: 'Step 1',
     content: 'You are here',
   },
 ];
@@ -37,6 +36,22 @@ describe('EuiTourStep', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('can have subtitle', () => {
+    const component = render(
+      <EuiTourStep
+        {...config}
+        {...steps[0]}
+        subtitle="Subtitle"
+        isStepOpen={false}
+        {...requiredProps}
+      >
+        <span>Test</span>
+      </EuiTourStep>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('can be closed', () => {
     const component = render(
       <EuiTourStep
@@ -52,9 +67,15 @@ describe('EuiTourStep', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('can set a minWidth', () => {
+  test('can set a minWidth and maxWidth', () => {
     const component = render(
-      <EuiTourStep {...config} {...steps[0]} minWidth={240} {...requiredProps}>
+      <EuiTourStep
+        {...config}
+        {...steps[0]}
+        minWidth={240}
+        maxWidth={420}
+        {...requiredProps}
+      >
         <span>Test</span>
       </EuiTourStep>
     );

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['maxWidth'];
+
+  /**
+   * 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<EuiTourStepProps> = ({
   closePopover = () => {},
   content,
   isStepOpen = false,
-  minWidth = true,
+  minWidth = 300,
+  maxWidth = 600,
   onFinish,
   step = 1,
   stepsTotal,
@@ -128,17 +130,10 @@ export const EuiTourStep: FunctionComponent<EuiTourStepProps> = ({
       '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<EuiTourStepProps> = ({
       isOpen={isStepOpen}
       ownFocus={false}
       panelClassName={classes}
-      panelStyle={newStyle || style}
+      panelStyle={newStyle}
       offset={hasBeacon ? 10 : 0}
       aria-labelledby={titleId}
       arrowChildren={hasBeacon && <EuiBeacon className="euiTour__beacon" />}
       {...rest}
     >
       <EuiPopoverTitle className="euiTourHeader" id={titleId}>
-        <EuiTitle size="xxxs" className="euiTourHeader__subtitle">
-          <h1>{subtitle}</h1>
-        </EuiTitle>
+        {subtitle && (
+          <EuiTitle size="xxxs" className="euiTourHeader__subtitle">
+            <h2>{subtitle}</h2>
+          </EuiTitle>
+        )}
         <EuiTitle size="xxs" className="euiTourHeader__title">
-          <h2>{title}</h2>
+          <h3>{title}</h3>
         </EuiTitle>
       </EuiPopoverTitle>
       <div className="euiTour__content">{content}</div>