Skip to content

[EuiSteps] Add support for unordered steps#7813

Merged
mgadewoll merged 36 commits intoelastic:mainfrom
mgadewoll:steps/7785-unordered-variant
Jun 12, 2024
Merged

[EuiSteps] Add support for unordered steps#7813
mgadewoll merged 36 commits intoelastic:mainfrom
mgadewoll:steps/7785-unordered-variant

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Jun 5, 2024 •
edited
Loading

Summary

closes #7785

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

Screenshot 2024-06-05 at 16 07 01

Screenshot 2024-06-05 at 16 07 14

QA

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
  • Code quality checklist
  • 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

@mgadewoll mgadewoll force-pushed the steps/7785-unordered-variant branch from 7321c58 to 06a903f Compare June 5, 2024 14:47
mgadewoll
mgadewoll commented Jun 5, 2024
View reviewed changes
mgadewoll
mgadewoll commented Jun 5, 2024
View reviewed changes
mgadewoll
mgadewoll commented Jun 5, 2024
View reviewed changes
@mgadewoll mgadewoll marked this pull request as ready for review June 5, 2024 15:14
@mgadewoll mgadewoll requested a review from a team as a code owner June 5, 2024 15:14
cee-chen
cee-chen reviewed Jun 5, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 6, 2024
View reviewed changes
@mgadewoll mgadewoll requested a review from cee-chen June 10, 2024 08:49
cee-chen
cee-chen reviewed Jun 10, 2024
View reviewed changes
cee-chen
cee-chen reviewed Jun 10, 2024
View reviewed changes
cee-chen
cee-chen suggested changes Jun 10, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

mgadewoll added 4 commits June 11, 2024 10:58
@mgadewoll
refactor: remove manual offset in favor of alignment via line-height
24fb024 
- adjustes background-position of the connection line to remove the manual offset but ensure correct connection position
@mgadewoll
chore: update titleSize type jsdoc
5afbb98
@mgadewoll
test(VRT): update reference images
cf4f312
@mgadewoll
test: update snapshots
1a0e945
cee-chen
cee-chen reviewed Jun 11, 2024
View reviewed changes
cee-chen
cee-chen approved these changes Jun 11, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@mgadewoll mgadewoll enabled auto-merge (squash) June 12, 2024 08:06
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jun 12, 2024

Preview staging links for this PR:

@mgadewoll mgadewoll merged commit f8dd347 into elastic:main Jun 12, 2024
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jun 12, 2024

💚 Build Succeeded

History

cee-chen pushed a commit that referenced this pull request Jun 17, 2024
@mgadewoll @cee-chen
[EuiSteps] Add support for unordered steps (#7813)
9233254
@cee-chen cee-chen mentioned this pull request Jun 17, 2024
Merged
cee-chen pushed a commit that referenced this pull request Jun 17, 2024
@mgadewoll @cee-chen
[EuiSteps] Add support for unordered steps (#7813)
9a741bd
@cee-chen cee-chen mentioned this pull request Jun 17, 2024
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request Jun 18, 2024
@tkajtoch @cee-chen @kibanamachine
Upgrade EUI to v95.0.0 (#185943)
946a255 
`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>
bhapas pushed a commit to bhapas/kibana that referenced this pull request Jun 18, 2024
@tkajtoch @cee-chen
@kibanamachine @bhapas
Upgrade EUI to v95.0.0 (elastic#185943)
49030bf 
`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>
Ikuni17 pushed a commit to elastic/kibana that referenced this pull request Jun 21, 2024
@cee-chen
Upgrade EUI to v95.1.0 (#186324)
04d6c1d 
`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))
bhapas pushed a commit to bhapas/kibana that referenced this pull request Jun 24, 2024
@cee-chen @bhapas
Upgrade EUI to v95.1.0 (elastic#186324)
71a8617 
`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))
@cee-chen cee-chen mentioned this pull request Jun 24, 2024
Merged
jbudz added a commit to elastic/kibana that referenced this pull request Jun 28, 2024
@cee-chen @jbudz
Upgrade EUI to v95.2.0 (#186841)
2bcc2fd 
`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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

EuiSteps unordered variant

4 participants

@mgadewoll @kibanamachine @elasticmachine @cee-chen