[EuiStepsHorizontal] Create `size` prop to generate smaller step circles for horizontal steps by breehall · Pull Request #6928 · elastic/eui

breehall · 2023-07-10T21:06:22Z

Summary

Creates the new size prop for EuiStepsHorizontal. This prop accepts s and m (small and medium) as values and defaults to m. s will produce a smaller circle around each step.

QA

Visit the Horizontal Steps page in staging and use the button group to change the step size from medium (default) to small.
- There should be no changes to the text size, just the circle surrounding the step number / status

General checklist

…le for horizontal steps

kibanamachine · 2023-07-10T21:28:30Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6928/

kibanamachine · 2023-07-10T22:03:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6928/

breehall · 2023-07-11T13:18:36Z

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

 >
  <span
-    class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-s-current-euiStepHorizontal__number"
+    class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-current-euiStepHorizontal__number"


This change from s to m happens through out the EuiStepHorizontal tests and it's expected.

EuiStepHorizontal uses the EuiStepNumber component and before this PR, the titleSize prop was not being passed. That means the default size of s was being used and now that it's been updated to match the new size prop, m is being passed to EuiStepNumber.

kibanamachine · 2023-07-11T15:52:37Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6928/

ryankeairns

Design looks good, tested in a few browsers and viewport sizes.
Thanks Bree!

1Copenut

👍 LGTM!

src/components/steps/step_horizontal.styles.ts

upcoming_changelogs/6928.md

cee-chen · 2023-07-11T18:36:25Z

Really nice work on this Bree, it feels super elegant! I have a few minor code cleanup suggestions, but otherwise everything from the docs to the tests feel great!

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

cee-chen

Changes look great!

kibanamachine · 2023-07-11T19:35:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6928/

## Summary `eui@84.0.0` ⏩ `eui@85.0.1` ## [`85.0.1`](https://github.com/elastic/eui/tree/v85.0.1) **Bug fixes** - Fixed `EuiFilterGroup`'s responsive styles ([#6983](elastic/eui#6983)) ## [`85.0.0`](https://github.com/elastic/eui/tree/v85.0.0) - Updated `EuiThemeProvider` to set an Emotion theme context that returns the values of `useEuiTheme()` ([#6913](elastic/eui#6913)) - Added `size` prop to `EuiStepsHorizontal`, defaulting to the previous size of `m` ([#6928](elastic/eui#6928)) - Added new `s` sizing to `EuiStepsHorizontal` ([#6928](elastic/eui#6928)) - Added `at` and `key` icon glyphs. ([#6934](elastic/eui#6934)) - Added a new `cloneElementWithCss` Emotion utility ([#6939](elastic/eui#6939)) - Updated `EuiPopover` to allow consumer control of all `focusTrapProps` ([#6955](elastic/eui#6955)) **Bug fixes** - Fixed `EuiDataGrid` height calculation bug when browser zoom levels are not 100% ([#6895](elastic/eui#6895)) - Fixed `EuiTab` not correctly passing selection color state to `prepend` and `append` children ([#6938](elastic/eui#6938)) - Fixed `EuiInputPopover` to allow consumer control of its focus trap via `focusTrapProps` ([#6955](elastic/eui#6955)) **Breaking changes** - `EuiProvider` will no longer render multiple or duplicate nested instances of itself. If a nested `EuiProvider` is detected, that instance will return early without further processing, and will warn if configured to do so via `setEuiDevProviderWarning`. For nested theming, use `EuiThemeProvider` instead. ([#6949](elastic/eui#6949)) - Removed `onTrapDeactivation` prop from `EuiPopover`. Use `focusTrapProps.onDeactivation` instead ([#6955](elastic/eui#6955)) **CSS-in-JS conversions** - Converted `EuiFilterGroup` and `EuiFilterButton` to Emotion; Removed styles attached to `.euiFilterGroup__popoverPanel` ([#6957](elastic/eui#6957)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

## Summary `eui@84.0.0` ⏩ `eui@85.0.1` ## [`85.0.1`](https://github.com/elastic/eui/tree/v85.0.1) **Bug fixes** - Fixed `EuiFilterGroup`'s responsive styles ([elastic#6983](elastic/eui#6983)) ## [`85.0.0`](https://github.com/elastic/eui/tree/v85.0.0) - Updated `EuiThemeProvider` to set an Emotion theme context that returns the values of `useEuiTheme()` ([elastic#6913](elastic/eui#6913)) - Added `size` prop to `EuiStepsHorizontal`, defaulting to the previous size of `m` ([elastic#6928](elastic/eui#6928)) - Added new `s` sizing to `EuiStepsHorizontal` ([elastic#6928](elastic/eui#6928)) - Added `at` and `key` icon glyphs. ([elastic#6934](elastic/eui#6934)) - Added a new `cloneElementWithCss` Emotion utility ([elastic#6939](elastic/eui#6939)) - Updated `EuiPopover` to allow consumer control of all `focusTrapProps` ([elastic#6955](elastic/eui#6955)) **Bug fixes** - Fixed `EuiDataGrid` height calculation bug when browser zoom levels are not 100% ([elastic#6895](elastic/eui#6895)) - Fixed `EuiTab` not correctly passing selection color state to `prepend` and `append` children ([elastic#6938](elastic/eui#6938)) - Fixed `EuiInputPopover` to allow consumer control of its focus trap via `focusTrapProps` ([elastic#6955](elastic/eui#6955)) **Breaking changes** - `EuiProvider` will no longer render multiple or duplicate nested instances of itself. If a nested `EuiProvider` is detected, that instance will return early without further processing, and will warn if configured to do so via `setEuiDevProviderWarning`. For nested theming, use `EuiThemeProvider` instead. ([elastic#6949](elastic/eui#6949)) - Removed `onTrapDeactivation` prop from `EuiPopover`. Use `focusTrapProps.onDeactivation` instead ([elastic#6955](elastic/eui#6955)) **CSS-in-JS conversions** - Converted `EuiFilterGroup` and `EuiFilterButton` to Emotion; Removed styles attached to `.euiFilterGroup__popoverPanel` ([elastic#6957](elastic/eui#6957)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

breehall added 2 commits July 10, 2023 17:01

[EuiStepsHorizontal] Add size prop that generates a smaller step circ…

487d170

…le for horizontal steps

[EuiStepsHorizontal] Add documentation for new size prop

41d5dc1

[EuiStepsHorizontal] Update snapshot test and add new test for size prop

0d83217

breehall commented Jul 11, 2023

View reviewed changes

breehall added 2 commits July 11, 2023 11:24

Changelog

7578774

Whoops! Wrong changelog number

6346230

breehall marked this pull request as ready for review July 11, 2023 15:31

breehall requested review from a team and ryankeairns July 11, 2023 15:32

ryankeairns approved these changes Jul 11, 2023

View reviewed changes

1Copenut approved these changes Jul 11, 2023

View reviewed changes

cee-chen reviewed Jul 11, 2023

View reviewed changes

src/components/steps/step_horizontal.styles.ts Outdated Show resolved Hide resolved

cee-chen reviewed Jul 11, 2023

View reviewed changes

src/components/steps/step_horizontal.styles.ts Outdated Show resolved Hide resolved

cee-chen reviewed Jul 11, 2023

View reviewed changes

src/components/steps/step_horizontal.styles.ts Outdated Show resolved Hide resolved

cee-chen reviewed Jul 11, 2023

View reviewed changes

upcoming_changelogs/6928.md Outdated Show resolved Hide resolved

breehall and others added 3 commits July 11, 2023 14:56

Update src/components/steps/step_horizontal.styles.ts

785011e

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

[PR Feedback] Make the internal step size and inset generation flexible.

e29cebd

Update upcoming_changelogs/6928.md

4e04c59

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

cee-chen approved these changes Jul 11, 2023

View reviewed changes

breehall merged commit 264892f into elastic:main Jul 11, 2023

tkajtoch mentioned this pull request Jul 19, 2023

Upgrade @elastic/eui to 85.0.1 elastic/kibana#162209

Merged

breehall deleted the feature/horizontal-step-small branch October 6, 2023 16:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiStepsHorizontal] Create `size` prop to generate smaller step circles for horizontal steps#6928

[EuiStepsHorizontal] Create `size` prop to generate smaller step circles for horizontal steps#6928
breehall merged 8 commits intoelastic:mainfrom
breehall:feature/horizontal-step-small

breehall commented Jul 10, 2023 •

edited

Loading

Uh oh!

kibanamachine commented Jul 10, 2023

Uh oh!

kibanamachine commented Jul 10, 2023

Uh oh!

breehall Jul 11, 2023

Uh oh!

kibanamachine commented Jul 11, 2023

Uh oh!

ryankeairns left a comment

Uh oh!

1Copenut left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Jul 11, 2023

Uh oh!

cee-chen left a comment

Uh oh!

kibanamachine commented Jul 11, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

breehall commented Jul 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

kibanamachine commented Jul 10, 2023

Uh oh!

kibanamachine commented Jul 10, 2023

Uh oh!

breehall Jul 11, 2023

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jul 11, 2023

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

1Copenut left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Jul 11, 2023

Uh oh!

cee-chen left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jul 11, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

breehall commented Jul 10, 2023 •

edited

Loading