diff --git a/CHANGELOG.md b/CHANGELOG.md index 00421749de1..2c357210595 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # [`master`](https://github.com/elastic/eui/tree/master) -- Added `EuiSteps` component +- Added `EuiSteps` component ([(#202)](https://github.com/elastic/eui/pull/202), [(#208)](https://github.com/elastic/eui/pull/208)) - Added `EuiHealth` components for status checks [(#158)](https://github.com/elastic/eui/pull/158) - Cleaned up styling for checkboxes, switches, and radios [(#158)](https://github.com/elastic/eui/pull/158) - Form `disabled` states are now more consistant [(#158)](https://github.com/elastic/eui/pull/158) diff --git a/src-docs/src/views/steps/heading_element_steps.js b/src-docs/src/views/steps/heading_element_steps.js index 062678814ed..862e1cb3ee2 100644 --- a/src-docs/src/views/steps/heading_element_steps.js +++ b/src-docs/src/views/steps/heading_element_steps.js @@ -2,18 +2,23 @@ import React from 'react'; import { EuiSteps, + EuiTitle, + EuiSpacer } from '../../../../src/components'; const steps = [ { - title: 'inspect me', - children:

Did you notice the step title is inside a Heading 2 element?

+ title: 'Inspect me', + children:

Did you notice the step title is inside a Heading 2 element?

 } ]; export default () => (
-

Heading 1

+

Heading 1

 + + + Do this first

}, { - title: 'step 2', + title: 'Step 2', children:

Then this

}, { - title: 'step 3', + title: 'Step 3', children:

And finally, do this

}, ]; const nextSetOfSteps = [ { - title: 'good step', + title: 'Good step', children:

Do this first

}, { - title: 'better step', + title: 'Better step', children:

Then this

}, { - title: 'best step', + title: 'Best step', children:

And finally, do this

}, ]; diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index 9a89578965b..f9978076c74 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -6,6 +6,10 @@ import { GuideSectionTypes, } from '../../components'; +import { + EuiCode, +} from '../../../../src/components'; + import Steps from './steps'; const stepsSource = require('!!raw-loader!./steps'); const stepsHtml = renderToHtml(Steps); @@ -33,7 +37,7 @@ export const StepsExample = { demo: , }, { - title: 'Heading Element Steps', + title: 'Heading elements', source: [{ type: GuideSectionTypes.JS, code: headingElementStepsSource, @@ -42,9 +46,17 @@ export const StepsExample = { code: headingElementStepsHtml, }], text: ( -

- something something better accessibility -

+
+

+ To aid with accessibility and hierarchical headings, + you can and should pass in a heading element to use for each step title. + The example below shows that the logical heading element should be an h2 + and therefore adds headingElement="h2" to the EuiSteps component. +

+

+ The style of the title will not be affected. +

+
), demo: , }], diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index 71be26248e2..0e8bbc7730a 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -6,20 +6,19 @@ exports[`EuiStep is rendered 1`] = ` class="euiStep testClass1 testClass2" data-test-subj="test subject string" > -
-
- 1 -
-

- First step -

-
+ + Step + +

+ First step +

Do this diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap index 326cd6ed371..7f205109681 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -9,20 +9,19 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

-
-
- 1 -
-

- first title -

-
+ + Step + +

+ first title +

Do this first @@ -32,20 +31,19 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

-
-
- 2 -
-

- second title -

-
+ + Step + +

+ second title +

Then this @@ -55,20 +53,19 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `

-
-
- 3 -
-

- third title -

-
+ + Step + +

+ third title +

And finally, do this @@ -87,20 +84,19 @@ exports[`EuiSteps renders steps 1`] = `

-
-
- 1 -
-

- first title -

-
+ + Step + +

+ first title +

Do this first @@ -110,20 +106,19 @@ exports[`EuiSteps renders steps 1`] = `

-
-
- 2 -
-

- second title -

-
+ + Step + +

+ second title +

Then this @@ -133,20 +128,19 @@ exports[`EuiSteps renders steps 1`] = `

-
-
- 3 -
-

- third title -

-
+ + Step + +

+ third title +

And finally, do this @@ -165,20 +159,19 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

-
-
- 10 -
-

- first title -

-
+ + Step + +

+ first title +

Do this first @@ -188,20 +181,19 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

-
-
- 11 -
-

- second title -

-
+ + Step + +

+ second title +

Then this @@ -211,20 +203,19 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `

-
-
- 12 -
-

- third title -

-
+ + Step + +

+ third title +

And finally, do this diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 51c571ab08a..6343ced9386 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -1,27 +1,46 @@ -.euiSteps { +$euiStepNumberSize: $euiSizeXL !default; +$euiStepNumberMargin: $euiSize !default; -} +/** + * 1. Ensure that the step number vertically aligns with the title text + */ -.euiStepNumber { - width: 32px; - height: 32px; - display: inline-block; - line-height: 32px; - text-align: center; - color: #FFF; - border-radius: 100%; - background-color: #0079a5; -} +.euiStep { + // Do not show the content border if it is the last step + &:last-of-type .euiStep__content { + border-left-color: transparent; + } -.euiStepTitle { - display: inline-block; - margin-left: 16px; + .euiTitle { + line-height: $euiStepNumberSize; /* 1 */ + } } -.euiStepContent { - border-left: medium solid #D9D9D9; - margin-top: 8px; - margin-bottom: 8px; - margin-left: 16px; - padding-left: 24px; -} + .euiStep__title::before { + content: attr(data-step-num); // Get the number from the data attribute + display: inline-block; + @include size($euiStepNumberSize); + line-height: $euiStepNumberSize; + border-radius: $euiStepNumberSize; + margin-right: $euiStepNumberMargin; + text-align: center; + + color: $euiColorEmptyShade; + background-color: $euiColorPrimary; + + font-size: $euiFontSize; + font-weight: $euiFontWeightMedium; + vertical-align: top; /* 1 */ + } + + .euiStep__content { + border-left: $euiBorderThick; + padding: $euiSize; + margin: $euiSizeS 0; + + // Align the content's contents with the title + padding-left: ($euiStepNumberSize/2) - 1px + $euiStepNumberMargin; + + // Align content border to horizontal center of step number + margin-left: ($euiStepNumberSize/2) - 1px; + } \ No newline at end of file diff --git a/src/components/steps/step.js b/src/components/steps/step.js index b59d78e526f..ace0963bd07 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { - EuiTitle -} from '../title'; + EuiScreenReaderOnly, + EuiTitle, +} from '../'; export const EuiStep = ({ className, @@ -21,16 +22,13 @@ export const EuiStep = ({ {...rest} > -

-
- {step} -
- - {React.createElement(headingElement, null, title)} - -
+ Step + + + {React.createElement(headingElement, null, title)} + -
+
{children}
@@ -44,3 +42,7 @@ EuiStep.propTypes = { title: PropTypes.string.isRequired, headingElement: PropTypes.string.isRequired, }; + +EuiStep.defaultProps = { + headingElement: 'p' +}; \ No newline at end of file