From 41232237195930fa601d190e1bd668d549dd9c02 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Mon, 7 Dec 2020 18:28:47 -0500 Subject: [PATCH] [EuiSteps] Updates for Amsterdam and added `disabled` and `loading` states (#4338) * Adding `loading` status to EuiStep * Style EuiStep for Amsterdam --- CHANGELOG.md | 2 + .../services/playground/simulateFunction.js | 7 +- src-docs/src/views/steps/playground.js | 35 +++++- src-docs/src/views/steps/steps.js | 31 ++++-- src-docs/src/views/steps/steps_complex.js | 12 ++- src-docs/src/views/steps/steps_example.js | 67 ++++++++++-- .../steps/__snapshots__/step.test.tsx.snap | 48 ++++++++- .../step_horizontal.test.tsx.snap | 29 +++++ .../__snapshots__/step_number.test.tsx.snap | 25 +++++ .../steps/__snapshots__/steps.test.tsx.snap | 32 ++++++ .../steps_horizontal.test.tsx.snap | 3 + src/components/steps/_step_number.scss | 23 +++- src/components/steps/_steps.scss | 11 -- src/components/steps/_steps_horizontal.scss | 20 ++-- src/components/steps/index.ts | 2 + src/components/steps/step.tsx | 1 + src/components/steps/step_horizontal.tsx | 10 +- src/components/steps/step_number.tsx | 36 +++++-- src/components/steps/step_strings.tsx | 19 ++++ src/global_styling/mixins/_button.scss | 2 +- src/global_styling/mixins/_helpers.scss | 7 ++ .../global_styling/variables/_index.scss | 1 + .../global_styling/variables/_steps.scss | 8 ++ .../eui-amsterdam/overrides/_index.scss | 1 + .../eui-amsterdam/overrides/_steps.scss | 102 ++++++++++++++++++ 25 files changed, 469 insertions(+), 65 deletions(-) create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_steps.scss create mode 100644 src/themes/eui-amsterdam/overrides/_steps.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a9284258ed..9892877720d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321)) - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325)) +- Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338)) **Bug fixes** @@ -19,6 +20,7 @@ - Increased font size for `m` size of `EuiListGroupItem` ([#4340](https://github.com/elastic/eui/pull/4340)) - Reduced padding in `EuiToolTip` ([#4353](https://github.com/elastic/eui/pull/4353)) - Reduced border-radius in `EuiRange`'s tooltip ([#4353](https://github.com/elastic/eui/pull/4353)) +- Consolidated `EuiStepNumber` indicators for `EuiSteps` and `EuiHorizontalSteps` ([#4338](https://github.com/elastic/eui/pull/4338)) ## [`30.5.1`](https://github.com/elastic/eui/tree/v30.5.1) diff --git a/src-docs/src/services/playground/simulateFunction.js b/src-docs/src/services/playground/simulateFunction.js index 434cb50bf6e..0afdad592ac 100644 --- a/src-docs/src/services/playground/simulateFunction.js +++ b/src-docs/src/services/playground/simulateFunction.js @@ -1,10 +1,13 @@ import { PropTypes } from 'react-view'; -export const simulateFunction = (prop = { custom: {} }) => { +export const simulateFunction = ( + prop = { custom: {} }, + defaultValue = false +) => { const newProp = { ...prop, type: PropTypes.Custom, - value: undefined, + value: defaultValue, custom: { ...prop.custom, use: 'switch', diff --git a/src-docs/src/views/steps/playground.js b/src-docs/src/views/steps/playground.js index 5af6be37db0..f7e2fb9cc90 100644 --- a/src-docs/src/views/steps/playground.js +++ b/src-docs/src/views/steps/playground.js @@ -1,8 +1,10 @@ import { PropTypes } from 'react-view'; -import { EuiStep } from '../../../../src/components/'; +import { EuiStep, EuiStepHorizontal } from '../../../../src/components/steps'; import { propUtilityForPlayground, createOptionalEnum, + simulateFunction, + dummyFunction, } from '../../services/playground'; export const stepConfig = () => { @@ -36,3 +38,34 @@ export const stepConfig = () => { }, }; }; + +export const stepHorizontalConfig = () => { + const docgenInfo = Array.isArray(EuiStepHorizontal.__docgenInfo) + ? EuiStepHorizontal.__docgenInfo[0] + : EuiStepHorizontal.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.title.value = 'Horizontal step'; + + propsToUse.status = createOptionalEnum(propsToUse.status); + + propsToUse.onClick = simulateFunction(propsToUse.onClick, true); + + return { + config: { + componentName: 'EuiStepHorizontal', + props: propsToUse, + scope: { + EuiStepHorizontal, + }, + imports: { + '@elastic/eui': { + named: ['EuiStepHorizontal'], + }, + }, + customProps: { + onClick: dummyFunction, + }, + }, + }; +}; diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js index 0a297910c55..acc6db46243 100644 --- a/src-docs/src/views/steps/steps.js +++ b/src-docs/src/views/steps/steps.js @@ -9,24 +9,39 @@ import { const firstSetOfSteps = [ { - title: - 'Step 1 with a long title to check what happens during wrapping which should have been fixed.', - children:

Do this first

, + title: 'Step 1', + children: ( + +

Do this first

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

Then this

, + children: ( + +

Then this

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

Do this first

, + children: ( + +

Do this first

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

Then this

, + children: ( + +

Then this

+ + ), }, ]; @@ -34,14 +49,14 @@ export default () => (
+ -

Set firstStepNumber to continue step numbering after any type of break in the content

- + -

Run this code snippet to install things.

+ <> + +

Run this code snippet to install things.

+ + npm install - + ), }, { @@ -50,7 +54,7 @@ const steps = [ Now that you've completed step 2, go find the{' '} thing.

-

+

Go to Overview >> Endpoints note{' '} Elasticsearch as <thing>.

diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js index 4c37ba1fb60..8cc92830e7e 100644 --- a/src-docs/src/views/steps/steps_example.js +++ b/src-docs/src/views/steps/steps_example.js @@ -14,7 +14,7 @@ import { import { EuiStepHorizontal } from '../../../../src/components/steps/step_horizontal'; -import { stepConfig } from './playground'; +import { stepConfig, stepHorizontalConfig } from './playground'; import Steps from './steps'; const stepsSource = require('!!raw-loader!./steps'); @@ -24,7 +24,7 @@ const stepsSnippet = [ steps={[ { title: 'Step 1', - children:

Do this first

, + children:

Do this first

, }, ]} />`, @@ -33,7 +33,7 @@ const stepsSnippet = [ steps={[ { title: 'Step 3', - children:

Do this third first

, + children:

Do this third first

, }, ]} />`, @@ -42,6 +42,51 @@ const stepsSnippet = [ import StepsComplex from './steps_complex'; const stepsComplexSource = require('!!raw-loader!./steps_complex'); const stepsComplexHtml = renderToHtml(StepsComplex); +const stepsComplexSnippet = [ + ` + +

Run this code snippet to install things.

+ + + npm install + + ), + }, + ]} +/>`, + ` +

+ In order to complete this step, do the following things in order. +

+ +
    +
  1. Do thing 1
    2. +
  2. Do thing 2
    3. +
  3. Do thing 3
    4. +
+ +

Here are some bullet point reminders.

+
    +
  • Reminder 1
    • +
  • Reminder 2
    • +
  • Reminder 3
    • +
+ + ), + }, + ]} +/>`, +]; import HeadingElementSteps from './heading_element_steps'; const headingElementStepsSource = require('!!raw-loader!./heading_element_steps'); @@ -75,9 +120,7 @@ const statusSnippet = ` +const stepsTitleSizesSnippet = ` `; export const StepsExample = { @@ -97,7 +140,11 @@ export const StepsExample = { text: (

EuiSteps presents procedural content in a numbered - outline format. + outline format. It is best used when presenting instructional content + that must be conducted in a particular order. It requires a{' '} + title and children to be present + and will automatically increment the step number based on the initial{' '} + firstStepNumber.

), props: { EuiSteps, EuiStep }, @@ -125,6 +172,7 @@ export const StepsExample = { ), demo: , props: { EuiSubSteps }, + snippet: stepsComplexSnippet, }, { title: 'Heading elements', @@ -174,7 +222,8 @@ export const StepsExample = { Steps can optionally include status prop that will alter the look of the number prefix. The options are{' '} incomplete, complete,{' '} - warning, and danger. This is + warning, danger,{' '} + disabled and loading. This is used mostly as a final step when you need to make some sort of final check.

@@ -240,5 +289,5 @@ export const StepsExample = { props: { EuiStepsHorizontal, EuiStepHorizontal }, }, ], - playground: stepConfig, + playground: [stepConfig, stepHorizontalConfig], }; diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap index 925c3dc5fdd..e27766765f9 100644 --- a/src/components/steps/__snapshots__/step.test.tsx.snap +++ b/src/components/steps/__snapshots__/step.test.tsx.snap @@ -19,6 +19,7 @@ exports[`EuiStep is rendered 1`] = ` @@ -56,6 +57,7 @@ exports[`EuiStep props headingElement 1`] = ` @@ -142,7 +144,7 @@ exports[`EuiStep props status danger is rendered 1`] = ` exports[`EuiStep props status disabled is rendered 1`] = `
@@ -192,6 +195,47 @@ exports[`EuiStep props status incomplete is rendered 1`] = ` > Step 1 is incomplete + + +

+ First step +

+
+
+

+ Do this +

+
+
+`; + +exports[`EuiStep props status loading is rendered 1`] = ` +
+
+ + + Step 1 is loading + +

@@ -295,6 +340,7 @@ exports[`EuiStep props titleSize 1`] = ` diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap index 8b5a687edcc..31961ee55a0 100644 --- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap +++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap @@ -17,6 +17,7 @@ exports[`EuiStepHorizontal is rendered 1`] = ` @@ -62,6 +63,7 @@ exports[`EuiStepHorizontal props isSelected 1`] = ` @@ -127,6 +129,7 @@ exports[`EuiStepHorizontal props status disabled is rendered 1`] = ` @@ -152,6 +155,7 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = ` @@ -162,6 +166,29 @@ exports[`EuiStepHorizontal props status incomplete is rendered 1`] = ` `; +exports[`EuiStepHorizontal props status loading is rendered 1`] = ` + +`; + exports[`EuiStepHorizontal props status warning is rendered 1`] = `