Add titleSize prop to EuiStep

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Applied `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
+- Added `titleSize` prop to `EuiStep` and `EuiSteps` ([#3340](https://github.com/elastic/eui/pull/3340))
 
 **Bug Fixes**
 

src-docs/src/views/steps/steps_example.js

@@ -70,6 +70,14 @@ const statusSnippet = `<EuiSteps
   ]}
 />`;
 
+import StepsTitleSizes from './steps_title_sizes';
+const stepsTitleSizesSource = require('!!raw-loader!./steps_title_sizes');
+const stepsTitleSizesHtml = renderToHtml(StepsTitleSizes);
+const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={[{
+  title: 'Completed step',
+}]} />
+`;
+
 export const StepsExample = {
   title: 'Steps',
   sections: [
@@ -172,6 +180,33 @@ export const StepsExample = {
       snippet: statusSnippet,
       demo: <Status />,
     },
+    {
+      title: 'Custom title sizes',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: stepsTitleSizesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: stepsTitleSizesHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            You can set a different title size using{' '}
+            <EuiCode>titleSize</EuiCode>. If <EuiCode>titleSize</EuiCode> is set
+            in both <strong>EuiSteps</strong> and <strong>EuiStep</strong>, the
+            latter value will override the former. Additionally, the title size{' '}
+            <EuiCode>xs</EuiCode> will automatically generate smaller steps
+            circles.
+          </p>
+        </Fragment>
+      ),
+      demo: <StepsTitleSizes />,
+      snippet: stepsTitleSizesSnippet,
+    },
     {
       title: 'Horizontal steps',
       source: [

src-docs/src/views/steps/steps_title_sizes.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { EuiCode, EuiSteps } from '../../../../src/components';
+
+const firstSetOfSteps = [
+  {
+    title: 'Step 1',
+    children: (
+      <p>
+        Steps with <EuiCode>titleSize</EuiCode> set to <EuiCode>xs</EuiCode>{' '}
+        like this one, get a smaller step circle
+      </p>
+    ),
+  },
+  {
+    title: 'Step 2',
+    children: (
+      <p>
+        Steps with <EuiCode>titleSize</EuiCode> set to <EuiCode>xs</EuiCode>{' '}
+        like this one, get a smaller step circle
+      </p>
+    ),
+  },
+];
+
+export default () => (
+  <div>
+    <EuiSteps titleSize="xs" steps={firstSetOfSteps} />
+  </div>
+);

src/components/steps/__snapshots__/step.test.tsx.snap

@@ -243,3 +243,32 @@ exports[`EuiStep props step 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiStep props titleSize 1`] = `
+<div
+  class="euiStep euiStep--small"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStep__circle euiStepNumber--small"
+    >
+      1
+    </div>
+    <p
+      class="euiTitle euiTitle--xsmall euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;

src/components/steps/__snapshots__/step_number.test.tsx.snap

@@ -8,6 +8,14 @@ exports[`EuiStepNumber is rendered 1`] = `
 />
 `;
 
+exports[`EuiStepNumber props has titleSize is rendered 1`] = `
+<div
+  class="euiStepNumber"
+>
+  1
+</div>
+`;
+
 exports[`EuiStepNumber props isHollow is rendered 1`] = `
 <div
   class="euiStepNumber euiStepNumber-isHollow"

src/components/steps/__snapshots__/steps.test.tsx.snap

@@ -254,3 +254,88 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiSteps renders steps with titleSize 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiStep euiStep--small"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 1"
+        class="euiStepNumber euiStep__circle euiStepNumber--small"
+      >
+        1
+      </div>
+      <p
+        class="euiTitle euiTitle--xsmall euiStep__title"
+      >
+        first title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep euiStep--small"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 2"
+        class="euiStepNumber euiStep__circle euiStepNumber--small"
+      >
+        2
+      </div>
+      <p
+        class="euiTitle euiTitle--xsmall euiStep__title"
+      >
+        second title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep euiStep--small"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Incomplete Step 3"
+        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle euiStepNumber--small"
+      />
+      <p
+        class="euiTitle euiTitle--xsmall euiStep__title"
+      >
+        third title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        And finally, do this
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/components/steps/_mixins.scss

@@ -1,12 +1,12 @@
-@mixin createStepsNumber {
-  @include size($euiStepNumberSize);
+@mixin createStepsNumber($size: $euiStepNumberSize, $fontSize: $euiFontSize) {
+  @include size($size);
 
   display: inline-block;
-  line-height: $euiStepNumberSize;
-  border-radius: $euiStepNumberSize;
+  line-height: $size;
+  border-radius: $size;
   text-align: center;
   color: $euiColorEmptyShade;
   background-color: $euiColorPrimary;
-  font-size: $euiSize; // setting to actual base size will keep it aligned if base font-size changes
+  font-size: $fontSize;
   font-weight: $euiFontWeightMedium;
 }

src/components/steps/_step_number.scss

@@ -6,6 +6,14 @@
     top: -2px;
   }
 
+  &--small {
+    @include createStepsNumber($euiStepNumberSmallSize, $euiFontSizeXS);
+
+    .euiStepNumber__icon {
+      top: -1px;
+    }
+  }
+
   &--complete {
     // Thicken the checkmark but adding a slight stroke.
     .euiStepNumber__icon {

src/components/steps/_steps.scss

@@ -18,6 +18,20 @@
     background-repeat: no-repeat;
     background-position: left $euiSizeXXL;
   }
+
+  &--small {
+    &:not(:last-of-type) {
+      background-position: left -#{$euiSizeXS} top $euiSizeXL;
+    }
+
+    .euiStep__content {
+      // Align the content's contents with the title
+      padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin;
+
+      // Align content border to horizontal center of step number
+      margin-left: ($euiStepNumberSmallSize / 2);
+    }
+  }
 }
 
 .euiStep__titleWrapper {

src/components/steps/_variables.scss

@@ -1,4 +1,5 @@
 $euiStepNumberSize: $euiSizeXL !default;
+$euiStepNumberSmallSize: $euiSizeL !default;
 $euiStepNumberMargin: $euiSize !default;
 
 // Modifier naming and colors.

src/components/steps/step.test.tsx

@@ -56,6 +56,16 @@ describe('EuiStep', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('titleSize', () => {
+      const component = render(
+        <EuiStep titleSize="xs" title={'First step'}>
+          <p>Do this</p>
+        </EuiStep>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     describe('status', () => {
       STATUS.forEach(status => {
         test(`${status} is rendered`, () => {

src/components/steps/step.tsx

@@ -22,7 +22,7 @@ import { CommonProps } from '../common';
 
 import classNames from 'classnames';
 
-import { EuiTitle } from '../title';
+import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../title';
 
 import { EuiStepStatus, EuiStepNumber } from './step_number';
 
@@ -43,6 +43,10 @@ export interface EuiStepProps {
    * May replace the number provided in props.step with alternate styling.
    */
   status?: EuiStepStatus;
+  /**
+   * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
+   */
+  titleSize?: Exclude<EuiTitleProps['size'], 'xxxs' | 'xxs' | 'l'>;
 }
 
 export type StandaloneEuiStepProps = CommonProps &
@@ -55,10 +59,20 @@ export const EuiStep: FunctionComponent<StandaloneEuiStepProps> = ({
   headingElement = 'p',
   step = 1,
   title,
+  titleSize = 's',
   status,
   ...rest
 }) => {
-  const classes = classNames('euiStep', className);
+  const classes = classNames(
+    'euiStep',
+    {
+      'euiStep--small': titleSize === 'xs',
+    },
+    className
+  );
+  const numberClasses = classNames('euiStep__circle', {
+    'euiStepNumber--small': titleSize === 'xs',
+  });
 
   return (
     <div className={classes} {...rest}>
@@ -72,16 +86,17 @@ export const EuiStep: FunctionComponent<StandaloneEuiStepProps> = ({
           values={{ status }}>
           {(ariaLabel: string) => (
             <EuiStepNumber
-              className="euiStep__circle"
+              className={numberClasses}
               aria-label={`${ariaLabel} ${step}`}
               number={step}
               status={status}
+              titleSize={titleSize}
               isHollow={status === 'incomplete'}
             />
           )}
         </EuiI18n>
 
-        <EuiTitle size="s" className="euiStep__title">
+        <EuiTitle size={titleSize as EuiTitleSize} className="euiStep__title">
           {React.createElement(headingElement, null, title)}
         </EuiTitle>
       </div>

src/components/steps/step_number.test.tsx

@@ -39,6 +39,14 @@ describe('EuiStepNumber', () => {
       });
     });
 
+    describe('has titleSize', () => {
+      it('is rendered', () => {
+        const component = render(<EuiStepNumber titleSize="xs" number={1} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('status', () => {
       STATUS.forEach(status => {
         test(`${status} is rendered`, () => {