[EuiSteps] Add support for unordered steps #7813

mgadewoll · 2024-06-05T14:34:14Z

Summary

This PR updates EuiSteps and EuiStepsHorizontal to add support for a visually unordered variant where no numbers are shown in the step indicator.

QA

open the storybooks for EuiSteps and EuiStepsHorizontal and confirm that the size variant xxs looks and works as expected based on the aligned feature specs and design.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- ~~Updated the Figma library counterpart~~

packages/eui/src/components/steps/steps_horizontal.tsx

packages/eui/src/components/steps/step_number.tsx

packages/eui/src/components/steps/step.styles.ts

...eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png

packages/eui/changelogs/upcoming/7813.md

packages/eui/src/components/steps/steps_horizontal.stories.tsx

packages/eui/src/components/steps/step.tsx

packages/eui/changelogs/upcoming/7813.md

packages/eui/src-docs/src/views/steps/steps_unordered.tsx

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

packages/eui/src/components/steps/step_horizontal.tsx

packages/eui/src/components/steps/step_number.tsx

packages/eui/src/components/steps/steps.tsx

packages/eui/src/components/steps/step.styles.ts

- updates size styling, controls what content is shown for EuiStepNumber based on size and status

- update snapshots

packages/eui/src/components/steps/steps.tsx

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

cee-chen

A suggestion to tweak line-height vs wrangling margin offsets. This is Fine Enough IMO, and more practical for 99% of use cases (in general we'd probably prefer consumers not write long enough title steps to wrap, and a smaller line-height for an xxs size is a result of that)

packages/eui/src/components/steps/step.styles.ts

- adjustes background-position of the connection line to remove the manual offset but ensure correct connection position

packages/eui/src/components/steps/step.styles.ts

cee-chen

🤩 Both the UI and code looks fantastic!! Thanks for bearing with me with the back and forth on this!!

kibanamachine · 2024-06-12T08:26:06Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7813/
Storybook: https://eui.elastic.co/pr_7813/storybook

elasticmachine · 2024-06-12T08:27:36Z

💚 Build Succeeded

Buildkite Build
Commit: b55740d

History

💚 Build #2140 succeeded 1a0e945
💚 Build #2132 succeeded 7c18aac
💚 Build #2125 succeeded 50372d9
💚 Build #2115 succeeded 062a7cf
💚 Build #2114 succeeded 93cab42
💚 Build #2106 succeeded 06a903f

`v94.6.0` ⏩ `v95.0.0-backport.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.0.0-backport.0`](https://github.com/elastic/eui/releases/v95.0.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([#7813](elastic/eui#7813)) ## [`v95.0.0`](https://github.com/elastic/eui/releases/v95.0.0) - Added `move` glyph to `EuiIcon` ([#7789](elastic/eui#7789)) - Updated `EuiBasicTable` and `EuiInMemoryTable`s with `selection` - the header row checkbox will now render an indeterminate state if some (but not all) rows are selected ([#7817](elastic/eui#7817)) **Bug fixes** - Fixed an `EuiDataGrid` visual bug when using `lineCount` row heights where the clamped text was still visible for some font sizes ([#7793](elastic/eui#7793)) - Fixed `EuiSearchBar`'s filter configs to always respect `autoClose: false` ([#7806](elastic/eui#7806)) **Breaking changes** - Removed deprecated `EUI_CHARTS_THEME_DARK`, `EUI_CHARTS_THEME_LIGHT` and `EUI_SPARKLINE_THEME_PARTIAL` exports ([#7682](elastic/eui#7682)) - Removed deprecated `euiPalettePositive` and `euiPaletteNegative`. Use `euiPaletteGreen` and `euiPaletteRed` instead ([#7808](elastic/eui#7808)) - Removed `type="inList"` from `EuiCheckbox`. Simply omit passing a `label` prop to render this style of checkbox ([#7814](elastic/eui#7814)) - Removed the unused `compressed` prop from `EuiCheckbox` and `EuiRadio`. This prop was not doing anything on individual components. ([#7818](elastic/eui#7818)) **CSS-in-JS conversions** - Converted `EuiCheckboxGroup` to Emotion ([#7818](elastic/eui#7818)) - Converted `EuiRadioGroup` to Emotion ([#7818](elastic/eui#7818)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

`v94.6.0` ⏩ `v95.0.0-backport.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.0.0-backport.0`](https://github.com/elastic/eui/releases/v95.0.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([elastic#7813](elastic/eui#7813)) ## [`v95.0.0`](https://github.com/elastic/eui/releases/v95.0.0) - Added `move` glyph to `EuiIcon` ([elastic#7789](elastic/eui#7789)) - Updated `EuiBasicTable` and `EuiInMemoryTable`s with `selection` - the header row checkbox will now render an indeterminate state if some (but not all) rows are selected ([elastic#7817](elastic/eui#7817)) **Bug fixes** - Fixed an `EuiDataGrid` visual bug when using `lineCount` row heights where the clamped text was still visible for some font sizes ([elastic#7793](elastic/eui#7793)) - Fixed `EuiSearchBar`'s filter configs to always respect `autoClose: false` ([elastic#7806](elastic/eui#7806)) **Breaking changes** - Removed deprecated `EUI_CHARTS_THEME_DARK`, `EUI_CHARTS_THEME_LIGHT` and `EUI_SPARKLINE_THEME_PARTIAL` exports ([elastic#7682](elastic/eui#7682)) - Removed deprecated `euiPalettePositive` and `euiPaletteNegative`. Use `euiPaletteGreen` and `euiPaletteRed` instead ([elastic#7808](elastic/eui#7808)) - Removed `type="inList"` from `EuiCheckbox`. Simply omit passing a `label` prop to render this style of checkbox ([elastic#7814](elastic/eui#7814)) - Removed the unused `compressed` prop from `EuiCheckbox` and `EuiRadio`. This prop was not doing anything on individual components. ([elastic#7818](elastic/eui#7818)) **CSS-in-JS conversions** - Converted `EuiCheckboxGroup` to Emotion ([elastic#7818](elastic/eui#7818)) - Converted `EuiRadioGroup` to Emotion ([elastic#7818](elastic/eui#7818)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

`v95.0.0-backport.0` ⏩ `v95.1.0-backport.0` This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct `className` usage of these form controls **should be manually QA'd** to ensure they still look the same before visually, with no regressions. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.1.0`](https://github.com/elastic/eui/releases/v95.1.0) - Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s ([#7799](elastic/eui#7799)) **Bug fixes** - Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s ([#7770](elastic/eui#7770)) **CSS-in-JS conversions** - Converted `EuiFieldText` to Emotion ([#7770](elastic/eui#7770)) - Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode ([#7776](elastic/eui#7776)) - Converted `EuiFieldNumber` to Emotion ([#7802](elastic/eui#7802)) - Converted `EuiFieldSearch` to Emotion ([#7802](elastic/eui#7802)) - Converted `EuiFieldPassword` to Emotion ([#7802](elastic/eui#7802)) - Converted `EuiTextArea` to Emotion ([#7812](elastic/eui#7812)) - Converted `EuiSelect` to Emotion ([#7812](elastic/eui#7812)) - Converted `EuiSuperSelect` to Emotion ([#7812](elastic/eui#7812)) ## [`v95.1.0-backport.0`](https://github.com/elastic/eui/releases/v95.1.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([#7813](elastic/eui#7813))

`v95.0.0-backport.0` ⏩ `v95.1.0-backport.0` This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct `className` usage of these form controls **should be manually QA'd** to ensure they still look the same before visually, with no regressions. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.1.0`](https://github.com/elastic/eui/releases/v95.1.0) - Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s ([elastic#7799](elastic/eui#7799)) **Bug fixes** - Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s ([elastic#7770](elastic/eui#7770)) **CSS-in-JS conversions** - Converted `EuiFieldText` to Emotion ([elastic#7770](elastic/eui#7770)) - Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode ([elastic#7776](elastic/eui#7776)) - Converted `EuiFieldNumber` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiFieldSearch` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiFieldPassword` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiTextArea` to Emotion ([elastic#7812](elastic/eui#7812)) - Converted `EuiSelect` to Emotion ([elastic#7812](elastic/eui#7812)) - Converted `EuiSuperSelect` to Emotion ([elastic#7812](elastic/eui#7812)) ## [`v95.1.0-backport.0`](https://github.com/elastic/eui/releases/v95.1.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([elastic#7813](elastic/eui#7813))

`v95.1.0`⏩`v95.2.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.2.0`](https://github.com/elastic/eui/releases/v95.2.0) - Updated `EuiContextMenuItemIcon`'s type definition to explicitly define support for `EuiIcon`'s `IconType` ([#7804](elastic/eui#7804)) - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([#7813](elastic/eui#7813)) - Updated `setEuiDevProviderWarning` to additionally accept a custom callback function, which warning messages will be passed to ([#7820](elastic/eui#7820)) - Updated `EuiIcon` to feature updated `logoElasticStack` logo for referencing Elastic Stack platform ([#7838](elastic/eui#7838)) - Updated `EuiIcon` to feature updated `casesApp` design. ([#7840](elastic/eui#7840)) - Updated `EuiComboBox` to no longer autocomplete searched text when used within forms ([#7842](elastic/eui#7842)) **CSS-in-JS conversions** - Converted `EuiFilePicker` to Emotion; Removed `$euiFilePickerTallHeight` ([#7833](elastic/eui#7833)) --------- Co-authored-by: Jon <jon@elastic.co>

mgadewoll force-pushed the steps/7785-unordered-variant branch from 7321c58 to 06a903f Compare June 5, 2024 14:47

mgadewoll commented Jun 5, 2024

View reviewed changes

packages/eui/src/components/steps/steps_horizontal.tsx Outdated Show resolved Hide resolved

mgadewoll commented Jun 5, 2024

View reviewed changes

packages/eui/src/components/steps/step_number.tsx Outdated Show resolved Hide resolved

mgadewoll commented Jun 5, 2024

View reviewed changes

packages/eui/src/components/steps/step.styles.ts Outdated Show resolved Hide resolved

mgadewoll marked this pull request as ready for review June 5, 2024 15:14

mgadewoll requested a review from a team as a code owner June 5, 2024 15:14

cee-chen reviewed Jun 5, 2024

View reviewed changes

...eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png Outdated Show resolved Hide resolved

cee-chen reviewed Jun 5, 2024

View reviewed changes

packages/eui/changelogs/upcoming/7813.md Outdated Show resolved Hide resolved